@dxos/react-ui-editor 0.3.11-main.dafb7f2 → 0.3.11-main.e716c43

package/dist/lib/browser/index.mjs

@@ -930,7 +930,6 @@ var random = (min, max) => {
 
 // packages/ui/react-ui-editor/src/extensions/code.ts
 import { ViewPlugin as ViewPlugin3, EditorView as EditorView4, Decoration as Decoration2 } from "@codemirror/view";
-import get2 from "lodash.get";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
@@ -1014,20 +1013,22 @@ 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 { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
+var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/extensions/code.ts
 var CODE_REGEX = /```[\s\S]*?```/gs;
 var styles2 = EditorView4.baseTheme({
   "& .cm-codeblock": {
-    fontFamily: get2(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: getToken("fontFamily.mono", []).join(",")
   },
   '&light [aria-readonly="true"] .cm-codeblock': {
-    background: get2(tokens, "extend.colors.neutral.50")
+    background: getToken("extend.colors.neutral.50")
   },
   '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: get2(tokens, "extend.colors.neutral.850")
+    background: getToken("extend.colors.neutral.850")
   },
   '& [aria-readonly="true"] .cm-codeblock': {
     display: "block",
@@ -1091,7 +1092,6 @@ var code2 = () => {
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
 import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView5, MatchDecorator, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-import get3 from "lodash.get";
 import sortBy from "lodash.sortby";
 import { debounce } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
@@ -1109,10 +1109,10 @@ var styles3 = EditorView5.baseTheme({
     backgroundColor: "orange"
   },
   "& .cm-comment": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.50")
+    backgroundColor: getToken("extend.colors.yellow.50")
   },
   "& .cm-comment-active": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+    backgroundColor: getToken("extend.colors.yellow.100")
   }
 });
 var marks = {
@@ -1203,7 +1203,7 @@ var BookmarkWidget = class extends WidgetType2 {
     this._handleClick = _handleClick;
     invariant2(this._id, void 0, {
       F: __dxlog_file3,
-      L: 169,
+      L: 168,
       S: this,
       A: [
         "this._id",
@@ -1230,7 +1230,7 @@ var comments = (options = {}) => {
     const cursorConverter3 = view.state.facet(CursorConverter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 225,
+      L: 224,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1361,7 +1361,7 @@ var comments = (options = {}) => {
                   thread: range.id
                 }, {
                   F: __dxlog_file3,
-                  L: 359,
+                  L: 358,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -1429,7 +1429,7 @@ var getRangeFromCursor = (cursorConverter3, cursor) => {
   const parts = cursor.split(":");
   const from = cursorConverter3.fromCursor(parts[0]);
   const to = cursorConverter3.fromCursor(parts[1]);
-  return from && to ? {
+  return from !== void 0 && to !== void 0 ? {
     from,
     to
   } : void 0;
@@ -1437,12 +1437,11 @@ var getRangeFromCursor = (cursorConverter3, cursor) => {
 
 // packages/ui/react-ui-editor/src/extensions/hr.ts
 import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
-import get4 from "lodash.get";
 var styles4 = EditorView6.baseTheme({
   "& .cm-hr": {
     // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
+    borderBottom: `1px solid ${getToken("extend.colors.neutral.200")}`
   }
 });
 var HorizontalRuleWidget = class extends WidgetType3 {
@@ -1672,7 +1671,7 @@ var buildDecorations2 = (view, options) => {
           if (!url) {
             return false;
           }
-          if (state.readOnly || cursor < node.from || cursor > node.to) {
+          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
             builder.add(node.from, node.to, Decoration6.replace({
               widget: new LinkText(text, options.link ? url : void 0)
             }));
@@ -1722,7 +1721,6 @@ import { markdownLanguage } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
-import get5 from "lodash.get";
 var markdownTags = {
   Blockquote: Tag.define(),
   CodeMark: Tag.define(),
@@ -1908,7 +1906,7 @@ var markdownHighlightStyle = (readonly) => {
   ], {
     scope: markdownLanguage,
     all: {
-      fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+      fontFamily: getToken("fontFamily.body", []).join(",")
     }
   });
 };
@@ -1989,11 +1987,6 @@ var mention = ({ onSearch }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/mermaid.ts
-var mermaid = () => {
-  return [];
-};
-
 // packages/ui/react-ui-editor/src/extensions/table.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField4 } from "@codemirror/state";
@@ -2047,7 +2040,6 @@ var update = (state, options) => {
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
     hide && builder.add(table2.from, table2.to, Decoration7.replace({
-      block: true,
       widget: new TableWidget(table2)
     }));
     builder.add(table2.from, table2.to, Decoration7.mark({
@@ -2088,6 +2080,9 @@ var TableWidget = class extends WidgetType6 {
     }
     return table2;
   }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
@@ -2253,7 +2248,7 @@ var yjs = (content, awareness2) => [
 ];
 
 // packages/ui/react-ui-editor/src/themes/default.ts
-import get6 from "lodash.get";
+import get3 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -2284,7 +2279,7 @@ var defaultTheme = {
   },
   ".cm-scroller": {
     overflow: "visible",
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
   ".cm-content": {
     padding: 0,
@@ -2292,11 +2287,11 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get6(tokens, "extend.colors.neutral.900", "black"),
+    color: get3(tokens, "extend.colors.neutral.900", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get6(tokens, "extend.colors.neutral.100", "white"),
+    color: get3(tokens, "extend.colors.neutral.100", "white"),
     caretColor: "white"
   },
   //
@@ -2324,25 +2319,25 @@ var defaultTheme = {
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.100")
+    background: get3(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.200")
+    background: get3(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.700")
+    background: get3(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.600")
+    background: get3(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get6(tokens, "extend.colors.yellow.100")
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get6(tokens, "extend.colors.yellow.700")
+    backgroundColor: get3(tokens, "extend.colors.yellow.700")
   },
   //
   // collaboration
@@ -2375,12 +2370,12 @@ var defaultTheme = {
   // link
   //
   ".cm-link": {
-    color: get6(tokens, "extend.colors.primary.500"),
+    color: get3(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
@@ -2402,7 +2397,7 @@ var defaultTheme = {
     display: "none"
   },
   ".cm-completionLabel": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-completionMatchedText": {
     textDecoration: "none"
@@ -2418,15 +2413,15 @@ var defaultTheme = {
   // table
   //
   ".cm-table *": {
-    fontFamily: `${get6(tokens, "fontFamily.mono", []).join(",")} !important`,
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
   ".cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get6(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get6(tokens, "extend.colors.neutral.500")
+    color: get3(tokens, "extend.colors.neutral.500")
   },
   ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -2447,8 +2442,8 @@ var defaultTheme = {
   // font size
   // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
   //
-  ...Object.keys(get6(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get6(tokens, [
+  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get3(tokens, [
       "extend",
       "fontSize",
       fontSize,
@@ -2483,23 +2478,23 @@ var defaultTheme = {
   * </div
   */
   ".cm-panels": {
-    border: `1px solid ${get6(tokens, "extend.colors.neutral.200")}`
+    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
   },
   ".cm-panel": {
-    background: get6(tokens, "extend.colors.neutral.50"),
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    background: get3(tokens, "extend.colors.neutral.50"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-button": {
     margin: "4px",
-    fontFamily: get6(tokens, "fontFamily.body", []).join(","),
-    background: get6(tokens, "extend.colors.neutral.100"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    background: get3(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
     "&:hover": {
-      background: get6(tokens, "extend.colors.neutral.200")
+      background: get3(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get6(tokens, "extend.colors.neutral.300"),
+      background: get3(tokens, "extend.colors.neutral.300"),
       backgroundImage: "none"
     }
   },
@@ -2509,24 +2504,24 @@ var defaultTheme = {
 };
 var textTheme = {
   ".cm-scroller": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var markdownTheme = {
   // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
   ".cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
   ".cm-scroller": {
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
@@ -2705,7 +2700,7 @@ var defaultMarkdownSlots = {
 };
 
 // packages/ui/react-ui-editor/src/hooks/automerge.ts
-import get7 from "lodash.get";
+import get4 from "lodash.get";
 import { getRawDoc } from "@dxos/echo-schema";
 import { isNotNullOrUndefined } from "@dxos/util";
 
@@ -3026,7 +3021,7 @@ var createAutomergeModel = ({ space, identity, text }) => {
   const model = {
     id: obj.id,
     content: doc,
-    text: () => get7(doc.handle.docSync(), doc.path),
+    text: () => get4(doc.handle.docSync(), doc.path),
     // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
     extension: [
       modelState.init(() => model),
@@ -3072,6 +3067,7 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  getToken,
   hr,
   image,
   link,
@@ -3082,7 +3078,6 @@ export {
   markdownTagsExtensions,
   markdownTheme,
   mention,
-  mermaid,
   modelState,
   setCommentRange,
   setFocus,