@dxos/react-ui-editor 0.3.10-next.6fe28e7 → 0.3.10-next.86bde39

package/src/components/TextEditor/TextEditor.tsx

@@ -7,23 +7,24 @@ import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { vim } from '@replit/codemirror-vim';
 import defaultsDeep from 'lodash.defaultsdeep';
-import get from 'lodash.get';
 import React, {
+  type ComponentProps,
   type KeyboardEvent,
   forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
   useState,
-  type ComponentProps,
 } from 'react';
 
-import { isDocAccessor } from '@dxos/echo-schema';
+import { generateName } from '@dxos/display-name';
 import { useThemeContext } from '@dxos/react-ui';
+import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, basicTheme, markdownBundle, markdownTheme } from './extensions';
-import { type EditorModel, useCollaboration } from '../../hooks';
-import type { ThemeStyles } from '../../styles';
+import { basicBundle, markdownBundle } from './extensions';
+import { defaultTheme, markdownTheme, textTheme } from './themes';
+import { type EditorModel } from '../../hooks';
+import { type ThemeStyles } from '../../styles';
 
 export const EditorModes = ['default', 'vim'] as const;
 export type EditorMode = (typeof EditorModes)[number];
@@ -37,7 +38,7 @@ export type CursorInfo = {
 };
 
 export type TextEditorRef = {
-  editor: HTMLDivElement | null;
+  root: HTMLDivElement | null;
   state?: EditorState;
   view?: EditorView;
 };
@@ -65,66 +66,65 @@ export type TextEditorProps = {
  * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
 export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, extensions = [], slots, editorMode }, forwardedRef) => {
+  ({ model, extensions = [], slots = defaultSlots, editorMode }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
 
-    const [parent, setParent] = useState<HTMLDivElement | null>(null);
+    const [root, setRoot] = useState<HTMLDivElement | null>(null);
     const [state, setState] = useState<EditorState>();
     const [view, setView] = useState<EditorView>();
-    useImperativeHandle(
-      forwardedRef,
-      () => ({
-        editor: parent,
-        state,
-        view,
-      }),
-      [view, state, parent],
-    );
+    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
 
-    // TODO(burdon): Pass in extension?
-    const collaboration = useCollaboration(model, themeMode);
+    // TODO(burdon): Factor out?
+    const { awareness, peer } = model;
+    useEffect(() => {
+      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' }),
+        });
+      }
+    }, [awareness, peer, themeMode]);
 
     useEffect(() => {
-      if (!parent) {
+      if (!root) {
         return;
       }
 
-      const initialText = isDocAccessor(model.content)
-        ? get(model.content.handle.docSync(), model.content.path)
-        : model.content?.toString();
-
       const state = EditorState.create({
-        doc: initialText,
+        doc: model.text(),
         extensions: [
           // TODO(burdon): Factor out VIM mode?
           editorMode === 'vim' && vim(),
 
-          // Replication.
-          collaboration,
-
           // Theme.
-          slots?.editor?.theme && EditorView.theme(slots?.editor?.theme),
+          EditorView.baseTheme(defaultTheme),
+          EditorView.theme(slots?.editor?.theme ?? {}),
+          // TODO(burdon): themeMode doesn't change in storybooks.
+          EditorView.darkTheme.of(themeMode === 'dark'),
+
+          // Storage and replication.
+          model.extension,
 
           // Custom.
           ...extensions,
         ].filter(Boolean) as Extension[],
       });
 
-      setState(state);
-
       // NOTE: This repaints the editor.
       // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
       // Ideally this should not be hit except when changing between text objects.
       view?.destroy();
-      setView(new EditorView({ state, parent }));
+      setView(new EditorView({ state, parent: root }));
+      setState(state);
 
       return () => {
         view?.destroy();
         setView(undefined);
         setState(undefined);
       };
-    }, [parent, model.content, themeMode, editorMode]);
+    }, [root, model, themeMode, editorMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
@@ -136,7 +136,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
             break;
           }
         }
@@ -147,7 +147,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={setParent}
+        ref={setRoot}
         tabIndex={0}
         {...slots?.root}
         {...(editorMode !== 'vim' && tabsterDOMAttribute)}
@@ -157,15 +157,16 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
   },
 );
 
+// TODO(burdon): Set default text theme?
 export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+  ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const extensions = [...(_extensions ?? []), basicBundle({ themeMode, placeholder: slots?.editor?.placeholder })];
+    const slots = defaultsDeep({}, _slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={extensions}
-        slots={defaultsDeep({}, slots, { editor: { theme: basicTheme } })}
+        extensions={[basicBundle({ themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
+        slots={slots}
         {...props}
       />
     );
@@ -173,16 +174,36 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 );
 
 export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+  ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const extensions = [...(_extensions ?? []), markdownBundle({ themeMode })];
+    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={extensions}
-        slots={defaultsDeep({}, slots, { editor: { theme: markdownTheme } })}
+        extensions={[markdownBundle({ themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
+        slots={slots}
         {...props}
       />
     );
   },
 );
+
+export const defaultSlots: TextEditorSlots = {
+  root: {
+    className: mx('p-2', inputSurface),
+  },
+};
+
+export const defaultTextSlots: TextEditorSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: textTheme,
+  },
+};
+
+export const defaultMarkdownSlots: TextEditorSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: markdownTheme,
+  },
+};

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

@@ -0,0 +1,74 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// TODO(burdon): Automcomplete: https://codemirror.net/5/doc/manual.html#addon_runmode
+// TODO(burdon): Modes: parallel parsing and decoration (e.g., associated with language).
+// TODO(burdon): Add-on: runmode: run lexer over content (with rendering codemirror).
+//  https://codemirror.net/5/doc/manual.html#addon_runmode
+// 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
+
+// https://codemirror.net/examples/autocompletion
+// https://codemirror.net/docs/ref/#autocomplete.autocompletion
+// https://codemirror.net/docs/ref/#autocomplete.Completion
+
+import {
+  autocompletion,
+  type Completion,
+  type CompletionContext,
+  completionKeymap,
+  type CompletionResult,
+} from '@codemirror/autocomplete';
+import { keymap } from '@codemirror/view';
+
+export type AutocompleteResult = Completion;
+
+export type AutocompleteOptions = {
+  onSearch: (text: string) => Completion[];
+};
+
+/**
+ * Autocomplete extension.
+ */
+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
+    keymap.of(completionKeymap),
+
+    // https://codemirror.net/examples/autocompletion
+    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
+    autocompletion({
+      // TODO(burdon): Set custom keymap.
+      // 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: CompletionContext): CompletionResult | null => {
+          const word = context.matchBefore(/\w*/);
+          if (!word || (word.from === word.to && !context.explicit)) {
+            return null;
+          }
+
+          // TODO(burdon): Option to convert to links?
+          return {
+            from: word.from,
+            options: onSearch(word.text.toLowerCase()),
+            // options: [
+            //   { label: 'apple', type: 'keyword' },
+            //   { label: 'amazon', type: 'keyword' },
+            //   { label: 'hello', type: 'variable', info: '(World)' },
+            //   { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
+            // ],
+          };
+        },
+      ],
+    }),
+  ];
+};

package/src/components/TextEditor/extensions/{basic/bundle.ts → basic.ts}

@@ -17,12 +17,14 @@ export type BasicBundleOptions = {
 
 export const basicBundle = ({ themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
   [
+    // TODO(burdon): Compare with minimalSetup.
+    // https://codemirror.net/docs/ref/#codemirror.minimalSetup
     bracketMatching(),
     closeBrackets(),
-    _placeholder && placeholder(_placeholder),
-
     EditorView.lineWrapping,
 
+    _placeholder && placeholder(_placeholder),
+
     // TODO(burdon): Is this required?
     themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
   ].filter(Boolean) as Extension[];

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

@@ -0,0 +1,173 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  keymap,
+  MatchDecorator,
+  type Rect,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+} from '@codemirror/view';
+
+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;
+  }
+
+  // TODO(burdon): Click to select.
+  override toDOM() {
+    const span = document.createElement('span');
+    span.className = 'cm-bookmark';
+    // 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',
+  },
+});
+
+export type CommentsOptions = {
+  key?: string;
+  onCreate?: () => string | void;
+  onUpdate?: (info: { items: string[]; active: string; pos: number; location: Rect }) => 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 => {
+  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;
+        }),
+    },
+  );
+
+  return [
+    keymap.of([
+      {
+        key: options?.key ?? 'alt-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) => {
+      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 });
+        }
+      });
+
+      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,
+          });
+        }
+      }
+    }),
+
+    styles,
+  ];
+};

package/src/components/TextEditor/extensions/{hyperlink/hyperlinkWidget.tsx → experimental.tsx}

@@ -13,12 +13,28 @@ import {
   type ViewUpdate,
 } from '@codemirror/view';
 
+// TODO(burdon): Modes: parallel parsing and decoration (e.g., associated with language).
+// TODO(burdon): Add-on: runmode: run lexer over content (with rendering codemirror).
+//  https://codemirror.net/5/doc/manual.html#addon_runmode
+// 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
+// https://codemirror.net/docs/ref/#autocomplete.Completion
+
+// TODO(burdon): Hint to customize?
+// https://codemirror.net/examples/autocompletion
+
 // Notes: Can't edit widget content (or cursor nav through them).
 // - https://discuss.codemirror.net/t/focusing-inputs-within-widgets/5178/7
 //   Widgets intentionally always get set to contenteditable=false,
 //   or they would become part of CodeMirror’s editable content element.
 //   You should be able to introduce new contenteditable=true child elements inside of them.
 
+// TODO(burdon): URL match?
 const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
 
 /**
@@ -102,7 +118,7 @@ export function hyperLinkExtension() {
   );
 }
 
-export const hyperlinkStyle = EditorView.baseTheme({
+export const styles = EditorView.baseTheme({
   '.cm-hyperlink-label': {
     cursor: 'pointer',
     textDecoration: 'underline',
@@ -116,4 +132,4 @@ export const hyperlinkStyle = EditorView.baseTheme({
   },
 });
 
-export const hyperlinkWidget: Extension = [hyperLinkExtension(), hyperlinkStyle];
+export const hyperlinkWidget: Extension = [hyperLinkExtension(), styles];

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

@@ -2,7 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './autocomplete';
 export * from './basic';
-export * from './change';
-export * from './hyperlink';
+export * from './comments';
+export * from './link';
+export * from './listener';
 export * from './markdown';
+export * from './tasklist';
+export * from './tooltip';