fix(editor): prevent IME selection flicker

Author: murongg

packages/editor/src/codemirror/live-markdown.test.ts

@@ -1,6 +1,6 @@
 import { forceParsing } from "@codemirror/language";
 import { EditorSelection, EditorState, type Extension } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
+import { drawSelection, EditorView } from "@codemirror/view";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { liveMarkdown } from "./index.ts";
 
@@ -378,6 +378,44 @@ describe("liveMarkdown", () => {
     });
   });
 
+  it("hides CodeMirror's drawn selection while an IME composition is active", () => {
+    const view = createView({
+      doc: "Compose",
+      selection: EditorSelection.range(0, 3),
+      extensions: [drawSelection(), liveMarkdown()],
+    });
+    const selectionLayer = view.dom.querySelector<HTMLElement>(
+      ".cm-selectionLayer",
+    );
+    if (!selectionLayer) throw new Error("Expected CodeMirror's selection layer");
+
+    const selectionBackground = document.createElement("div");
+    selectionBackground.className = "cm-selectionBackground";
+    selectionLayer.append(selectionBackground);
+
+    expect(getComputedStyle(selectionBackground).backgroundColor).not.toBe(
+      "rgba(0, 0, 0, 0)",
+    );
+
+    view.contentDOM.dispatchEvent(
+      new CompositionEvent("compositionstart", { bubbles: true }),
+    );
+
+    expect(view.dom.dataset.markraComposing).toBe("true");
+    expect(getComputedStyle(selectionBackground).backgroundColor).toBe(
+      "rgba(0, 0, 0, 0)",
+    );
+
+    view.contentDOM.dispatchEvent(
+      new CompositionEvent("compositionend", { bubbles: true }),
+    );
+
+    expect(view.dom.dataset.markraComposing).toBeUndefined();
+    expect(getComputedStyle(selectionBackground).backgroundColor).not.toBe(
+      "rgba(0, 0, 0, 0)",
+    );
+  });
+
   it("renders task markers as checkboxes that update the Markdown source", () => {
     const doc = "- [ ] Ship mock release\n\nEdit";
     const view = createView({ doc });

packages/editor/src/codemirror/preview.ts

@@ -596,6 +596,14 @@ function previewPlugin(config: LivePreviewConfig): Extension {
   const reveal = config.reveal ?? revealActiveLine;
   const taskCheckboxes = config.taskCheckboxes ?? true;
 
+  function syncCompositionUi(view: EditorView, composing: boolean) {
+    if (composing) {
+      view.dom.dataset.markraComposing = "true";
+    } else {
+      delete view.dom.dataset.markraComposing;
+    }
+  }
+
   return ViewPlugin.fromClass(
     class {
       decorations: DecorationSet;
@@ -609,6 +617,7 @@ function previewPlugin(config: LivePreviewConfig): Extension {
       update(update: ViewUpdate) {
         const compositionEnded = this.composing && !update.view.composing;
         this.composing = update.view.composing;
+        syncCompositionUi(update.view, this.composing);
 
         if (this.composing) {
           // Mapping preserves the current DOM while the platform owns the
@@ -645,11 +654,18 @@ function previewPlugin(config: LivePreviewConfig): Extension {
     {
       decorations: (plugin) => plugin.decorations,
       eventHandlers: {
+        compositionstart(_event, view) {
+          syncCompositionUi(view, true);
+        },
         compositionend(_event, view) {
+          syncCompositionUi(view, false);
           // CodeMirror updates its composition state before plugin handlers.
           // An empty transaction gives the plugin an immediate rebuild point.
           view.dispatch({});
         },
+        blur(_event, view) {
+          syncCompositionUi(view, false);
+        },
       },
     },
   );

packages/editor/src/codemirror/theme.ts

@@ -1,6 +1,11 @@
 import { EditorView } from "@codemirror/view";
 
 export const markraTheme = EditorView.baseTheme({
+  '&[data-markra-composing="true"] .cm-selectionBackground': {
+    // IME pre-edit updates temporarily expose their range as a CodeMirror
+    // selection. Hiding only that drawn layer prevents it from flashing.
+    backgroundColor: "transparent !important",
+  },
   ".cm-markra-h1": {
     fontSize: "1.8em",
     fontWeight: "700",