@dxos/react-ui-editor 0.3.10-main.6ba804d → 0.3.10-main.74608f1

package/dist/lib/browser/index.mjs

@@ -54,8 +54,66 @@ var basicBundle = ({ themeMode, placeholder: _placeholder }) => [
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
 ].filter(Boolean);
 
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/demo.ts
+import { keymap as keymap2 } from "@codemirror/view";
+var defaultItems = [
+  "hello world!",
+  "this is a test.",
+  "this is [DXOS](https://dxos.org)"
+];
+var demo = ({ delay = 75, items = defaultItems } = {}) => {
+  let t;
+  let idx = 0;
+  return [
+    keymap2.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          idx = 0;
+          return true;
+        }
+      },
+      {
+        // Next prompt.
+        // TODO(burdon): Press 1-9 to select prompt?
+        key: "shift-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          const text = items[idx++];
+          if (idx === items?.length) {
+            idx = 0;
+          }
+          let i = 0;
+          const insert = (d = 0) => {
+            t = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: {
+                  from: pos,
+                  insert: text[i++]
+                },
+                selection: {
+                  anchor: pos + 1
+                }
+              });
+              if (i < text.length) {
+                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
+              }
+            }, d);
+          };
+          insert();
+          return true;
+        }
+      }
+    ])
+  ];
+};
+
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
-import { Decoration, EditorView as EditorView2, keymap as keymap2, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
+import { keymap as keymap3, Decoration, EditorView as EditorView2, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
+import { debounce } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
 var BookmarkWidget = class extends WidgetType {
@@ -65,7 +123,7 @@ var BookmarkWidget = class extends WidgetType {
     this._id = _id;
     invariant(this._id, void 0, {
       F: __dxlog_file,
-      L: 40,
+      L: 41,
       S: this,
       A: [
         "this._id",
@@ -76,7 +134,6 @@ var BookmarkWidget = class extends WidgetType {
   eq(other) {
     return this._id === other._id;
   }
-  // TODO(burdon): Click to select.
   toDOM() {
     const span = document.createElement("span");
     span.className = "cm-bookmark";
@@ -90,9 +147,13 @@ var styles = EditorView2.baseTheme({
     margin: "4px",
     padding: "4px",
     backgroundColor: "yellow"
+  },
+  "& .cm-bookmark-selected": {
+    backgroundColor: "orange"
   }
 });
 var comments = (options = {}) => {
+  let active;
   const bookmarkMatcher = new MatchDecorator({
     regexp: /\[\^(\w+)\]/g,
     decoration: (match, view, pos) => {
@@ -116,10 +177,13 @@ var comments = (options = {}) => {
       return view.plugin(plugin)?.bookmarks || Decoration.none;
     })
   });
+  const doUpdate = debounce((data) => {
+    options.onUpdate?.(data);
+  }, 200);
   return [
-    keymap2.of([
+    keymap3.of([
       {
-        key: options?.key ?? "alt-meta-c",
+        key: options?.key ?? "shift-meta-c",
         run: (view) => {
           const id = options.onCreate?.();
           if (id) {
@@ -143,30 +207,40 @@ var comments = (options = {}) => {
     bookmarks,
     // Monitor cursor movement.
     EditorView2.updateListener.of((update2) => {
+      active = void 0;
+      if (!options.onUpdate) {
+        return;
+      }
       const view = update2.view;
       const pos = view.state.selection.main.head;
       const decorations = [];
       const rangeSet = view.plugin(bookmarks)?.bookmarks;
-      rangeSet?.between(pos, pos + 1, (from, to, value) => {
-        if (value.spec.widget) {
-          decorations.push({
-            from,
-            to,
-            value
-          });
+      let closest = Infinity;
+      const { from, to } = view.visibleRanges?.[0] ?? {
+        from: 0,
+        to: view.state.doc.length
+      };
+      rangeSet?.between(from, to, (from2, to2, value) => {
+        decorations.push({
+          from: from2,
+          to: to2,
+          value
+        });
+        const d = Math.min(Math.abs(pos - from2), Math.abs(pos - to2));
+        if (d < closest) {
+          active = value.spec.id;
+          closest = d;
         }
       });
       if (decorations.length) {
-        const { from, value: { spec: { id } } } = decorations[0];
-        const location = view.coordsAtPos(from);
-        if (location) {
-          options.onUpdate?.({
-            items: decorations.map(({ value: { spec: { id: id2 } } }) => id2),
-            active: id,
-            pos,
-            location
-          });
-        }
+        doUpdate({
+          active,
+          items: decorations.map(({ from: from2, value: { spec: { id } } }) => ({
+            id,
+            pos: from2,
+            location: view.coordsAtPos(from2)
+          }))
+        });
       }
     }),
     styles
@@ -262,7 +336,7 @@ var link = (options = {}) => {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
 import { StateField as StateField2 } from "@codemirror/state";
-var listener = (onChange) => StateField2.define({
+var listener = ({ onChange }) => StateField2.define({
   create: () => null,
   update: (_value, transaction) => {
     if (transaction.docChanged && onChange) {
@@ -274,14 +348,14 @@ var listener = (onChange) => StateField2.define({
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, indentWithTab } from "@codemirror/commands";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage2, 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 { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView4, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap3, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
+import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView4, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap4, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
 import { markdownLanguage } from "@codemirror/lang-markdown";
@@ -490,14 +564,17 @@ var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
     history(),
     indentOnInput(),
     rectangularSelection(),
-    // TODO(burdon): Review.
-    keymap3.of([
-      ...closeBracketsKeymap,
+    // https://codemirror.net/docs/ref/#view.keymap
+    keymap4.of([
+      // https://codemirror.net/docs/ref/#commands.defaultKeymap
       ...defaultKeymap,
-      // ...foldKeymap,
-      // ...historyKeymap,
-      // ...lintKeymap,
+      // https://codemirror.net/docs/ref/#commands.historyKeymap
+      ...historyKeymap,
+      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+      ...closeBracketsKeymap,
+      // https://codemirror.net/docs/ref/#search.searchKeymap
       ...searchKeymap,
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab
     ]),
     // Main extension.
@@ -926,6 +1003,15 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
     onKeyUp: handleKeyUp
   });
 });
+var maybeDebug = () => {
+  const items = localStorage.getItem("dxos.composer.demo");
+  if (items) {
+    return demo({
+      items: items.split(",")
+    });
+  }
+  return [];
+};
 var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const slots = defaultsDeep({}, _slots, defaultTextSlots);
@@ -936,6 +1022,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, .
         themeMode,
         placeholder: slots?.editor?.placeholder
       }),
+      maybeDebug(),
       ...extensions
     ],
     slots,
@@ -952,6 +1039,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slot
         themeMode,
         placeholder: slots?.editor?.placeholder
       }),
+      maybeDebug(),
       ...extensions
     ],
     slots,
@@ -991,9 +1079,9 @@ import * as automerge2 from "@dxos/automerge/automerge";
 // packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
 import { next as automerge } from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/hooks/automerge/amToCodemirror.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/translation/automerge-to-codemirror.ts
 import { ChangeSet } from "@codemirror/state";
-var amToCodemirror_default = (view, selection, target, patches) => {
+var automergeToCodemirror = (view, selection, target, patches) => {
   for (const patch of patches) {
     const changeSpec = handlePatch(patch, target, view.state);
     if (changeSpec != null) {
@@ -1098,9 +1186,9 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/hooks/automerge/codeMirrorToAm.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/translation/codemirror-to-automerge.ts
 import { next as am } from "@dxos/automerge/automerge";
-var codeMirrorToAm_default = (field, handle, transactions, state) => {
+var codemirrorToAutomerge = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
   let hasChanges = false;
   for (const tr of transactions) {
@@ -1144,12 +1232,12 @@ var PatchSemaphore = class {
           annotations: reconcileAnnotationType.of(true)
         });
       }
-      let newHeads = codeMirrorToAm_default(this._field, handle, transactions, view.state);
+      let newHeads = codemirrorToAutomerge(this._field, handle, transactions, view.state);
       if (newHeads === null || newHeads === void 0) {
         newHeads = automerge.getHeads(handle.docSync());
       }
       const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync(), oldHeads, newHeads);
-      amToCodemirror_default(view, selection, path, diff);
+      automergeToCodemirror(view, selection, path, diff);
       view.dispatch({
         effects: updateHeads(newHeads),
         annotations: reconcileAnnotationType.of({})
@@ -1465,6 +1553,7 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  demo,
   link,
   listener,
   markdownBundle,