Fix spell checking for code blocks and inline code (#1244)

Author: MrMugame

web/cm_plugins/line_wrapper.ts

@@ -7,7 +7,6 @@ interface WrapElement {
   selector: string;
   class: string;
   nesting?: boolean;
-  disableSpellCheck?: boolean;
 }
 
 export function lineWrapper(wrapElements: WrapElement[]) {
@@ -18,10 +17,6 @@ export function lineWrapper(wrapElements: WrapElement[]) {
     syntaxTree(state).iterate({
       enter: ({ type, from, to }) => {
         for (const wrapElement of wrapElements) {
-          const spellCheckAttributes = wrapElement.disableSpellCheck
-            ? { attributes: { spellcheck: "false" } }
-            : {};
-
           if (type.name == wrapElement.selector) {
             if (wrapElement.nesting) {
               elementStack.push(type.name);
@@ -36,7 +31,6 @@ export function lineWrapper(wrapElements: WrapElement[]) {
               widgets.push(
                 Decoration.line({
                   class: cls,
-                  ...spellCheckAttributes,
                 }).range(doc.lineAt(idx).from),
               );
               idx += line.length + 1;

web/cm_plugins/spell_checking.ts

@@ -0,0 +1,25 @@
+import type { EditorState, Range } from "@codemirror/state";
+import { Decoration } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { decoratorStateField } from "./util.ts";
+
+export function disableSpellcheck(selectors: string[]) {
+  return decoratorStateField((state: EditorState) => {
+    const widgets: Range<Decoration>[] = [];
+    syntaxTree(state).iterate({
+      enter: ({ type, from, to }) => {
+        for (const selector of selectors) {
+          if (type.name === selector) {
+            widgets.push(
+              Decoration.mark({
+                attributes: { spellcheck: "false" },
+              }).range(from, to),
+            );
+          }
+        }
+      },
+    });
+
+    return Decoration.set(widgets, true);
+  });
+}

web/editor_state.ts

@@ -53,6 +53,7 @@ import { extendedMarkdownLanguage } from "$common/markdown_parser/parser.ts";
 import { parseCommand } from "$common/command.ts";
 import { safeRun } from "$lib/async.ts";
 import { codeCopyPlugin } from "./cm_plugins/code_copy.ts";
+import { disableSpellcheck } from "./cm_plugins/spell_checking.ts";
 
 export function createEditorState(
   client: Client,
@@ -159,21 +160,17 @@ export function createEditorState(
         { selector: "Blockquote", class: "sb-line-blockquote" },
         { selector: "Task", class: "sb-line-task" },
         { selector: "CodeBlock", class: "sb-line-code" },
-        {
-          selector: "FencedCode",
-          class: "sb-line-fenced-code",
-          disableSpellCheck: true,
-        },
+        { selector: "FencedCode", class: "sb-line-fenced-code" },
         { selector: "Comment", class: "sb-line-comment" },
         { selector: "BulletList", class: "sb-line-ul" },
         { selector: "OrderedList", class: "sb-line-ol" },
         { selector: "TableHeader", class: "sb-line-tbl-header" },
         {
           selector: "FrontMatter",
           class: "sb-frontmatter",
-          disableSpellCheck: true,
         },
       ]),
+      disableSpellcheck(["InlineCode", "CodeText", "FrontMatter"]),
       keyBindings,
       EditorView.domEventHandlers({
         // This may result in duplicated touch events on mobile devices