Merge pull request #4669 from easyops-cn/steve/v3-playground-spell-check

fix(playground): support spell check

Author: weareoutman

packages/brick-playground/package.json

@@ -25,6 +25,8 @@
   "dependencies": {
     "@next-core/doc-helpers": "^0.2.18",
     "@next-core/serve-helpers": "^1.2.5",
+    "@next-shared/spell-check": "^0.1.1",
+    "comlink": "^4.4.2",
     "compression": "^1.8.0",
     "express": "^4.21.2",
     "glob": "^8.1.0"

packages/brick-playground/src/index.ts

@@ -12,13 +12,29 @@ import { register as registerJavaScript } from "@next-core/monaco-contributions/
 import { register as registerTypeScript } from "@next-core/monaco-contributions/typescript";
 import { register as registerYaml } from "@next-core/monaco-contributions/yaml";
 import { register as registerHtml } from "@next-core/monaco-contributions/html";
+import { getRemoteSpellCheckWorker } from "./spellCheckRemoteWorker.js";
 
 registerJavaScript(monaco);
 registerTypeScript(monaco);
 registerYaml(monaco);
 registerHtml(monaco);
 
 const GZIP_HASH_PREFIX = "#gzip,";
+const SPELL_CHECK = "spell_check";
+const KNOWN_WORDS = [
+  "microapp",
+  "minmax",
+  "ctrl",
+  "dagre",
+  "rankdir",
+  "ranksep",
+  "nodesep",
+  "topo",
+  "plaintext",
+  "debuggable",
+  "async",
+  "searchable",
+];
 
 interface Example extends Sources {
   key: string;
@@ -145,19 +161,6 @@ async function main() {
     }
   }
 
-  function debounce(func: Function, timeout = 300) {
-    let timer = -1;
-    return (...args: unknown[]) => {
-      if (timer !== -1) {
-        clearTimeout(timer);
-      }
-      timer = setTimeout(() => {
-        timer = -1;
-        func(...args);
-      }, timeout) as unknown as number;
-    };
-  }
-
   if (mode !== "yaml") {
     updateMode();
     selectType.value = mode.toUpperCase();
@@ -242,12 +245,38 @@ async function main() {
       insertSpaces: true,
       automaticLayout: true,
     });
-    editor.onDidChangeModelContent((e) => {
+
+    const debouncedSpellCheck = debounce(async () => {
+      const worker = await getRemoteSpellCheckWorker();
+      const { markers: spellCheckMarkers } = await worker.spellCheck({
+        source: editor.getValue(),
+        knownWords: KNOWN_WORDS,
+      });
+      monaco.editor.setModelMarkers(
+        model,
+        SPELL_CHECK,
+        spellCheckMarkers.map(({ start, end, message, severity }) => {
+          const startPos = model.getPositionAt(start);
+          const endPos = model.getPositionAt(end);
+          return {
+            startLineNumber: startPos.lineNumber,
+            startColumn: startPos.column,
+            endLineNumber: endPos.lineNumber,
+            endColumn: endPos.column,
+            severity: monaco.MarkerSeverity[severity],
+            message,
+          };
+        })
+      );
+    });
+
+    model.onDidChangeContent((e) => {
       sources[type] = editor.getValue();
       if (saveToLocalStorage && !e.isFlush) {
         localStorage.setItem(storageKey, sources[type]);
       }
       debouncedRender();
+      debouncedSpellCheck();
     });
   }
 
@@ -461,6 +490,19 @@ function decorateAltCode(code: string, mode: string, altMode: string): string {
   }${code}`;
 }
 
+function debounce(func: Function, timeout = 300) {
+  let timer = -1;
+  return (...args: unknown[]) => {
+    if (timer !== -1) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = -1;
+      func(...args);
+    }, timeout) as unknown as number;
+  };
+}
+
 main().catch((error) => {
   // eslint-disable-next-line no-console
   console.error(error);

packages/brick-playground/src/spellCheck.worker.ts

@@ -0,0 +1,15 @@
+// istanbul ignore file
+import { expose } from "comlink";
+import {
+  spellCheck,
+  type SpellCheckRequest,
+  type SpellCheckResponse,
+} from "@next-shared/spell-check";
+
+class SpellCheckWorker {
+  spellCheck(req: SpellCheckRequest): SpellCheckResponse {
+    return spellCheck(req);
+  }
+}
+
+expose(SpellCheckWorker);

packages/brick-playground/src/spellCheckRemoteWorker.ts

@@ -0,0 +1,31 @@
+// istanbul ignore file
+import { wrap } from "comlink";
+import type {
+  SpellCheckRequest,
+  SpellCheckResponse,
+} from "@next-shared/spell-check";
+
+export interface RemoteSpellCheckWorker {
+  spellCheck(req: SpellCheckRequest): Promise<SpellCheckResponse>;
+}
+
+let remoteWorkerPromise: Promise<RemoteSpellCheckWorker> | undefined;
+
+let worker: Worker | undefined;
+
+export function getRemoteSpellCheckWorker() {
+  if (!remoteWorkerPromise) {
+    remoteWorkerPromise = (async () => {
+      const Remote = wrap<{ new (): RemoteSpellCheckWorker }>(getWorker());
+      return await new Remote();
+    })();
+  }
+  return remoteWorkerPromise;
+}
+
+function getWorker() {
+  if (!worker) {
+    worker = new Worker(new URL("./spellCheck.worker.ts", import.meta.url));
+  }
+  return worker;
+}

yarn.lock

@@ -2006,6 +2006,14 @@
   resolved "https://registry.npmjs.org/@next-shared/common-bricks/-/common-bricks-0.53.1.tgz#442db871109bb2d1bea51a43def37fb6564f3ca0"
   integrity sha512-zsxkavhza9CdojCsrzQIgSK430VQxDes/0LS8Z2PTjm15R7JDeHNxKjU7qEM0zSm79Yo9QcGxto5igkjYKeQVw==
 
+"@next-shared/spell-check@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/@next-shared/spell-check/-/spell-check-0.1.1.tgz#2dfe56aa6cd1c4479d96c4e49bdfbb6a52303fd5"
+  integrity sha512-mRoZoacobIT2hu67GvK6cYZQ5bhrVvjImhHLVtrT0Wje69ufRRW0lNme0FfMh7/1ObxIHMQ9OrPvV8+Tx3iMjQ==
+  dependencies:
+    change-case "^5.4.4"
+    typo-js "^1.2.5"
+
 "@nicolo-ribaudo/[email protected]":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz"
@@ -4448,6 +4456,11 @@ change-case@^4.1.2:
     snake-case "^3.0.4"
     tslib "^2.0.3"
 
+change-case@^5.4.4:
+  version "5.4.4"
+  resolved "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz#0d52b507d8fb8f204343432381d1a6d7bff97a02"
+  integrity sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz"
@@ -4718,6 +4731,11 @@ combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+comlink@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.npmjs.org/comlink/-/comlink-4.4.2.tgz#cbbcd82742fbebc06489c28a183eedc5c60a2bca"
+  integrity sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g==
+
 commander@^13.1.0:
   version "13.1.0"
   resolved "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz#776167db68c78f38dcce1f9b8d7b8b9a488abf46"
@@ -13300,6 +13318,11 @@ typescript@~5.5.0:
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
   integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
+typo-js@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/typo-js/-/typo-js-1.2.5.tgz#0aa65e0be9b69036463a3827de8185b4144e3086"
+  integrity sha512-F45vFWdGX8xahIk/sOp79z2NJs8ETMYsmMChm9D5Hlx3+9j7VnCyQyvij5MOCrNY3NNe8noSyokRjQRfq+Bc7A==
+
 uglify-js@^3.1.4:
   version "3.4.9"
   resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz"