@dxos/react-ui-editor 0.3.10-main.16895f7 → 0.3.10-main.375af01

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, 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);
+    // 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]);
+
+    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],
-    );
-
-    // TODO(burdon): Pass in extension?
-    const collaboration = useCollaboration(model, themeMode);
+    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
 
     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,29 @@ 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, defaultSlots);
     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,
+  },
+};

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

@@ -0,0 +1,72 @@
+//
+// 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 AutocompleteOptions = {
+  getOptions: (text: string) => Completion[];
+};
+
+/**
+ * Autocomplete extension.
+ */
+export const autocomplete = ({ getOptions }: 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: getOptions(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/{hyperlink/hyperlinkWidget.tsx → experimental.tsx}

@@ -13,12 +13,27 @@ 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
+
+// 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 +117,7 @@ export function hyperLinkExtension() {
   );
 }
 
-export const hyperlinkStyle = EditorView.baseTheme({
+export const styles = EditorView.baseTheme({
   '.cm-hyperlink-label': {
     cursor: 'pointer',
     textDecoration: 'underline',
@@ -116,4 +131,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,10 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './autocomplete';
 export * from './basic';
-export * from './change';
-export * from './hyperlink';
+export * from './link';
+export * from './listener';
 export * from './markdown';
+export * from './tasklist';
+export * from './tooltip';

package/src/components/TextEditor/extensions/{hyperlink/hyperlinkDecoration.ts → link.ts}

@@ -4,7 +4,14 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
 import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 
 // Adapted from:
@@ -19,13 +26,33 @@ import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 //  https://codemirror.net/5/demo/simplemode.html
 //  https://codemirror.net/5/demo/search.html (Search dialog).
 
-class Link extends WidgetType {
-  constructor(private readonly _anchor: number, private readonly _text: string, private readonly _url?: string) {
+class LinkButton extends WidgetType {
+  constructor(
+    private readonly _pos: number,
+    private readonly _url: string,
+    private readonly _onAttach: LinkOptions['onRender'],
+  ) {
     super();
   }
 
-  override eq(other: any) {
-    return this._text === other.text && this._url === other.url;
+  override eq(other: LinkButton) {
+    return this._pos === other._pos && this._url === other._url;
+  }
+
+  toDOM(view: EditorView) {
+    const el = document.createElement('span');
+    this._onAttach!(el, this._url);
+    return el;
+  }
+}
+
+class LinkText extends WidgetType {
+  constructor(private readonly _pos: number, private readonly _text: string, private readonly _url?: string) {
+    super();
+  }
+
+  override eq(other: LinkText) {
+    return this._pos === other._pos && this._url === other._url;
   }
 
   toDOM(view: EditorView) {
@@ -33,13 +60,14 @@ class Link extends WidgetType {
     link.setAttribute('class', 'cm-link');
     link.textContent = this._text;
     if (this._url) {
+      link.setAttribute('rel', 'noreferrer');
       link.setAttribute('target', '_blank');
       link.href = this._url;
     } else {
       link.onclick = () => {
         view.dispatch({
           selection: {
-            anchor: this._anchor,
+            anchor: this._pos,
           },
         });
       };
@@ -49,45 +77,37 @@ class Link extends WidgetType {
   }
 }
 
-type HyperlinkDecorationConfig = {
-  link?: boolean;
-};
-
-/**
- * Creates a state field to replace AST elements with a hyperlink widget.
- * https://codemirror.net/docs/ref/#state.StateField
- */
-export const hyperlinkDecoration = ({ link }: HyperlinkDecorationConfig = {}) => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, link),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, link),
-    provide: (field) => EditorView.decorations.from(field),
-  });
-};
-
-const update = (state: EditorState, link?: boolean) => {
+const update = (state: EditorState, options: LinkOptions) => {
   const builder = new RangeSetBuilder();
   const cursor = state.selection.main.head;
   syntaxTree(state).iterate({
     enter: (node) => {
       // Check if cursor is inside text.
-      if (cursor < node.from || cursor > node.to) {
-        if (node.name === 'Link') {
-          const marks = node.node.getChildren('LinkMark');
-          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
+      if (node.name === 'Link') {
+        const marks = node.node.getChildren('LinkMark');
+        const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
 
-          const urlNode = node.node.getChild('URL');
-          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
+        const urlNode = node.node.getChild('URL');
+        const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
 
+        if (cursor < node.from || cursor > node.to) {
           builder.add(
             node.from,
             node.to,
             Decoration.replace({
-              widget: new Link(node.from, text, link ? url : undefined),
+              widget: new LinkText(node.from, text, options.link ? url : undefined),
             }),
           );
+        }
 
-          return false;
+        if (options.onRender) {
+          builder.add(
+            node.to,
+            node.to,
+            Decoration.replace({
+              widget: new LinkButton(node.from, url, options.onRender),
+            }),
+          );
         }
       }
 
@@ -97,3 +117,20 @@ const update = (state: EditorState, link?: boolean) => {
 
   return builder.finish();
 };
+
+export type LinkOptions = {
+  link?: boolean;
+  onRender?: (el: Element, url: string) => void;
+};
+
+/**
+ * Creates a state field to replace AST elements with a hyperlink widget.
+ * https://codemirror.net/docs/ref/#state.StateField
+ */
+export const link = (options: LinkOptions = {}): Extension => {
+  return StateField.define<RangeSet<any>>({
+    create: (state) => update(state, options),
+    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
+    provide: (field) => EditorView.decorations.from(field),
+  });
+};

package/src/components/TextEditor/extensions/{change.ts → listener.ts}

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

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

@@ -29,12 +29,10 @@ import {
   placeholder,
   rectangularSelection,
 } from '@codemirror/view';
-// import { GFM } from '@lezer/markdown';
 
 import type { ThemeMode } from '@dxos/react-ui';
 
-import { markdownTagsExtension } from './tags';
-import { markdownHighlightStyle } from './theme';
+import { markdownHighlightStyle, markdownTagsExtension } from './highlight';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
@@ -77,23 +75,29 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
 
     // Main extension.
     // https://github.com/codemirror/lang-markdown
+    // https://codemirror.net/5/mode/markdown/index.html (demo).
     markdown({
+      // GRM by default (vs strict CommonMark):
+      // Table, TaskList, Strikethrough, and Autolink.
+      // 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: markdownLanguage,
+
+      // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
-      extensions: [
-        // TODO(burdon): This seems to upgrade the parser.
-        // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
-        // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-        // https://github.github.com/gfm
-        // GFM,
 
-        // Custom styling.
+      // Parser extensions.
+      extensions: [
+        // GFM, // TODO(burdon): Provided by default?
         markdownTagsExtension,
       ],
     }),
 
-    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
+    // Custom styles.
     syntaxHighlighting(markdownHighlightStyle),
+
+    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
     themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
   ].filter(Boolean) as Extension[];
 };