@dxos/react-ui-editor 0.4.4-next.e0df51e → 0.4.5-main.181e1ed

package/dist/lib/browser/index.mjs

@@ -8,10 +8,10 @@ import { tags as tags2 } from "@lezer/highlight";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView15 } from "@codemirror/view";
+import { EditorView as EditorView16 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2, useMemo as useMemo2 } from "react";
 import { log as log3 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
 import { focusRing } from "@dxos/react-ui-theme";
@@ -102,8 +102,8 @@ var annotations = (options = {}) => {
       annotationsState
     ], (state) => {
       const annotations2 = state.field(annotationsState);
-      const decorations = annotations2.map((annotation) => {
-        const range = Cursor.getRangeFromCursor(state, annotation.cursor);
+      const decorations = annotations2.map((annotation2) => {
+        const range = Cursor.getRangeFromCursor(state, annotation2.cursor);
         return range && annotationMark.range(range.from, range.to);
       }).filter(isNotFalsy);
       return Decoration.set(decorations);
@@ -1116,8 +1116,8 @@ var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue)
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var editorFillLayoutRoot = "min-bs-full grid";
-var editorFillLayoutEditor = "min-bs-full";
+var editorFillLayoutRoot = "bs-full overflow-hidden grid";
+var editorFillLayoutEditor = "bs-full overflow-hidden [&>.cm-scroller]:bs-full [&>.cm-scroller]:overflow-y-auto";
 var editorHalfViewportOverscrollContent = "after:block after:min-bs-[50dvh] after:pointer-events-none";
 
 // packages/ui/react-ui-editor/src/util.ts
@@ -1553,15 +1553,66 @@ var useComments = (view, id, comments2 = []) => {
   ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/listener.ts
+// packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts
+import { Facet as Facet4, Transaction } from "@codemirror/state";
 import { EditorView as EditorView7 } from "@codemirror/view";
+var cursorLineMarginFacet = Facet4.define({
+  combine: (input) => input[0] ?? 3
+});
+var annotation = "cursorLineMargin";
+var lineAtPos = (s, pos) => s.doc.lineAt(pos).number;
+var cursorLineMargin = EditorView7.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
+  if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
+    return;
+  }
+  const s = state;
+  const { main } = s.selection;
+  const cursorLineMargin2 = s.facet(cursorLineMarginFacet);
+  const rect = view.dom.getBoundingClientRect();
+  const viewportTop = rect.top - view.documentTop;
+  const viewportBottom = rect.bottom - view.documentTop;
+  const mainLine = lineAtPos(s, main.head);
+  const _visTopLine = lineAtPos(s, view.lineBlockAtHeight(viewportTop).from);
+  const botLineBlk = view.lineBlockAtHeight(viewportBottom);
+  const visBotLineDoc = lineAtPos(s, Math.min(botLineBlk.to, s.doc.length));
+  const visBotLine = botLineBlk.bottom >= viewportBottom ? visBotLineDoc : visBotLineDoc + Math.floor((viewportBottom - botLineBlk.bottom) / view.defaultLineHeight);
+  const needsScrollTop = false;
+  const needsScrollBot = mainLine >= visBotLine - cursorLineMargin2;
+  if (needsScrollTop && needsScrollBot) {
+    console.warn("is cursorScrollMargin too large for the editor size?");
+    return;
+  }
+  if (!needsScrollTop && !needsScrollBot) {
+    return;
+  }
+  if (selectionSet) {
+    const { head } = startState.selection.main;
+    const oldMainLine = lineAtPos(startState, head);
+    if (needsScrollTop && oldMainLine < mainLine) {
+      return;
+    }
+    if (needsScrollBot && oldMainLine > mainLine) {
+      return;
+    }
+  }
+  view.dispatch({
+    annotations: Transaction.userEvent.of(annotation),
+    effects: EditorView7.scrollIntoView(s.selection.main.head, {
+      y: needsScrollTop ? "start" : "end",
+      yMargin: view.defaultLineHeight * cursorLineMargin2
+    })
+  });
+});
+
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView8 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView7.focusChangeEffect.of((_, focused) => {
+  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
     onFocus(focused);
     return null;
   }));
-  onChange && extensions.push(EditorView7.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView8.updateListener.of((update2) => {
     onChange(update2.state.doc.toString());
   }));
   return extensions;
@@ -1576,7 +1627,7 @@ import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView8, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
@@ -1770,7 +1821,7 @@ var markdownHighlightStyle = (readonly) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => {
   return [
-    lineWrapping && EditorView8.lineWrapping,
+    lineWrapping && EditorView9.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
     // https://github.com/codemirror/basic-setup
@@ -1823,9 +1874,9 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
 // packages/ui/react-ui-editor/src/extensions/markdown/code.ts
 import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin3, EditorView as EditorView9, Decoration as Decoration4, WidgetType as WidgetType2 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin3, EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var styles4 = EditorView9.baseTheme({
+var styles4 = EditorView10.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -1948,7 +1999,7 @@ var code2 = () => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, EditorSelection } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView10, keymap as keymap5, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView11, keymap as keymap5, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 import { useState, useMemo } from "react";
 var compareFormatting = (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;
@@ -1969,6 +2020,7 @@ var setHeading = (level) => ({ state, dispatch }) => {
   const changes = [];
   let prevBlock = -1;
   for (const range of ranges) {
+    let sawBlock = false;
     syntaxTree2(state).iterate({
       from: range.from,
       to: range.to,
@@ -1976,6 +2028,7 @@ var setHeading = (level) => ({ state, dispatch }) => {
         if (!Object.hasOwn(Textblocks, node.name) || prevBlock === node.from) {
           return;
         }
+        sawBlock = true;
         prevBlock = node.from;
         const blockType = Textblocks[node.name];
         const isHeading = /heading(\d)/.exec(blockType);
@@ -2020,12 +2073,22 @@ var setHeading = (level) => ({ state, dispatch }) => {
         }
       }
     });
+    let line;
+    if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state.doc.lineAt(range.from)).text)) {
+      changes.push({
+        from: line.from,
+        to: line.to,
+        insert: "#".repeat(level) + " "
+      });
+    }
   }
   if (!changes.length) {
     return false;
   }
+  const changeSet = state.changes(changes);
   dispatch(state.update({
-    changes,
+    changes: changeSet,
+    selection: state.selection.map(changeSet, 1),
     userEvent: "format.setHeading",
     scrollIntoView: true
   }));
@@ -2097,10 +2160,16 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
           const closeStart = node.to - size;
           if (markType === type) {
             if (openEnd <= from && closeStart >= from) {
-              startCovered = openEnd === from ? "adjacent" : true;
+              startCovered = !enable && openEnd === skipMarkers(from, node.node, -1, openEnd) ? {
+                from: node.from,
+                to: openEnd
+              } : true;
             }
             if (openEnd <= to && closeStart >= to) {
-              endCovered = closeStart === to ? "adjacent" : true;
+              endCovered = !enable && closeStart === skipMarkers(to, node.node, 1, closeStart) ? {
+                from: closeStart,
+                to: node.to
+              } : true;
             }
           }
           if (markType === type || type === 3 && enable) {
@@ -2149,22 +2218,16 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               });
             }
           } else {
-            if (startCovered === "adjacent") {
-              changes2.push({
-                from: from - marker.length,
-                to: from
-              });
+            if (typeof startCovered === "object") {
+              changes2.push(startCovered);
             } else if (startCovered) {
               changes2.push({
                 from: skipSpaces(rangeStart, state.doc, -1, blockStart),
                 insert: marker
               });
             }
-            if (endCovered === "adjacent") {
-              changes2.push({
-                from: to,
-                to: to + marker.length
-              });
+            if (typeof endCovered === "object") {
+              changes2.push(endCovered);
             } else if (endCovered) {
               changes2.push({
                 from: skipSpaces(rangeEnd, state.doc, 1, blockEnd),
@@ -2175,6 +2238,15 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
         }
       }
     });
+    if (blockStart < 0 && range.empty && enable && !/\S/.test(state.doc.lineAt(range.from).text)) {
+      return {
+        changes: {
+          from: range.head,
+          insert: marker + marker
+        },
+        range: EditorSelection.cursor(range.head + marker.length)
+      };
+    }
     const changeSet = state.changes(changes2.concat(changesAtEnd));
     return {
       changes: changeSet,
@@ -2220,6 +2292,19 @@ var skipSpaces = (pos, doc, dir, limit) => {
   }
   return pos;
 };
+var skipMarkers = (pos, tree, dir, limit) => {
+  for (; ; ) {
+    const next = tree.resolve(pos, dir);
+    if (!IgnoreInline.has(next.name)) {
+      return pos;
+    }
+    const moveTo = dir < 0 ? next.from : next.to;
+    if (limit != null && (dir < 0 ? moveTo < limit : moveTo > limit)) {
+      return pos;
+    }
+    pos = moveTo;
+  }
+};
 var snippets = {
   codeblock: snippet([
     //
@@ -2498,8 +2583,10 @@ var addList = (type) => ({ state, dispatch }) => {
       renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
     }
   }
+  const changeSet = state.changes(changes);
   dispatch(state.update({
-    changes,
+    changes: changeSet,
+    selection: state.selection.map(changeSet, 1),
     userEvent: "format.list.add",
     scrollIntoView: true
   }));
@@ -2593,6 +2680,7 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
   const lines = [];
   let lastBlock = -1;
   for (const { from, to } of state.selection.ranges) {
+    const sawBlock = false;
     syntaxTree2(state).iterate({
       from,
       to,
@@ -2602,9 +2690,9 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
             return false;
           }
           lastBlock = node.from;
-          let line = state.doc.lineAt(node.from);
-          if (line.number > 1) {
-            const prevLine = state.doc.line(line.number - 1);
+          let line2 = state.doc.lineAt(node.from);
+          if (line2.number > 1) {
+            const prevLine = state.doc.line(line2.number - 1);
             if (/^[>\s]*$/.test(prevLine.text)) {
               if (!enable || lines.length && lines[lines.length - 1].number === prevLine.number - 1) {
                 lines.push(prevLine);
@@ -2612,14 +2700,14 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
             }
           }
           for (; ; ) {
-            lines.push(line);
-            if (line.to >= node.to) {
+            lines.push(line2);
+            if (line2.to >= node.to) {
               break;
             }
-            line = state.doc.line(line.number + 1);
+            line2 = state.doc.line(line2.number + 1);
           }
-          if (!enable && line.number < state.doc.lines) {
-            const nextLine = state.doc.line(line.number + 1);
+          if (!enable && line2.number < state.doc.lines) {
+            const nextLine = state.doc.line(line2.number + 1);
             if (/^[>\s]*$/.test(nextLine.text)) {
               lines.push(nextLine);
             }
@@ -2628,6 +2716,10 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
         }
       }
     });
+    let line;
+    if (!sawBlock && enable && from === to && !/\S/.test((line = state.doc.lineAt(from)).text)) {
+      lines.push(line);
+    }
   }
   const changes = [];
   for (const line of lines) {
@@ -2649,8 +2741,10 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
+  const changeSet = state.changes(changes);
   dispatch(state.update({
-    changes,
+    changes: changeSet,
+    selection: state.selection.map(changeSet, 1),
     userEvent: enable ? "format.blockquote.add" : "format.blockquote.remove",
     scrollIntoView: true
   }));
@@ -3024,7 +3118,7 @@ var getFormatting = (state) => {
 };
 var useFormattingState = () => {
   const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView10.updateListener.of((update2) => {
+  const observer = useMemo(() => EditorView11.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
       if (!state || !compareFormatting(state, newState)) {
@@ -3089,8 +3183,8 @@ var heading2 = () => {
 // packages/ui/react-ui-editor/src/extensions/markdown/hr.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
-var styles5 = EditorView11.baseTheme({
+import { Decoration as Decoration7, EditorView as EditorView12, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
+var styles5 = EditorView12.baseTheme({
   "& .cm-hr": {
     // Note that block-level decorations should not have vertical margins,
     borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
@@ -3144,7 +3238,7 @@ var hr = () => {
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration8, EditorView as EditorView12, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration8, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField4.define({
     create: (state) => {
@@ -3171,7 +3265,7 @@ var image = (options = {}) => {
         add: buildDecorations4(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView12.decorations.from(field)
+    provide: (field) => EditorView13.decorations.from(field)
   });
 };
 var buildDecorations4 = (from, to, state) => {
@@ -3353,12 +3447,12 @@ var buildDecorations5 = (view, options) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView13, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration10, EditorView as EditorView14, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField5.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView13.decorations.from(field)
+    provide: (field) => EditorView14.decorations.from(field)
   });
 };
 var update = (state, options) => {
@@ -3451,8 +3545,8 @@ var TableWidget = class extends WidgetType6 {
 // packages/ui/react-ui-editor/src/extensions/markdown/tasklist.ts
 import { syntaxTree as syntaxTree8 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder7 } from "@codemirror/state";
-import { EditorView as EditorView14, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
-var styles6 = EditorView14.baseTheme({
+import { EditorView as EditorView15, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
+var styles6 = EditorView15.baseTheme({
   "& .cm-task": {
     color: getToken("extend.colors.blue.500")
   },
@@ -3575,10 +3669,10 @@ var mention = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
-import { Facet as Facet4 } from "@codemirror/state";
+import { Facet as Facet5 } from "@codemirror/state";
 import { keymap as keymap6 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
-var editorMode = Facet4.define({
+var editorMode = Facet5.define({
   combine: (modes) => modes[0] ?? {}
 });
 var EditorModes = {
@@ -3942,27 +4036,27 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
       selection,
       extensions: [
         // TODO(burdon): Doesn't catch errors in keymap functions.
-        EditorView15.exceptionSink.of((err) => {
+        EditorView16.exceptionSink.of((err) => {
           log3.catch(err, void 0, {
             F: __dxlog_file4,
-            L: 112,
+            L: 113,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Theme.
         // TODO(burdon): Make configurable.
-        EditorView15.baseTheme(defaultTheme),
-        EditorView15.theme(theme ?? {}),
-        EditorView15.darkTheme.of(themeMode === "dark"),
-        EditorView15.editorAttributes.of({
+        EditorView16.baseTheme(defaultTheme),
+        EditorView16.theme(theme ?? {}),
+        EditorView16.darkTheme.of(themeMode === "dark"),
+        EditorView16.editorAttributes.of({
           class: slots.editor?.className ?? ""
         }),
-        EditorView15.contentAttributes.of({
+        EditorView16.contentAttributes.of({
           class: slots.content?.className ?? ""
         }),
         // Focus.
-        EditorView15.updateListener.of((update2) => {
+        EditorView16.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
             if (transaction.isUserEvent("focus.container")) {
               rootRef.current?.focus();
@@ -3970,7 +4064,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
           });
         }),
         // State.
-        EditorView15.editable.of(!readonly),
+        EditorView16.editable.of(!readonly),
         EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
         // NOTE: This must come before user extensions.
@@ -3979,7 +4073,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         ...extensions
       ].filter(isNotFalsy4)
     });
-    const newView = new EditorView15({
+    const newView = new EditorView16({
       state,
       parent: rootRef.current,
       scrollTo,
@@ -4003,6 +4097,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     };
   }, [
     rootRef,
+    extensions,
     model,
     readonly,
     themeMode
@@ -4028,38 +4123,49 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     ...tabsterDOMAttribute
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
+  const extensions = useMemo2(() => [
+    createBasicBundle({
+      themeMode,
+      placeholder: placeholder3,
+      lineWrapping
+    }),
+    ..._extensions ?? []
+  ], [
+    themeMode,
+    placeholder3,
+    lineWrapping,
+    _extensions
+  ]);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
-    extensions: [
-      createBasicBundle({
-        themeMode,
-        placeholder: placeholder3,
-        lineWrapping
-      }),
-      ...extensions
-    ],
+    extensions,
     theme,
     slots: updatedSlots,
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
+  const extensions = useMemo2(() => [
+    createMarkdownExtensions({
+      themeMode,
+      placeholder: placeholder3
+    }),
+    ..._extensions ?? []
+  ], [
+    themeMode,
+    placeholder3,
+    _extensions
+  ]);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
-    extensions: [
-      createMarkdownExtensions({
-        themeMode,
-        placeholder: placeholder3
-      }),
-      ...extensions
-    ],
+    extensions,
     theme,
     slots: updatedSlots,
     ...props
@@ -4289,8 +4395,7 @@ var markdownBlocks = [
   {
     type: "codeblock",
     Icon: CodeBlock,
-    getState: (state) => state.blockType === "codeblock",
-    disabled: (state) => !state.blankLine
+    getState: (state) => state.blockType === "codeblock"
   },
   {
     type: "table",
@@ -4523,7 +4628,7 @@ var useEditorView = (id) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { log as log5 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
@@ -4533,27 +4638,28 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
   const [view, setView] = useState4();
   const parentRef = useRef3(null);
   useEffect3(() => {
+    let view2;
     if (parentRef.current) {
       const state = EditorState3.create({
         doc,
         selection,
         extensions: [
           // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView16.exceptionSink.of((err) => {
+          EditorView17.exceptionSink.of((err) => {
             log5.catch(err, void 0, {
               F: __dxlog_file6,
-              L: 57,
+              L: 60,
               S: void 0,
               C: (f, a) => f(...a)
             });
           }),
           extensions,
-          EditorView16.updateListener.of(() => {
+          EditorView17.updateListener.of(() => {
             onUpdate.current?.();
           })
         ].filter(isNotFalsy5)
       });
-      const view2 = new EditorView16({
+      view2 = new EditorView17({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -4569,10 +4675,11 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
       setView(view2);
     }
     return () => {
-      view?.destroy();
+      view2?.destroy();
     };
   }, [
-    parentRef
+    parentRef,
+    extensions
   ]);
   useEffect3(() => {
     if (view) {
@@ -4610,19 +4717,19 @@ var createDataExtensions = ({ readonly = false } = {}) => {
   return [
     //
     EditorState3.readOnly.of(readonly),
-    EditorView16.editable.of(!readonly)
+    EditorView17.editable.of(!readonly)
   ];
 };
 var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
   return [
     //
-    EditorView16.baseTheme(defaultTheme),
-    theme && EditorView16.theme(theme),
-    EditorView16.darkTheme.of(themeMode === "dark"),
-    EditorView16.editorAttributes.of({
+    EditorView17.baseTheme(defaultTheme),
+    theme && EditorView17.theme(theme),
+    EditorView17.darkTheme.of(themeMode === "dark"),
+    EditorView17.editorAttributes.of({
       class: slots?.editor?.className ?? ""
     }),
-    EditorView16.contentAttributes.of({
+    EditorView17.contentAttributes.of({
       class: slots?.content?.className ?? ""
     })
   ].filter(isNotFalsy5);
@@ -4630,13 +4737,13 @@ var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
 import get4 from "lodash.get";
-import { useState as useState5, useMemo as useMemo2 } from "react";
+import { useState as useState5, useMemo as useMemo3 } from "react";
 import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isAutomergeObject } from "@dxos/react-client/echo";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
-var useTextModel = (props) => useMemo2(() => createModel(props), Object.values(props));
+var useTextModel = (props) => useMemo3(() => createModel(props), Object.values(props));
 var useInMemoryTextModel = ({ id, defaultContent }) => {
   const [content, setContent] = useState5(defaultContent ?? "");
   return {
@@ -4731,6 +4838,8 @@ export {
   createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
+  cursorLineMargin,
+  cursorLineMarginFacet,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,