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

package/src/components/TextEditor/extensions/comments.ts

@@ -4,17 +4,18 @@
 
 import { type Extension } from '@codemirror/state';
 import {
-  Decoration,
+  keymap,
   type DecorationSet,
+  type Rect,
+  type ViewUpdate,
+  Decoration,
   EditorView,
-  keymap,
   MatchDecorator,
-  type Rect,
   ViewPlugin,
-  type ViewUpdate,
   WidgetType,
 } from '@codemirror/view';
 
+import { debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 
 // 1. TODO(burdon): Make atomic (for tasklist also).
@@ -44,10 +45,10 @@ class BookmarkWidget extends WidgetType {
     return this._id === other._id;
   }
 
-  // TODO(burdon): Click to select.
   override toDOM() {
     const span = document.createElement('span');
     span.className = 'cm-bookmark';
+    // TODO(burdon): Call out to react?
     // https://emojifinder.com/comment
     span.textContent = '💬';
     return span;
@@ -62,18 +63,28 @@ const styles = EditorView.baseTheme({
     padding: '4px',
     backgroundColor: 'yellow',
   },
+  '& .cm-bookmark-selected': {
+    backgroundColor: 'orange',
+  },
 });
 
+type CommentsInfo = {
+  active?: string;
+  items: { id: string; pos: number; location: Rect | null }[];
+};
+
 export type CommentsOptions = {
   key?: string;
   onCreate?: () => string | void;
-  onUpdate?: (info: { items: string[]; active: string; pos: number; location: Rect }) => void;
+  onUpdate?: (info: CommentsInfo) => void;
 };
 
 // https://www.markdownguide.org/extended-syntax/#footnotes
 // TODO(burdon): Record span in automerge model?
 // TODO(burdon): Extended markdown: https://www.markdownguide.org/extended-syntax
 export const comments = (options: CommentsOptions = {}): Extension => {
+  let active: string | undefined;
+
   const bookmarkMatcher = new MatchDecorator({
     regexp: /\[\^(\w+)\]/g,
     decoration: (match, view, pos) => {
@@ -105,10 +116,14 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     },
   );
 
+  const doUpdate = debounce((data: CommentsInfo) => {
+    options.onUpdate?.(data);
+  }, 200);
+
   return [
     keymap.of([
       {
-        key: options?.key ?? 'alt-meta-c',
+        key: options?.key ?? 'shift-meta-c',
         run: (view) => {
           // Insert footnote.
           const id = options.onCreate?.();
@@ -132,39 +147,41 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 
     // Monitor cursor movement.
     EditorView.updateListener.of((update) => {
+      active = undefined;
+      if (!options.onUpdate) {
+        return;
+      }
+
       const view = update.view;
       const pos = view.state.selection.main.head;
 
       const decorations: { from: number; to: number; value: Decoration }[] = [];
       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;
+      // TODO(burdon): Always shows entire document?
+      const { from, to } = view.visibleRanges?.[0] ?? { from: 0, to: view.state.doc.length };
+      rangeSet?.between(from, to, (from, to, value) => {
+        decorations.push({ from, to, value });
+        const d = Math.min(Math.abs(pos - from), Math.abs(pos - to));
+        if (d < closest) {
+          // TODO(burdon): Update class of selected.
+          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 },
-                },
-              }) => id,
-            ),
-            active: id,
-            pos,
-            location,
-          });
-        }
+        doUpdate({
+          active,
+          items: decorations.map(
+            ({
+              from,
+              value: {
+                spec: { id },
+              },
+            }) => ({ id: id as string, pos: from, location: view.coordsAtPos(from) }),
+          ),
+        });
       }
     }),
 

package/src/components/TextEditor/extensions/demo.ts

@@ -0,0 +1,66 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { keymap } from '@codemirror/view';
+
+export type DemoOptions = {
+  delay?: number;
+  items?: string[];
+};
+
+const defaultItems = ['hello world!', 'this is a test.', 'this is [DXOS](https://dxos.org)'];
+
+/**
+ * Demo script.
+ * Configurable plugin that let's user cycle through pre-configured input script.
+ */
+export const demo = ({ delay = 75, items = defaultItems }: DemoOptions = {}) => {
+  let t: any;
+  let idx = 0;
+
+  return [
+    keymap.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);
+          // TODO(burdon): Add space if needed.
+          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;
+        },
+      },
+    ]),
+  ];
+};

package/src/components/TextEditor/extensions/index.ts

@@ -4,6 +4,7 @@
 
 export * from './autocomplete';
 export * from './basic';
+export * from './demo';
 export * from './comments';
 export * from './link';
 export * from './listener';

package/src/components/TextEditor/extensions/listener.ts

@@ -4,13 +4,13 @@
 
 import { StateField } from '@codemirror/state';
 
-export type TextListener = (text: string) => void;
+export type ListenerOptions = { onChange: (text: string) => void };
 
 /**
  * Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
  */
 // TODO(burdon): Expose options.
-export const listener = (onChange: TextListener) =>
+export const listener = ({ onChange }: ListenerOptions) =>
   StateField.define({
     create: () => null,
     update: (_value, transaction) => {

package/src/components/TextEditor/extensions/markdown/bundle.ts

@@ -3,7 +3,7 @@
 //
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, indentWithTab } from '@codemirror/commands';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
 import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
@@ -54,14 +54,17 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
     indentOnInput(),
     rectangularSelection(),
 
-    // TODO(burdon): Review.
+    // https://codemirror.net/docs/ref/#view.keymap
     keymap.of([
-      ...closeBracketsKeymap,
+      // 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,
     ]),
 

package/src/hooks/automerge/PatchSemaphore.ts

@@ -2,20 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(burdon): Additional copyright?
+
 import { type EditorView } from '@codemirror/view';
 
 import { next as automerge } from '@dxos/automerge/automerge';
 
-import amToCodemirror from './amToCodemirror';
-import codeMirrorToAm from './codeMirrorToAm';
 import { type IDocHandle } from './handle';
 import { type Field, isReconcileTx, getPath, reconcileAnnotationType, updateHeads, getLastHeads } from './plugin';
+import { automergeToCodemirror, codemirrorToAutomerge } from './translation';
 
 type Doc<T> = automerge.Doc<T>;
 type Heads = automerge.Heads;
 
 type ChangeFn = (atHeads: Heads, change: (doc: Doc<unknown>) => void) => Heads | undefined;
 
+/**
+ * TODO(burdon): Comment.
+ */
 export class PatchSemaphore {
   _field!: Field;
   _inReconcile = false;
@@ -39,7 +43,7 @@ export class PatchSemaphore {
 
     const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
 
-    // First undo all the unreconciled transactions
+    // First undo all the unreconciled transactions.
     const toInvert = transactions.slice().reverse();
     for (const tx of toInvert) {
       const inverted = tx.changes.invert(tx.startState.doc);
@@ -50,19 +54,18 @@ export class PatchSemaphore {
       });
     }
 
-    // now apply the unreconciled transactions to the document
-    let newHeads = codeMirrorToAm(this._field, handle, transactions, view.state);
+    // Apply the unreconciled transactions to the document.
+    let newHeads = codemirrorToAutomerge(this._field, handle, transactions, view.state);
 
-    // NOTE: null and undefined each come from automerge and repo respectively
+    // NOTE: null and undefined each come from automerge and repo respectively.
     if (newHeads === null || newHeads === undefined) {
       // TODO: @alexjg this is the call that's resetting the editor state on click
       newHeads = automerge.getHeads(handle.docSync()!);
     }
 
-    // now get the diff between the updated state of the document and the heads
-    // and apply that to the codemirror doc
+    // Now get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync()!, oldHeads, newHeads);
-    amToCodemirror(view, selection, path, diff);
+    automergeToCodemirror(view, selection, path, diff);
 
     view.dispatch({
       effects: updateHeads(newHeads),

package/src/hooks/automerge/automerge.stories.tsx

@@ -82,9 +82,10 @@ const Story = () => {
 };
 
 export default {
-  title: 'Automerge',
+  title: 'react-ui-editor/Automerge',
+  component: Editor,
 };
 
-export const AutomergeRepo = {
+export const Default = {
   render: () => <Story />,
 };

package/src/hooks/automerge/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export { automergePlugin, type AutomergePlugin } from './plugin';
 export { type IDocHandle } from './handle';
+export { automergePlugin, type AutomergePlugin } from './plugin';

package/src/hooks/automerge/plugin.ts

@@ -78,6 +78,7 @@ export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlug
       return result;
     },
   });
+
   const semaphore = new PatchSemaphore(stateField);
 
   const viewPlugin = ViewPlugin.fromClass(

package/src/hooks/automerge/{amToCodemirror.ts → translation/automerge-to-codemirror.ts}

@@ -2,6 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(burdon): Additional copyright?
+
 import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
@@ -14,9 +16,14 @@ import {
   type SpliceTextPatch,
 } from '@dxos/automerge/automerge';
 
-import { reconcileAnnotationType } from './plugin';
+import { reconcileAnnotationType } from '../plugin';
 
-export default (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => {
+export const automergeToCodemirror = (
+  view: EditorView,
+  selection: EditorSelection,
+  target: Prop[],
+  patches: Patch[],
+) => {
   for (const patch of patches) {
     const changeSpec = handlePatch(patch, target, view.state);
     if (changeSpec != null) {
@@ -28,6 +35,7 @@ export default (view: EditorView, selection: EditorSelection, target: Prop[], pa
       });
     }
   }
+
   view.dispatch({
     selection,
     annotations: reconcileAnnotationType.of({}),

package/src/hooks/automerge/{codeMirrorToAm.ts → translation/codemirror-to-automerge.ts}

@@ -2,14 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(burdon): Additional copyright?
+
 import { type EditorState, type Text, type Transaction } from '@codemirror/state';
 
 import { next as am, type Heads } from '@dxos/automerge/automerge';
 
-import { type IDocHandle } from './handle';
-import { type Field } from './plugin';
+import { type IDocHandle } from '../handle';
+import { type Field } from '../plugin';
 
-export default (
+export const codemirrorToAutomerge = (
   field: Field,
   handle: IDocHandle,
   transactions: Transaction[],
@@ -18,7 +20,7 @@ export default (
   const { lastHeads, path } = state.field(field);
 
   // We don't want to call `automerge.updateAt` if there are no changes.
-  // Otherwise later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
+  // Otherwise, later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
   let hasChanges = false;
   for (const tr of transactions) {
     tr.changes.iterChanges(() => {
@@ -37,5 +39,6 @@ export default (
       });
     }
   });
+
   return newHeads ?? undefined;
 };

package/src/hooks/automerge/translation/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './automerge-to-codemirror';
+export * from './codemirror-to-automerge';

package/dist/types/src/hooks/automerge/amToCodemirror.d.ts

@@ -1,6 +0,0 @@
-import { type EditorSelection } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-import { type Patch, type Prop } from '@dxos/automerge/automerge';
-declare const _default: (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => void;
-export default _default;
-//# sourceMappingURL=amToCodemirror.d.ts.map

package/dist/types/src/hooks/automerge/amToCodemirror.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"amToCodemirror.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/amToCodemirror.ts"],"names":[],"mappings":"AAIA,OAAO,EAA8B,KAAK,eAAe,EAAoB,MAAM,mBAAmB,CAAC;AACvG,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAGL,KAAK,KAAK,EACV,KAAK,IAAI,EAGV,MAAM,2BAA2B,CAAC;+BAIb,UAAU,aAAa,eAAe,UAAU,IAAI,EAAE,WAAW,KAAK,EAAE;AAA9F,wBAgBE"}

package/dist/types/src/hooks/automerge/codeMirrorToAm.d.ts

@@ -1,7 +0,0 @@
-import { type EditorState, type Transaction } from '@codemirror/state';
-import { type Heads } from '@dxos/automerge/automerge';
-import { type IDocHandle } from './handle';
-import { type Field } from './plugin';
-declare const _default: (field: Field, handle: IDocHandle, transactions: Transaction[], state: EditorState) => Heads | undefined;
-export default _default;
-//# sourceMappingURL=codeMirrorToAm.d.ts.map

package/dist/types/src/hooks/automerge/codeMirrorToAm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"codeMirrorToAm.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/codeMirrorToAm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAa,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;+CAI5B,UAAU,gBACJ,WAAW,EAAE,SACpB,WAAW,KACjB,KAAK,GAAG,SAAS;AALpB,wBA6BE"}