@dxos/react-ui-editor 0.3.10-main.92d1f2c → 0.3.10-main.a0865c9

package/dist/lib/browser/index.mjs

@@ -42,20 +42,20 @@ var autocomplete = ({ onSearch }) => {
 import { closeBrackets } from "@codemirror/autocomplete";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { EditorView, placeholder } from "@codemirror/view";
+import { drawSelection, EditorView, placeholder } from "@codemirror/view";
 var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
+  EditorView.lineWrapping,
   // TODO(burdon): Compare with minimalSetup.
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),
   closeBrackets(),
-  EditorView.lineWrapping,
+  drawSelection(),
   _placeholder && placeholder(_placeholder),
   // TODO(burdon): Is this required?
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
 ].filter(Boolean);
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts
-import { StateField } from "@codemirror/state";
 import { EditorView as EditorView2, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant } from "@dxos/invariant";
@@ -86,7 +86,7 @@ var defaultOptions = {
   particleShrinkRate: 0.95,
   shakeIntensity: 5
 };
-var blast = (options) => {
+var blast = (options = defaultOptions) => {
   let blaster;
   let last = 0;
   const getPoint = (view, pos) => {
@@ -123,10 +123,10 @@ var blast = (options) => {
       } else {
         blaster.resize();
       }
-      const current = update4.view.state.selection.main.head;
+      const current = update4.state.selection.main.head;
       if (current !== last) {
         last = current;
-        const { element, point } = getPoint(update4.view, current);
+        const { element, point } = getPoint(update4.view, current - 1);
         if (element && point) {
           blaster.spawn({
             element,
@@ -135,30 +135,16 @@ var blast = (options) => {
         }
       }
     }),
-    // Document changed.
-    StateField.define({
-      create: () => null,
-      update: (_value, transaction) => {
-        if (blaster && transaction.docChanged) {
-          const view = EditorView2.findFromDOM(blaster.node);
-          const { element, point } = getPoint(view, transaction.selection.main.head);
-          if (element && point) {
-            blaster.spawn({
-              element,
-              point
-            });
-          }
-        }
-        return null;
-      }
-    }),
     keymap2.of([
       {
-        any: (view, event) => {
-          if (blaster && event.key === "Enter" && event.shiftKey) {
-            blaster.shake({
-              time: 0.4
-            });
+        any: (_, event) => {
+          if (blaster) {
+            if (event.key === "Enter" && event.shiftKey) {
+              blaster.shake({
+                time: 0.8
+              });
+              return true;
+            }
           }
           return false;
         }
@@ -180,7 +166,7 @@ var Blaster = class {
       y: 0
     };
     this.shake = throttle(({ time }) => {
-      this._shakeTime = this._shakeTimeMax;
+      this._shakeTime = this._shakeTimeMax || time;
       this._shakeTimeMax = time;
     }, 100);
     this.spawn = throttle(({ element, point }) => {
@@ -201,7 +187,7 @@ var Blaster = class {
   initialize() {
     invariant(!this._canvas && !this._ctx, void 0, {
       F: __dxlog_file,
-      L: 152,
+      L: 138,
       S: this,
       A: [
         "!this._canvas && !this._ctx",
@@ -238,7 +224,7 @@ var Blaster = class {
   start() {
     invariant(this._canvas && this._ctx, void 0, {
       F: __dxlog_file,
-      L: 191,
+      L: 177,
       S: this,
       A: [
         "this._canvas && this._ctx",
@@ -379,6 +365,126 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/code.ts
+import { ViewPlugin, EditorView as EditorView3, Decoration } from "@codemirror/view";
+import get from "lodash.get";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-editor/src/styles/markdown.ts
+import { mx } from "@dxos/react-ui-theme";
+var headings = {
+  1: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
+    "-ml-[10px]"
+  ],
+  2: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
+    "-ml-[8px]"
+  ],
+  3: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
+    "-ml-[7px]"
+  ],
+  4: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
+    "-ml-[6px]"
+  ],
+  5: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
+    "-ml-[5px]"
+  ],
+  6: [
+    "mbs-4 mbe-2 font-medium text-inherit no-underline",
+    "-ml-[4px]"
+  ]
+};
+var heading = (level, readonly) => {
+  const [style, offset] = headings[level];
+  return mx(style, readonly && offset);
+};
+var light = "text-neutral-200 dark:text-neutral-800";
+var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
+var bold = "font-bold";
+var italic = "italic";
+var strikethrough = "line-through";
+var code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
+var codeMark = "font-mono text-primary-500";
+var inlineUrl = mx(code, "px-1");
+var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
+var horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800";
+
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import { tailwindConfig } from "@dxos/react-ui-theme";
+var tokens = tailwindConfig({}).theme;
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/code.ts
+var CODE_REGEX = /```[\s\S]*?```/gs;
+var styles = EditorView3.baseTheme({
+  "& .cm-code-block": {
+    display: "block",
+    paddingInline: "4px !important"
+  },
+  "&light .cm-code-block": {
+    background: get(tokens, "extend.colors.neutral.50")
+  },
+  "&dark .cm-code-block": {
+    background: get(tokens, "extend.colors.neutral.850")
+  },
+  "& .cm-code-block-first": {
+    paddingTop: "4px !important",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px"
+  },
+  "& .cm-code-block-last": {
+    paddingBottom: "4px !important",
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
+  }
+});
+var getLineRange = (lines, from, to) => {
+  const start = lines.findIndex((line) => line.from >= from);
+  const end = lines.findIndex((line) => line.to >= to);
+  return [
+    start,
+    end
+  ];
+};
+var code2 = () => {
+  const getDecorations = (view) => {
+    const decorations = [];
+    if (view.state.readOnly) {
+      const text = view.state.doc.sliceString(0);
+      const matches = text.matchAll(CODE_REGEX);
+      const blocks = view.viewportLineBlocks;
+      for (const match of matches) {
+        const range = getLineRange(blocks, match.index, match.index + match[0].length);
+        for (let i = range[0]; i <= range[1]; i++) {
+          const block = blocks[i];
+          decorations.push(Decoration.line({
+            class: mx2("cm-code-block", i === range[0] && "cm-code-block-first", i === range[1] && "cm-code-block-last")
+          }).range(block.from));
+        }
+      }
+    }
+    return Decoration.set(decorations);
+  };
+  return [
+    ViewPlugin.fromClass(class {
+      constructor(view) {
+        this.decorations = getDecorations(view);
+      }
+      update(update4) {
+        if (update4.docChanged || update4.viewportChanged) {
+          this.decorations = getDecorations(update4.view);
+        }
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    styles
+  ];
+};
+
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/demo.ts
 import { keymap as keymap3 } from "@codemirror/view";
 var defaultItems = [
@@ -437,11 +543,11 @@ var demo = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
-import { keymap as keymap4, Decoration, EditorView as EditorView3, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
+import { keymap as keymap4, Decoration as Decoration2, EditorView as EditorView4, MatchDecorator, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
-var styles = EditorView3.baseTheme({
+var styles2 = EditorView4.baseTheme({
   "& .cm-bookmark": {
     cursor: "pointer",
     margin: "4px",
@@ -485,7 +591,7 @@ var comments = (options = {}) => {
     regexp: /\[\^(\w+)\]/g,
     decoration: (match, view, pos) => {
       const id = match[1];
-      return Decoration.replace({
+      return Decoration2.replace({
         id,
         widget: new BookmarkWidget(pos, id, () => handleUpdate({
           active: id
@@ -493,7 +599,7 @@ var comments = (options = {}) => {
       });
     }
   });
-  const bookmarks = ViewPlugin.fromClass(class {
+  const bookmarks = ViewPlugin2.fromClass(class {
     constructor(view) {
       this.bookmarks = bookmarkMatcher.createDeco(view);
     }
@@ -502,8 +608,8 @@ var comments = (options = {}) => {
     }
   }, {
     decorations: (instance) => instance.bookmarks,
-    provide: (plugin) => EditorView3.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.bookmarks || Decoration.none;
+    provide: (plugin) => EditorView4.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.bookmarks || Decoration2.none;
     })
   });
   const handleUpdate = debounce((data) => {
@@ -514,17 +620,17 @@ var comments = (options = {}) => {
       {
         key: options?.key ?? "shift-meta-c",
         run: (view) => {
-          const id = options.onCreate?.();
+          const { from, to, head } = view.state.selection.main;
+          const id = options.onCreate?.(from, to);
           if (id) {
-            const pos = view.state.selection.main.head;
             const tag = `[^${id}]`;
             view.dispatch({
               changes: {
-                from: pos,
+                from: head,
                 insert: tag
               },
               selection: {
-                anchor: pos + tag.length
+                anchor: head + tag.length
               }
             });
             return true;
@@ -535,13 +641,13 @@ var comments = (options = {}) => {
     ]),
     bookmarks,
     // Monitor cursor movement.
-    EditorView3.updateListener.of((update4) => {
+    EditorView4.updateListener.of((update4) => {
       active = void 0;
       if (!options.onUpdate) {
         return;
       }
-      const view = update4.view;
-      const pos = view.state.selection.main.head;
+      const { view, state } = update4;
+      const pos = state.selection.main.head;
       const decorations = [];
       const rangeSet = view.plugin(bookmarks)?.bookmarks;
       let closest = Infinity;
@@ -549,7 +655,7 @@ var comments = (options = {}) => {
         /* view.visibleRanges?.[0] ?? */
         {
           from: 0,
-          to: view.state.doc.length
+          to: state.doc.length
         }
       );
       rangeSet?.between(from, to, (from2, to2, value) => {
@@ -575,19 +681,121 @@ var comments = (options = {}) => {
         });
       }
     }),
-    styles
+    styles2
+  ];
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/highlight.ts
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration as Decoration3, EditorView as EditorView5 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect } from "react";
+var styles3 = EditorView5.baseTheme({
+  "& .cm-highlight": {
+    backgroundColor: "yellow"
+  },
+  "& .cm-highlight::before": {
+    content: "]"
+  },
+  "& .cm-highlight-active": {
+    backgroundColor: "lime"
+  }
+});
+var marks = {
+  highlight: Decoration3.mark({
+    class: "cm-highlight"
+  }),
+  HighlightActive: Decoration3.mark({
+    class: "cm-highlight-active"
+  })
+};
+var setHighlights = StateEffect.define();
+var useHighlights = (view, ranges = []) => {
+  useEffect(() => {
+    view?.dispatch({
+      effects: setHighlights.of(ranges)
+    });
+  }, [
+    view,
+    ranges
+  ]);
+};
+var highlightStateField = StateField.define({
+  create: () => [],
+  update: (threads, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(setHighlights)) {
+        return effect.value;
+      }
+    }
+    return threads;
+  }
+});
+var highlightDecorations = EditorView5.decorations.compute([
+  highlightStateField
+], (state) => {
+  const selectionRanges = state.field(highlightStateField);
+  const decorations = sortBy(selectionRanges ?? [], (selection) => selection.from)?.flatMap((selection) => {
+    const range = {
+      from: selection.from,
+      to: selection.to + 1
+    };
+    if (selection.to > selection.from) {
+      if (selection.active) {
+        return marks.HighlightActive.range(range.from, range.to);
+      } else {
+        return marks.highlight.range(range.from, range.to);
+      }
+    } else {
+      return [];
+    }
+  }) ?? [];
+  return Decoration3.set(decorations);
+});
+var listener = (options) => {
+  return EditorView5.updateListener.of((update4) => {
+    const { view, state } = update4;
+    const { head } = state.selection.main;
+    const ranges = state.field(highlightStateField);
+    let mod = false;
+    const newRanges = ranges.map((range) => {
+      const active = head >= range.from && head <= range.to;
+      if (active !== range.active) {
+        mod = true;
+        return {
+          ...range,
+          active
+        };
+      } else {
+        return range;
+      }
+    });
+    if (mod) {
+      view.dispatch({
+        effects: setHighlights.of(newRanges)
+      });
+      options?.onChange?.(newRanges.find((range) => range.active)?.id);
+    }
+  });
+};
+var highlight = (options = {}) => {
+  return [
+    highlightStateField,
+    highlightDecorations,
+    listener(options),
+    styles3
   ];
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/image.ts
 import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder, StateField as StateField2 } from "@codemirror/state";
-import { Decoration as Decoration2, EditorView as EditorView4, WidgetType as WidgetType2 } from "@codemirror/view";
+import { Decoration as Decoration4, EditorView as EditorView6, WidgetType as WidgetType2 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField2.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView4.decorations.from(field)
+    provide: (field) => EditorView6.decorations.from(field)
   });
 };
 var update = (state, options) => {
@@ -600,7 +808,7 @@ var update = (state, options) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(hide ? node.from : node.to, node.to, Decoration2.replace({
+          builder.add(hide ? node.from : node.to, node.to, Decoration4.replace({
             widget: new ImageWidget(url)
           }));
         }
@@ -628,12 +836,12 @@ var ImageWidget = class extends WidgetType2 {
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/link.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView5, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType3 } from "@codemirror/view";
 var link = (options = {}) => {
   return StateField3.define({
     create: (state) => update2(state, options),
     update: (_, tr) => update2(tr.state, options),
-    provide: (field) => EditorView5.decorations.from(field)
+    provide: (field) => EditorView7.decorations.from(field)
   });
 };
 var LinkButton = class extends WidgetType3 {
@@ -688,20 +896,20 @@ var update2 = (state, options) => {
   syntaxTree2(state).iterate({
     enter: (node) => {
       if (node.name === "Link") {
-        const marks = node.node.getChildren("LinkMark");
-        const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : "";
+        const marks2 = node.node.getChildren("LinkMark");
+        const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
         const urlNode = node.node.getChild("URL");
         const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
         if (!url) {
           return false;
         }
         if (state.readOnly || cursor < node.from || cursor > node.to) {
-          builder.add(node.from, node.to, Decoration3.replace({
+          builder.add(node.from, node.to, Decoration5.replace({
             widget: new LinkText(node.from, text, options.link ? url : void 0)
           }));
         }
         if (options.onRender) {
-          builder.add(node.to, node.to, Decoration3.replace({
+          builder.add(node.to, node.to, Decoration5.replace({
             widget: new LinkButton(node.from, url, options.onRender)
           }));
         }
@@ -714,7 +922,7 @@ var update2 = (state, options) => {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
 import { StateField as StateField4 } from "@codemirror/state";
-var listener = ({ onChange }) => {
+var listener2 = ({ onChange }) => {
   return StateField4.define({
     create: () => null,
     update: (_value, transaction) => {
@@ -732,67 +940,18 @@ import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirr
 import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
 import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
-import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView6, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap5, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView8, highlightActiveLine, keymap as keymap5, placeholder as placeholder2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
-import get from "lodash.get";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-editor/src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
-var headings = {
-  1: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
-    "-ml-1.5"
-  ],
-  2: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
-    "-ml-1.5"
-  ],
-  3: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
-    "-ml-1.5"
-  ],
-  4: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
-    "-ml-[5px]"
-  ],
-  5: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
-    "-ml-[5px]"
-  ],
-  6: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline",
-    "-ml-[4px]"
-  ]
-};
-var heading = (level, readonly) => {
-  const [style, offset] = headings[level];
-  return mx(style, readonly && offset);
-};
-var light = "text-neutral-200 dark:text-neutral-800";
-var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
-var bold = "font-bold";
-var italic = "italic";
-var strikethrough = "line-through";
-var code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
-var codeMark = "font-mono text-primary-500";
-var inlineUrl = mx(code, "px-1");
-var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
-var horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800";
-
-// packages/ui/react-ui-editor/src/styles/tokens.ts
-import { tailwindConfig } from "@dxos/react-ui-theme";
-var tokens = tailwindConfig({}).theme;
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
+import get2 from "lodash.get";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 var markdownTags = {
   Blockquote: Tag.define(),
   CodeMark: Tag.define(),
@@ -963,11 +1122,12 @@ var markdownHighlightStyle = (readonly) => {
       ],
       class: blockquote
     },
+    // TODO(burdon): Replace with extension.
     {
       tag: [
         markdownTags.HorizontalRule
       ],
-      class: mx2(horizontalRule, readonly && "-indent-[100rem]")
+      class: mx3(horizontalRule, readonly && "-indent-[100rem]")
     },
     // TODO(burdon): Only if being edited.
     {
@@ -979,7 +1139,7 @@ var markdownHighlightStyle = (readonly) => {
   ], {
     scope: markdownLanguage,
     all: {
-      fontFamily: get(tokens, "fontFamily.body", []).join(",")
+      fontFamily: get2(tokens, "fontFamily.body", []).join(",")
     }
   });
 };
@@ -987,22 +1147,19 @@ var markdownHighlightStyle = (readonly) => {
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
 var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   return [
+    EditorState.allowMultipleSelections.of(true),
+    EditorState.tabSize.of(2),
+    EditorView8.lineWrapping,
+    customKeymap(),
     bracketMatching2(),
     closeBrackets2(),
-    _placeholder && placeholder2(_placeholder),
-    EditorState.allowMultipleSelections.of(true),
-    EditorView6.lineWrapping,
     crosshairCursor(),
     dropCursor(),
-    drawSelection(),
+    drawSelection2(),
     highlightActiveLine(),
-    highlightActiveLineGutter(),
-    highlightSelectionMatches(),
-    highlightSpecialChars(),
     history(),
     indentOnInput(),
-    rectangularSelection(),
-    customkeymap(),
+    _placeholder && placeholder2(_placeholder),
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -1027,7 +1184,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
     syntaxHighlighting2(markdownHighlightStyle(readonly))
   ].filter(Boolean);
 };
-var customkeymap = () => keymap5.of([
+var customKeymap = () => keymap5.of([
   // https://codemirror.net/docs/ref/#commands.indentWithTab
   indentWithTab,
   // https://codemirror.net/docs/ref/#commands.standardKeymap
@@ -1066,12 +1223,12 @@ var mention = ({ onSearch }) => {
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/table.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration6, EditorView as EditorView9, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField5.define({
     create: (state) => update3(state, options),
     update: (_, tr) => update3(tr.state, options),
-    provide: (field) => EditorView7.decorations.from(field)
+    provide: (field) => EditorView9.decorations.from(field)
   });
 };
 var update3 = (state, options) => {
@@ -1115,9 +1272,12 @@ var update3 = (state, options) => {
   });
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide && builder.add(table2.from, table2.to, Decoration4.replace({
+    hide && builder.add(table2.from, table2.to, Decoration6.replace({
       widget: new TableWidget(table2)
     }));
+    builder.add(table2.from, table2.to, Decoration6.mark({
+      class: "cm-table"
+    }));
   });
   return builder.finish();
 };
@@ -1156,8 +1316,8 @@ var TableWidget = class extends WidgetType4 {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/tasklist.ts
-import { EditorView as EditorView8, Decoration as Decoration5, WidgetType as WidgetType5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
-var styles2 = EditorView8.baseTheme({
+import { EditorView as EditorView10, Decoration as Decoration7, WidgetType as WidgetType5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
+var styles4 = EditorView10.baseTheme({
   "& .cm-task-item": {
     paddingLeft: "4px",
     paddingRight: "8px"
@@ -1203,7 +1363,7 @@ var tasklist = (options = {}) => {
     decoration: (match, view, pos) => {
       const indent = Math.floor(match[1].length / 2);
       const checked = match[2] === "x" || match[2] === "X";
-      return Decoration5.replace({
+      return Decoration7.replace({
         widget: new CheckboxWidget(pos, checked, indent, view.state.readOnly ? void 0 : (checked2) => {
           const idx = pos + match[0].indexOf("[") + 1;
           view.dispatch({
@@ -1221,7 +1381,7 @@ var tasklist = (options = {}) => {
       });
     }
   });
-  const tasks = ViewPlugin2.fromClass(class {
+  const tasks = ViewPlugin3.fromClass(class {
     constructor(view) {
       this.tasks = taskMatcher.createDeco(view);
     }
@@ -1229,14 +1389,14 @@ var tasklist = (options = {}) => {
       this.tasks = taskMatcher.updateDeco(update4, this.tasks);
     }
   }, {
-    decorations: (instance) => instance.tasks,
-    provide: (plugin) => EditorView8.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tasks || Decoration5.none;
+    decorations: (value) => value.tasks,
+    provide: (plugin) => EditorView10.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tasks || Decoration7.none;
     })
   });
   return [
     tasks,
-    styles2
+    styles4
   ];
 };
 
@@ -1285,7 +1445,7 @@ var tooltip = ({ onHover, regexp = markdownLinkRegexp }) => hoverTooltip((view,
 });
 
 // packages/ui/react-ui-editor/src/components/TextEditor/themes/default.ts
-import get2 from "lodash.get";
+import get3 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -1302,7 +1462,8 @@ var defaultTheme = {
     outline: "none"
   },
   "& .cm-scroller": {
-    overflow: "visible"
+    overflow: "visible",
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
   "& .cm-content": {
     padding: 0,
@@ -1310,20 +1471,20 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get2(tokens, "extend.colors.neutral.900", "black"),
+    color: get3(tokens, "extend.colors.neutral.900", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get2(tokens, "extend.colors.neutral.100", "white"),
+    color: get3(tokens, "extend.colors.neutral.100", "white"),
     caretColor: "white"
   },
   //
   // Cursor
   //
-  "&light .cm-cursor": {
+  "&light .cm-cursor, &light .cm-dropCursor": {
     borderLeft: "2px solid black"
   },
-  "&dark .cm-cursor": {
+  "&dark .cm-cursor, &dark .cm-dropCursor": {
     borderLeft: "2px solid white"
   },
   "& .cm-placeholder": {
@@ -1343,16 +1504,16 @@ var defaultTheme = {
   // selection
   //
   "&light .cm-selectionBackground, &light.cm-focused .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.150", "#00ffff")
+    background: get3(tokens, "extend.colors.primary.150", "#00ffff")
   },
   "&dark .cm-selectionBackground, &dark.cm-focused .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.850", "#00ffff")
+    background: get3(tokens, "extend.colors.primary.850", "#00ffff")
   },
   "&light .cm-selectionMatch": {
-    background: get2(tokens, "extend.colors.primary.250", "#00ffff") + "44"
+    background: get3(tokens, "extend.colors.primary.250", "#00ffff") + "44"
   },
   "&dark .cm-selectionMatch": {
-    background: get2(tokens, "extend.colors.primary.600", "#00ffff") + "44"
+    background: get3(tokens, "extend.colors.primary.600", "#00ffff") + "44"
   },
   //
   // collaboration
@@ -1385,12 +1546,12 @@ var defaultTheme = {
   // link
   //
   "& .cm-link": {
-    color: get2(tokens, "extend.colors.primary.500"),
+    color: get3(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
@@ -1412,7 +1573,7 @@ var defaultTheme = {
     display: "none"
   },
   "& .cm-completionLabel": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   "& .cm-completionMatchedText": {
     textDecoration: "none"
@@ -1427,12 +1588,16 @@ var defaultTheme = {
   //
   // table
   //
+  "& .cm-table *": {
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
+    textDecoration: "none !important"
+  },
   "& .cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get2(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get2(tokens, "extend.colors.neutral.500")
+    color: get3(tokens, "extend.colors.neutral.500")
   },
   "& .cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -1447,8 +1612,8 @@ var defaultTheme = {
   // font size
   // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
   //
-  ...Object.keys(get2(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get2(tokens, [
+  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get3(tokens, [
       "extend",
       "fontSize",
       fontSize,
@@ -1465,41 +1630,76 @@ var defaultTheme = {
       height
     };
     return acc;
-  }, {})
+  }, {}),
+  /**
+  * Panels
+  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+  *
+  * Find/replace panel.
+  * <div class="cm-announced">...</div>
+  * <div class="cm-scroller">...</div>
+  * <div class="cm-panels cm-panels-bottom">
+  *   <div class="cm-search cm-panel">
+  *     <input class="cm-textfield" />
+  *     <button class="cm-button">...</button>
+  *     <label><input type="checkbox" />...</label>
+  *   </div>
+  * </div
+  */
+  "& .cm-panels": {
+    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`,
+    borderBottom: "none"
+  },
+  "& .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-button": {
+    margin: "4px",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    background: get3(tokens, "extend.colors.neutral.100"),
+    border: "none"
+  },
+  "& .cm-searchMatch": {
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+  },
+  "& .cm-searchMatch.cm-searchMatch-selected": {
+    backgroundColor: get3(tokens, "extend.colors.primary.100")
+  }
 };
 var textTheme = {
   "& .cm-scroller": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   "& .cm-placeholder": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var markdownTheme = {
   // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
   "& .cm-placeholder": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
   "& .cm-scroller": {
-    fontFamily: get2(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
   "& .cm-placeholder": {
-    fontFamily: get2(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView9 } from "@codemirror/view";
+import { EditorView as EditorView11 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState } from "react";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import { getColorForValue, inputSurface, mx as mx4 } from "@dxos/react-ui-theme";
 var EditorModes = [
   "default",
   "vim"
@@ -1522,7 +1722,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
     root
   ]);
   const { awareness, peer } = model;
-  useEffect(() => {
+  useEffect2(() => {
     if (awareness && peer) {
       awareness.setLocalStateField("user", {
         name: peer.name ?? generateName(peer.id),
@@ -1542,7 +1742,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
     peer,
     themeMode
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!root) {
       return;
     }
@@ -1553,10 +1753,11 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
         // TODO(burdon): Factor out VIM mode?
         editorMode === "vim" && vim(),
         // Theme.
-        EditorView9.baseTheme(defaultTheme),
-        EditorView9.theme(slots?.editor?.theme ?? {}),
+        // TODO(burdon): Make optional.
+        EditorView11.baseTheme(defaultTheme),
+        EditorView11.theme(slots?.editor?.theme ?? {}),
         // TODO(burdon): themeMode doesn't change in storybooks.
-        EditorView9.darkTheme.of(themeMode === "dark"),
+        EditorView11.darkTheme.of(themeMode === "dark"),
         // Storage and replication.
         model.extension,
         // Custom.
@@ -1564,7 +1765,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
       ].filter(Boolean)
     });
     view?.destroy();
-    setView(new EditorView9({
+    setView(new EditorView11({
       state: state2,
       parent: root
     }));
@@ -1644,7 +1845,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], sl
 });
 var defaultSlots = {
   root: {
-    className: mx3("p-2", inputSurface)
+    className: mx4("p-2", inputSurface)
   }
 };
 var defaultTextSlots = {
@@ -1661,15 +1862,15 @@ var defaultMarkdownSlots = {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import get3 from "lodash.get";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import get4 from "lodash.get";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 import { yCollab } from "y-codemirror.next";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
 
 // packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
-import { Annotation, Facet, StateEffect, StateField as StateField6 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin3 } from "@codemirror/view";
+import { Annotation, Facet, StateEffect as StateEffect2, StateField as StateField6 } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 import * as automerge2 from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
@@ -1847,7 +2048,7 @@ var PatchSemaphore = class {
 };
 
 // packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
-var effectType = StateEffect.define({});
+var effectType = StateEffect2.define({});
 var updateHeads = (newHeads) => effectType.of({
   newHeads
 });
@@ -1887,7 +2088,7 @@ var automergePlugin = (handle, path) => {
     }
   });
   const semaphore = new PatchSemaphore(stateField);
-  const viewPlugin = ViewPlugin3.fromClass(class AutomergeCodemirrorViewPlugin {
+  const viewPlugin = ViewPlugin4.fromClass(class AutomergeCodemirrorViewPlugin {
     constructor(view) {
       this._handleChange = () => {
         this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
@@ -2063,7 +2264,7 @@ var useTextModel = ({ identity, space, text }) => {
     space,
     text
   }));
-  useEffect2(() => {
+  useEffect3(() => {
     setModel(createModel({
       identity,
       space,
@@ -2090,7 +2291,7 @@ var createModel = (options) => {
 var createYjsModel = ({ identity, space, text }) => {
   invariant3(text?.doc && text?.content, void 0, {
     F: __dxlog_file4,
-    L: 74,
+    L: 81,
     S: void 0,
     A: [
       "text?.doc && text?.content",
@@ -2106,6 +2307,7 @@ var createYjsModel = ({ identity, space, text }) => {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content.toString(),
+    ranges: [],
     extension: yCollab(text.content, provider?.awareness),
     awareness: provider?.awareness,
     peer: identity ? {
@@ -2122,7 +2324,8 @@ var createAutomergeModel = ({ identity, text }) => {
   return {
     id: obj.id,
     content: doc,
-    text: () => get3(doc.handle.docSync(), doc.path),
+    text: () => get4(doc.handle.docSync(), doc.path),
+    ranges: [],
     extension: automergePlugin(doc.handle, doc.path),
     peer: identity ? {
       id: identity.identityKey.toHex(),
@@ -2143,6 +2346,7 @@ export {
   autocomplete,
   basicBundle,
   blast,
+  code2 as code,
   codeTheme,
   comments,
   cursorColor,
@@ -2152,9 +2356,12 @@ export {
   defaultTextSlots,
   defaultTheme,
   demo,
+  highlight,
+  highlightDecorations,
+  highlightStateField,
   image,
   link,
-  listener,
+  listener2 as listener,
   markdownBundle,
   markdownHighlightStyle,
   markdownTags,
@@ -2166,6 +2373,7 @@ export {
   tasklist,
   textTheme,
   tooltip,
+  useHighlights,
   useTextModel
 };
 //# sourceMappingURL=index.mjs.map