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

+`; + (_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) {