@dxos/react-ui-editor 0.4.6-main.4d649cb → 0.4.6-main.7879c71

package/dist/lib/browser/index.mjs

@@ -189,7 +189,7 @@ import get from "lodash.get";
 import { next as A } from "@dxos/automerge/automerge";
 import { log } from "@dxos/log";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
-var cursorConverter = (handle, path) => ({
+var cursorConverter = ({ handle, path }) => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
     const doc = handle.docSync();
@@ -205,7 +205,7 @@ var cursorConverter = (handle, path) => ({
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 31,
+        L: 30,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -233,7 +233,7 @@ var cursorConverter = (handle, path) => ({
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 59,
+        L: 58,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -244,6 +244,7 @@ var cursorConverter = (handle, path) => ({
 
 // packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
 import { Annotation, StateEffect } from "@codemirror/state";
+import get2 from "lodash.get";
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
 var updateHeadsEffect = StateEffect.define({});
@@ -441,16 +442,16 @@ var Syncer = class {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-var automerge = ({ handle, path }) => {
+var automerge = (accessor) => {
   const syncState = StateField2.define({
     create: () => ({
-      path: path.slice(),
-      lastHeads: A4.getHeads(handle.docSync()),
+      path: accessor.path.slice(),
+      lastHeads: A4.getHeads(accessor.handle.docSync()),
       unreconciledTransactions: []
     }),
     update: (value, tr) => {
       const result = {
-        path: path.slice(),
+        path: accessor.path.slice(),
         lastHeads: value.lastHeads,
         unreconciledTransactions: value.unreconciledTransactions.slice()
       };
@@ -471,18 +472,18 @@ var automerge = ({ handle, path }) => {
       return result;
     }
   });
-  const syncer = new Syncer(handle, syncState);
+  const syncer = new Syncer(accessor.handle, syncState);
   return [
-    Cursor.converter.of(cursorConverter(handle, path)),
+    Cursor.converter.of(cursorConverter(accessor)),
     syncState,
     // Reconcile external updates.
     ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
-        handle.addListener("change", this._handleChange.bind(this));
+        accessor.handle.addListener("change", this._handleChange.bind(this));
       }
       destroy() {
-        handle.removeListener("change", this._handleChange.bind(this));
+        accessor.handle.removeListener("change", this._handleChange.bind(this));
       }
       _handleChange() {
         syncer.reconcile(this._view, false);
@@ -1133,10 +1134,10 @@ var inlineUrl = mx(code, "px-1");
 var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
-import get2 from "lodash.get";
+import get3 from "lodash.get";
 import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
-var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
+var getToken = (path, defaultValue = void 0) => get3(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
@@ -1899,18 +1900,6 @@ import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder } from "@codemirror/state";
 import { EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var FencedCodeBoundary = class extends WidgetType2 {
-  constructor(_className) {
-    super();
-    this._className = _className;
-  }
-  toDOM() {
-    const el = document.createElement("span");
-    el.innerHTML = " ";
-    el.className = mx2("cm-code cm-codeblock", this._className);
-    return el;
-  }
-};
 var HorizontalRuleWidget = class extends WidgetType2 {
   toDOM() {
     const el = document.createElement("span");
@@ -1971,11 +1960,14 @@ var CheckboxWidget = class extends WidgetType2 {
   }
 };
 var hide = Decoration4.replace({});
-var fencedCodeTop = Decoration4.replace({
-  widget: new FencedCodeBoundary("cm-codeblock-end cm-codeblock-first")
+var fencedCodeLine = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line")
 });
-var fencedCodeBottom = Decoration4.replace({
-  widget: new FencedCodeBoundary("cm-codeblock-end cm-codeblock-last")
+var fencedCodeLineFirst = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
+});
+var fencedCodeLineLast = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var horizontalRule = Decoration4.replace({
   widget: new HorizontalRuleWidget()
@@ -2016,12 +2008,9 @@ var buildDecorations = (view, options) => {
             }
             const first = block.from <= node.from;
             const last = block.to >= node.to;
+            builder.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
             if (!editing && (first || last)) {
-              builder.add(block.from, block.to, first ? fencedCodeTop : fencedCodeBottom);
-            } else {
-              builder.add(block.from, block.from, Decoration4.line({
-                class: mx2("cm-code cm-codeblock-line", first && "cm-codeblock-first", last && "cm-codeblock-last")
-              }));
+              builder.add(block.from, block.to, hide);
             }
           }
           return false;
@@ -2112,16 +2101,12 @@ var formattingStyles = EditorView10.baseTheme({
     }
   },
   "& .cm-codeblock-first": {
-    "&::after": {
-      borderTopLeftRadius: ".5rem",
-      borderTopRightRadius: ".5rem"
-    }
+    borderTopLeftRadius: ".5rem",
+    borderTopRightRadius: ".5rem"
   },
   "& .cm-codeblock-last": {
-    "&::after": {
-      borderBottomLeftRadius: ".5rem",
-      borderBottomRightRadius: ".5rem"
-    }
+    borderBottomLeftRadius: ".5rem",
+    borderBottomRightRadius: ".5rem"
   },
   "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
     background: getToken("extend.semanticColors.input.light"),
@@ -2131,18 +2116,6 @@ var formattingStyles = EditorView10.baseTheme({
     background: getToken("extend.semanticColors.input.dark"),
     mixBlendMode: "lighten"
   },
-  "&light .cm-codeblock-first, &light .cm-codeblock-last": {
-    mixBlendMode: "darken",
-    "&::after": {
-      background: getToken("extend.semanticColors.input.light")
-    }
-  },
-  "&dark .cm-codeblock-first, &dark .cm-codeblock-last": {
-    mixBlendMode: "lighten",
-    "&::after": {
-      background: getToken("extend.semanticColors.input.dark")
-    }
-  },
   "& .cm-hr": {
     display: "inline-block",
     width: "100%",
@@ -3572,7 +3545,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/themes/default.ts
-import get3 from "lodash.get";
+import get4 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -3606,7 +3579,7 @@ var defaultTheme = {
     // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
     //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
     overflowY: "auto",
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(","),
+    fontFamily: get4(tokens, "fontFamily.mono", []).join(","),
     lineHeight: 1.5
   },
   ".cm-content": {
@@ -3616,11 +3589,11 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
+    color: get4(tokens, "extend.semanticColors.base.fg.light", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
+    color: get4(tokens, "extend.semanticColors.base.fg.dark", "white"),
     caretColor: "white"
   },
   //
@@ -3633,10 +3606,10 @@ var defaultTheme = {
     borderLeft: "2px solid white"
   },
   "&light .cm-placeholder": {
-    color: get3(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+    color: get4(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
   },
   "&dark .cm-placeholder": {
-    color: get3(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
+    color: get4(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
   },
   //
   // line
@@ -3648,39 +3621,45 @@ var defaultTheme = {
     background: "transparent"
   },
   //
+  // gutter
+  //
+  ".cm-gutterElement": {
+    width: "48px"
+  },
+  //
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.100")
+    background: get4(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.200")
+    background: get4(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.700")
+    background: get4(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.600")
+    background: get4(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+    backgroundColor: get4(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.700")
+    backgroundColor: get4(tokens, "extend.colors.yellow.700")
   },
   //
   // link
   //
   ".cm-link": {
-    color: get3(tokens, "extend.colors.primary.500"),
+    color: get4(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
@@ -3702,7 +3681,7 @@ var defaultTheme = {
     display: "none"
   },
   ".cm-completionLabel": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-completionMatchedText": {
     textDecoration: "none"
@@ -3711,15 +3690,15 @@ var defaultTheme = {
   // table
   //
   ".cm-table *": {
-    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
+    fontFamily: `${get4(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
   ".cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get3(tokens, "extend.colors.neutral.500")
+    color: get4(tokens, "extend.colors.neutral.500")
   },
   ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -3766,23 +3745,23 @@ var defaultTheme = {
   * </div
   */
   ".cm-panels": {
-    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
+    border: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
   },
   ".cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.50"),
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    background: get4(tokens, "extend.colors.neutral.50"),
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-button": {
     margin: "4px",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
-    background: get3(tokens, "extend.colors.neutral.100"),
+    fontFamily: get4(tokens, "fontFamily.body", []).join(","),
+    background: get4(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
     "&:hover": {
-      background: get3(tokens, "extend.colors.neutral.200")
+      background: get4(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get3(tokens, "extend.colors.neutral.300"),
+      background: get4(tokens, "extend.colors.neutral.300"),
       backgroundImage: "none"
     }
   },
@@ -3792,26 +3771,26 @@ var defaultTheme = {
 };
 var textTheme = {
   ".cm-scroller": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   }
 };
 var markdownTheme = {
   ".cm-scroller": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
   ".cm-scroller": {
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.mono", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
@@ -4456,7 +4435,7 @@ import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } fro
 import { log as log5 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
-var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}) => {
+var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}, deps) => {
   const onUpdate = useRef4();
   const [view, setView] = useState5();
   const parentRef = useRef4(null);
@@ -4471,7 +4450,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
           EditorView15.exceptionSink.of((err) => {
             log5.catch(err, void 0, {
               F: __dxlog_file6,
-              L: 61,
+              L: 57,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4500,10 +4479,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
     return () => {
       view2?.destroy();
     };
-  }, [
-    doc,
-    extensions
-  ]);
+  }, deps);
   useEffect3(() => {
     if (view) {
       if (!selection && !view.state.selection.main.anchor) {
@@ -4559,13 +4535,32 @@ var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import get4 from "lodash.get";
+import get5 from "lodash.get";
 import { useState as useState6, useMemo as useMemo3 } from "react";
 import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isAutomergeObject } from "@dxos/react-client/echo";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
+var useTextExtensions = ({ id, text, space, identity }) => {
+  const extensions = [
+    automerge(text)
+  ];
+  if (space && identity) {
+    const awarenessProvider2 = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorColor.color,
+        lightColor: cursorColor.light
+      }
+    });
+    extensions.push(awareness(awarenessProvider2));
+  }
+  return extensions;
+};
 var useTextModel = (props) => useMemo3(() => createModel(props), Object.values(props));
 var useInMemoryTextModel = ({ id, defaultContent }) => {
   const [content, setContent] = useState6(defaultContent ?? "");
@@ -4582,7 +4577,7 @@ var createModel = ({ space, identity, text }) => {
   }
   invariant3(isAutomergeObject(text), void 0, {
     F: __dxlog_file7,
-    L: 54,
+    L: 83,
     S: void 0,
     A: [
       "isAutomergeObject(text)",
@@ -4616,7 +4611,7 @@ var createModel = ({ space, identity, text }) => {
   const model = {
     id: obj.id,
     content: doc,
-    text: () => get4(doc.handle.docSync(), doc.path),
+    text: () => get5(doc.handle.docSync(), doc.path),
     extension: extensions,
     peer: identity ? {
       id: identity.identityKey.toHex(),
@@ -4718,6 +4713,7 @@ export {
   useFormattingState,
   useInMemoryTextModel,
   useTextEditor,
+  useTextExtensions,
   useTextModel,
   useToolbarContext
 };