@dxos/react-ui-editor 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/extensions/command/state.ts

@@ -2,25 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import { StateEffect, StateField } from '@codemirror/state';
-import {
-  showTooltip,
-  type Command,
-  type EditorView,
-  type KeyBinding,
-  type Tooltip,
-  type TooltipView,
-} from '@codemirror/view';
+import { StateField } from '@codemirror/state';
+import { showTooltip, type EditorView, type Tooltip, type TooltipView } from '@codemirror/view';
 
+import { closeEffect, type Action, openEffect } from './action';
 import { type CommandOptions } from './command';
+import { type RenderCallback } from '../../types';
 import { singleValueFacet } from '../../util';
 
+export const commandConfig = singleValueFacet<CommandOptions>();
+
+export type PopupOptions = {
+  renderDialog: RenderCallback<{ onAction: (action?: Action) => void }>;
+};
+
 type CommandState = {
   tooltip?: Tooltip | null;
 };
 
-export const commandConfig = singleValueFacet<CommandOptions>();
-
 export const commandState = StateField.define<CommandState>({
   create: () => ({}),
   update: (state, tr) => {
@@ -29,8 +28,8 @@ export const commandState = StateField.define<CommandState>({
         return {};
       }
 
-      if (effect.is(openEffect)) {
-        const options = tr.state.facet(commandConfig);
+      const { renderDialog } = tr.state.facet(commandConfig);
+      if (effect.is(openEffect) && renderDialog) {
         const { pos, fullWidth } = effect.value;
         const tooltip: Tooltip = {
           pos,
@@ -38,38 +37,49 @@ export const commandState = StateField.define<CommandState>({
           arrow: false,
           strictSide: true,
           create: (view: EditorView) => {
-            const dom = document.createElement('div');
+            const root = document.createElement('div');
+
             const tooltipView: TooltipView = {
-              dom,
+              dom: root,
               mount: (view: EditorView) => {
                 if (fullWidth) {
-                  const parent = dom.parentElement!;
+                  const parent = root.parentElement!;
                   const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  dom.style.width = `${widthWithoutPadding}px`;
+                  root.style.width = `${widthWithoutPadding}px`;
                 }
 
                 // Render react component.
-                options.onRenderDialog(dom, (action) => {
-                  view.dispatch({ effects: closeEffect.of(null) });
-                  if (action?.insert?.length) {
-                    // Insert into editor.
-                    const text = action.insert + '\n';
-                    view.dispatch({
-                      changes: { from: pos, insert: text },
-                      selection: { anchor: pos + text.length },
-                    });
-                  }
-
-                  // NOTE: Truncates text if set focus immediately.
-                  requestAnimationFrame(() => view.focus());
-                });
+                renderDialog(
+                  root,
+                  {
+                    onAction: (action) => {
+                      view.dispatch({ effects: closeEffect.of(null) });
+                      switch (action?.type) {
+                        case 'insert': {
+                          // Insert into editor.
+                          const text = action.text + '\n';
+                          view.dispatch({
+                            changes: { from: pos, insert: text },
+                            selection: { anchor: pos + text.length },
+                          });
+                          break;
+                        }
+                      }
+
+                      // NOTE: Truncates text if set focus immediately.
+                      requestAnimationFrame(() => view.focus());
+                    },
+                  },
+                  view,
+                );
               },
             };
 
             return tooltipView;
           },
         };
+
         return { tooltip };
       }
     }
@@ -78,33 +88,3 @@ export const commandState = StateField.define<CommandState>({
   },
   provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
 });
-
-export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
-export const closeEffect = StateEffect.define<null>();
-
-export const openCommand: Command = (view: EditorView) => {
-  if (view.state.field(commandState, false)) {
-    const selection = view.state.selection.main;
-    const line = view.state.doc.lineAt(selection.from);
-    if (line.from === selection.from && line.from === line.to) {
-      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
-      return true;
-    }
-  }
-
-  return false;
-};
-
-export const closeCommand: Command = (view: EditorView) => {
-  if (view.state.field(commandState, false)) {
-    view.dispatch({ effects: closeEffect.of(null) });
-    return true;
-  }
-
-  return false;
-};
-
-export const commandKeyBindings: readonly KeyBinding[] = [
-  { key: '/', run: openCommand },
-  { key: 'Escape', run: closeCommand },
-];

package/src/extensions/command/typeahead.ts

@@ -0,0 +1,116 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorSelection, Prec, RangeSetBuilder, type Extension } from '@codemirror/state';
+import {
+  type Command,
+  Decoration,
+  type DecorationSet,
+  type EditorView,
+  keymap,
+  ViewPlugin,
+  type ViewUpdate,
+} from '@codemirror/view';
+
+import { Hint } from './hint';
+
+export type TypeaheadContext = { line: string };
+
+// TODO(burdon): Option to complete only at end of line?
+export type TypeaheadOptions = {
+  onComplete?: (context: TypeaheadContext) => string | undefined;
+};
+
+/**
+ * CodeMirror extension for typeahead completion.
+ */
+export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
+  let hint: string | undefined;
+
+  const complete: Command = (view: EditorView) => {
+    if (!hint) {
+      return false;
+    }
+
+    const selection = view.state.selection.main;
+    view.dispatch({
+      changes: [{ from: selection.from, to: selection.to, insert: hint }],
+      selection: EditorSelection.cursor(selection.from + hint.length),
+    });
+
+    return true;
+  };
+
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet = Decoration.none;
+        update(update: ViewUpdate) {
+          const builder = new RangeSetBuilder<Decoration>();
+          const selection = update.view.state.selection.main;
+          const line = update.view.state.doc.lineAt(selection.from);
+
+          // TODO(burdon): Check at end of line and matches start of previous word.
+          // TODO(burdon): Context grammar.
+          if (selection.from === selection.to && selection.from === line.to) {
+            const str = update.state.sliceDoc(line.from, selection.from);
+            hint = onComplete?.({ line: str });
+            if (hint) {
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+            }
+          }
+
+          this.decorations = builder.finish();
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    ),
+
+    // Keys.
+    Prec.highest(
+      keymap.of([
+        {
+          key: 'Tab',
+          preventDefault: true,
+          run: complete,
+        },
+        {
+          key: 'ArrowRight',
+          preventDefault: true,
+          run: complete,
+        },
+      ]),
+    ),
+  ];
+};
+
+/**
+ * Util to match current line to a static list of completions.
+ */
+export const staticCompletion =
+  (completions: string[], defaultCompletion?: string) =>
+  ({ line }: TypeaheadContext) => {
+    if (line.length === 0 && defaultCompletion) {
+      return defaultCompletion;
+    }
+
+    const words = line.split(/\s+/).filter(Boolean);
+    if (words.length) {
+      const word = words.at(-1)!;
+      for (const completion of completions) {
+        const match = matchCompletion(completion, word);
+        if (match) {
+          return match;
+        }
+      }
+    }
+  };
+
+export const matchCompletion = (completion: string, word: string): string | undefined => {
+  if (completion.length > word.length && completion.startsWith(word)) {
+    return completion.slice(word.length);
+  }
+};

package/src/extensions/comments.ts

@@ -3,14 +3,7 @@
 //
 
 import { invertedEffects } from '@codemirror/commands';
-import {
-  type ChangeDesc,
-  type EditorState,
-  type Extension,
-  StateEffect,
-  StateField,
-  type Text,
-} from '@codemirror/state';
+import { type ChangeDesc, type Extension, StateEffect, StateField, type Text } from '@codemirror/state';
 import {
   hoverTooltip,
   keymap,
@@ -22,17 +15,15 @@ import {
   ViewPlugin,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
 import { debounce, type CleanupFn } from '@dxos/async';
-import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
 
 import { documentId } from './selection';
-import { type EditorToolbarState } from '../components';
-import { type Comment, type Range } from '../types';
-import { Cursor, overlap, singleValueFacet, callbackWrapper } from '../util';
+import { type RenderCallback, type Comment, type Range } from '../types';
+import { Cursor, singleValueFacet, callbackWrapper } from '../util';
 
 //
 // State management.
@@ -156,7 +147,7 @@ const commentsDecorations = EditorView.decorations.compute([commentsState], (sta
   return Decoration.set(decorations);
 });
 
-const commentClickedEffect = StateEffect.define<string>();
+export const commentClickedEffect = StateEffect.define<string>();
 
 const handleCommentClick = EditorView.domEventHandlers({
   click: (event, view) => {
@@ -345,6 +336,10 @@ export type CommentsOptions = {
    * Key shortcut to create a new thread.
    */
   key?: string;
+  /**
+   * Called to render tooltip.
+   */
+  renderTooltip?: RenderCallback<{ shortcut: string }>;
   /**
    * Called to create a new thread and return the thread id.
    */
@@ -361,10 +356,6 @@ export type CommentsOptions = {
    * Called to notify which thread is currently closest to the cursor.
    */
   onSelect?: (state: CommentsState) => void;
-  /**
-   * Called to render tooltip.
-   */
-  onHover?: (el: Element, shortcut: string) => void;
 };
 
 const optionsFacet = singleValueFacet<CommentsOptions>();
@@ -408,7 +399,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.onHover &&
+    options.renderTooltip &&
       hoverTooltip(
         (view, pos) => {
           const selection = view.state.selection.main;
@@ -419,7 +410,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
               above: true,
               create: () => {
                 const el = document.createElement('div');
-                options.onHover!(el, shortcut);
+                options.renderTooltip!(el, { shortcut }, view);
                 return { dom: el, offset: { x: 0, y: 8 } };
               },
             };
@@ -545,30 +536,6 @@ export const scrollThreadIntoView = (view: EditorView, id: string, center = true
   }
 };
 
-/**
- * Query the editor state for the active formatting at the selection.
- */
-export const selectionOverlapsComment = (state: EditorState): boolean => {
-  // May not be defined if thread plugin not installed.
-  const commentState = state.field(commentsState, false);
-  if (commentState === undefined) {
-    return false;
-  }
-
-  const { selection } = state;
-  for (const range of selection.ranges) {
-    if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
-      return true;
-    }
-  }
-
-  return false;
-};
-
-const hasActiveSelection = (state: EditorState): boolean => {
-  return state.selection.ranges.some((range) => !range.empty);
-};
-
 /**
  * Manages external comment synchronization for the editor.
  * This class subscribes to external comment updates and applies them to the editor view.
@@ -606,19 +573,6 @@ export const createExternalCommentSync = (
     },
   );
 
-export const useCommentState = (state: ReactiveObject<EditorToolbarState>): Extension => {
-  return useMemo(
-    () =>
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged || update.selectionSet) {
-          state.comment = selectionOverlapsComment(update.state);
-          state.selection = hasActiveSelection(update.state);
-        }
-      }),
-    [state],
-  );
-};
-
 /**
  * @deprecated This hook will be removed in future versions. Use the new comment sync extension instead.
  * Update comments state field.
@@ -636,22 +590,3 @@ export const useComments = (view: EditorView | null | undefined, id: string, com
     }
   });
 };
-
-/**
- * Hook provides an extension to listen for comment clicks and invoke a handler.
- */
-export const useCommentClickListener = (onCommentClick: (commentId: string) => void): Extension => {
-  return useMemo(
-    () =>
-      EditorView.updateListener.of((update) => {
-        update.transactions.forEach((transaction) => {
-          transaction.effects.forEach((effect) => {
-            if (effect.is(commentClickedEffect)) {
-              onCommentClick(effect.value);
-            }
-          });
-        });
-      }),
-    [onCommentClick],
-  );
-};

package/src/extensions/factories.ts

@@ -11,6 +11,7 @@ import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import {
   EditorView,
   type KeyBinding,
+  ViewPlugin,
   drawSelection,
   dropCursor,
   highlightActiveLine,
@@ -59,6 +60,7 @@ export type BasicExtensionsOptions = {
   indentWithTab?: boolean;
   keymap?: null | 'default' | 'standard';
   lineNumbers?: boolean;
+  /** If false then do not set a max-width or side margin on the editor. */
   lineWrapping?: boolean;
   placeholder?: string;
   /** If true user cannot edit the text, but they can still select and copy it. */
@@ -149,6 +151,9 @@ export type ThemeExtensionsOptions = {
     editor?: {
       className?: string;
     };
+    scroll?: {
+      className?: string;
+    };
     content?: {
       className?: string;
     };
@@ -179,6 +184,14 @@ export const createThemeExtensions = ({
       (themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
+    slots.scroll?.className &&
+      ViewPlugin.fromClass(
+        class {
+          constructor(view: EditorView) {
+            view.scrollDOM.classList.add(slots.scroll.className);
+          }
+        },
+      ),
   ].filter(isNotFalsy);
 };
 

package/src/extensions/folding.tsx

@@ -29,7 +29,7 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
       const el = createElement('div', { className: 'flex h-full items-center' });
       return renderRoot(
         el,
-        <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
+        <Icon icon='ph--caret-right--bold' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },
   }),

package/src/extensions/hashtag.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+} from '@codemirror/view';
+
+import { getHashColor, mx } from '@dxos/react-ui-theme';
+
+class TagWidget extends WidgetType {
+  constructor(private _text: string) {
+    super();
+  }
+
+  toDOM(): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.className = mx('cm-tag', getHashColor(this._text).tag);
+    span.textContent = this._text;
+    return span;
+  }
+}
+
+const tagMatcher = new MatchDecorator({
+  regexp: /#(\w+)\W/g,
+  decoration: (match) =>
+    Decoration.replace({
+      widget: new TagWidget(match[1]),
+    }),
+});
+
+// TODO(burdon): Autocomplete from existing tags?
+export const hashtag = (): Extension => [
+  ViewPlugin.fromClass(
+    class {
+      tags: DecorationSet;
+      constructor(view: EditorView) {
+        this.tags = tagMatcher.createDeco(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.tags = tagMatcher.updateDeco(update, this.tags);
+      }
+    },
+    {
+      decorations: (instance) => instance.tags,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.tags || Decoration.none;
+        }),
+    },
+  ),
+
+  EditorView.theme({
+    '.cm-tag': {
+      borderRadius: '4px',
+      marginRight: '6px',
+      padding: '2px 6px',
+    },
+  }),
+];

package/src/extensions/index.ts

@@ -14,9 +14,13 @@ export * from './dnd';
 export * from './factories';
 export * from './focus';
 export * from './folding';
+export * from './hashtag';
+export * from './json';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
+export * from './outliner';
+export * from './preview';
 export * from './selection';
 export * from './typewriter';

package/src/extensions/json.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { type LintSource, linter } from '@codemirror/lint';
+import { type Extension } from '@codemirror/state';
+import Ajv, { type ValidateFunction } from 'ajv';
+
+import { type JsonSchemaType } from '@dxos/echo-schema';
+
+export type JsonExtensionsOptions = {
+  schema?: JsonSchemaType;
+};
+
+export const createJsonExtensions = ({ schema }: JsonExtensionsOptions = {}): Extension => {
+  let lintSource: LintSource = jsonParseLinter();
+  if (schema) {
+    // NOTE: Relaxing strict mode to allow additional custom schema properties.
+    const ajv = new Ajv({ allErrors: false, strict: false });
+    const validate = ajv.compile(schema);
+    lintSource = schemaLinter(validate);
+  }
+
+  return [json(), linter(lintSource)];
+};
+
+const schemaLinter =
+  (validate: ValidateFunction): LintSource =>
+  (view) => {
+    try {
+      const jsonText = view.state.doc.toString();
+      const jsonData = JSON.parse(jsonText);
+      const valid = validate(jsonData);
+      if (valid) {
+        return [];
+      }
+
+      return (
+        validate.errors?.map((err: any) => ({
+          from: 0,
+          to: jsonText.length,
+          severity: 'error',
+          message: `${err.instancePath || '(root)'} ${err.message}`,
+        })) ?? []
+      );
+    } catch (err: unknown) {
+      return [
+        {
+          from: 0,
+          to: view.state.doc.length,
+          severity: 'error',
+          message: 'Invalid JSON: ' + (err as Error).message,
+        },
+      ];
+    }
+  };

package/src/extensions/markdown/bundle.ts

@@ -12,11 +12,13 @@ import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
+  indentWithTab?: boolean;
 };
 
 /**
@@ -27,7 +29,7 @@ export type MarkdownBundleOptions = {
  * https://codemirror.net/docs/community
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
-export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions = {}): Extension[] => {
+export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): Extension[] => {
   return [
     // Main extension.
     // https://github.com/codemirror/lang-markdown
@@ -56,14 +58,16 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
 
-    keymap.of([
-      // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab,
+    keymap.of(
+      [
+        // https://codemirror.net/docs/ref/#commands.indentWithTab
+        options.indentWithTab !== false && indentWithTab,
 
-      // https://codemirror.net/docs/ref/#commands.defaultKeymap
-      ...defaultKeymap,
-      ...completionKeymap,
-      ...lintKeymap,
-    ]),
+        // https://codemirror.net/docs/ref/#commands.defaultKeymap
+        ...defaultKeymap,
+        ...completionKeymap,
+        ...lintKeymap,
+      ].filter(isNotFalsy),
+    ),
   ];
 };

package/src/extensions/markdown/changes.ts

@@ -56,8 +56,9 @@ export const adjustChanges = () => {
                 // Check for URL.
                 const url = getValidUrl(update.view.state.sliceDoc(fromB, toB));
                 if (url) {
+                  // Check if pasting inside existing link.
                   const node = tree.resolveInner(fromA, -1);
-                  const invalidPositions = new Set(['Link', 'LinkMark', 'Code', 'CodeText', 'FencedCode', 'URL']);
+                  const invalidPositions = new Set(['Code', 'CodeText', 'FencedCode', 'Link', 'LinkMark', 'URL']);
                   if (!invalidPositions.has(node?.name)) {
                     const replacedText = tr.startState.sliceDoc(fromA, toA);
                     adjustments.push({ from: fromA, to: toB, insert: createLink(url, replacedText) });
@@ -84,7 +85,7 @@ export const adjustChanges = () => {
           }
         }
 
-        // TODO(burdon): Is this the right way to augment changes?
+        // TODO(burdon): Is this the right way to augment changes? Alt: EditorState.transactionFilter
         if (adjustments.length) {
           setTimeout(() => {
             update.view.dispatch(