Fix mobile tasks, annoying caret jumping and empty widgets on navigation (#1890)

Author: mjf

client/codemirror/clean.ts

@@ -55,6 +55,7 @@ export function cleanModePlugins(client: Client) {
         // Propagate click event from checkbox
         void client.dispatchClickEvent(clickEvent);
       },
+      getView: () => client.editorView,
     }),
     listBulletPlugin(),
     tablePlugin(client),

client/codemirror/editor_state.ts

@@ -270,6 +270,9 @@ export function createEditorState(
       }),
       ViewPlugin.fromClass(
         class {
+          // Track file changed during an IME composition session
+          private composingDirty = false;
+
           update(update: ViewUpdate): void {
             if (update.transactions.length > 0) {
               for (const tr of update.transactions) {
@@ -290,6 +293,15 @@ export function createEditorState(
               ) {
                 return;
               }
+
+              // Defer save and event dispatch during IME composition
+              if (update.view.composing) {
+                // Mark dirty so we flush when composition ends
+                this.composingDirty = true;
+                client.ui.viewDispatch({ type: "page-changed" });
+                return;
+              }
+
               const changes: TextChange[] = [];
               update.changes.iterChanges((fromA, toA, fromB, toB, inserted) =>
                 changes.push({
@@ -302,6 +314,12 @@ export function createEditorState(
               client.ui.viewDispatch({ type: "page-changed" });
               client.contentManager.debouncedUpdateEvent();
               client.save().catch((e) => console.error("Error saving", e));
+              this.composingDirty = false;
+            } else if (this.composingDirty && !update.view.composing) {
+              // Flush now because composition ended without file changes
+              this.composingDirty = false;
+              client.contentManager.debouncedUpdateEvent();
+              client.save().catch((e) => console.error("Error saving", e));
             }
           }
         },

client/codemirror/lua_widget.ts

@@ -293,10 +293,14 @@ export class LuaWidget extends WidgetType {
         this.opts.cacheKey,
         div.offsetHeight,
       );
-      // Because of the rejiggering of the DOM, we need to do a no-op cursor move to make sure it's positioned correctly
-      this.opts.client.editorView.dispatch({
-        selection: this.opts.client.editorView.state.selection,
-      });
+      // Skip during IME composition to avoid caret jumps
+      if (!this.opts.client.editorView.composing) {
+        // Because of the rejiggering of the DOM, we need to do a no-op
+        // cursor move to make sure it's positioned correctly
+        this.opts.client.editorView.dispatch({
+          selection: this.opts.client.editorView.state.selection,
+        });
+      }
     });
   }
 

client/codemirror/task.ts

@@ -1,16 +1,19 @@
 import { syntaxTree } from "@codemirror/language";
-import { Decoration, WidgetType } from "@codemirror/view";
+import { Decoration, type EditorView, WidgetType } from "@codemirror/view";
 import type { NodeType } from "@lezer/common";
 import { decoratorStateField, isCursorInRange } from "./util.ts";
 
 /**
  * Widget to render checkbox for a task list item.
  */
 class CheckboxWidget extends WidgetType {
+  private dom?: HTMLElement;
+
   constructor(
     public checked: boolean,
-    readonly pos: number,
+    readonly fallbackPos: number,
     readonly clickCallback: (pos: number) => void,
+    readonly getView: () => EditorView | null,
   ) {
     super();
   }
@@ -27,17 +30,55 @@ class CheckboxWidget extends WidgetType {
     });
     checkbox.addEventListener("mouseup", (e) => {
       e.stopPropagation();
-      this.clickCallback(this.pos);
+      // Resolve the current document position at click time which
+      // prevents stale position corruption when the document has been
+      // edited since the decoration was created
+      let pos = this.fallbackPos;
+      const view = this.getView();
+      if (view && this.dom) {
+        try {
+          const domPos = view.posAtDOM(this.dom, 0);
+          pos = domPos + 1;
+        } catch {
+          // Use fallback
+        }
+      }
+      this.clickCallback(pos);
+    });
+    // Touch handling for mobile
+    let touchCount = 0;
+    checkbox.addEventListener("touchmove", () => {
+      touchCount++;
+    });
+    checkbox.addEventListener("touchend", (e) => {
+      if (touchCount === 0) {
+        e.stopPropagation();
+        e.preventDefault();
+        let pos = this.fallbackPos;
+        const view = this.getView();
+        if (view && this.dom) {
+          try {
+            pos = view.posAtDOM(this.dom, 0) + 1;
+          } catch {
+            // use fallback
+          }
+        }
+        this.clickCallback(pos);
+      }
+      touchCount = 0;
     });
     wrap.appendChild(checkbox);
+    this.dom = wrap;
     return wrap;
   }
 }
 
 export function taskListPlugin({
   onCheckboxClick,
+  getView,
 }: {
   onCheckboxClick: (pos: number) => void;
+  getView: () => EditorView | null;
 }) {
   return decoratorStateField((state) => {
     const widgets: any[] = [];
@@ -78,6 +119,7 @@ export function taskListPlugin({
               checkboxStatus,
               from + nfrom + 1,
               onCheckboxClick,
+              getView,
             ),
           });
           widgets.push(dec.range(from + nfrom, from + nto));

client/codemirror/util.ts

@@ -103,6 +103,15 @@ export function decoratorStateField(
     },
 
     update(value: DecorationSet, tr: Transaction) {
+      // Avoid full recomputation of decorations during IME composition
+      // but map existing decoration ranges through the changes instead.
+      if (tr.isUserEvent("input.type.compose")) {
+        if (tr.docChanged) {
+          return value.map(tr.changes);
+        }
+        return value;
+      }
+
       if (tr.isUserEvent("select.pointer")) return value;
       return stateToDecoratorMapper(tr.state);
     },

client/content_manager.ts

@@ -74,6 +74,16 @@ export class ContentManager {
 
             return resolve();
           } else {
+            // Do not save while IME composition is active
+            if (this.client.editorView.composing) {
+              // Re-schedule save after composition likely ends
+              this.saveTimeout = setTimeout(
+                this.save.bind(this),
+                autoSaveInterval,
+              );
+              return resolve();
+            }
+
             console.log("Saving page", this.client.currentPath());
             void this.client.dispatchAppEvent(
               "editor:pageSaving",
@@ -108,8 +118,12 @@ export class ContentManager {
                     meta: enrichedMeta,
                   });
 
-                  // Trigger editor re-render to update Lua widgets with the new metadata
-                  this.client.editorView.dispatch({});
+                  // Skip during IME composition
+                  if (!this.client.editorView.composing) {
+                    // Trigger editor re-render to update Lua widgets
+                    // with the new metadata
+                    this.client.editorView.dispatch({});
+                  }
                 }
               })
               .catch((e) => {
@@ -158,6 +172,7 @@ export class ContentManager {
     if (previousPath) {
       this.client.space.unwatchFile(previousPath);
       await this.save(true);
+      await this.client.objectIndex.awaitIndexQueueDrain();
     }
 
     // This can throw, but that will be catched and handled upstream.
@@ -225,6 +240,7 @@ export class ContentManager {
     if (previousPath) {
       this.client.space.unwatchFile(previousPath);
       await this.save(true);
+      await this.client.objectIndex.awaitIndexQueueDrain();
     }
 
     // Fetch next page to open

client/data/object_index.ts

@@ -190,6 +190,10 @@ export class ObjectIndex {
     return this.ds.get(indexVersionKey);
   }
 
+  async awaitIndexQueueDrain(): Promise<void> {
+    await this.mq.awaitEmptyQueue("indexQueue");
+  }
+
   async markFullIndexComplete() {
     await this.ds.set(indexVersionKey, desiredIndexVersion);
   }

plug-api/lib/async.ts

@@ -1,13 +1,25 @@
-export function throttle(func: () => void, limit: number): () => void {
+export function throttle(
+  func: () => void,
+  limit: number,
+): (() => void) & { flush(): void } {
   let timer: any = null;
-  return () => {
+  const throttled = () => {
     if (!timer) {
       timer = setTimeout(() => {
         func();
         timer = null;
       }, limit);
     }
   };
+  // Immediately execute any pending call and cancel the timer
+  throttled.flush = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+      func();
+    }
+  };
+  return throttled;
 }
 
 export function throttleImmediately(

plugs/index/task.ts

@@ -225,6 +225,7 @@ export async function updateTaskState(
   }
 }
 
+// Prevent concurrent task cycling
 let taskCycleLock = false;
 
 export async function taskCycleAtPos(pos: number) {
@@ -250,56 +251,58 @@ export async function taskCycleAtPos(pos: number) {
 }
 
 export async function taskCycleCommand() {
-  const text = await editor.getText();
-  const pos = await editor.getCursor();
-  const tree = await markdown.parseMarkdown(text);
-  addParentPointers(tree);
+  if (taskCycleLock) return;
+  taskCycleLock = true;
+  try {
+    const text = await editor.getText();
+    const pos = await editor.getCursor();
+    const tree = await markdown.parseMarkdown(text);
+    addParentPointers(tree);
 
-  let node = nodeAtPos(tree, pos);
-  if (!node) {
-    await editor.flashNotification("No task at cursor");
-    return;
-  }
-  if (["BulletList", "Document"].includes(node.type!)) {
-    // Likely at the end of the line, let's back up a position
-    node = nodeAtPos(tree, pos - 1);
-  }
-  if (!node) {
-    await editor.flashNotification("No task at cursor");
-    return;
-  }
-  const taskNode =
-    node.type === "Task"
-      ? node
-      : findParentMatching(node!, (n) => n.type === "Task");
-
-  if (taskNode) {
-    const taskState = findNodeOfType(taskNode!, "TaskState");
-    if (taskState) {
-      // Cycle states: [ ] -> [x] -> (remove checkbox) -> [ ]
-      await cycleTaskState(taskState, true);
+    let node = nodeAtPos(tree, pos);
+    if (!node) {
+      await editor.flashNotification("No task at cursor");
+      return;
+    }
+    if (["BulletList", "Document"].includes(node.type!)) {
+      node = nodeAtPos(tree, pos - 1);
+    }
+    if (!node) {
+      await editor.flashNotification("No task at cursor");
+      return;
+    }
+    const taskNode =
+      node.type === "Task"
+        ? node
+        : findParentMatching(node!, (n) => n.type === "Task");
+
+    if (taskNode) {
+      const taskState = findNodeOfType(taskNode!, "TaskState");
+      if (taskState) {
+        await cycleTaskState(taskState, true);
+      }
+      return;
     }
-    return;
-  }
 
-  // Convert a bullet point to a task
-  const listItem = findParentMatching(node!, (n) => n.type === "ListItem");
-  if (!listItem) {
-    await editor.flashNotification("No task at cursor");
-    return;
-  }
+    const listItem = findParentMatching(node!, (n) => n.type === "ListItem");
+    if (!listItem) {
+      await editor.flashNotification("No task at cursor");
+      return;
+    }
 
-  // Check if this ListItem already contains a Task (cursor might be at beginning of line)
-  const existingTask = findNodeOfType(listItem, "Task");
-  if (existingTask) {
-    const taskState = findNodeOfType(existingTask, "TaskState");
-    if (taskState) {
-      await cycleTaskState(taskState, true);
+    const existingTask = findNodeOfType(listItem, "Task");
+    if (existingTask) {
+      const taskState = findNodeOfType(existingTask, "TaskState");
+      if (taskState) {
+        await cycleTaskState(taskState, true);
+      }
+      return;
     }
-    return;
-  }
 
-  await convertListItemToTask(listItem);
+    await convertListItemToTask(listItem);
+  } finally {
+    taskCycleLock = false;
+  }
 }
 
 // Core logic extracted for testability. Mutates tree in place.