@dxos/react-ui-editor 0.8.1-main.ba2dec9 → 0.8.1-staging.391c573

package/dist/lib/node/index.cjs

@@ -64,7 +64,6 @@ __export(node_exports, {
   createDataExtensions: () => createDataExtensions,
   createEditorAction: () => createEditorAction,
   createEditorActionGroup: () => createEditorActionGroup,
-  createEditorStateStore: () => createEditorStateStore,
   createEditorStateTransaction: () => createEditorStateTransaction,
   createElement: () => createElement,
   createExternalCommentSync: () => createExternalCommentSync,
@@ -208,8 +207,6 @@ 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");
@@ -224,12 +221,13 @@ 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_util4 = require("@dxos/util");
+var import_util3 = 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");
@@ -253,7 +251,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_invariant4 = require("@dxos/invariant");
+var import_invariant3 = 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");
@@ -281,7 +279,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_util5 = require("@dxos/util");
+var import_util4 = require("@dxos/util");
 var translationKey = "react-ui-editor";
 var translations_default = [
   {
@@ -2187,7 +2185,6 @@ 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 }) => {
@@ -2200,34 +2197,10 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
     annotations: import_state11.Transaction.userEvent.of(stateRestoreAnnotation)
   };
 };
-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 } = {}) => {
+var selectionState = (state = {}) => {
+  const setState = (id, selectionState2) => {
+    state[id] = selectionState2;
+  };
   const setStateDebounced = (0, import_async4.debounce)(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
@@ -2241,39 +2214,37 @@ var selectionState = ({ getState, setState } = {}) => {
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
       }
-      if (setState) {
-        const { scrollTop } = view.scrollDOM;
-        const pos = view.posAtCoords({
-          x: 0,
-          y: scrollTop
+      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 (pos !== null) {
-          const { anchor, head } = view.state.selection.main;
-          setStateDebounced(id, {
-            scrollTo: pos,
-            selection: {
-              anchor,
-              head
-            }
-          });
-        }
       }
     }),
-    getState && import_view12.keymap.of([
+    import_view12.keymap.of([
       {
         key: "ctrl-r",
         run: (view) => {
-          const state = getState(view.state.facet(documentId));
-          if (state) {
-            view.dispatch(createEditorStateTransaction(state));
+          const selection = state[view.state.facet(documentId)];
+          if (selection) {
+            view.dispatch(createEditorStateTransaction(selection));
           }
           return true;
         }
       }
     ])
-  ].filter(import_util3.isNotFalsy);
+  ];
 };
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var __dxlog_file6 = "/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();
@@ -2343,7 +2314,7 @@ var commentsDecorations = import_view11.EditorView.decorations.compute([
     const range = comment.range;
     if (!range) {
       import_log4.log.warn("Invalid range:", range, {
-        F: __dxlog_file7,
+        F: __dxlog_file6,
         L: 144,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2802,7 +2773,7 @@ var focus = [
     }
   })
 ];
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var __dxlog_file7 = "/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,
@@ -2828,7 +2799,7 @@ 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_file8,
+        F: __dxlog_file7,
         L: 96,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2874,8 +2845,8 @@ var createBasicExtensions = (_props) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(import_util4.isNotFalsy))
-  ].filter(import_util4.isNotFalsy);
+    ].filter(import_util3.isNotFalsy))
+  ].filter(import_util3.isNotFalsy);
 };
 var defaultThemeSlots = {
   editor: {
@@ -2895,7 +2866,7 @@ var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _
     slots.content?.className && import_view14.EditorView.contentAttributes.of({
       class: slots.content.className
     })
-  ].filter(import_util4.isNotFalsy);
+  ].filter(import_util3.isNotFalsy);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
   const extensions = [];
@@ -2904,7 +2875,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   }
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
-    const hue = identity?.profile?.data?.hue ?? (0, import_util4.hexToHue)(peerId ?? "0");
+    const hue = identity?.profile?.data?.hue ?? (0, import_util3.hexToHue)(peerId ?? "0");
     extensions.push(awareness(new SpaceAwarenessProvider({
       space,
       channel: `awareness.${id}`,
@@ -2918,38 +2889,76 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   }
   return extensions;
 };
-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"
+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
+        });
       });
-      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
-    }
-  })
-];
+      const foldState = {
+        foldedRanges: ranges
+      };
+      setStateDebounced?.(id, foldState);
+    })
+  ];
+};
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
   onFocus && extensions.push(import_view17.EditorView.focusChangeEffect.of((_, focusing) => {
@@ -4770,7 +4779,7 @@ var TableWidget = class extends import_view24.WidgetType {
     return !/^mouse/.test(e.type);
   }
 };
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -4903,8 +4912,8 @@ var buildDecorations2 = (view, options, focus2) => {
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    (0, import_invariant4.invariant)(level > 0, void 0, {
-      F: __dxlog_file9,
+    (0, import_invariant3.invariant)(level > 0, void 0, {
+      F: __dxlog_file8,
       L: 178,
       S: void 0,
       A: [
@@ -4942,8 +4951,8 @@ var buildDecorations2 = (view, options, focus2) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    (0, import_invariant4.invariant)(listLevels.length, void 0, {
-      F: __dxlog_file9,
+    (0, import_invariant3.invariant)(listLevels.length, void 0, {
+      F: __dxlog_file8,
       L: 200,
       S: void 0,
       A: [
@@ -5257,7 +5266,7 @@ var linkTooltip = (render) => {
     };
   });
 };
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file9 = "/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.
@@ -5272,7 +5281,7 @@ var mention = ({ debug, onSearch }) => {
         import_log6.log.info("completion context", {
           context
         }, {
-          F: __dxlog_file10,
+          F: __dxlog_file9,
           L: 27,
           S: void 0,
           C: (f, a) => f(...a)
@@ -5390,10 +5399,10 @@ var useActionHandler = (view) => {
     view
   ]);
 };
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var __dxlog_file10 = "/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_util5.getProviderValue)(props), deps ?? []);
+  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (0, import_react8.useMemo)(() => (0, import_util4.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);
@@ -5405,7 +5414,7 @@ var useTextEditor = (props = {}, deps = []) => {
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file10,
         L: 75,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5431,13 +5440,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_file11,
+              F: __dxlog_file10,
               L: 97,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
-        ].filter(import_util5.isNotFalsy)
+        ].filter(import_util4.isNotFalsy)
       });
       view2 = new import_view28.EditorView({
         parent: parentRef.current,
@@ -5463,7 +5472,7 @@ var useTextEditor = (props = {}, deps = []) => {
       (0, import_log7.log)("destroy", {
         id
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file10,
         L: 134,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5480,7 +5489,7 @@ var useTextEditor = (props = {}, deps = []) => {
             scrollTo,
             selection
           }, {
-            F: __dxlog_file11,
+            F: __dxlog_file10,
             L: 143,
             S: void 0,
             C: (f, a) => f(...a)
@@ -5506,7 +5515,7 @@ var useTextEditor = (props = {}, deps = []) => {
     autoFocus,
     view
   ]);
-  const focusableGroup = (0, import_react_tabster.useFocusableGroup)({
+  const focusableGroupAttrs = (0, import_react_tabster.useFocusableGroup)({
     tabBehavior: "limited",
     ignoreDefaultKeydown: {
       Escape: view?.state.facet(editorInputMode).noTabster
@@ -5525,15 +5534,14 @@ var useTextEditor = (props = {}, deps = []) => {
   }, [
     view
   ]);
-  const focusAttributes = {
-    tabIndex: 0,
-    ...focusableGroup,
-    onKeyUp: handleKeyUp
-  };
   return {
     parentRef,
     view,
-    focusAttributes
+    focusAttributes: {
+      tabIndex: 0,
+      ...focusableGroupAttrs,
+      onKeyUp: handleKeyUp
+    }
   };
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -5574,7 +5582,6 @@ var useTextEditor = (props = {}, deps = []) => {
   createDataExtensions,
   createEditorAction,
   createEditorActionGroup,
-  createEditorStateStore,
   createEditorStateTransaction,
   createElement,
   createExternalCommentSync,