@dxos/react-ui-editor 0.3.10-main.3c0616c → 0.3.10-main.3edbcce

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -10,11 +10,21 @@ import React, { StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
+import { PublicKey } from '@dxos/keys';
 import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps, type TextEditorRef } from './TextEditor';
-import { autocomplete, listener, link, tasklist, tooltip, type TooltipOptions, type LinkOptions } from './extensions';
+import {
+  autocomplete,
+  listener,
+  link,
+  tasklist,
+  tooltip,
+  type TooltipOptions,
+  type LinkOptions,
+  comments,
+} from './extensions';
 import { useTextModel } from '../../hooks';
 
 // TODO(burdon): Read-only render mode (presentation).
@@ -31,9 +41,11 @@ const text = {
   tasks: str(
     '## Tasks',
     '',
-    '- [x] parsing',
-    '- [ ] styling',
-    '- [ ] rendering',
+    '- [x] decorator',
+    '- [ ] checkbox',
+    '  - [ ] state',
+    '  - [ ] indent',
+    '  - [x] style',
   ),
 
   list: str(
@@ -80,6 +92,8 @@ const text = {
   headings: str(
     ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
   ),
+
+  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat())
 };
 
 const document = str(
@@ -180,7 +194,7 @@ export const Default = {
         tooltip({ onHover }),
         tasklist(),
         autocomplete({
-          getOptions: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
         }),
       ]}
     />
@@ -205,8 +219,10 @@ export const TaskList = {
       text={str(text.tasks, '', text.list)}
       extensions={[
         tasklist(),
-        listener((text) => {
-          console.log(text);
+        listener({
+          onChange: (text) => {
+            console.log(text);
+          },
         }),
       ]}
     />
@@ -220,7 +236,24 @@ export const Autocomplete = {
       extensions={[
         link({ onRender }),
         autocomplete({
-          getOptions: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
+};
+
+const mark = () => `[^${PublicKey.random().toHex()}]`;
+export const Comments = {
+  render: () => (
+    <Story
+      text={str(mark(), '', text.paragraphs, mark(), '', mark(), '')}
+      extensions={[
+        comments({
+          onCreate: () => PublicKey.random().toHex(),
+          onUpdate: (info) => {
+            console.log('update', info);
+          },
         }),
       ]}
     />

package/src/components/TextEditor/TextEditor.tsx

@@ -16,15 +16,13 @@ import React, {
   useImperativeHandle,
   useState,
 } from 'react';
-import { yCollab } from 'y-codemirror.next';
 
 import { generateName } from '@dxos/display-name';
 import { useThemeContext } from '@dxos/react-ui';
 import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
-import { type YText } from '@dxos/text-model';
 
-import { basicBundle, markdownBundle } from './extensions';
-import { defaultTheme, textTheme } from './themes';
+import { basicBundle, demo, markdownBundle } from './extensions';
+import { defaultTheme, markdownTheme, textTheme } from './themes';
 import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 
@@ -72,23 +70,22 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
 
-    // TODO(burdon): Factor out extension (remove logic from react-ui-editor).
-    // const collaboration = useCollaboration(model, themeMode);
-    const { provider, peer } = model;
+    const [root, setRoot] = useState<HTMLDivElement | null>(null);
+    const [state, setState] = useState<EditorState>();
+    const [view, setView] = useState<EditorView>();
+    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
+
+    // TODO(burdon): Factor out?
+    const { awareness, peer } = model;
     useEffect(() => {
-      if (provider && peer) {
-        provider.awareness.setLocalStateField('user', {
+      if (awareness && peer) {
+        awareness.setLocalStateField('user', {
           name: peer.name ?? generateName(peer.id),
           color: getColorForValue({ value: peer.id, type: 'color' }),
           colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
         });
       }
-    }, [provider, peer, themeMode]);
-
-    const [root, setRoot] = useState<HTMLDivElement | null>(null);
-    const [state, setState] = useState<EditorState>();
-    const [view, setView] = useState<EditorView>();
-    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
+    }, [awareness, peer, themeMode]);
 
     useEffect(() => {
       if (!root) {
@@ -108,7 +105,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           EditorView.darkTheme.of(themeMode === 'dark'),
 
           // Storage and replication.
-          yCollab(model.content as YText, model.provider?.awareness),
+          model.extension,
 
           // Custom.
           ...extensions,
@@ -127,7 +124,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
         setView(undefined);
         setState(undefined);
       };
-    }, [root, model.content, themeMode, editorMode]);
+    }, [root, model, themeMode, editorMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
@@ -160,7 +157,17 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
   },
 );
 
-// TODO(burdon): Set default text theme?
+// TODO(burdon): Allow plugins to set extensions (factory).
+const maybeDebug = (): Extension => {
+  // TODO(burdon): Parse JSON script format (with key bindings?)
+  const items = localStorage.getItem('dxos.composer.demo');
+  if (items) {
+    return demo({ items: items.split(',') });
+  }
+
+  return [];
+};
+
 export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
   ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
@@ -168,7 +175,7 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={[basicBundle({ themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
+        extensions={[basicBundle({ themeMode, placeholder: slots?.editor?.placeholder }), maybeDebug(), ...extensions]}
         slots={slots}
         {...props}
       />
@@ -179,11 +186,15 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
   ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultSlots);
+    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={[markdownBundle({ themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
+        extensions={[
+          markdownBundle({ themeMode, placeholder: slots?.editor?.placeholder }),
+          maybeDebug(),
+          ...extensions,
+        ]}
         slots={slots}
         {...props}
       />
@@ -203,3 +214,10 @@ export const defaultTextSlots: TextEditorSlots = {
     theme: textTheme,
   },
 };
+
+export const defaultMarkdownSlots: TextEditorSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: markdownTheme,
+  },
+};

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

@@ -23,14 +23,16 @@ import {
 } from '@codemirror/autocomplete';
 import { keymap } from '@codemirror/view';
 
+export type AutocompleteResult = Completion;
+
 export type AutocompleteOptions = {
-  getOptions: (text: string) => Completion[];
+  onSearch: (text: string) => Completion[];
 };
 
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ getOptions }: AutocompleteOptions) => {
+export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -57,7 +59,7 @@ export const autocomplete = ({ getOptions }: AutocompleteOptions) => {
           // TODO(burdon): Option to convert to links?
           return {
             from: word.from,
-            options: getOptions(word.text.toLowerCase()),
+            options: onSearch(word.text.toLowerCase()),
             // options: [
             //   { label: 'apple', type: 'keyword' },
             //   { label: 'amazon', type: 'keyword' },

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

@@ -0,0 +1,190 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import {
+  keymap,
+  type DecorationSet,
+  type Rect,
+  type ViewUpdate,
+  Decoration,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  WidgetType,
+} from '@codemirror/view';
+
+import { debounce } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+
+// 1. TODO(burdon): Make atomic (for tasklist also).
+//    - https://discuss.codemirror.net/t/easily-track-remove-content-with-decorations/4606
+//    - https://discuss.codemirror.net/t/creating-atomic-replace-decorations/2961
+//    - https://codemirror.net/docs/ref/#state.EditorState%5EtransactionFilter (transaction filter: move, delete).
+// 2. TODO(burdon): Create/track threads in composer (change global state). Select/follow. Scroll with page.
+//    - Separate from chat/search.
+// 3. TODO(burdon): Support multiple threads in sidebar?
+// 4. TODO(burdon): Anchor AI thread when creating section.
+// 5. TODO(burdon): Button to resolve thread to close comments.
+
+// 6. TODO(burdon): Perf: Update existing rangeset.
+//  https://discuss.codemirror.net/t/rangeset-with-metadata-and-different-decorations/3874
+
+// TODO(burdon): Import note (performance):
+//  Easily track & remove content with decorations
+//  https://discuss.codemirror.net/t/easily-track-remove-content-with-decorations/4606
+
+class BookmarkWidget extends WidgetType {
+  constructor(private readonly _pos: number, private readonly _id: string) {
+    super();
+    invariant(this._id);
+  }
+
+  override eq(other: BookmarkWidget) {
+    return this._id === other._id;
+  }
+
+  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;
+  }
+}
+
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-bookmark': {
+    cursor: 'pointer',
+    margin: '4px',
+    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: 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) => {
+      const id = match[1];
+      return Decoration.replace({
+        id,
+        widget: new BookmarkWidget(pos, id),
+      });
+    },
+  });
+
+  const bookmarks = ViewPlugin.fromClass(
+    class {
+      bookmarks: DecorationSet;
+      constructor(view: EditorView) {
+        this.bookmarks = bookmarkMatcher.createDeco(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.bookmarks = bookmarkMatcher.updateDeco(update, this.bookmarks);
+      }
+    },
+    {
+      decorations: (instance) => instance.bookmarks,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.bookmarks || Decoration.none;
+        }),
+    },
+  );
+
+  const doUpdate = debounce((data: CommentsInfo) => {
+    options.onUpdate?.(data);
+  }, 200);
+
+  return [
+    keymap.of([
+      {
+        key: options?.key ?? 'shift-meta-c',
+        run: (view) => {
+          // Insert footnote.
+          const id = options.onCreate?.();
+          if (id) {
+            const pos = view.state.selection.main.head;
+            const tag = `[^${id}]`;
+            view.dispatch({
+              changes: { from: pos, insert: tag },
+              selection: { anchor: pos + tag.length },
+            });
+
+            return true;
+          }
+
+          return false;
+        },
+      },
+    ]),
+
+    bookmarks,
+
+    // 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;
+      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) {
+        doUpdate({
+          active,
+          items: decorations.map(
+            ({
+              from,
+              value: {
+                spec: { id },
+              },
+            }) => ({ id: id as string, pos: from, location: view.coordsAtPos(from) }),
+          ),
+        });
+      }
+    }),
+
+    styles,
+  ];
+};

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/experimental.tsx

@@ -19,6 +19,7 @@ import {
 // TODO(burdon): Add-on: dialog.
 // TODO(burdon): Comments: https://codemirror.net/5/doc/manual.html#setBookmark
 // TODO(burdon): Split view: https://codemirror.net/examples/split
+// TODO(burdon): https://codemirror.net/5/demo/simplemode.html
 
 // https://codemirror.net/examples/autocompletion
 // https://codemirror.net/docs/ref/#autocomplete.autocompletion

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

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

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

@@ -77,6 +77,11 @@ class LinkText extends WidgetType {
   }
 }
 
+/**
+ * Range sets provide a data structure that can hold a collection of tagged,
+ * possibly overlapping ranges in such a way that they can efficiently be mapped though document changes.
+ * https://codemirror.net/docs/ref/#state
+ */
 const update = (state: EditorState, options: LinkOptions) => {
   const builder = new RangeSetBuilder();
   const cursor = state.selection.main.head;
@@ -89,6 +94,9 @@ const update = (state: EditorState, options: LinkOptions) => {
 
         const urlNode = node.node.getChild('URL');
         const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
+        if (!url) {
+          return false;
+        }
 
         if (cursor < node.from || cursor > node.to) {
           builder.add(
@@ -109,9 +117,9 @@ const update = (state: EditorState, options: LinkOptions) => {
             }),
           );
         }
-      }
 
-      return true;
+        return false;
+      }
     },
   });
 

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

@@ -4,12 +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
  */
-export const listener = (onChange: TextListener) =>
+// TODO(burdon): Expose options.
+export const listener = ({ onChange }: ListenerOptions) =>
   StateField.define({
     create: () => null,
     update: (_value, transaction) => {

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

@@ -3,17 +3,10 @@
 //
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { defaultKeymap, history, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import {
-  bracketMatching,
-  defaultHighlightStyle,
-  foldKeymap,
-  indentOnInput,
-  syntaxHighlighting,
-} from '@codemirror/language';
+import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { lintKeymap } from '@codemirror/lint';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
@@ -50,7 +43,6 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
     EditorState.allowMultipleSelections.of(true),
     EditorView.lineWrapping,
 
-    // autocompletion(),
     crosshairCursor(),
     dropCursor(),
     drawSelection(),
@@ -62,13 +54,13 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
     indentOnInput(),
     rectangularSelection(),
 
+    // TODO(burdon): Review.
     keymap.of([
       ...closeBracketsKeymap,
-      // ...completionKeymap,
       ...defaultKeymap,
-      ...foldKeymap,
-      ...historyKeymap,
-      ...lintKeymap,
+      // ...foldKeymap,
+      // ...historyKeymap,
+      // ...lintKeymap,
       ...searchKeymap,
       indentWithTab,
     ]),

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

@@ -134,10 +134,11 @@ export const markdownHighlightStyle = HighlightStyle.define(
       class: codeMark,
     },
 
-    // The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
     // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
     // when a language is specified. In this case, the syntax highlighting extensions will colorize
     // the code, but all other CSS properties will be inherited.
+    // IMPORTANT: Therefore, the fenced code block will use the base editor font.
     {
       tag: [markdownTags.CodeText, markdownTags.InlineCode],
       class: code,