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

package/dist/lib/node/index.cjs

@@ -62,6 +62,7 @@ __export(node_exports, {
   closeEffect: () => closeEffect,
   command: () => command,
   commandKeyBindings: () => commandKeyBindings,
+  commands: () => commands,
   commentClickedEffect: () => commentClickedEffect,
   comments: () => comments,
   commentsState: () => commentsState,
@@ -84,6 +85,7 @@ __export(node_exports, {
   debugTree: () => debugTree,
   decorateMarkdown: () => decorateMarkdown,
   defaultOptions: () => defaultOptions,
+  deleteItem: () => deleteItem,
   documentId: () => documentId,
   dropFile: () => dropFile,
   editorGutter: () => editorGutter,
@@ -103,6 +105,8 @@ __export(node_exports, {
   getListItemContent: () => getListItemContent,
   getRange: () => getRange,
   image: () => image,
+  indentItemLess: () => indentItemLess,
+  indentItemMore: () => indentItemMore,
   insertTable: () => insertTable,
   itemToJSON: () => itemToJSON,
   keymap: () => import_view.keymap,
@@ -115,6 +119,8 @@ __export(node_exports, {
   markdownTagsExtensions: () => markdownTagsExtensions,
   matchCompletion: () => matchCompletion,
   mention: () => mention,
+  moveItemDown: () => moveItemDown,
+  moveItemUp: () => moveItemUp,
   openCommand: () => openCommand,
   openEffect: () => openEffect,
   outliner: () => outliner,
@@ -151,6 +157,7 @@ __export(node_exports, {
   toggleStrikethrough: () => toggleStrikethrough,
   toggleStrong: () => toggleStrong,
   toggleStyle: () => toggleStyle,
+  toggleTask: () => toggleTask,
   translations: () => translations_default,
   traverse: () => traverse,
   treeFacet: () => treeFacet,
@@ -303,18 +310,18 @@ var import_view27 = require("@codemirror/view");
 var import_codemirror_vim = require("@replit/codemirror-vim");
 var import_codemirror_vscode_keymap = require("@replit/codemirror-vscode-keymap");
 var import_effect = require("effect");
-var import_state23 = require("@codemirror/state");
-var import_view28 = require("@codemirror/view");
-var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_commands4 = require("@codemirror/commands");
 var import_language13 = require("@codemirror/language");
+var import_state23 = require("@codemirror/state");
+var import_view28 = require("@codemirror/view");
 var import_state24 = require("@codemirror/state");
-var import_view29 = require("@codemirror/view");
-var import_state25 = require("@codemirror/state");
 var import_language14 = require("@codemirror/language");
+var import_state25 = require("@codemirror/state");
 var import_state26 = require("@codemirror/state");
-var import_state27 = require("@codemirror/state");
 var import_invariant5 = require("@dxos/invariant");
+var import_state27 = require("@codemirror/state");
+var import_view29 = require("@codemirror/view");
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_state28 = require("@codemirror/state");
 var import_view30 = require("@codemirror/view");
 var import_log7 = require("@dxos/log");
@@ -1707,20 +1714,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();
       }
     }
@@ -1752,6 +1763,25 @@ var floatingMenu = (options = {}) => [
         cancelAnimationFrame(this.rafId);
       }
     }
+  }),
+  import_view10.EditorView.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
+    }
   })
 ];
 var typeahead = ({ onComplete } = {}) => {
@@ -5344,7 +5374,7 @@ var format = (value) => JSON.stringify(value, (key, value2) => {
   }
   return value2;
 }).replaceAll('"', "");
-var treeFacet = import_state27.Facet.define({
+var treeFacet = import_state26.Facet.define({
   combine: (values) => values[0]
 });
 var outlinerTree = (options = {}) => {
@@ -5493,7 +5523,7 @@ var outlinerTree = (options = {}) => {
     return tree;
   };
   return [
-    import_state26.StateField.define({
+    import_state25.StateField.define({
       create: (state) => {
         return buildTree(state);
       },
@@ -5509,10 +5539,10 @@ var outlinerTree = (options = {}) => {
 };
 var getSelection = (state) => state.selection.main;
 var selectionEquals = (a, b) => a.length === b.length && a.every((i) => b.includes(i));
-var selectionFacet = import_state25.Facet.define({
+var selectionFacet = import_state24.Facet.define({
   combine: (values) => values[0]
 });
-var selectionCompartment = new import_state25.Compartment();
+var selectionCompartment = new import_state24.Compartment();
 var selectNone = (view) => {
   view.dispatch({
     effects: selectionCompartment.reconfigure(selectionFacet.of([]))
@@ -5593,7 +5623,7 @@ var moveItemDown = (view) => {
     ];
     view.dispatch({
       changes,
-      selection: import_state24.EditorSelection.cursor(pos + nextContent.length + 1),
+      selection: import_state23.EditorSelection.cursor(pos + nextContent.length + 1),
       scrollIntoView: true
     });
   }
@@ -5621,15 +5651,32 @@ var moveItemUp = (view) => {
     ];
     view.dispatch({
       changes,
-      selection: import_state24.EditorSelection.cursor(pos - prevContent.length - 1),
+      selection: import_state23.EditorSelection.cursor(pos - prevContent.length - 1),
       scrollIntoView: true
     });
   }
   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: import_state23.EditorSelection.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";
@@ -5646,7 +5693,7 @@ var toggleTask = (view) => {
   }
   return true;
 };
-var commands = () => import_view29.keymap.of([
+var commands = () => import_view28.keymap.of([
   //
   // Indentation.
   //
@@ -5672,7 +5719,7 @@ var commands = () => import_view29.keymap.of([
             insert
           }
         ],
-        selection: import_state24.EditorSelection.cursor(pos + insert.length)
+        selection: import_state23.EditorSelection.cursor(pos + insert.length)
       });
       return true;
     }
@@ -5690,7 +5737,7 @@ var commands = () => import_view29.keymap.of([
         const next = tree.next(item);
         if (next) {
           view.dispatch({
-            selection: import_state24.EditorSelection.cursor(next.contentRange.from)
+            selection: import_state23.EditorSelection.cursor(next.contentRange.from)
           });
           return true;
         }
@@ -5734,10 +5781,19 @@ var commands = () => import_view29.keymap.of([
     run: moveItemUp
   },
   //
+  // Delete.
+  //
+  {
+    key: "Mod-Backspace",
+    preventDefault: true,
+    run: deleteItem
+  },
+  //
   // Misc.
   //
   {
     key: "Alt-t",
+    preventDefault: true,
     run: toggleTask
   }
 ]);
@@ -5830,6 +5886,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;
@@ -5887,7 +5949,7 @@ var editor = () => [
           }
         }, {
           F: __dxlog_file12,
-          L: 160,
+          L: 164,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -5898,7 +5960,7 @@ var editor = () => [
         changes
       }, {
         F: __dxlog_file12,
-        L: 171,
+        L: 175,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5910,7 +5972,7 @@ var editor = () => [
     } else if (cancel) {
       (0, import_log7.log)("cancel", void 0, {
         F: __dxlog_file12,
-        L: 174,
+        L: 178,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5919,9 +5981,9 @@ var editor = () => [
     return tr;
   })
 ];
-var outliner = () => [
+var outliner = (options = {}) => [
   // Commands.
-  import_state23.Prec.highest(commands()),
+  import_state27.Prec.highest(commands()),
   // Selection.
   selectionCompartment.of(selectionFacet.of([])),
   // State.
@@ -5931,20 +5993,20 @@ var outliner = () => [
   // Floating menu.
   floatingMenu(),
   // Line decorations.
-  decorations(),
+  decorations(options),
   // Default markdown decorations.
   decorateMarkdown({
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  import_view28.EditorView.contentAttributes.of({
+  import_view29.EditorView.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
-var decorations = () => [
-  import_view28.ViewPlugin.fromClass(class {
+var decorations = (options) => [
+  import_view29.ViewPlugin.fromClass(class {
     constructor(view) {
-      this.decorations = import_view28.Decoration.none;
+      this.decorations = import_view29.Decoration.none;
       this.updateDecorations(view.state, view);
     }
     update(update2) {
@@ -5966,18 +6028,18 @@ var decorations = () => [
           const lineFrom = doc.lineAt(item.contentRange.from);
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
-          decorations2.push(import_view28.Decoration.line({
+          decorations2.push(import_view29.Decoration.line({
             class: (0, import_react_ui_theme7.mx)("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
           }).range(line.from, line.from));
         }
       }
-      this.decorations = import_view28.Decoration.set(decorations2);
+      this.decorations = import_view29.Decoration.set(decorations2);
     }
   }, {
     decorations: (v) => v.decorations
   }),
   // Theme.
-  import_view28.EditorView.theme({
+  import_view29.EditorView.theme(Object.assign({
     ".cm-list-item": {
       borderLeftWidth: "1px",
       borderRightWidth: "1px",
@@ -5992,22 +6054,22 @@ 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)"
     }
-  })
+  }))
 ];
 var preview = (options = {}) => {
   return [
@@ -6922,6 +6984,7 @@ var useTextEditor = (props = {}, deps = []) => {
   closeEffect,
   command,
   commandKeyBindings,
+  commands,
   commentClickedEffect,
   comments,
   commentsState,
@@ -6944,6 +7007,7 @@ var useTextEditor = (props = {}, deps = []) => {
   debugTree,
   decorateMarkdown,
   defaultOptions,
+  deleteItem,
   documentId,
   dropFile,
   editorGutter,
@@ -6963,6 +7027,8 @@ var useTextEditor = (props = {}, deps = []) => {
   getListItemContent,
   getRange,
   image,
+  indentItemLess,
+  indentItemMore,
   insertTable,
   itemToJSON,
   keymap,
@@ -6975,6 +7041,8 @@ var useTextEditor = (props = {}, deps = []) => {
   markdownTagsExtensions,
   matchCompletion,
   mention,
+  moveItemDown,
+  moveItemUp,
   openCommand,
   openEffect,
   outliner,
@@ -7011,6 +7079,7 @@ var useTextEditor = (props = {}, deps = []) => {
   toggleStrikethrough,
   toggleStrong,
   toggleStyle,
+  toggleTask,
   translations,
   traverse,
   treeFacet,