@dxos/react-ui-editor 0.8.1-staging.391c573 → 0.8.1-staging.5be625a

package/dist/lib/node/index.cjs

@@ -64,6 +64,7 @@ __export(node_exports, {
   createDataExtensions: () => createDataExtensions,
   createEditorAction: () => createEditorAction,
   createEditorActionGroup: () => createEditorActionGroup,
+  createEditorStateStore: () => createEditorStateStore,
   createEditorStateTransaction: () => createEditorStateTransaction,
   createElement: () => createElement,
   createExternalCommentSync: () => createExternalCommentSync,
@@ -207,6 +208,8 @@ var import_util2 = require("@dxos/util");
 var import_state11 = require("@codemirror/state");
 var import_view12 = require("@codemirror/view");
 var import_async4 = require("@dxos/async");
+var import_invariant3 = require("@dxos/invariant");
+var import_util3 = require("@dxos/util");
 var import_language = require("@codemirror/language");
 var import_state12 = require("@codemirror/state");
 var import_view13 = require("@codemirror/view");
@@ -221,13 +224,12 @@ var import_lodash4 = __toESM(require("lodash.defaultsdeep"));
 var import_lodash5 = __toESM(require("lodash.merge"));
 var import_display_name = require("@dxos/display-name");
 var import_log5 = require("@dxos/log");
-var import_util3 = require("@dxos/util");
+var import_util4 = require("@dxos/util");
 var import_state14 = require("@codemirror/state");
 var import_view15 = require("@codemirror/view");
 var import_language3 = require("@codemirror/language");
 var import_view16 = require("@codemirror/view");
 var import_react5 = __toESM(require("react"));
-var import_async5 = require("@dxos/async");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_view17 = require("@codemirror/view");
 var import_autocomplete3 = require("@codemirror/autocomplete");
@@ -251,7 +253,7 @@ var import_state16 = require("@codemirror/state");
 var import_language8 = require("@codemirror/language");
 var import_state17 = require("@codemirror/state");
 var import_view20 = require("@codemirror/view");
-var import_invariant3 = require("@dxos/invariant");
+var import_invariant4 = require("@dxos/invariant");
 var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_language9 = require("@codemirror/language");
 var import_state18 = require("@codemirror/state");
@@ -279,7 +281,7 @@ var import_view28 = require("@codemirror/view");
 var import_react_tabster = require("@fluentui/react-tabster");
 var import_react8 = require("react");
 var import_log7 = require("@dxos/log");
-var import_util4 = require("@dxos/util");
+var import_util5 = require("@dxos/util");
 var translationKey = "react-ui-editor";
 var translations_default = [
   {
@@ -562,7 +564,7 @@ var createViewMode = (state) => {
     ]
   };
 };
-var stackItemContentEditorClassNames = (role) => (0, import_react_ui_theme2.mx)("dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface", role === "article" ? "min-bs-0" : "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24");
+var stackItemContentEditorClassNames = (role) => (0, import_react_ui_theme2.mx)("dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
 var stackItemContentToolbarClassNames = (role) => (0, import_react_ui_theme2.mx)("attention-surface is-full border-be !border-separator", role === "section" && "sticky block-start-0 z-[1] -mbe-px min-is-0");
 var createToolbar = ({ state, customActions, ...features }) => {
   const nodes = [];
@@ -754,6 +756,7 @@ var defaultTheme = {
   ".cm-link": {
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
+    textDecorationColor: "var(--dx-separator)",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem"
   },
@@ -966,7 +969,7 @@ var logChanges = (trs) => {
     return changes2;
   }).filter(Boolean);
   if (changes.length) {
-    import_log.log.info("changes", {
+    (0, import_log.log)("changes", {
       changes
     }, {
       F: __dxlog_file,
@@ -2185,6 +2188,7 @@ var command = (options) => {
     })
   ];
 };
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
 var documentId = singleValueFacet();
 var stateRestoreAnnotation = "dxos.org/cm/state-restore";
 var createEditorStateTransaction = ({ scrollTo, selection }) => {
@@ -2197,10 +2201,34 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
     annotations: import_state11.Transaction.userEvent.of(stateRestoreAnnotation)
   };
 };
-var selectionState = (state = {}) => {
-  const setState = (id, selectionState2) => {
-    state[id] = selectionState2;
-  };
+var createEditorStateStore = (keyPrefix) => ({
+  getState: (id) => {
+    (0, import_invariant3.invariant)(id, void 0, {
+      F: __dxlog_file6,
+      L: 47,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    const state = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state ? JSON.parse(state) : void 0;
+  },
+  setState: (id, state) => {
+    (0, import_invariant3.invariant)(id, void 0, {
+      F: __dxlog_file6,
+      L: 53,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
+  }
+});
+var selectionState = ({ getState, setState } = {}) => {
   const setStateDebounced = (0, import_async4.debounce)(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
@@ -2214,37 +2242,39 @@ var selectionState = (state = {}) => {
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
       }
-      const { scrollTop } = view.scrollDOM;
-      const pos = view.posAtCoords({
-        x: 0,
-        y: scrollTop
-      });
-      if (pos !== null) {
-        const { anchor, head } = view.state.selection.main;
-        setStateDebounced(id, {
-          scrollTo: pos,
-          selection: {
-            anchor,
-            head
-          }
+      if (setState) {
+        const { scrollTop } = view.scrollDOM;
+        const pos = view.posAtCoords({
+          x: 0,
+          y: scrollTop
         });
+        if (pos !== null) {
+          const { anchor, head } = view.state.selection.main;
+          setStateDebounced(id, {
+            scrollTo: pos,
+            selection: {
+              anchor,
+              head
+            }
+          });
+        }
       }
     }),
-    import_view12.keymap.of([
+    getState && import_view12.keymap.of([
       {
         key: "ctrl-r",
         run: (view) => {
-          const selection = state[view.state.facet(documentId)];
-          if (selection) {
-            view.dispatch(createEditorStateTransaction(selection));
+          const state = getState(view.state.facet(documentId));
+          if (state) {
+            view.dispatch(createEditorStateTransaction(state));
           }
           return true;
         }
       }
     ])
-  ];
+  ].filter(import_util3.isNotFalsy);
 };
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var setComments = import_state10.StateEffect.define();
 var setSelection = import_state10.StateEffect.define();
 var setCommentState = import_state10.StateEffect.define();
@@ -2314,7 +2344,7 @@ var commentsDecorations = import_view11.EditorView.decorations.compute([
     const range = comment.range;
     if (!range) {
       import_log4.log.warn("Invalid range:", range, {
-        F: __dxlog_file6,
+        F: __dxlog_file7,
         L: 144,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2773,7 +2803,7 @@ var focus = [
     }
   })
 ];
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = import_state13.EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
@@ -2799,8 +2829,8 @@ var createBasicExtensions = (_props) => {
     // NOTE: Doesn't catch errors in keymap functions.
     import_view14.EditorView.exceptionSink.of((err) => {
       import_log5.log.catch(err, void 0, {
-        F: __dxlog_file7,
-        L: 96,
+        F: __dxlog_file8,
+        L: 97,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2845,8 +2875,8 @@ var createBasicExtensions = (_props) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(import_util3.isNotFalsy))
-  ].filter(import_util3.isNotFalsy);
+    ].filter(import_util4.isNotFalsy))
+  ].filter(import_util4.isNotFalsy);
 };
 var defaultThemeSlots = {
   editor: {
@@ -2866,7 +2896,7 @@ var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _
     slots.content?.className && import_view14.EditorView.contentAttributes.of({
       class: slots.content.className
     })
-  ].filter(import_util3.isNotFalsy);
+  ].filter(import_util4.isNotFalsy);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
   const extensions = [];
@@ -2875,7 +2905,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   }
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
-    const hue = identity?.profile?.data?.hue ?? (0, import_util3.hexToHue)(peerId ?? "0");
+    const hue = identity?.profile?.data?.hue ?? (0, import_util4.hexToHue)(peerId ?? "0");
     extensions.push(awareness(new SpaceAwarenessProvider({
       space,
       channel: `awareness.${id}`,
@@ -2889,76 +2919,38 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   }
   return extensions;
 };
-var folding = (state = {}) => {
-  const setState = (id, foldState) => {
-    state[id] = foldState;
-  };
-  const setStateDebounced = (0, import_async5.debounce)(setState, 1e3);
-  let initialized = false;
-  return [
-    (0, import_language3.codeFolding)({
-      placeholderDOM: () => {
-        return document.createElement("span");
-      }
-    }),
-    (0, import_language3.foldGutter)({
-      markerDOM: (open) => {
-        const el = createElement("div", {
-          className: "flex h-full items-center"
-        });
-        return renderRoot(el, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Icon, {
-          icon: "ph--caret-right--regular",
-          size: 3,
-          classNames: [
-            "mx-3 cursor-pointer",
-            open && "rotate-90"
-          ]
-        }));
-      }
-    }),
-    import_view16.EditorView.theme({
-      ".cm-foldGutter": {
-        opacity: 0.3,
-        transition: "opacity 0.3s",
-        width: "32px"
-      },
-      ".cm-foldGutter:hover": {
-        opacity: 1
-      }
-    }),
-    import_view16.EditorView.updateListener.of(({ view }) => {
-      const id = view.state.facet(documentId);
-      if (!id) {
-        return;
-      }
-      if (!initialized) {
-        initialized = true;
-        const foldState2 = state[id];
-        if (foldState2?.foldedRanges?.length) {
-          view.dispatch({
-            effects: foldState2.foldedRanges.map((range) => import_language3.foldEffect.of({
-              from: range.from,
-              to: range.to
-            }))
-          });
-        }
-        return;
-      }
-      const decorations = (0, import_language3.foldedRanges)(view.state);
-      const ranges = [];
-      decorations.between(0, view.state.doc.length, (from, to) => {
-        ranges.push({
-          from,
-          to
-        });
+var folding = (_props = {}) => [
+  (0, import_language3.codeFolding)({
+    placeholderDOM: () => {
+      return document.createElement("span");
+    }
+  }),
+  (0, import_language3.foldGutter)({
+    markerDOM: (open) => {
+      const el = createElement("div", {
+        className: "flex h-full items-center"
       });
-      const foldState = {
-        foldedRanges: ranges
-      };
-      setStateDebounced?.(id, foldState);
-    })
-  ];
-};
+      return renderRoot(el, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Icon, {
+        icon: "ph--caret-right--regular",
+        size: 3,
+        classNames: [
+          "mx-3 cursor-pointer",
+          open && "rotate-90"
+        ]
+      }));
+    }
+  }),
+  import_view16.EditorView.theme({
+    ".cm-foldGutter": {
+      opacity: 0.3,
+      transition: "opacity 0.3s",
+      width: "32px"
+    },
+    ".cm-foldGutter:hover": {
+      opacity: 1
+    }
+  })
+];
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
   onFocus && extensions.push(import_view17.EditorView.focusChangeEffect.of((_, focusing) => {
@@ -4779,7 +4771,7 @@ var TableWidget = class extends import_view24.WidgetType {
     return !/^mouse/.test(e.type);
   }
 };
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -4912,8 +4904,8 @@ var buildDecorations2 = (view, options, focus2) => {
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    (0, import_invariant3.invariant)(level > 0, void 0, {
-      F: __dxlog_file8,
+    (0, import_invariant4.invariant)(level > 0, void 0, {
+      F: __dxlog_file9,
       L: 178,
       S: void 0,
       A: [
@@ -4951,8 +4943,8 @@ var buildDecorations2 = (view, options, focus2) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    (0, import_invariant3.invariant)(listLevels.length, void 0, {
-      F: __dxlog_file8,
+    (0, import_invariant4.invariant)(listLevels.length, void 0, {
+      F: __dxlog_file9,
       L: 200,
       S: void 0,
       A: [
@@ -5266,7 +5258,7 @@ var linkTooltip = (render) => {
     };
   });
 };
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ debug, onSearch }) => {
   return (0, import_autocomplete5.autocompletion)({
     // TODO(burdon): Not working.
@@ -5281,7 +5273,7 @@ var mention = ({ debug, onSearch }) => {
         import_log6.log.info("completion context", {
           context
         }, {
-          F: __dxlog_file9,
+          F: __dxlog_file10,
           L: 27,
           S: void 0,
           C: (f, a) => f(...a)
@@ -5399,10 +5391,10 @@ var useActionHandler = (view) => {
     view
   ]);
 };
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var __dxlog_file11 = "/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 } = (0, import_react8.useMemo)(() => (0, import_util4.getProviderValue)(props), deps ?? []);
+  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (0, import_react8.useMemo)(() => (0, import_util5.getProviderValue)(props), deps ?? []);
   const [instanceId] = (0, import_react8.useState)(() => `text-editor-${++instanceCount}`);
   const [view, setView] = (0, import_react8.useState)();
   const parentRef = (0, import_react8.useRef)(null);
@@ -5414,7 +5406,7 @@ var useTextEditor = (props = {}, deps = []) => {
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file10,
+        F: __dxlog_file11,
         L: 75,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5440,13 +5432,13 @@ var useTextEditor = (props = {}, deps = []) => {
           // NOTE: This doesn't catch errors in keymap functions.
           import_view28.EditorView.exceptionSink.of((err) => {
             import_log7.log.catch(err, void 0, {
-              F: __dxlog_file10,
+              F: __dxlog_file11,
               L: 97,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
-        ].filter(import_util4.isNotFalsy)
+        ].filter(import_util5.isNotFalsy)
       });
       view2 = new import_view28.EditorView({
         parent: parentRef.current,
@@ -5472,7 +5464,7 @@ var useTextEditor = (props = {}, deps = []) => {
       (0, import_log7.log)("destroy", {
         id
       }, {
-        F: __dxlog_file10,
+        F: __dxlog_file11,
         L: 134,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5489,7 +5481,7 @@ var useTextEditor = (props = {}, deps = []) => {
             scrollTo,
             selection
           }, {
-            F: __dxlog_file10,
+            F: __dxlog_file11,
             L: 143,
             S: void 0,
             C: (f, a) => f(...a)
@@ -5582,6 +5574,7 @@ var useTextEditor = (props = {}, deps = []) => {
   createDataExtensions,
   createEditorAction,
   createEditorActionGroup,
+  createEditorStateStore,
   createEditorStateTransaction,
   createElement,
   createExternalCommentSync,