@dxos/react-ui-editor 0.8.2-staging.4d6ad0f → 0.8.2

package/dist/lib/node-esm/index.mjs

@@ -37,7 +37,7 @@ var translations_default = [
 
 // packages/ui/react-ui-editor/src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView23, keymap as keymap13 } from "@codemirror/view";
+import { EditorView as EditorView24, keymap as keymap13 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
@@ -1460,7 +1460,7 @@ var command = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/command/menu.ts
-import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { EditorView as EditorView7, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 var floatingMenu = (options = {}) => [
   ViewPlugin5.fromClass(class {
     constructor(view) {
@@ -1474,20 +1474,24 @@ var floatingMenu = (options = {}) => [
       icon.setAttribute("icon", options.icon ?? "ph--dots-three-outline--regular");
       const button = document.createElement("button");
       button.appendChild(icon);
-      button.classList.add("grid", "items-center", "justify-center", "w-8", "h-8");
       this.tag = document.createElement("dx-ref-tag");
-      this.tag.classList.add("border-none", "fixed", "p-0");
+      this.tag.classList.add("cm-ref-tag");
       this.tag.appendChild(button);
       container.appendChild(this.tag);
       container.addEventListener("scroll", this.scheduleUpdate.bind(this));
       this.scheduleUpdate();
     }
     update(update2) {
+      this.tag.dataset.focused = update2.view.hasFocus ? "true" : "false";
+      if (!update2.view.hasFocus) {
+        return;
+      }
       if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
         this.tag.style.display = "none";
+        this.tag.classList.add("opacity-10");
       } else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
         this.tag.style.display = "block";
-      } else if (update2.selectionSet || update2.viewportChanged || update2.docChanged || update2.geometryChanged) {
+      } else if (update2.docChanged || update2.focusChanged || update2.geometryChanged || update2.selectionSet || update2.viewportChanged) {
         this.scheduleUpdate();
       }
     }
@@ -1519,6 +1523,25 @@ var floatingMenu = (options = {}) => [
         cancelAnimationFrame(this.rafId);
       }
     }
+  }),
+  EditorView7.theme({
+    ".cm-ref-tag": {
+      position: "fixed",
+      padding: "0",
+      border: "none",
+      transition: "opacity 0.3s ease-in-out",
+      opacity: 0.1
+    },
+    ".cm-ref-tag button": {
+      display: "grid",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "2rem",
+      height: "2rem"
+    },
+    '.cm-ref-tag[data-focused="true"]': {
+      opacity: 1
+    }
   })
 ];
 
@@ -1608,7 +1631,7 @@ var matchCompletion = (completion, word) => {
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
 import { StateEffect as StateEffect3, StateField as StateField3 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap6, Decoration as Decoration5, EditorView as EditorView8, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { hoverTooltip, keymap as keymap6, Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce as debounce2 } from "@dxos/async";
@@ -1617,7 +1640,7 @@ import { isNonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/selection.ts
 import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView7, keymap as keymap5 } from "@codemirror/view";
+import { EditorView as EditorView8, keymap as keymap5 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy } from "@dxos/util";
@@ -1628,7 +1651,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView7.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -1670,7 +1693,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView7.updateListener.of(({ view, transactions }) => {
+    EditorView8.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -1751,7 +1774,7 @@ var commentsState = StateField3.define({
     return value;
   }
 });
-var styles2 = EditorView8.theme({
+var styles2 = EditorView9.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -1771,7 +1794,7 @@ var createCommentMark = (id, isCurrent) => Decoration5.mark({
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView8.decorations.compute([
+var commentsDecorations = EditorView9.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1794,7 +1817,7 @@ var commentsDecorations = EditorView8.decorations.compute([
   return Decoration5.set(decorations2);
 });
 var commentClickedEffect = StateEffect3.define();
-var handleCommentClick = EditorView8.domEventHandlers({
+var handleCommentClick = EditorView9.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -1833,7 +1856,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView8.domEventHandlers({
+    EditorView9.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -1855,7 +1878,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView8.updateListener.of((update2) => {
+    EditorView9.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -1997,7 +2020,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView8.updateListener.of(({ view, state, changes }) => {
+    EditorView9.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2029,7 +2052,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView8.updateListener.of(({ view, state }) => {
+    EditorView9.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2083,7 +2106,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView8.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2147,8 +2170,8 @@ var debugNodeLogger = (log9 = console.log) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView9 } from "@codemirror/view";
-var styles3 = EditorView9.theme({
+import { dropCursor, EditorView as EditorView10 } from "@codemirror/view";
+var styles3 = EditorView10.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2162,7 +2185,7 @@ var dropFile = (options = {}) => {
   return [
     styles3,
     dropCursor(),
-    EditorView9.domEventHandlers({
+    EditorView10.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2189,7 +2212,7 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { EditorView as EditorView11, ViewPlugin as ViewPlugin8, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView12, ViewPlugin as ViewPlugin8, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
@@ -2198,7 +2221,7 @@ import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/focus.ts
 import { StateEffect as StateEffect4, StateField as StateField5 } from "@codemirror/state";
-import { EditorView as EditorView10 } from "@codemirror/view";
+import { EditorView as EditorView11 } from "@codemirror/view";
 var focusEffect = StateEffect4.define();
 var focusField = StateField5.define({
   create: () => false,
@@ -2213,7 +2236,7 @@ var focusField = StateField5.define({
 });
 var focus = [
   focusField,
-  EditorView10.domEventHandlers({
+  EditorView11.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2492,7 +2515,7 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView11.exceptionSink.of((err) => {
+    EditorView12.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
         L: 98,
@@ -2507,12 +2530,12 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView11.editable.of(props.editable),
+    props.editable !== void 0 && EditorView12.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView11.lineWrapping,
+    props.lineWrapping && EditorView12.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
@@ -2549,14 +2572,14 @@ var defaultThemeSlots = {
 var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView11.darkTheme.of(themeMode === "dark"),
-    EditorView11.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
+    EditorView12.darkTheme.of(themeMode === "dark"),
+    EditorView12.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
     _syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
-    slots.editor?.className && EditorView11.editorAttributes.of({
+    slots.editor?.className && EditorView12.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView11.contentAttributes.of({
+    slots.content?.className && EditorView12.contentAttributes.of({
       class: slots.content.className
     }),
     slots.scroll?.className && ViewPlugin8.fromClass(class {
@@ -2590,7 +2613,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView12 } from "@codemirror/view";
+import { EditorView as EditorView13 } from "@codemirror/view";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
@@ -2614,7 +2637,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView12.theme({
+  EditorView13.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2671,14 +2694,14 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView13 } from "@codemirror/view";
+import { EditorView as EditorView14 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView13.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView14.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView13.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView14.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -2688,7 +2711,7 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
-import { EditorView as EditorView14, keymap as keymap8 } from "@codemirror/view";
+import { EditorView as EditorView15, keymap as keymap8 } from "@codemirror/view";
 import { useMemo as useMemo2 } 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 = /* @__PURE__ */ function(Inline2) {
@@ -3777,7 +3800,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo2(() => EditorView14.updateListener.of((update2) => {
+  return useMemo2(() => EditorView15.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4090,7 +4113,7 @@ var convertTreeToJson = (state) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect5 } from "@codemirror/state";
-import { EditorView as EditorView18, Decoration as Decoration8, WidgetType as WidgetType5, ViewPlugin as ViewPlugin10 } from "@codemirror/view";
+import { EditorView as EditorView19, Decoration as Decoration8, WidgetType as WidgetType5, ViewPlugin as ViewPlugin10 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
@@ -4241,7 +4264,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 Decoration6, EditorView as EditorView15, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration6, EditorView as EditorView16, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
     StateField7.define({
@@ -4269,7 +4292,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView15.decorations.from(field)
+      provide: (field) => EditorView16.decorations.from(field)
     })
   ];
 };
@@ -4328,10 +4351,10 @@ var ImageWidget = class extends WidgetType3 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView16.theme({
+var formattingStyles = EditorView17.theme({
   /**
   * Horizontal rule.
   */
@@ -4453,12 +4476,12 @@ var formattingStyles = EditorView16.theme({
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration7, EditorView as EditorView18, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField8.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView17.decorations.from(field)
+    provide: (field) => EditorView18.decorations.from(field)
   });
 };
 var update = (state, _options) => {
@@ -4991,9 +5014,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView18.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
-        EditorView18.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
-        EditorView18.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration8.none)
+        EditorView19.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
+        EditorView19.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
+        EditorView19.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration8.none)
       ]
     }),
     image(),
@@ -5129,11 +5152,6 @@ var InputModeExtensions = {
   ]
 };
 
-// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
-import { Prec as Prec2 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView19, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-
 // packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
 import { indentMore } from "@codemirror/commands";
 import { getIndentUnit } from "@codemirror/language";
@@ -5564,9 +5582,26 @@ var moveItemUp = (view) => {
   }
   return true;
 };
+var deleteItem = (view) => {
+  const tree = view.state.facet(treeFacet);
+  const pos = getSelection(view.state).from;
+  const current = tree.find(pos);
+  if (current) {
+    view.dispatch({
+      selection: EditorSelection3.cursor(current.lineRange.from),
+      changes: [
+        {
+          from: current.lineRange.from,
+          to: Math.min(current.lineRange.to + 1, view.state.doc.length)
+        }
+      ]
+    });
+  }
+  return true;
+};
 var toggleTask = (view) => {
-  const pos = getSelection(view.state)?.from;
   const tree = view.state.facet(treeFacet);
+  const pos = getSelection(view.state)?.from;
   const current = tree.find(pos);
   if (current) {
     const type = current.type === "task" ? "bullet" : "task";
@@ -5671,14 +5706,28 @@ var commands = () => keymap11.of([
     run: moveItemUp
   },
   //
+  // Delete.
+  //
+  {
+    key: "Mod-Backspace",
+    preventDefault: true,
+    run: deleteItem
+  },
+  //
   // Misc.
   //
   {
     key: "Alt-t",
+    preventDefault: true,
     run: toggleTask
   }
 ]);
 
+// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
+import { Prec as Prec2 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView20, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+
 // packages/ui/react-ui-editor/src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin11 } from "@codemirror/view";
@@ -5772,6 +5821,12 @@ var editor = () => [
       const line = tr.startState.doc.lineAt(fromA);
       const match = line.text.match(LIST_ITEM_REGEX);
       if (match) {
+        const startTree = tr.startState.facet(treeFacet);
+        const startItem = startTree.find(tr.startState.selection.main.from);
+        const deleteLine = fromA === startItem?.lineRange.from && toA === startItem?.lineRange.to + 1;
+        if (deleteLine) {
+          return;
+        }
         const currentItem = tree.find(tr.state.selection.main.from);
         if (!currentItem?.contentRange) {
           cancel = true;
@@ -5829,7 +5884,7 @@ var editor = () => [
           }
         }, {
           F: __dxlog_file12,
-          L: 160,
+          L: 164,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -5840,7 +5895,7 @@ var editor = () => [
         changes
       }, {
         F: __dxlog_file12,
-        L: 171,
+        L: 175,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5852,7 +5907,7 @@ var editor = () => [
     } else if (cancel) {
       log7("cancel", void 0, {
         F: __dxlog_file12,
-        L: 174,
+        L: 178,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5863,7 +5918,7 @@ var editor = () => [
 ];
 
 // packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
-var outliner = () => [
+var outliner = (options = {}) => [
   // Commands.
   Prec2.highest(commands()),
   // Selection.
@@ -5875,17 +5930,17 @@ var outliner = () => [
   // Floating menu.
   floatingMenu(),
   // Line decorations.
-  decorations(),
+  decorations(options),
   // Default markdown decorations.
   decorateMarkdown({
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView19.contentAttributes.of({
+  EditorView20.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
-var decorations = () => [
+var decorations = (options) => [
   ViewPlugin12.fromClass(class {
     constructor(view) {
       this.decorations = Decoration9.none;
@@ -5921,7 +5976,7 @@ var decorations = () => [
     decorations: (v) => v.decorations
   }),
   // Theme.
-  EditorView19.theme({
+  EditorView20.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -5936,29 +5991,29 @@ var decorations = () => [
       borderTopLeftRadius: "4px",
       borderTopRightRadius: "4px",
       paddingTop: "4px",
-      marginTop: "8px"
+      marginTop: "2px"
     },
     ".cm-list-item-end": {
       borderBottomWidth: "1px",
       borderBottomLeftRadius: "4px",
       borderBottomRightRadius: "4px",
       paddingBottom: "4px",
-      marginBottom: "8px"
+      marginBottom: "2px"
     },
     ".cm-list-item-selected": {
-      borderColor: "var(--dx-separator)"
+      borderColor: options.showSelected ? "var(--dx-separator)" : void 0
     },
     ".cm-list-item-focused": {
       borderColor: "var(--dx-accentFocusIndicator)"
     }
-  })
+  }))
 ];
 
 // packages/ui/react-ui-editor/src/extensions/preview/preview.ts
 import "@dxos/lit-ui/dx-ref-tag.pcss";
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField10 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView20, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration10, EditorView as EditorView21, WidgetType as WidgetType6 } from "@codemirror/view";
 var preview = (options = {}) => {
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
@@ -5967,11 +6022,11 @@ var preview = (options = {}) => {
       create: (state) => buildDecorations3(state, options),
       update: (_, tr) => buildDecorations3(tr.state, options),
       provide: (field) => [
-        EditorView20.decorations.from(field),
-        EditorView20.atomicRanges.of((view) => view.state.field(field))
+        EditorView21.decorations.from(field),
+        EditorView21.atomicRanges.of((view) => view.state.field(field))
       ]
     }),
-    EditorView20.theme({
+    EditorView21.theme({
       ".cm-preview-block": {
         marginLeft: "-1rem",
         marginRight: "-1rem",
@@ -6464,7 +6519,7 @@ var createViewMode = (state, onViewModeChange) => {
 };
 
 // packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView21 } from "@codemirror/view";
+import { EditorView as EditorView22 } from "@codemirror/view";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
 var editorSlots = {
@@ -6475,12 +6530,12 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = EditorView21.theme({
+var editorGutter = EditorView22.theme({
   ".cm-gutters": {
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView21.theme({
+var editorMonospace = EditorView22.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
@@ -6732,7 +6787,7 @@ var RefDropdownMenu = {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView22 } from "@codemirror/view";
+import { EditorView as EditorView23 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
 import { log as log8 } from "@dxos/log";
@@ -6776,7 +6831,7 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          EditorView22.exceptionSink.of((err) => {
+          EditorView23.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
               F: __dxlog_file13,
               L: 98,
@@ -6786,10 +6841,10 @@ var useTextEditor = (props = {}, deps = []) => {
           })
         ].filter(isNotFalsy4)
       });
-      view2 = new EditorView22({
+      view2 = new EditorView23({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? EditorView22.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? EditorView23.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -6888,7 +6943,7 @@ export {
   EditorInputModes,
   EditorState4 as EditorState,
   EditorToolbar,
-  EditorView23 as EditorView,
+  EditorView24 as EditorView,
   EditorViewMode,
   EditorViewModes,
   Inline,
@@ -6917,6 +6972,7 @@ export {
   closeEffect,
   command,
   commandKeyBindings,
+  commands,
   commentClickedEffect,
   comments,
   commentsState,
@@ -6939,6 +6995,7 @@ export {
   debugTree,
   decorateMarkdown,
   defaultOptions,
+  deleteItem,
   documentId,
   dropFile,
   editorGutter,
@@ -6958,6 +7015,8 @@ export {
   getListItemContent,
   getRange,
   image,
+  indentItemLess,
+  indentItemMore,
   insertTable,
   itemToJSON,
   keymap13 as keymap,
@@ -6970,6 +7029,8 @@ export {
   markdownTagsExtensions,
   matchCompletion,
   mention,
+  moveItemDown,
+  moveItemUp,
   openCommand,
   openEffect,
   outliner,
@@ -7006,6 +7067,7 @@ export {
   toggleStrikethrough,
   toggleStrong,
   toggleStyle,
+  toggleTask,
   translations_default as translations,
   traverse,
   treeFacet,