@dxos/react-ui-editor 0.6.11-staging.e6894a4 → 0.6.12-main.15a606f

package/dist/lib/browser/index.mjs

@@ -1389,6 +1389,18 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { ThemeProvider } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
+var createElement = (tag, options, children) => {
+  const el = document.createElement(tag);
+  if (options?.className) {
+    el.className = options.className;
+  }
+  if (children) {
+    el.append(...Array.isArray(children) ? children : [
+      children
+    ]);
+  }
+  return el;
+};
 var renderRoot = (root, node) => {
   createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
     tx: defaultTx
@@ -1981,9 +1993,10 @@ var dropFile = (options = {}) => {
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { bracketMatching } from "@codemirror/language";
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
+import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { EditorView as EditorView9, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap5, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
@@ -2052,15 +2065,19 @@ var defaultTheme = {
   * NOTE: Gutters should have the same top margin as the content.
   */
   ".cm-gutters": {
-    background: "unset"
+    background: "var(--surface-bg)"
   },
   ".cm-gutter": {},
-  ".cm-gutterElement": {
-    fontSize: "16px",
-    lineHeight: 1.5
+  ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
+    minWidth: "40px",
+    alignContent: "center"
   },
-  ".cm-lineNumbers": {
-    minWidth: "36px"
+  /**
+  * Height is set to match the corresponding line.
+  */
+  ".cm-gutterElement": {
+    alignItems: "center",
+    fontSize: "16px"
   },
   /**
   * Line.
@@ -2069,7 +2086,7 @@ var defaultTheme = {
     paddingInline: 0
   },
   ".cm-activeLine": {
-    background: "var(--dx-hoverSurface)"
+    background: "var(--dx-cmActiveLine)"
   },
   /**
   * Cursor (layer).
@@ -2168,13 +2185,14 @@ var defaultTheme = {
   *   </div>
   * </div
   */
-  // TODO(burdon): Apply react-ui-theme or replace panel.
+  // TODO(burdon): Implement custom panel (with icon buttons).
   ".cm-panels": {},
   ".cm-panel": {
     fontFamily: fontBody,
-    backgroundColor: "var(--dx-base)"
+    backgroundColor: "var(--surface-bg)"
   },
   ".cm-panel input, .cm-panel button, .cm-panel label": {
+    color: "var(--dx-subdued)",
     fontFamily: fontBody,
     fontSize: "14px",
     all: "unset",
@@ -2242,7 +2260,7 @@ var createBasicExtensions = (_props) => {
     EditorView9.exceptionSink.of((err) => {
       log6.catch(err, void 0, {
         F: __dxlog_file9,
-        L: 92,
+        L: 93,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2287,11 +2305,13 @@ var defaultThemeSlots = {
     className: "w-full bs-full"
   }
 };
-var createThemeExtensions = ({ themeMode, styles: styles5, slots: _slots } = {}) => {
+var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
     EditorView9.darkTheme.of(themeMode === "dark"),
     EditorView9.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
+    // https://github.com/codemirror/theme-one-dark
+    _syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
     slots.editor?.className && EditorView9.editorAttributes.of({
       class: slots.editor.className
     }),
@@ -2324,36 +2344,50 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
+import { EditorView as EditorView10 } from "@codemirror/view";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var folding = (_props = {}) => [
   codeFolding({
-    placeholderDOM: () => document.createElement("div")
+    placeholderDOM: () => {
+      return document.createElement("span");
+    }
   }),
   foldGutter({
     markerDOM: (open) => {
-      return renderRoot(document.createElement("div"), /* @__PURE__ */ React2.createElement(Icon, {
+      return renderRoot(createElement("div", {
+        className: "flex h-full items-center"
+      }), /* @__PURE__ */ React2.createElement(Icon, {
         icon: "ph--caret-right--regular",
         classNames: [
           getSize(3),
-          "m-2 cursor-pointer",
+          "mx-3 cursor-pointer",
           open && "rotate-90"
         ]
       }));
     }
+  }),
+  EditorView10.theme({
+    ".cm-foldGutter": {
+      opacity: 0.3,
+      transition: "opacity 0.3s"
+    },
+    ".cm-foldGutter:hover": {
+      opacity: 1
+    }
   })
 ];
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView10 } from "@codemirror/view";
+import { EditorView as EditorView11 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView10.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView11.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView10.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView11.updateListener.of((update2) => {
     onChange(update2.state.doc.toString());
   }));
   return extensions;
@@ -2363,7 +2397,7 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView11, keymap as keymap6 } from "@codemirror/view";
+import { EditorView as EditorView12, keymap as keymap6 } from "@codemirror/view";
 import { useMemo as useMemo2, useState as useState2 } from "react";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline;
@@ -3453,7 +3487,7 @@ var getFormatting = (state2) => {
 };
 var useFormattingState = () => {
   const [state2, setState] = useState2();
-  const observer = useMemo2(() => EditorView11.updateListener.of((update2) => {
+  const observer = useMemo2(() => EditorView12.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       setState((prevState) => {
         const newState = getFormatting(update2.state);
@@ -3523,10 +3557,9 @@ var processAction = (view, action) => {
 import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
 import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
-import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { lintKeymap } from "@codemirror/lint";
-import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { keymap as keymap7 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
@@ -3737,10 +3770,8 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
         markdownTagsExtensions
       ]
     }),
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
     // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle()),
+    syntaxHighlighting2(markdownHighlightStyle()),
     keymap7.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab2,
@@ -3782,7 +3813,7 @@ var convertTreeToJson = (state2) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect4 } from "@codemirror/state";
-import { EditorView as EditorView15, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+import { EditorView as EditorView16, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
@@ -3798,6 +3829,9 @@ var adjustChanges = () => {
       for (const tr of update2.transactions) {
         const event = tr.annotation(Transaction.userEvent);
         switch (event) {
+          //
+          // Enter
+          //
           case "input": {
             const changes = tr.changes;
             if (changes.empty) {
@@ -3818,6 +3852,9 @@ var adjustChanges = () => {
             });
             break;
           }
+          //
+          // Paste
+          //
           case "input.paste": {
             const changes = tr.changes;
             if (changes.empty) {
@@ -3927,7 +3964,7 @@ var getValidUrl = (str) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView12, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView13, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (_options = {}) => {
   return StateField7.define({
     create: (state2) => {
@@ -3954,7 +3991,7 @@ var image = (_options = {}) => {
         add: buildDecorations(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView12.decorations.from(field)
+    provide: (field) => EditorView13.decorations.from(field)
   });
 };
 var preloaded = /* @__PURE__ */ new Set();
@@ -4008,10 +4045,10 @@ var imageUpload = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView13 } from "@codemirror/view";
+import { EditorView as EditorView14 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView13.theme({
+var formattingStyles = EditorView14.theme({
   /**
   * Horizontal rule.
   */
@@ -4102,12 +4139,12 @@ var formattingStyles = EditorView13.theme({
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView14, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration6, EditorView as EditorView15, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField8.define({
     create: (state2) => update(state2, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView14.decorations.from(field)
+    provide: (field) => EditorView15.decorations.from(field)
   });
 };
 var update = (state2, _options) => {
@@ -4200,6 +4237,12 @@ var TableWidget = class extends WidgetType4 {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+var Unicode = {
+  emDash: "\u2014",
+  bullet: "\u2022",
+  bulletSmall: "\u2219",
+  bulletSquare: "\u2B1D"
+};
 var HorizontalRuleWidget = class extends WidgetType5 {
   toDOM() {
     const el = document.createElement("span");
@@ -4240,9 +4283,13 @@ var CheckboxWidget = class extends WidgetType5 {
       input.setAttribute("disabled", "true");
     } else {
       input.onmousedown = (event) => {
-        const pos = view.posAtDOM(span);
-        const text = view.state.sliceDoc(pos, pos + 3);
-        if (text === (this._checked ? "[x]" : "[ ]")) {
+        const line = view.state.doc.lineAt(view.posAtDOM(span));
+        const text = view.state.sliceDoc(line.from, line.to);
+        const match = text.match(/^\s*- (\[[xX ]]).*/);
+        if (match) {
+          const [, checked] = match;
+          const pos = line.from + text.indexOf(checked);
+          this._checked = checked !== "[ ]";
           view.dispatch({
             changes: {
               from: pos + 1,
@@ -4320,7 +4367,7 @@ var buildDecorations2 = (view, options, focus) => {
   const getHeaderLevels = (node, level) => {
     invariant4(level > 0, void 0, {
       F: __dxlog_file10,
-      L: 157,
+      L: 176,
       S: void 0,
       A: [
         "level > 0",
@@ -4359,7 +4406,7 @@ var buildDecorations2 = (view, options, focus) => {
   const getCurrentListLevel = () => {
     invariant4(listLevels.length, void 0, {
       F: __dxlog_file10,
-      L: 179,
+      L: 198,
       S: void 0,
       A: [
         "listLevels.length",
@@ -4370,6 +4417,9 @@ var buildDecorations2 = (view, options, focus) => {
   };
   const enterNode = (node) => {
     switch (node.name) {
+      // ATXHeading > HeaderMark > Paragraph
+      // NOTE: Numbering requires processing the entire document since otherwise only the visible range will be
+      // processed and the numbering will be incorrect.
       case "ATXHeading1":
       case "ATXHeading2":
       case "ATXHeading3":
@@ -4403,16 +4453,20 @@ var buildDecorations2 = (view, options, focus) => {
         }
         return false;
       }
+      //
+      // Lists.
+      // [BulletList | OrderedList] > (ListItem > ListMark) > (Task > TaskMarker)?
+      //
       case "BulletList":
       case "OrderedList": {
         enterList(node);
         break;
       }
       case "ListItem": {
+        const line = state2.doc.lineAt(node.from);
         const list = getCurrentListLevel();
         const width = list.type === "OrderedList" ? orderedListIndentationWidth : bulletListIndentationWidth;
         const offset = ((list.level ?? 0) + 1) * width;
-        const line = state2.doc.lineAt(node.from);
         if (node.from === line.to - 1) {
           return false;
         }
@@ -4422,33 +4476,30 @@ var buildDecorations2 = (view, options, focus) => {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
           }
         }));
-        const text = state2.doc.sliceString(line.from, node.to);
-        const whitespace = text.match(/^ */)?.[0].length ?? 0;
-        if (whitespace) {
-          atomicDeco.add(line.from, line.from + whitespace, hide);
-        }
         break;
       }
       case "ListMark": {
+        const list = getCurrentListLevel();
         const next = tree.resolve(node.to + 1, 1);
         if (next?.name === "TaskMarker") {
-          atomicDeco.add(node.from, node.to + 1, hide);
           break;
         }
-        const list = getCurrentListLevel();
-        const label = list.type === "OrderedList" ? `${++list.number}.` : "\u2022";
-        atomicDeco.add(node.from, node.to + 1, Decoration7.replace({
+        const label = list.type === "OrderedList" ? `${++list.number}.` : Unicode.bulletSmall;
+        const line = state2.doc.lineAt(node.from);
+        const to = state2.doc.sliceString(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
+        atomicDeco.add(line.from, to, Decoration7.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
       }
       case "TaskMarker": {
-        if (!editingRange(state2, node, focus)) {
-          const checked = state2.doc.sliceString(node.from + 1, node.to - 1) === "x";
-          atomicDeco.add(node.from, node.to + 1, checked ? checkedTask : uncheckedTask);
-        }
+        const checked = state2.doc.sliceString(node.from + 1, node.to - 1) === "x";
+        const line = state2.doc.lineAt(node.from);
+        const to = state2.doc.sliceString(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
+        atomicDeco.add(line.from, to, checked ? checkedTask : uncheckedTask);
         break;
       }
+      // CommentBlock
       case "CommentBlock": {
         const editing = editingRange(state2, node, focus);
         for (const block of view.viewportLineBlocks) {
@@ -4467,6 +4518,7 @@ var buildDecorations2 = (view, options, focus) => {
         }
         break;
       }
+      // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
       case "FencedCode": {
         for (const block of view.viewportLineBlocks) {
           if (block.to < node.from) {
@@ -4485,6 +4537,7 @@ var buildDecorations2 = (view, options, focus) => {
         }
         return false;
       }
+      // Link > [LinkMark, URL]
       case "Link": {
         const marks = node.node.getChildren("LinkMark");
         const urlNode = node.node.getChild("URL");
@@ -4511,6 +4564,7 @@ var buildDecorations2 = (view, options, focus) => {
         }
         break;
       }
+      // HR
       case "HorizontalRule": {
         if (!editingRange(state2, node, focus)) {
           deco.add(node.from, node.to, horizontalRule);
@@ -4591,9 +4645,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView15.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
-        EditorView15.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
-        EditorView15.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
+        EditorView16.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView16.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView16.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
       ]
     }),
     image(),
@@ -4726,7 +4780,7 @@ var InputModeExtensions = {
 
 // packages/ui/react-ui-editor/src/extensions/state.ts
 import { Transaction as Transaction2 } from "@codemirror/state";
-import { EditorView as EditorView16, keymap as keymap9 } from "@codemirror/view";
+import { EditorView as EditorView17, keymap as keymap9 } from "@codemirror/view";
 import { debounce as debounce2 } from "@dxos/async";
 import { invariant as invariant5 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
@@ -4764,7 +4818,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView16.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView17.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction2.userEvent.of(stateRestoreAnnotation)
@@ -4779,7 +4833,7 @@ var state = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView16.updateListener.of(({ view, transactions }) => {
+    EditorView17.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId2);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -5259,19 +5313,20 @@ var Toolbar = {
 };
 
 // packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-var margin = "!mt-[16px]";
+var margin = "!mt-[1rem]";
 var editorContent = mx3(margin, "!mli-auto w-full max-w-[min(50rem,100%-2rem)]");
-var editorFullWidth = mx3(margin, "!ml-[3rem]");
+var editorFullWidth = mx3(margin);
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var editorGutter = EditorView17.theme({
+var editorGutter = EditorView18.theme({
   // Match margin from content.
   ".cm-gutters": {
-    marginTop: "16px"
+    marginTop: "16px",
+    paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView17.theme({
+var editorMonospace = EditorView18.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
@@ -5284,17 +5339,15 @@ var useActionHandler = (view) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView18 } from "@codemirror/view";
+import { EditorView as EditorView19 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { useCallback, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
 import { log as log8 } from "@dxos/log";
-import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
 var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
-  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => {
-    return typeof props === "function" ? props() : props;
-  }, deps ?? []);
+  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => getProviderValue(props), deps ?? []);
   const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
   const onUpdate = useRef2();
   const [view, setView] = useState4();
@@ -5308,7 +5361,7 @@ var useTextEditor = (props = {}, deps = []) => {
         doc: initialValue?.length ?? 0
       }, {
         F: __dxlog_file13,
-        L: 78,
+        L: 76,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5330,23 +5383,23 @@ var useTextEditor = (props = {}, deps = []) => {
         extensions: [
           id && documentId2.of(id),
           // NOTE: Doesn't catch errors in keymap functions.
-          EditorView18.exceptionSink.of((err) => {
+          EditorView19.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
               F: __dxlog_file13,
-              L: 100,
+              L: 98,
               S: void 0,
               C: (f, a) => f(...a)
             });
           }),
           extensions,
-          EditorView18.updateListener.of(() => {
+          EditorView19.updateListener.of(() => {
             setTimeout(() => {
               onUpdate.current?.();
             });
           })
         ].filter(isNotFalsy4)
       });
-      view2 = new EditorView18({
+      view2 = new EditorView19({
         parent: parentRef.current,
         selection: initialSelection,
         state: state2,
@@ -5374,7 +5427,7 @@ var useTextEditor = (props = {}, deps = []) => {
         id
       }, {
         F: __dxlog_file13,
-        L: 136,
+        L: 134,
         S: void 0,
         C: (f, a) => f(...a)
       });