Optimize editor per-keystroke performance

Major bottlenecks identified via profiling and addressed:

Tables: skip full-document rebuild when the change doesn't touch any
Table node — map existing decorations through position changes instead.

Lists: consolidate 5 separate StateFields into a single ViewPlugin
scoped to visible ranges. The continuation-line check used a
full-tree scan per line — replaced with O(depth) resolveInner lookup.

Toolbar: getBlockType scanned every line for code fences — now checks
heading first (line-local) and only scans up to the cursor line.

UpdateListener: deduplicate doc.toString() calls, skip
countSearchMatches when no active query.

Inline images: skip collectSearchMatches + doc.toString() when there
is no active search query.

onChange: defer store update off the critical paint path with
setTimeout so the React re-render cascade doesn't block the keystroke.

Author: ChristianChiarulli

app/src/features/editor/extensions/inline-images/index.ts

@@ -285,10 +285,26 @@ export function findInlineImageBeforeCursor(
   state: EditorState,
   cursor: number,
 ): InlineImageMatch | null {
-  for (const match of findInlineImages(state)) {
-    if (match.to === cursor) {
-      return match;
-    }
+  // Only check the current line instead of scanning the entire document.
+  // Image syntax is always single-line so a line-scoped search is correct.
+  const line = state.doc.lineAt(cursor);
+  const tree = syntaxTree(state);
+  const regex = new RegExp(INLINE_IMAGE_REGEX.source, "g");
+  const slice = state.doc.sliceString(line.from, line.to);
+
+  let m;
+  while ((m = regex.exec(slice)) !== null) {
+    const from = line.from + m.index;
+    const to = from + m[0].length;
+
+    if (to !== cursor) continue;
+    if (isInsideCodeBlock(tree, from)) continue;
+
+    const altText = m[1] ?? "";
+    const src = m[2] ?? "";
+    if (!src) continue;
+
+    return { altText, from, src, to };
   }
 
   return null;
@@ -364,10 +380,9 @@ function inlineImagePlugin(searchQuery = "") {
       searchMatches: SearchMatch[];
 
       constructor(view: EditorView) {
-        this.searchMatches = collectSearchMatches(
-          view.state.doc.toString(),
-          searchQuery,
-        );
+        this.searchMatches = searchQuery
+          ? collectSearchMatches(view.state.doc.toString(), searchQuery)
+          : [];
         this.decorations = buildInlineImageDecorations(
           view,
           this.searchMatches,
@@ -381,10 +396,9 @@ function inlineImagePlugin(searchQuery = "") {
           syntaxTree(update.state) !== syntaxTree(update.startState)
         ) {
           if (update.docChanged) {
-            this.searchMatches = collectSearchMatches(
-              update.state.doc.toString(),
-              searchQuery,
-            );
+            this.searchMatches = searchQuery
+              ? collectSearchMatches(update.state.doc.toString(), searchQuery)
+              : [];
           }
           this.decorations = buildInlineImageDecorations(
             update.view,

app/src/features/editor/extensions/markdown-decorations/builders/tables.ts

@@ -1070,6 +1070,48 @@ function transactionTouchesOnlyActiveCell(
   return touchesOnlyCell;
 }
 
+/**
+ * Check whether any changed range in a transaction intersects with a
+ * Table node in either the old or new syntax tree.
+ */
+function changesAffectTables(transaction: Transaction): boolean {
+  let found = false;
+
+  transaction.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+    if (found) return;
+
+    const oldTree = syntaxTree(transaction.startState);
+    const oldDoc = transaction.startState.doc;
+    oldTree.iterate({
+      from: oldDoc.lineAt(fromA).from,
+      to: oldDoc.lineAt(Math.min(toA, oldDoc.length)).to,
+      enter(node) {
+        if (node.name === "Table") {
+          found = true;
+          return false;
+        }
+      },
+    });
+
+    if (found) return;
+
+    const newTree = syntaxTree(transaction.state);
+    const newDoc = transaction.state.doc;
+    newTree.iterate({
+      from: newDoc.lineAt(fromB).from,
+      to: newDoc.lineAt(Math.min(toB, newDoc.length)).to,
+      enter(node) {
+        if (node.name === "Table") {
+          found = true;
+          return false;
+        }
+      },
+    });
+  });
+
+  return found;
+}
+
 const tableDecorationField = StateField.define<DecorationSet>({
   create(state) {
     return buildTableDecorations(state);
@@ -1084,6 +1126,11 @@ const tableDecorationField = StateField.define<DecorationSet>({
     }
 
     if (!transaction.docChanged) {
+      if (
+        syntaxTree(transaction.state) !== syntaxTree(transaction.startState)
+      ) {
+        return buildTableDecorations(transaction.state);
+      }
       return decorations;
     }
 
@@ -1095,6 +1142,13 @@ const tableDecorationField = StateField.define<DecorationSet>({
       return decorations.map(transaction.changes);
     }
 
+    // When the change doesn't touch any Table node, map existing
+    // decorations through position changes. This avoids rebuilding
+    // all table widgets on every keystroke outside of tables.
+    if (!changesAffectTables(transaction)) {
+      return decorations.map(transaction.changes);
+    }
+
     return buildTableDecorations(transaction.state);
   },
   provide(field) {