@dxos/react-ui-editor 0.4.8-main.aa7abac → 0.4.8-main.aafbaef

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";
@@ -33,7 +33,7 @@ import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView17 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
 import { log as log9 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
@@ -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.
@@ -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,60 @@ 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
+  standardKeymap: true,
+  lineWrapping: true,
+  search: true
 };
 var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaults);
@@ -2207,7 +2227,7 @@ var createBasicExtensions = (_props) => {
     EditorView10.exceptionSink.of((err) => {
       log7.catch(err, void 0, {
         F: __dxlog_file9,
-        L: 78,
+        L: 85,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2219,6 +2239,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 +2249,22 @@ 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
+      ...props.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 +2323,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 +2545,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 +2828,8 @@ 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 { useMemo } from "react";
-import { useStateRef } from "@dxos/react-async";
+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) {
@@ -3669,7 +3700,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (options = {}) => {
   return [
-    keymap6.of([
+    keymap7.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3866,15 +3897,20 @@ var getFormatting = (state2) => {
   };
 };
 var useFormattingState = () => {
-  const [state2, setState, stateRef] = useStateRef();
+  const [state2, setState] = useState();
   const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
-      const newState = getFormatting(update2.state);
-      if (!stateRef.current || !formattingEquals(stateRef.current, newState)) {
-        setState(newState);
-      }
+      setState((prevState) => {
+        const newState = getFormatting(update2.state);
+        if (!prevState || !formattingEquals(prevState, newState)) {
+          return newState;
+        }
+        return prevState;
+      });
     }
-  }), []);
+  }), [
+    setState
+  ]);
   return [
     state2,
     observer
@@ -4138,21 +4174,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) => {
@@ -4168,7 +4213,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";
@@ -4232,7 +4277,7 @@ var state = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && keymap8.of([
+    getState && keymap9.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -4254,7 +4299,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.",
@@ -4264,7 +4309,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap9.of([
+    keymap10.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -4316,12 +4361,12 @@ var instanceCount = 0;
 var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView17.scrollIntoView(0, {
   yMargin: 0
 }), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
-  const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
+  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
   const rootRef = useRef(null);
-  const [view, setView] = useState(null);
+  const [view, setView] = useState2(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
@@ -4435,7 +4480,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, 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 useState2 } from "react";
+import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 import { useDropzone } from "react-dropzone";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
@@ -4508,8 +4553,8 @@ var MarkdownHeading = () => {
   const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
   const HeadingIcon = HeadingIcons[value ?? "0"];
   const suppressNextTooltip = useRef2(false);
-  const [tooltipOpen, setTooltipOpen] = useState2(false);
-  const [selectOpen, setSelectOpen] = useState2(false);
+  const [tooltipOpen, setTooltipOpen] = useState3(false);
+  const [selectOpen, setSelectOpen] = useState3(false);
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
@@ -4736,6 +4781,7 @@ var MarkdownActions = () => {
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
     value: "comment",
     Icon: ChatText,
+    "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
     })
@@ -4820,14 +4866,14 @@ var useDocAccessor = (text) => {
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView18 } from "@codemirror/view";
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 import { log as log10 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = (cb = () => ({}), deps = []) => {
   let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo3(cb, deps ?? []);
   const onUpdate = useRef3();
-  const [view, setView] = useState3();
+  const [view, setView] = useState4();
   const parentRef = useRef3(null);
   useEffect4(() => {
     let view2;
@@ -4970,7 +5016,7 @@ export {
   image,
   imageUpload,
   insertTable,
-  keymap10 as keymap,
+  keymap11 as keymap,
   linkTooltip,
   listener,
   localStorageStateStoreAdapter,