@dxos/react-ui-editor 0.3.11-main.d7d4c52 → 0.3.11-main.d8f9aa0

package/src/extensions/cursor.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Facet } from '@codemirror/state';
+import { type EditorState, Facet } from '@codemirror/state';
 
 import type { Range } from '../hooks';
 
@@ -31,13 +31,17 @@ export class Cursor {
     combine: (providers) => providers[0] ?? defaultCursorConverter,
   });
 
-  static readonly getCursorFromRange = (cursorConverter: CursorConverter, range: Range) => {
+  static readonly getCursorFromRange = (state: EditorState, range: Range) => {
+    const cursorConverter = state.facet(Cursor.converter);
+
     const from = cursorConverter.toCursor(range.from);
     const to = cursorConverter.toCursor(range.to, -1);
     return [from, to].join(':');
   };
 
-  static readonly getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) => {
+  static readonly getRangeFromCursor = (state: EditorState, cursor: string) => {
+    const cursorConverter = state.facet(Cursor.converter);
+
     const parts = cursor.split(':');
     const from = cursorConverter.fromCursor(parts[0]);
     const to = cursorConverter.fromCursor(parts[1]);

package/src/extensions/index.ts

@@ -7,16 +7,10 @@ export * from './automerge';
 export * from './awareness';
 export * from './basic';
 export * from './blast';
-export * from './code';
 export * from './comments';
 export * from './cursor';
-export * from './hr';
-export * from './image';
-export * from './link';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
-export * from './table';
-export * from './tasklist';
+export * from './outliner';
 export * from './typewriter';
-export * from './yjs';

package/src/extensions/markdown/bundle.ts

@@ -23,18 +23,15 @@ import {
 import type { ThemeMode } from '@dxos/react-ui';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
+import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
-  readonly?: boolean;
   themeMode?: ThemeMode;
-  placeholder?: string;
-};
+} & Pick<TextEditorProps, 'readonly' | 'placeholder'>;
 
 /**
  * Markdown bundle.
  * Refs:
- * https://github.com/codemirror/basic-setup
- * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts#L50
  * https://codemirror.net/docs/community
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
@@ -49,8 +46,7 @@ export const markdownBundle = ({
     EditorState.tabSize.of(2),
     EditorView.lineWrapping,
 
-    customKeymap(),
-
+    // https://github.com/codemirror/basic-setup
     bracketMatching(),
     closeBrackets(),
     crosshairCursor(),
@@ -59,7 +55,7 @@ export const markdownBundle = ({
     highlightActiveLine(),
     history(),
     indentOnInput(),
-    _placeholder && placeholder(_placeholder),
+    _placeholder ? placeholder(_placeholder) : [],
 
     // Main extension.
     // https://github.com/codemirror/lang-markdown
@@ -87,20 +83,18 @@ export const markdownBundle = ({
 
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle(readonly)),
-  ].filter(Boolean) as Extension[];
-};
 
-// https://codemirror.net/docs/ref/#view.keymap
-const customKeymap = () =>
-  keymap.of([
-    // https://codemirror.net/docs/ref/#commands.indentWithTab
-    indentWithTab,
-    // https://codemirror.net/docs/ref/#commands.standardKeymap
-    ...standardKeymap,
-    // https://codemirror.net/docs/ref/#commands.historyKeymap
-    ...historyKeymap,
-    // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-    ...closeBracketsKeymap,
-    // https://codemirror.net/docs/ref/#search.searchKeymap
-    ...searchKeymap,
-  ]);
+    keymap.of([
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      indentWithTab,
+      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+      ...closeBracketsKeymap,
+      // https://codemirror.net/docs/ref/#commands.historyKeymap
+      ...historyKeymap,
+      // https://codemirror.net/docs/ref/#search.searchKeymap
+      ...searchKeymap,
+      // https://codemirror.net/docs/ref/#commands.standardKeymap
+      ...standardKeymap,
+    ]),
+  ];
+};

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

@@ -14,7 +14,7 @@ import {
 
 import { mx } from '@dxos/react-ui-theme';
 
-import { getToken } from '../styles';
+import { getToken } from '../../styles';
 
 const CODE_REGEX = /```[\s\S]*?```/gs;
 
@@ -53,22 +53,20 @@ const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
 };
 
 export const code = () => {
-  const getDecorations = (view: EditorView) => {
+  const buildDecorations = (view: EditorView) => {
     const decorations: Range<Decoration>[] = [];
-    if (!view.hasFocus || view.state.readOnly) {
-      const text = view.state.doc.sliceString(0);
-      const matches = text.matchAll(CODE_REGEX);
-      const blocks = view.viewportLineBlocks;
-      for (const match of matches) {
-        const range = getLineRange(blocks, match.index!, match.index! + match[0].length);
-        for (let i = range[0]; i <= range[1]; i++) {
-          const block = blocks[i];
-          decorations.push(
-            Decoration.line({
-              class: mx('cm-codeblock', i === range[0] && 'cm-codeblock-first', i === range[1] && 'cm-codeblock-last'),
-            }).range(block.from),
-          );
-        }
+    const text = view.state.doc.sliceString(0);
+    const matches = text.matchAll(CODE_REGEX);
+    const blocks = view.viewportLineBlocks;
+    for (const match of matches) {
+      const range = getLineRange(blocks, match.index!, match.index! + match[0].length);
+      for (let i = range[0]; i <= range[1]; i++) {
+        const block = blocks[i];
+        decorations.push(
+          Decoration.line({
+            class: mx('cm-codeblock', i === range[0] && 'cm-codeblock-first', i === range[1] && 'cm-codeblock-last'),
+          }).range(block.from),
+        );
       }
     }
 
@@ -81,7 +79,7 @@ export const code = () => {
         hasFocus = false;
         decorations: DecorationSet;
         constructor(view: EditorView) {
-          this.decorations = getDecorations(view);
+          this.decorations = buildDecorations(view);
         }
 
         update(update: ViewUpdate) {
@@ -93,7 +91,7 @@ export const code = () => {
             update.viewportChanged
           ) {
             this.hasFocus = update.view.hasFocus;
-            this.decorations = getDecorations(update.view);
+            this.decorations = buildDecorations(update.view);
           }
         }
       },

package/src/extensions/markdown/heading.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+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) => {
+        switch (node.name) {
+          case 'ATXHeading1':
+          case 'ATXHeading2':
+          case 'ATXHeading3':
+          case 'ATXHeading4':
+          case 'ATXHeading5':
+          case 'ATXHeading6': {
+            const mark = node.node.getChild('HeaderMark');
+
+            // Check if cursor is inside text.
+            if (mark && (cursor < node.from || cursor > node.to)) {
+              builder.add(mark.from, mark.to + 1, Decoration.replace({}));
+            }
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export const heading = () => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          this.decorations = buildDecorations(update.view);
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    ),
+  ];
+};

package/src/extensions/markdown/hr.ts

@@ -0,0 +1,72 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
+
+import { getToken } from '../../styles';
+
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-hr': {
+    // Note that block-level decorations should not have vertical margins,
+    borderTop: `1px solid ${getToken('extend.colors.neutral.200')}`,
+  },
+});
+
+class HorizontalRuleWidget extends WidgetType {
+  override toDOM() {
+    const el = document.createElement('div');
+    el.className = 'cm-hr';
+    return el;
+  }
+}
+
+const decoration = Decoration.replace({ widget: new HorizontalRuleWidget() });
+
+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 === 'HorizontalRule') {
+          // Check if cursor is inside text.
+          if (cursor <= node.from || cursor >= node.to) {
+            builder.add(node.from, node.to, decoration);
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export const hr = () => {
+  return [
+    styles,
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          this.decorations = buildDecorations(update.view);
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    ),
+  ];
+};

package/src/extensions/markdown/index.ts

@@ -3,4 +3,11 @@
 //
 
 export * from './bundle';
+export * from './code';
+export * from './heading';
 export * from './highlight';
+export * from './hr';
+export * from './image';
+export * from './link';
+export * from './table';
+export * from './tasklist';

package/src/extensions/markdown/tasklist.ts

@@ -0,0 +1,111 @@
+//
+// 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: (v) => v.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,8 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './automerge';
 export * from './awareness-provider';
+export * from './defs';
+
+export * from './useTextEditor';
 export * from './useTextModel';
-export * from './yjs';

package/src/hooks/useTextEditor.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] = useTextEditor();
+ *   useEffect(() => {
+ *     editorView?.focus();
+ *   }, [editorView]);
+ *   return <TextEditor ref={editorRef} />;
+ * };
+ * ```
+ */
+export const useTextEditor = (): [RefCallback<EditorView | null>, EditorView | null] => {
+  const [view, setView] = useState<EditorView | null>(null);
+  return [
+    (ref: EditorView | null) => {
+      setView(ref);
+    },
+    view,
+  ];
+};