@dxos/react-ui-editor 0.3.11-main.ec7a2b3 → 0.3.11-main.ee2b64c

package/src/extensions/{link.ts → markdown/link.ts}

@@ -6,13 +6,13 @@
 import { syntaxTree } from '@codemirror/language';
 import { type Extension, RangeSetBuilder } from '@codemirror/state';
 import {
+  hoverTooltip,
   Decoration,
+  type DecorationSet,
   type EditorView,
-  WidgetType,
-  hoverTooltip,
   ViewPlugin,
   type ViewUpdate,
-  type DecorationSet,
+  WidgetType,
 } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
@@ -22,6 +22,7 @@ import { tooltipContent } from '@dxos/react-ui-theme';
 // https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
 // https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
 
+// TODO(burdon): Callback to dynamically lookup title of linked pages.
 export type LinkOptions = {
   link?: boolean;
   onHover?: (el: Element, url: string) => void;
@@ -37,7 +38,6 @@ export const link = (options: LinkOptions = {}): Extension => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view, options);
         }
@@ -49,7 +49,7 @@ export const link = (options: LinkOptions = {}): Extension => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
   ];
@@ -65,10 +65,12 @@ export const link = (options: LinkOptions = {}): Extension => {
         for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
           link = node.name === 'Link' ? node : null;
         }
+
         const url = link && link.getChild('URL');
         if (!url || !link) {
           return null;
         }
+
         const urlText = view.state.sliceDoc(url.from, url.to);
         return {
           pos: link.from,
@@ -89,7 +91,10 @@ export const link = (options: LinkOptions = {}): Extension => {
 };
 
 class LinkButton extends WidgetType {
-  constructor(private readonly _url: string, private readonly _onAttach: LinkOptions['onRender']) {
+  constructor(
+    private readonly _url: string,
+    private readonly _onAttach: LinkOptions['onRender'],
+  ) {
     super();
   }
 
@@ -105,7 +110,10 @@ class LinkButton extends WidgetType {
 }
 
 class LinkText extends WidgetType {
-  constructor(private readonly _text: string, private readonly _url?: string) {
+  constructor(
+    private readonly _text: string,
+    private readonly _url?: string,
+  ) {
     super();
   }
 
@@ -158,6 +166,7 @@ const buildDecorations = (view: EditorView, options: LinkOptions): DecorationSet
             return false;
           }
 
+          // TODO(burdon): Don't expand if moving cursor up/down.
           if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
             builder.add(
               node.from,

package/src/extensions/markdown/tasklist.ts

@@ -0,0 +1,110 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { EditorView, Decoration, WidgetType, ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
+
+import { getToken } from '../../styles';
+
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-task': {
+    color: getToken('extend.colors.blue.500'),
+  },
+  '& .cm-task-checkbox': {
+    marginLeft: '4px',
+    marginRight: '4px',
+  },
+});
+
+class CheckboxWidget extends WidgetType {
+  constructor(private _checked: boolean) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._checked === other._checked;
+  }
+
+  override toDOM(view: EditorView) {
+    const input = document.createElement('input');
+    input.className = 'cm-task-checkbox';
+    input.type = 'checkbox';
+    input.checked = this._checked;
+    if (view.state.readOnly) {
+      input.setAttribute('disabled', 'true');
+    } else {
+      input.onmousedown = (event: Event) => {
+        const pos = view.posAtDOM(input);
+        const text = view.state.sliceDoc(pos, pos + 3);
+        if (text === (this._checked ? '[x]' : '[ ]')) {
+          view.dispatch({
+            changes: { from: pos + 1, to: pos + 2, insert: this._checked ? ' ' : 'x' },
+          });
+          event.preventDefault();
+        }
+      };
+    }
+
+    return input;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+}
+
+const checkedDecoration = Decoration.replace({ widget: new CheckboxWidget(true) });
+const uncheckedDecoration = Decoration.replace({ widget: new CheckboxWidget(false) });
+
+const buildDecorations = (view: EditorView): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === 'TaskMarker') {
+          // Check if cursor is inside text.
+          if (cursor < node.from || cursor > node.to) {
+            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
+            builder.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
+            builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export type TasklistOptions = {};
+
+export const tasklist = (options: TasklistOptions = {}) => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          if (update.docChanged || update.viewportChanged || update.selectionSet) {
+            this.decorations = buildDecorations(update.view);
+          }
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+    styles,
+  ];
+};

package/src/extensions/mention.ts

@@ -9,18 +9,25 @@ export type MentionOptions = {
   onSearch: (text: string) => string[];
 };
 
+// TODO(burdon): Can only have a single autocompletion. Merge configuration with autocomplete.
 export const mention = ({ onSearch }: MentionOptions): Extension => {
   return autocompletion({
+    // TODO(burdon): Not working.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
     closeOnBlur: false, // For debugging.
+    // defaultKeymap: false,
+    icons: false,
     override: [
       (context: CompletionContext): CompletionResult | null => {
+        console.log(context);
+
         const match = context.matchBefore(/@(\w+)?/);
         if (!match || (match.from === match.to && !context.explicit)) {
           return null;
         }
 
-        console.log(match);
-
         return {
           from: match.from,
           options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({ label: `@${value}` })),

package/src/extensions/outliner.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+
+export type OutlinerOptions = {};
+
+// TODO(burdon): Experimental component: multiple hierarchical draggable editor sections.
+export const outliner = (options: OutlinerOptions = {}): Extension => {
+  return [];
+};

package/src/hooks/awareness-provider.ts

@@ -29,9 +29,10 @@ export type AwarenessProviderParams = {
   info: AwarenessInfo;
 };
 
+/**
+ * Receives and broadcasts profile and cursor position.
+ */
 export class SpaceAwarenessProvider implements AwarenessProvider {
-  public readonly remoteStateChange = new Event<void>();
-
   private readonly _remoteStates = new Map<string, AwarenessState>();
 
   private readonly _space: Space;
@@ -39,9 +40,11 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
   private readonly _peerId: string;
   private readonly _info: AwarenessInfo;
 
-  private _localState?: AwarenessState;
-  private _postTask?: DeferredTask;
   private _ctx?: Context;
+  private _postTask?: DeferredTask;
+  private _localState?: AwarenessState;
+
+  public readonly remoteStateChange = new Event<void>();
 
   constructor(params: AwarenessProviderParams) {
     this._space = params.space;
@@ -63,19 +66,20 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
       }
     });
 
-    const unsubscribe = this._space.listen(this._channel, (message: GossipMessage) => {
-      switch (message.payload.kind) {
-        case 'query': {
-          this._handleQueryMessage();
-          break;
+    this._ctx.onDispose(
+      this._space.listen(this._channel, (message: GossipMessage) => {
+        switch (message.payload.kind) {
+          case 'query': {
+            this._handleQueryMessage();
+            break;
+          }
+          case 'post': {
+            this._handlePostMessage(message.payload);
+            break;
+          }
         }
-        case 'post': {
-          this._handlePostMessage(message.payload);
-          break;
-        }
-      }
-    });
-    this._ctx.onDispose(unsubscribe);
+      }),
+    );
 
     void this._space
       .postMessage(this._channel, {
@@ -92,6 +96,10 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._postTask = undefined;
   }
 
+  getRemoteStates(): AwarenessState[] {
+    return Array.from(this._remoteStates.values());
+  }
+
   update(position: AwarenessPosition | undefined): void {
     invariant(this._postTask);
     this._localState = {
@@ -103,10 +111,6 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._postTask.schedule();
   }
 
-  getRemoteStates(): AwarenessState[] {
-    return Array.from(this._remoteStates.values());
-  }
-
   private _handleQueryMessage() {
     invariant(this._postTask);
     this._postTask.schedule();

package/src/hooks/defs.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension, StateField } from '@codemirror/state';
+
+import { type DocAccessor } from '@dxos/echo-schema';
+
+// Runtime data structure.
+export type Range = {
+  from: number;
+  to: number;
+};
+
+// Persistent data structure.
+export type Comment = {
+  id: string;
+  cursor?: string;
+};
+
+export type EditorModel = {
+  id: string;
+  text: () => string;
+  extension?: Extension;
+
+  // TODO(burdon): Remove.
+  content: string | DocAccessor;
+
+  // TODO(burdon): Remove.
+  peer?: {
+    id: string;
+    name?: string;
+  };
+};
+
+/**
+ * State field makes the model available to other extensions.
+ */
+export const modelState = StateField.define<EditorModel | undefined>({
+  create: () => undefined,
+  update: (model) => model,
+});

package/src/hooks/index.ts

@@ -2,7 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './automerge';
 export * from './awareness-provider';
+export * from './defs';
+
+export * from './useActionHandler';
+export * from './useEditorView';
+export * from './useTextEditor';
 export * from './useTextModel';
-export * from './yjs';

package/src/hooks/useActionHandler.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { EditorView } from '@codemirror/view';
+
+import type { ToolbarProps } from '../components';
+import {
+  createComment,
+  insertCodeblock,
+  insertTable,
+  setHeading,
+  toggleBold,
+  toggleItalic,
+  toggleList,
+  toggleStrikethrough,
+} from '../extensions';
+
+export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {
+  return (action) => {
+    if (!view) {
+      return;
+    }
+
+    switch (action.type) {
+      case 'heading':
+        setHeading(parseInt(action.data))(view);
+        break;
+
+      case 'bold':
+        toggleBold(view);
+        break;
+      case 'italic':
+        toggleItalic(view);
+        break;
+      case 'strikethrough':
+        toggleStrikethrough(view);
+        break;
+
+      case 'list':
+        toggleList(view);
+        break;
+
+      case 'codeblock':
+        insertCodeblock(view);
+        break;
+      case 'table':
+        insertTable(view);
+        break;
+
+      case 'comment':
+        createComment(view);
+        break;
+    }
+
+    // TODO(burdon): Hack otherwise remains on heading selector.
+    setTimeout(() => {
+      view.focus();
+      view.dispatch({ selection: view.state.selection });
+    });
+  };
+};

package/src/hooks/useEditorView.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type RefCallback, useState } from 'react';
+
+/**
+ * Hook for accessing the editor view.
+ *
+ * ```tsx
+ * const Test = () => {
+ *   const [editorRef, editorView] = useEditorView();
+ *   useEffect(() => {
+ *     editorView?.focus();
+ *   }, [editorView]);
+ *   return <TextEditor ref={editorRef} />;
+ * };
+ * ```
+ */
+export const useEditorView = (): [RefCallback<EditorView | null>, EditorView | null] => {
+  const [view, setView] = useState<EditorView | null>(null);
+  return [
+    (ref: EditorView | null) => {
+      setView(ref);
+    },
+    view,
+  ];
+};

package/src/hooks/useTextEditor.ts

@@ -0,0 +1,153 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import {
+  EditorSelection,
+  EditorState,
+  type EditorStateConfig,
+  type Extension,
+  type StateEffect,
+} from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type RefObject, useEffect, useRef, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { type ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
+
+import { type ThemeStyles } from '..//styles';
+import { defaultTheme } from '../themes';
+import { logChanges } from '../util';
+
+export type UseTextEditorOptions = {
+  autoFocus?: boolean;
+  scrollTo?: StateEffect<any>;
+  debug?: boolean;
+} & EditorStateConfig;
+
+export type UseTextEditor = {
+  parentRef: RefObject<HTMLDivElement>;
+  view?: EditorView;
+};
+
+/**
+ * Hook for creating editor.
+ */
+export const useTextEditor = ({
+  autoFocus,
+  scrollTo,
+  debug,
+  doc,
+  selection,
+  extensions,
+}: UseTextEditorOptions = {}): UseTextEditor => {
+  const onUpdate = useRef<() => void>();
+  const [view, setView] = useState<EditorView>();
+  const parentRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (parentRef.current) {
+      // https://codemirror.net/docs/ref/#state.EditorStateConfig
+      const state = EditorState.create({
+        doc,
+        selection,
+        extensions: [
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView.exceptionSink.of((err) => {
+            log.catch(err);
+          }),
+          extensions,
+          EditorView.updateListener.of(() => {
+            onUpdate.current?.();
+          }),
+        ].filter(isNotFalsy),
+      });
+
+      // https://codemirror.net/docs/ref/#view.EditorViewConfig
+      const view = new EditorView({
+        parent: parentRef.current,
+        scrollTo,
+        state,
+        // NOTE: Uncomment to debug/monitor all transactions.
+        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+        dispatchTransactions: (trs, view) => {
+          if (debug) {
+            logChanges(trs);
+          }
+          view.update(trs);
+        },
+      });
+
+      setView(view);
+    }
+
+    return () => {
+      view?.destroy();
+    };
+  }, [parentRef]);
+
+  useEffect(() => {
+    if (view) {
+      // Select end of line if not specified.
+      if (!selection && !view.state.selection.main.anchor) {
+        selection = EditorSelection.single(view.state.doc.line(1).to);
+      }
+
+      // Set selection after first update (since content may rerender on focus).
+      // TODO(burdon): BUG on first render may appear in middle of formatted heading.
+      // TODO(burdon): Make invisible until first render?
+      if (selection || scrollTo) {
+        onUpdate.current = () => {
+          onUpdate.current = undefined;
+          view.dispatch({ selection, effects: scrollTo && [scrollTo], scrollIntoView: !scrollTo });
+        };
+      }
+
+      if (autoFocus) {
+        view.focus();
+      }
+    }
+  }, [view, autoFocus, selection, scrollTo]);
+
+  return { parentRef, view };
+};
+
+// TODO(burdon): Factor out extension factories.
+
+export type DataExtensionsOptions = {
+  readonly?: boolean;
+};
+
+// TODO(burdon): Pass in TextObject (remove model).
+export const createDataExtensions = ({ readonly = false } = {}): Extension => {
+  return [
+    //
+    EditorState.readOnly.of(readonly),
+    EditorView.editable.of(!readonly),
+  ];
+};
+
+export type ThemeExtensionsOptions = {
+  theme?: ThemeStyles;
+  themeMode?: ThemeMode;
+  lineWrap?: boolean;
+  slots?: {
+    editor?: {
+      className?: string;
+    };
+    content?: {
+      className?: string;
+    };
+  };
+};
+
+export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
+  return [
+    //
+    EditorView.baseTheme(defaultTheme),
+    theme && EditorView.theme(theme),
+    EditorView.darkTheme.of(themeMode === 'dark'),
+    EditorView.editorAttributes.of({ class: slots?.editor?.className ?? '' }),
+    EditorView.contentAttributes.of({ class: slots?.content?.className ?? '' }),
+  ].filter(isNotFalsy);
+};