@dxos/react-ui-editor 0.4.8-main.beadd4b → 0.4.8-main.c1580f6

package/dist/lib/browser/index.mjs

@@ -24,7 +24,7 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap10 } from "@codemirror/view";
+import { keymap as keymap11 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
@@ -475,13 +475,13 @@ var automerge = (accessor) => {
     ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
-        accessor.handle.addListener("change", this._handleChange.bind(this));
+        this._handleChange = () => {
+          syncer.reconcile(this._view, false);
+        };
+        accessor.handle.addListener("change", this._handleChange);
       }
       destroy() {
-        accessor.handle.removeListener("change", this._handleChange.bind(this));
-      }
-      _handleChange() {
-        syncer.reconcile(this._view, false);
+        accessor.handle.removeListener("change", this._handleChange);
       }
     }),
     // Reconcile local updates.
@@ -1832,14 +1832,14 @@ var focusComment = (view, id, center = true) => {
     });
   }
 };
-var useComments = (view, id, comments2 = []) => {
+var useComments = (view, id, comments2) => {
   useEffect(() => {
     if (view) {
       if (id === view.state.facet(documentId)) {
         view.dispatch({
           effects: setComments.of({
             id,
-            comments: comments2
+            comments: comments2 ?? []
           })
         });
       }
@@ -1952,11 +1952,12 @@ var dnd = () => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
-import { closeBrackets } from "@codemirror/autocomplete";
-import { history } from "@codemirror/commands";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/language";
+import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
-import { EditorView as EditorView10, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView10, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, highlightSpecialChars, keymap as keymap5, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import { generateName } from "@dxos/display-name";
 import { log as log7 } from "@dxos/log";
@@ -2164,41 +2165,59 @@ var defaultTheme = {
   *   </div>
   * </div
   */
-  ".cm-panels": {
-    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
-  },
+  ".cm-panels": {},
   ".cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.50"),
     fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
+  ".cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
+  },
+  "&light .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50")
+  },
+  "&dark .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.850")
+  },
   ".cm-button": {
     margin: "4px",
     fontFamily: get3(tokens, "fontFamily.body", []).join(","),
-    background: get3(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
+    "&:active": {
+      backgroundImage: "none"
+    }
+  },
+  "&light .cm-button": {
+    background: get3(tokens, "extend.colors.neutral.100"),
     "&:hover": {
       background: get3(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get3(tokens, "extend.colors.neutral.300"),
-      backgroundImage: "none"
+      background: get3(tokens, "extend.colors.neutral.300")
     }
   },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
+  "&dark .cm-button": {
+    background: get3(tokens, "extend.colors.neutral.800"),
+    "&:hover": {
+      background: get3(tokens, "extend.colors.neutral.700")
+    },
+    "&:active": {
+      background: get3(tokens, "extend.colors.neutral.600")
+    }
   }
 };
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var defaults = {
+  allowMultipleSelections: true,
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
   editable: true,
   history: true,
-  lineWrapping: true
+  lineWrapping: true,
+  search: true
 };
 var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaults);
@@ -2207,7 +2226,7 @@ var createBasicExtensions = (_props) => {
     EditorView10.exceptionSink.of((err) => {
       log7.catch(err, void 0, {
         F: __dxlog_file9,
-        L: 78,
+        L: 83,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2219,6 +2238,7 @@ var createBasicExtensions = (_props) => {
     props.dropCursor && dropCursor(),
     props.drawSelection && drawSelection(),
     props.highlightActiveLine && highlightActiveLine(),
+    highlightSpecialChars(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
     props.lineWrapping && EditorView10.lineWrapping,
@@ -2228,7 +2248,20 @@ var createBasicExtensions = (_props) => {
       EditorView10.editable.of(false)
     ],
     props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState.tabSize.of(props.tabSize)
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+    // https://codemirror.net/docs/ref/#view.KeyBinding
+    keymap5.of([
+      // https://codemirror.net/docs/ref/#commands.standardKeymap
+      ...standardKeymap,
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      props.indentWithTab && indentWithTab,
+      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+      ...props.closeBrackets ? closeBracketsKeymap : [],
+      // https://codemirror.net/docs/ref/#commands.historyKeymap
+      ...props.history ? historyKeymap : [],
+      // https://codemirror.net/docs/ref/#search.searchKeymap
+      ...props.search ? searchKeymap : []
+    ].filter(isNotFalsy2))
   ].filter(isNotFalsy2);
 };
 var defaultSlots = {
@@ -2287,14 +2320,14 @@ var listener = ({ onFocus, onChange }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-import { closeBracketsKeymap } from "@codemirror/autocomplete";
-import { historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
+import { defaultKeymap, indentWithTab as indentWithTab2 } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
-import { searchKeymap } from "@codemirror/search";
+import { lintKeymap } from "@codemirror/lint";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { keymap as keymap5 } from "@codemirror/view";
+import { keymap as keymap6 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
@@ -2509,17 +2542,13 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
-    keymap5.of([
+    keymap6.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab,
-      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-      ...closeBracketsKeymap,
-      // https://codemirror.net/docs/ref/#commands.historyKeymap
-      ...historyKeymap,
-      // https://codemirror.net/docs/ref/#search.searchKeymap
-      ...searchKeymap,
-      // https://codemirror.net/docs/ref/#commands.standardKeymap
-      ...standardKeymap
+      indentWithTab2,
+      // https://codemirror.net/docs/ref/#commands.defaultKeymap
+      ...defaultKeymap,
+      ...completionKeymap2,
+      ...lintKeymap
     ])
   ];
 };
@@ -2796,9 +2825,9 @@ var formattingStyles = EditorView12.baseTheme({
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView13, keymap as keymap6 } from "@codemirror/view";
-import { useState, useMemo } from "react";
-var compareFormatting = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
+import { EditorView as EditorView13, keymap as keymap7 } from "@codemirror/view";
+import { useMemo, useState } from "react";
+var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline;
 (function(Inline2) {
   Inline2[Inline2["Strong"] = 0] = "Strong";
@@ -3668,7 +3697,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (options = {}) => {
   return [
-    keymap6.of([
+    keymap7.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3865,15 +3894,20 @@ var getFormatting = (state2) => {
   };
 };
 var useFormattingState = () => {
-  const [state2, setState] = useState(null);
+  const [state2, setState] = useState();
   const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
-      const newState = getFormatting(update2.state);
-      if (!state2 || !compareFormatting(state2, newState)) {
-        setState(newState);
-      }
+      setState((prevState) => {
+        const newState = getFormatting(update2.state);
+        if (!prevState || !formattingEquals(prevState, newState)) {
+          return newState;
+        }
+        return prevState;
+      });
     }
-  }), []);
+  }), [
+    setState
+  ]);
   return [
     state2,
     observer
@@ -4137,21 +4171,30 @@ var mention = ({ onSearch }) => {
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
 import { Facet as Facet6 } from "@codemirror/state";
-import { keymap as keymap7 } from "@codemirror/view";
+import { keymap as keymap8 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
 var focusEvent = "focus.container";
 var editorMode = Facet6.define({
   combine: (modes) => modes[0] ?? {}
 });
 var EditorModes = {
   default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorMode.of({
+      type: "vscode"
+    }),
+    keymap8.of(vscodeKeymap)
+  ],
   vim: [
+    // https://github.com/replit/codemirror-vim
     vim(),
     editorMode.of({
       type: "vim",
       noTabster: true
     }),
-    keymap7.of([
+    keymap8.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -4167,7 +4210,7 @@ var EditorModes = {
 
 // packages/ui/react-ui-editor/src/extensions/state.ts
 import { Transaction as Transaction2 } from "@codemirror/state";
-import { EditorView as EditorView16, keymap as keymap8 } from "@codemirror/view";
+import { EditorView as EditorView16, keymap as keymap9 } from "@codemirror/view";
 import { debounce as debounce2 } from "@dxos/async";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
@@ -4231,7 +4274,7 @@ var state = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && keymap8.of([
+    getState && keymap9.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -4253,7 +4296,7 @@ var state = ({ getState, setState } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap9 } from "@codemirror/view";
+import { keymap as keymap10 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -4263,7 +4306,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap9.of([
+    keymap10.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -4333,7 +4376,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     autoFocus
   ]);
   useEffect2(() => {
-    log9("updating", {
+    log9("create", {
       id,
       instanceId
     }, {
@@ -4393,8 +4436,16 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     }
     setView(view2);
     return () => {
+      log9("destroy", {
+        id,
+        instanceId
+      }, {
+        F: __dxlog_file12,
+        L: 150,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
-      setView(null);
     };
   }, [
     doc,
@@ -4424,7 +4475,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
 });
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
+import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 import { useDropzone } from "react-dropzone";
@@ -4724,13 +4775,14 @@ var MarkdownCustom = ({ onUpload } = {}) => {
 var MarkdownActions = () => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
     value: "comment",
     Icon: ChatText,
+    "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
     })
-  }, t("comment label"));
+  }, t("comment label")));
 };
 var Toolbar = {
   Root: ToolbarRoot,
@@ -4823,6 +4875,14 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
   useEffect4(() => {
     let view2;
     if (parentRef.current) {
+      log10("create", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 36,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       const state2 = EditorState3.create({
         doc,
         selection,
@@ -4832,7 +4892,7 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
           EditorView18.exceptionSink.of((err) => {
             log10.catch(err, void 0, {
               F: __dxlog_file13,
-              L: 44,
+              L: 46,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4859,6 +4919,14 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
       setView(view2);
     }
     return () => {
+      log10("destroy", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 74,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
     };
   }, deps);
@@ -4921,7 +4989,6 @@ export {
   callbackWrapper,
   command,
   comments,
-  compareFormatting,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -4939,13 +5006,14 @@ export {
   editorWithToolbarLayout,
   focusComment,
   focusEvent,
+  formattingEquals,
   formattingKeymap,
   getFormatting,
   getToken,
   image,
   imageUpload,
   insertTable,
-  keymap10 as keymap,
+  keymap11 as keymap,
   linkTooltip,
   listener,
   localStorageStateStoreAdapter,