@dxos/react-ui-editor 0.3.11-main.dd122a6 → 0.3.11-main.e0dc42b

package/dist/lib/browser/index.mjs

@@ -11,40 +11,41 @@ import { EditorView as EditorView12 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useRef } from "react";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
 import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
     keymap.of(completionKeymap),
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      // TODO(burdon): Set custom keymap.
-      // defaultKeymap: false,
+      defaultKeymap: false,
       // Don't start unless key press.
-      activateOnTyping: false,
-      // TODO(burdon): Option to create new page?
-      // TODO(burdon): Optional decoration via addToOptions
-      override: [
-        (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
+      activateOnTyping: false
+    }),
+    // TODO(burdon): Option to create new page?
+    // TODO(burdon): Optional decoration via addToOptions
+    markdownLanguage.data.of({
+      autocomplete: (context) => {
+        const match = context.matchBefore(/\w*/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
         }
-      ]
+        return {
+          from: match.from,
+          options: onSearch(match.text.toLowerCase())
+        };
+      }
     })
   ];
 };
@@ -504,23 +505,21 @@ var RemoteSelectionsDecorator = class {
   }
 };
 var RemoteCaretWidget = class extends WidgetType {
-  constructor(name, color) {
+  constructor(_name, _color) {
     super();
-    this.name = name;
-    this.color = color;
-    this.name = name;
-    this.color = color;
+    this._name = _name;
+    this._color = _color;
   }
   toDOM() {
     const span = document.createElement("span");
     span.className = "cm-ySelectionCaret";
-    span.style.backgroundColor = this.color;
-    span.style.borderColor = this.color;
+    span.style.backgroundColor = this._color;
+    span.style.borderColor = this._color;
     const dot = document.createElement("div");
     dot.className = "cm-ySelectionCaretDot";
     const info = document.createElement("div");
     info.className = "cm-ySelectionInfo";
-    info.innerText = this.name;
+    info.innerText = this._name;
     span.appendChild(document.createTextNode("\u2060"));
     span.appendChild(dot);
     span.appendChild(document.createTextNode("\u2060"));
@@ -528,21 +527,22 @@ var RemoteCaretWidget = class extends WidgetType {
     span.appendChild(document.createTextNode("\u2060"));
     return span;
   }
-  eq(widget) {
-    return widget.color === this.color;
-  }
-  compare(widget) {
-    return widget.color === this.color;
-  }
   updateDOM() {
     return false;
   }
+  eq(widget) {
+    return widget._color === this._color;
+  }
   get estimatedHeight() {
     return -1;
   }
   ignoreEvent() {
     return true;
   }
+  // TODO(burdon): Not used?
+  compare(widget) {
+    return widget._color === this._color;
+  }
 };
 var styles = EditorView.baseTheme({
   ".cm-ySelection": {},
@@ -1056,7 +1056,7 @@ var getLineRange = (lines, from, to) => {
 var code2 = () => {
   const getDecorations = (view) => {
     const decorations = [];
-    if (view.state.readOnly) {
+    if (!view.hasFocus || view.state.readOnly) {
       const text = view.state.doc.sliceString(0);
       const matches = text.matchAll(CODE_REGEX);
       const blocks = view.viewportLineBlocks;
@@ -1075,10 +1075,15 @@ var code2 = () => {
   return [
     ViewPlugin3.fromClass(class {
       constructor(view) {
+        this.hasFocus = false;
         this.decorations = getDecorations(view);
       }
       update(update2) {
-        if (update2.docChanged || update2.viewportChanged) {
+        if (
+          // TODO(burdon): Generalize for other extensions.
+          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
+        ) {
+          this.hasFocus = update2.view.hasFocus;
           this.decorations = getDecorations(update2.view);
         }
       }
@@ -1196,14 +1201,13 @@ var highlightDecorations = EditorView5.decorations.compute([
   return Decoration3.set(decorations);
 });
 var BookmarkWidget = class extends WidgetType2 {
-  constructor(_anchor, _id, _handleClick) {
+  constructor(_id, _handleClick) {
     super();
-    this._anchor = _anchor;
     this._id = _id;
     this._handleClick = _handleClick;
     invariant2(this._id, void 0, {
       F: __dxlog_file3,
-      L: 168,
+      L: 164,
       S: this,
       A: [
         "this._id",
@@ -1212,7 +1216,7 @@ var BookmarkWidget = class extends WidgetType2 {
     });
   }
   eq(other) {
-    return this._anchor === other._anchor && this._id === other._id;
+    return this._id === other._id;
   }
   toDOM() {
     const span = document.createElement("span");
@@ -1225,12 +1229,13 @@ var BookmarkWidget = class extends WidgetType2 {
   }
 };
 var comments = (options = {}) => {
+  const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   const createCommentThread = (view) => {
     const cursorConverter3 = view.state.facet(CursorConverter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 224,
+      L: 222,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1273,17 +1278,17 @@ var comments = (options = {}) => {
     }
     return false;
   };
-  const bookmarksViewPlugin = ViewPlugin4.fromClass(class BookmarkViewPlugin {
+  const bookmarksViewPlugin = options.footnote ? ViewPlugin4.fromClass(class BookmarkViewPlugin {
     static {
       // Match markdown footnotes (option).
       // https://www.markdownguide.org/extended-syntax/#footnotes
       this.bookmarkMatcher = new MatchDecorator({
         regexp: /\[\^(\w+)\]/g,
-        decoration: (match, view, pos) => {
+        decoration: (match) => {
           const id = match[1];
           return Decoration3.replace({
             id,
-            widget: new BookmarkWidget(pos, id)
+            widget: new BookmarkWidget(id)
           });
         }
       });
@@ -1299,7 +1304,7 @@ var comments = (options = {}) => {
     provide: (plugin) => EditorView5.atomicRanges.of((view) => {
       return view.plugin(plugin)?.bookmarks || Decoration3.none;
     })
-  });
+  }) : [];
   return [
     bookmarksViewPlugin,
     commentsStateField,
@@ -1310,7 +1315,7 @@ var comments = (options = {}) => {
     //
     options.onCreate ? keymap3.of([
       {
-        key: options?.key ?? "meta-'",
+        key: shortcut,
         run: callbackWrapper(createCommentThread)
       }
     ]) : [],
@@ -1327,7 +1332,7 @@ var comments = (options = {}) => {
           above: true,
           create: () => {
             const el = document.createElement("div");
-            options.onHover?.(el);
+            options.onHover?.(el, shortcut);
             return {
               dom: el,
               offset: {
@@ -1361,7 +1366,7 @@ var comments = (options = {}) => {
                   thread: range.id
                 }, {
                   F: __dxlog_file3,
-                  L: 358,
+                  L: 355,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -1708,7 +1713,7 @@ var listener = ({ onFocus, onChange }) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
@@ -1717,7 +1722,7 @@ import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/the
 import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
@@ -1904,7 +1909,7 @@ var markdownHighlightStyle = (readonly) => {
       class: "font-mono"
     }
   ], {
-    scope: markdownLanguage,
+    scope: markdownLanguage2,
     all: {
       fontFamily: getToken("fontFamily.body", []).join(",")
     }
@@ -1936,7 +1941,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
       // NOTE: This extends the parser; it doesn't affect rendering.
       // https://github.github.com/gfm
       // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage2,
+      base: markdownLanguage3,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
       // Parser extensions.
@@ -2040,7 +2045,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({
@@ -2081,6 +2085,9 @@ var TableWidget = class extends WidgetType6 {
     }
     return table2;
   }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
@@ -2528,21 +2535,23 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const [root, setRoot] = useState(null);
-  const [{ state = void 0, view = void 0 } = {}, setEditor] = useState();
-  useImperativeHandle(forwardedRef, () => ({
-    root,
-    state,
+  const { themeMode } = useThemeContext();
+  const rootRef = useRef(null);
+  const [view, setView] = useState(null);
+  useImperativeHandle(forwardedRef, () => view, [
     view
-  }), [
+  ]);
+  useEffect(() => {
+    if (view && focus) {
+      view.focus();
+    }
+  }, [
     view,
-    state,
-    root
+    focus
   ]);
   const { awareness: awareness2, peer } = model;
   useEffect(() => {
@@ -2579,11 +2588,12 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
     comments2
   ]);
   useEffect(() => {
-    if (!root) {
+    if (!model || !rootRef.current) {
       return;
     }
-    const state2 = EditorState2.create({
+    const state = EditorState2.create({
       doc: model.text(),
+      selection,
       extensions: [
         readonly && EditorState2.readOnly.of(readonly),
         // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
@@ -2600,19 +2610,17 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
       ].filter(Boolean)
     });
     view?.destroy();
-    setEditor({
-      state: state2,
-      view: new EditorView12({
-        state: state2,
-        parent: root
-      })
+    const newView = new EditorView12({
+      parent: rootRef.current,
+      state
     });
+    setView(newView);
     return () => {
-      view?.destroy();
-      setEditor(void 0);
+      newView?.destroy();
+      setView(null);
     };
   }, [
-    root,
+    rootRef,
     model,
     readonly,
     editorMode,
@@ -2621,12 +2629,8 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
   const handleKeyUp = useCallback((event) => {
     const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
     switch (key) {
-      case "Enter": {
-        view?.contentDOM.focus();
-        break;
-      }
       case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
         break;
       }
     }
@@ -2636,16 +2640,16 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     key: model.id,
-    ref: setRoot,
+    ref: rootRef,
     tabIndex: 0,
     ...slots?.root,
     ...editorMode !== "vim" && tabsterDOMAttribute,
     onKeyUp: handleKeyUp
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
+  const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
@@ -2653,17 +2657,17 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots:
       basicBundle({
         readonly,
         themeMode,
-        placeholder: slots?.editor?.placeholder
+        placeholder: updatedSlots?.editor?.placeholder
       }),
       ...extensions
     ],
-    slots,
+    slots: updatedSlots,
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
+  const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
@@ -2671,11 +2675,11 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], sl
       markdownBundle({
         readonly,
         themeMode,
-        placeholder: slots?.editor?.placeholder
+        placeholder: updatedSlots?.editor?.placeholder
       }),
       ...extensions
     ],
-    slots,
+    slots: updatedSlots,
     ...props
   });
 });
@@ -2981,7 +2985,7 @@ var modelState = StateField5.define({
 });
 var useTextModel = (props) => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState2(() => createModel(props));
+  const [model, setModel] = useState2();
   useEffect2(() => setModel(createModel(props)), [
     identity,
     space,
@@ -3040,6 +3044,7 @@ var createAutomergeModel = ({ space, identity, text }) => {
 export {
   AwarenessProvider,
   BaseTextEditor,
+  CursorConverter,
   Doc,
   EditorModes,
   MarkdownEditor,
@@ -3055,11 +3060,13 @@ export {
   awareness,
   basicBundle,
   blast,
+  callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
   createAutomergeModel,
   createYjsModel,
+  cursorConverter,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,