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

package/dist/lib/browser/index.mjs

@@ -313,7 +313,7 @@ var createViewMode = (state) => {
 
 // packages/ui/react-ui-editor/src/styles/stack-item-content-class-names.ts
 import { mx } from "@dxos/react-ui-theme";
-var stackItemContentEditorClassNames = (role) => 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) => 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) => mx("attention-surface is-full border-be !border-separator", role === "section" && "sticky block-start-0 z-[1] -mbe-px min-is-0");
 
 // packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
@@ -520,6 +520,7 @@ var defaultTheme = {
   ".cm-link": {
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
+    textDecorationColor: "var(--dx-separator)",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem"
   },
@@ -747,7 +748,7 @@ var logChanges = (trs) => {
     return changes2;
   }).filter(Boolean);
   if (changes.length) {
-    log.info("changes", {
+    log("changes", {
       changes
     }, {
       F: __dxlog_file,
@@ -2053,6 +2054,9 @@ import { isNonNullable } from "@dxos/util";
 import { Transaction } from "@codemirror/state";
 import { EditorView as EditorView8, keymap as keymap4 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
+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 }) => {
@@ -2065,10 +2069,34 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
   };
 };
-var selectionState = (state = {}) => {
-  const setState = (id, selectionState2) => {
-    state[id] = selectionState2;
-  };
+var createEditorStateStore = (keyPrefix) => ({
+  getState: (id) => {
+    invariant3(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) => {
+    invariant3(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 = debounce(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
@@ -2082,39 +2110,41 @@ 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
+            }
+          });
+        }
       }
     }),
-    keymap4.of([
+    getState && keymap4.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(isNotFalsy2);
 };
 
 // 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 __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var setComments = StateEffect3.define();
 var setSelection = StateEffect3.define();
 var setCommentState = StateEffect3.define();
@@ -2184,7 +2214,7 @@ var commentsDecorations = EditorView9.decorations.compute([
     const range = comment.range;
     if (!range) {
       log4.warn("Invalid range:", range, {
-        F: __dxlog_file6,
+        F: __dxlog_file7,
         L: 144,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2636,7 +2666,7 @@ import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
 import { log as log5 } from "@dxos/log";
-import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
+import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/focus.ts
 import { StateEffect as StateEffect4, StateField as StateField6 } from "@codemirror/state";
@@ -2670,7 +2700,7 @@ var focus = [
 ];
 
 // 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 __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
@@ -2696,8 +2726,8 @@ var createBasicExtensions = (_props) => {
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView12.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
-        F: __dxlog_file7,
-        L: 96,
+        F: __dxlog_file8,
+        L: 97,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2742,8 +2772,8 @@ var createBasicExtensions = (_props) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(isNotFalsy2))
-  ].filter(isNotFalsy2);
+    ].filter(isNotFalsy3))
+  ].filter(isNotFalsy3);
 };
 var defaultThemeSlots = {
   editor: {
@@ -2763,7 +2793,7 @@ var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _
     slots.content?.className && EditorView12.contentAttributes.of({
       class: slots.content.className
     })
-  ].filter(isNotFalsy2);
+  ].filter(isNotFalsy3);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
   const extensions = [];
@@ -2788,81 +2818,42 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
-import { codeFolding, foldGutter, foldedRanges, foldEffect } from "@codemirror/language";
+import { codeFolding, foldGutter } from "@codemirror/language";
 import { EditorView as EditorView13 } from "@codemirror/view";
 import React3 from "react";
-import { debounce as debounce3 } from "@dxos/async";
 import { Icon } from "@dxos/react-ui";
-var folding = (state = {}) => {
-  const setState = (id, foldState) => {
-    state[id] = foldState;
-  };
-  const setStateDebounced = debounce3(setState, 1e3);
-  let initialized = false;
-  return [
-    codeFolding({
-      placeholderDOM: () => {
-        return document.createElement("span");
-      }
-    }),
-    foldGutter({
-      markerDOM: (open) => {
-        const el = createElement("div", {
-          className: "flex h-full items-center"
-        });
-        return renderRoot(el, /* @__PURE__ */ React3.createElement(Icon, {
-          icon: "ph--caret-right--regular",
-          size: 3,
-          classNames: [
-            "mx-3 cursor-pointer",
-            open && "rotate-90"
-          ]
-        }));
-      }
-    }),
-    EditorView13.theme({
-      ".cm-foldGutter": {
-        opacity: 0.3,
-        transition: "opacity 0.3s",
-        width: "32px"
-      },
-      ".cm-foldGutter:hover": {
-        opacity: 1
-      }
-    }),
-    EditorView13.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) => foldEffect.of({
-              from: range.from,
-              to: range.to
-            }))
-          });
-        }
-        return;
-      }
-      const decorations = foldedRanges(view.state);
-      const ranges = [];
-      decorations.between(0, view.state.doc.length, (from, to) => {
-        ranges.push({
-          from,
-          to
-        });
+var folding = (_props = {}) => [
+  codeFolding({
+    placeholderDOM: () => {
+      return document.createElement("span");
+    }
+  }),
+  foldGutter({
+    markerDOM: (open) => {
+      const el = createElement("div", {
+        className: "flex h-full items-center"
       });
-      const foldState = {
-        foldedRanges: ranges
-      };
-      setStateDebounced?.(id, foldState);
-    })
-  ];
-};
+      return renderRoot(el, /* @__PURE__ */ React3.createElement(Icon, {
+        icon: "ph--caret-right--regular",
+        size: 3,
+        classNames: [
+          "mx-3 cursor-pointer",
+          open && "rotate-90"
+        ]
+      }));
+    }
+  }),
+  EditorView13.theme({
+    ".cm-foldGutter": {
+      opacity: 0.3,
+      transition: "opacity 0.3s",
+      width: "32px"
+    },
+    ".cm-foldGutter:hover": {
+      opacity: 1
+    }
+  })
+];
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
 import { EditorView as EditorView14 } from "@codemirror/view";
@@ -4284,7 +4275,7 @@ var convertTreeToJson = (state) => {
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect5 } from "@codemirror/state";
 import { EditorView as EditorView19, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-import { invariant as invariant3 } from "@dxos/invariant";
+import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
@@ -4743,7 +4734,7 @@ var TableWidget = class extends WidgetType4 {
 };
 
 // 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 __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -4876,8 +4867,8 @@ var buildDecorations2 = (view, options, focus2) => {
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    invariant3(level > 0, void 0, {
-      F: __dxlog_file8,
+    invariant4(level > 0, void 0, {
+      F: __dxlog_file9,
       L: 178,
       S: void 0,
       A: [
@@ -4915,8 +4906,8 @@ var buildDecorations2 = (view, options, focus2) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    invariant3(listLevels.length, void 0, {
-      F: __dxlog_file8,
+    invariant4(listLevels.length, void 0, {
+      F: __dxlog_file9,
       L: 200,
       S: void 0,
       A: [
@@ -5239,7 +5230,7 @@ var linkTooltip = (render) => {
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 import { log as log6 } from "@dxos/log";
-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 autocompletion2({
     // TODO(burdon): Not working.
@@ -5254,7 +5245,7 @@ var mention = ({ debug, onSearch }) => {
         log6.info("completion context", {
           context
         }, {
-          F: __dxlog_file9,
+          F: __dxlog_file10,
           L: 27,
           S: void 0,
           C: (f, a) => f(...a)
@@ -5391,8 +5382,8 @@ import { EditorView as EditorView20 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo4, useRef, useState } from "react";
 import { log as log7 } from "@dxos/log";
-import { getProviderValue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
+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 } = useMemo4(() => getProviderValue(props), deps ?? []);
@@ -5407,7 +5398,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)
@@ -5433,13 +5424,13 @@ var useTextEditor = (props = {}, deps = []) => {
           // NOTE: This doesn't catch errors in keymap functions.
           EditorView20.exceptionSink.of((err) => {
             log7.catch(err, void 0, {
-              F: __dxlog_file10,
+              F: __dxlog_file11,
               L: 97,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
-        ].filter(isNotFalsy3)
+        ].filter(isNotFalsy4)
       });
       view2 = new EditorView20({
         parent: parentRef.current,
@@ -5465,7 +5456,7 @@ var useTextEditor = (props = {}, deps = []) => {
       log7("destroy", {
         id
       }, {
-        F: __dxlog_file10,
+        F: __dxlog_file11,
         L: 134,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5482,7 +5473,7 @@ var useTextEditor = (props = {}, deps = []) => {
             scrollTo,
             selection
           }, {
-            F: __dxlog_file10,
+            F: __dxlog_file11,
             L: 143,
             S: void 0,
             C: (f, a) => f(...a)
@@ -5574,6 +5565,7 @@ export {
   createDataExtensions,
   createEditorAction,
   createEditorActionGroup,
+  createEditorStateStore,
   createEditorStateTransaction,
   createElement,
   createExternalCommentSync,