diff --git a/packages/@textlint/website-generator/template/index.html b/packages/@textlint/website-generator/template/index.html
index 723818f..a5ee1ff 100644
--- a/packages/@textlint/website-generator/template/index.html
+++ b/packages/@textlint/website-generator/template/index.html
@@ -2,18 +2,213 @@
- {{title}}
+ textlint editor playground
+
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/@textlint/website-generator/template/index.js b/packages/@textlint/website-generator/template/index.js
index f19a9ec..8c089b8 100644
--- a/packages/@textlint/website-generator/template/index.js
+++ b/packages/@textlint/website-generator/template/index.js
@@ -1,12 +1,34 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
- return new (P || (P = Promise))(function (resolve, reject) {
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
- step((generator = generator.apply(thisArg, _arguments || [])).next());
- });
-};
+var __awaiter =
+ (this && this.__awaiter) ||
+ function (thisArg, _arguments, P, generator) {
+ function adopt(value) {
+ return value instanceof P
+ ? value
+ : new P(function (resolve) {
+ resolve(value);
+ });
+ }
+ return new (P || (P = Promise))(function (resolve, reject) {
+ function fulfilled(value) {
+ try {
+ step(generator.next(value));
+ } catch (e) {
+ reject(e);
+ }
+ }
+ function rejected(value) {
+ try {
+ step(generator["throw"](value));
+ } catch (e) {
+ reject(e);
+ }
+ }
+ function step(result) {
+ result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+ }
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
+ });
+ };
import { attachToTextArea } from "https://cdn.skypack.dev/textchecker-element";
const statusElement = document.querySelector("#js-status");
const updateStatus = (status) => {
@@ -16,20 +38,22 @@ const updateStatus = (status) => {
};
const worker = new Worker("textlint.js");
const waiterForInit = (worker) => {
- let initialized = false;
let _resolve = null;
const deferred = new Promise((resolve) => {
_resolve = resolve;
});
- worker.addEventListener("message", function (event) {
- const data = event.data;
- if (data.command === "init") {
- initialized = true;
- _resolve && _resolve(initialized);
+ worker.addEventListener(
+ "message",
+ function (event) {
+ const data = event.data;
+ if (data.command === "init") {
+ _resolve && _resolve(data.metadata);
+ }
+ },
+ {
+ once: true
}
- }, {
- once: true
- });
+ );
return {
ready() {
return deferred;
@@ -38,81 +62,129 @@ const waiterForInit = (worker) => {
};
const workerStatus = waiterForInit(worker);
const createTextlint = ({ ext }) => {
- const lintText = ({ text }) => __awaiter(void 0, void 0, void 0, function* () {
- updateStatus("linting...");
- return new Promise((resolve, _reject) => {
- worker.addEventListener("message", function (event) {
- const data = event.data;
- if (data.command === "lint:result") {
- resolve([data.result]);
- }
- updateStatus("linted");
- }, {
- once: true
- });
- return worker.postMessage({
- command: "lint",
- text,
- ext: ext
+ const lintText = ({ text }) =>
+ __awaiter(void 0, void 0, void 0, function* () {
+ updateStatus("linting...");
+ return new Promise((resolve, _reject) => {
+ worker.addEventListener(
+ "message",
+ function (event) {
+ const data = event.data;
+ if (data.command === "lint:result") {
+ resolve([data.result]);
+ }
+ updateStatus("linted");
+ },
+ {
+ once: true
+ }
+ );
+ return worker.postMessage({
+ command: "lint",
+ text,
+ ext: ext
+ });
});
});
- });
- const fixText = ({ text, message }) => __awaiter(void 0, void 0, void 0, function* () {
- updateStatus("fixing...");
- return new Promise((resolve, _reject) => {
- worker.addEventListener("message", function (event) {
- const data = event.data;
- if (data.command === "fix:result") {
- resolve(data.result);
- }
- updateStatus("fixed");
- }, {
- once: true
- });
- return worker.postMessage({
- command: "fix",
- text,
- ruleId: message === null || message === void 0 ? void 0 : message.ruleId,
- ext: ext
+ const fixText = ({ text, message }) =>
+ __awaiter(void 0, void 0, void 0, function* () {
+ updateStatus("fixing...");
+ return new Promise((resolve, _reject) => {
+ worker.addEventListener(
+ "message",
+ function (event) {
+ const data = event.data;
+ if (data.command === "fix:result") {
+ resolve(data.result);
+ }
+ updateStatus("fixed");
+ },
+ {
+ once: true
+ }
+ );
+ return worker.postMessage({
+ command: "fix",
+ text,
+ ruleId: message === null || message === void 0 ? void 0 : message.ruleId,
+ ext: ext
+ });
});
});
- });
return {
lintText,
fixText
};
};
-(() => __awaiter(void 0, void 0, void 0, function* () {
- const text = new URL(location.href).searchParams.get("text");
- const targetElement = document.querySelectorAll("textarea");
- const textlint = createTextlint({ ext: ".md" });
- yield workerStatus.ready();
- const lintEngine = {
- lintText: textlint.lintText,
- fixText: ({ text, message }) => __awaiter(void 0, void 0, void 0, function* () {
- if (!message.fix || !message.fix.range) {
- return { output: text };
+export function escapeHTML(str) {
+ return str
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+}
+(() =>
+ __awaiter(void 0, void 0, void 0, function* () {
+ var _a, _b;
+ const text = new URL(location.href).searchParams.get("text");
+ const targetElement = document.querySelectorAll("textarea");
+ const textlint = createTextlint({ ext: ".md" });
+ const metadata = yield workerStatus.ready();
+ const lintEngine = {
+ lintText: textlint.lintText,
+ fixText: ({ text, message }) =>
+ __awaiter(void 0, void 0, void 0, function* () {
+ if (!message.fix || !message.fix.range) {
+ return { output: text };
+ }
+ // replace fix.range[0, 1] with fix.text
+ return {
+ output:
+ text.slice(0, message.fix.range[0]) + message.fix.text + text.slice(message.fix.range[1])
+ };
+ }),
+ fixAll({ text }) {
+ return textlint.fixText({ text });
+ },
+ fixRule({ text, message }) {
+ return textlint.fixText({ text, message });
}
- // replace fix.range[0, 1] with fix.text
- return {
- output: text.slice(0, message.fix.range[0]) + message.fix.text + text.slice(message.fix.range[1])
- };
- }),
- fixAll({ text }) {
- return textlint.fixText({ text });
- },
- fixRule({ text, message }) {
- return textlint.fixText({ text, message });
- }
- };
- targetElement.forEach((element) => {
- if (text) {
- element.value = text;
- }
- attachToTextArea({
- textAreaElement: element,
- lintingDebounceMs: 200,
- lintEngine
+ };
+ targetElement.forEach((element) => {
+ if (text) {
+ element.value = text;
+ }
+ attachToTextArea({
+ textAreaElement: element,
+ lintingDebounceMs: 200,
+ lintEngine
+ });
});
- });
-}))();
+ // metadata
+ const metadataDiv = document.createElement("div");
+ metadataDiv.innerHTML = `
+Script metadata
+
+ ${Object.entries(metadata)
+ .map(([key, value]) => {
+ const toValue = (key, value) => {
+ if (key === "homepage") {
+ return `${escapeHTML(value)}`;
+ }
+ return typeof value === "object"
+ ? `
${escapeHTML(JSON.stringify(value, null, 4))}
`
+ : escapeHTML(value);
+ };
+ return `${escapeHTML(key)}${toValue(key, value)}`;
+ })
+ .join("\n")}
+`;
+ (_a = document.querySelector("#metadata")) === null || _a === void 0 ? void 0 : _a.append(metadataDiv);
+ // install - textlint-editor extension will hook it
+ (_b = document.querySelector("#install")) === null || _b === void 0
+ ? void 0
+ : _b.addEventListener("click", () => {
+ window.open("textlint.js", "_blank");
+ });
+ }))();
diff --git a/packages/textchecker-element/public/index.ts b/packages/textchecker-element/public/index.ts
index 261c897..f80ba74 100644
--- a/packages/textchecker-element/public/index.ts
+++ b/packages/textchecker-element/public/index.ts
@@ -16,7 +16,7 @@ const updateStatus = (status: string) => {
const worker = new Worker("textlint.js");
const waiterForInit = (worker: Worker) => {
let _resolve: null | ((init: TextlintScriptMetadata) => void) = null;
- const deferred = new Promise((resolve) => {
+ const deferred = new Promise((resolve) => {
_resolve = resolve;
});
worker.addEventListener(
@@ -149,7 +149,7 @@ export function escapeHTML(str: string) {
${Object.entries(metadata)
.map(([key, value]) => {
- const toValue = (key, value) => {
+ const toValue = (key: string, value: any) => {
if (key === "homepage") {
return `${escapeHTML(value)}`;
}
diff --git a/packages/textchecker-element/tools/website-generator.ts b/packages/textchecker-element/tools/website-generator.ts
index 0aa7994..44ab657 100644
--- a/packages/textchecker-element/tools/website-generator.ts
+++ b/packages/textchecker-element/tools/website-generator.ts
@@ -11,7 +11,7 @@ const createIndexJS = () => {
const createHTMLTemplate = () => {
const html = fs.readFileSync(path.join(__dirname, "../public/index.html"), "utf-8");
return html
- .replace("textlint editor playground", "{{title}}")
+ .replace(".*", "{{title}}")
.replace(``, ``)
.replace(
/