@dxos/react-ui-editor 0.8.2-staging.7ac8446 → 0.8.2

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/index.ts

@@ -14,9 +14,12 @@ export * from './dnd';
 export * from './factories';
 export * from './focus';
 export * from './folding';
+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,56 @@
+//
+// 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) {
+    const ajv = new Ajv({ allErrors: 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(

package/src/extensions/markdown/decorate.ts

@@ -15,6 +15,7 @@ import { image } from './image';
 import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
 import { table } from './table';
 import { theme, type HeadingLevel } from '../../styles';
+import { type RenderCallback } from '../../types';
 import { wrapWithCatch } from '../../util';
 
 /**
@@ -35,7 +36,7 @@ const Unicode = {
 //
 
 class HorizontalRuleWidget extends WidgetType {
-  override toDOM() {
+  override toDOM(): HTMLSpanElement {
     const el = document.createElement('span');
     el.className = 'cm-hr';
     return el;
@@ -45,19 +46,19 @@ class HorizontalRuleWidget extends WidgetType {
 class LinkButton extends WidgetType {
   constructor(
     private readonly url: string,
-    private readonly render: (el: HTMLElement, url: string) => void,
+    private readonly render: RenderCallback<{ url: string }>,
   ) {
     super();
   }
 
-  override eq(other: this) {
+  override eq(other: this): boolean {
     return this.url === other.url;
   }
 
   // TODO(burdon): Create icon and link directly without react?
-  override toDOM(view: EditorView) {
+  override toDOM(view: EditorView): HTMLSpanElement {
     const el = document.createElement('span');
-    this.render(el, this.url);
+    this.render(el, { url: this.url }, view);
     return el;
   }
 }
@@ -67,11 +68,11 @@ class CheckboxWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this) {
+  override eq(other: this): boolean {
     return this._checked === other._checked;
   }
 
-  override toDOM(view: EditorView) {
+  override toDOM(view: EditorView): HTMLSpanElement {
     const input = document.createElement('input');
     input.className = 'cm-task-checkbox dx-checkbox';
     input.type = 'checkbox';
@@ -104,7 +105,7 @@ class CheckboxWidget extends WidgetType {
     return span;
   }
 
-  override ignoreEvent() {
+  override ignoreEvent(): boolean {
     return false;
   }
 }
@@ -117,7 +118,7 @@ class TextWidget extends WidgetType {
     super();
   }
 
-  override toDOM() {
+  override toDOM(): HTMLSpanElement {
     const el = document.createElement('span');
     if (this.className) {
       el.className = this.className;
@@ -128,10 +129,10 @@ class TextWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
-const blockQuote = Decoration.line({ class: mx('cm-blockquote') });
-const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
-const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
-const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
+const blockQuote = Decoration.line({ class: 'cm-blockquote' });
+const fencedCodeLine = Decoration.line({ class: 'cm-code cm-codeblock-line' });
+const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-start') });
+const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-end') });
 const commentBlockLine = fencedCodeLine;
 const commentBlockLineFirst = fencedCodeLineFirst;
 const commentBlockLineLast = fencedCodeLineLast;
@@ -276,7 +277,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         // Set indentation.
         const list = getCurrentListLevel();
         const width = list.type === 'OrderedList' ? orderedListIndentationWidth : bulletListIndentationWidth;
-        const offset = ((list.level ?? 0) + 1) * width;
+        const offset = (options?.listPaddingLeft ?? 0) + ((list.level ?? 0) + 1) * width;
         if (node.from === line.to - 1) {
           // Abort if only the hyphen is typed.
           return false;
@@ -284,7 +285,6 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
         // Add line decoration for the continuation indent.
         // TODO(burdon): Bug if indentation is more than one indentation unit (e.g., 4 spaces) from the previous line.
-
         deco.add(
           line.from,
           line.from,
@@ -405,7 +405,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           }
 
           const first = block.from <= node.from;
-          const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
+          const last = block.to >= node.to && /```$/.test(state.doc.sliceString(block.from, block.to));
           deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
 
           const editing = editingRange(state, node, focus);
@@ -519,7 +519,9 @@ export interface DecorateOptions {
    */
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
-  renderLinkButton?: (el: Element, url: string) => void;
+  renderLinkButton?: RenderCallback<{ url: string }>;
+  // TODO(burdon): Additional padding for each line.
+  listPaddingLeft?: number;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {

package/src/extensions/markdown/formatting.ts

@@ -5,19 +5,19 @@
 import { snippet } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
 import {
-  type Extension,
-  type StateCommand,
-  type EditorState,
   type ChangeSpec,
-  type Text,
   EditorSelection,
+  type Extension,
+  type EditorState,
   type Line,
+  type StateCommand,
+  type Text,
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
 import { useMemo } from 'react';
 
-import { type ReactiveObject } from '@dxos/live-object';
+import { type Live } from '@dxos/live-object';
 
 import { type EditorToolbarState } from '../../components';
 
@@ -1250,7 +1250,7 @@ export const getFormatting = (state: EditorState): Formatting => {
 /**
  * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (state: ReactiveObject<EditorToolbarState>): Extension => {
+export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
   return useMemo(
     () =>
       EditorView.updateListener.of((update) => {

package/src/extensions/markdown/image.ts

@@ -51,16 +51,6 @@ export const image = (_options: ImageOptions = {}): Extension => {
   ];
 };
 
-const preloaded = new Set<string>();
-
-const preloadImage = (url: string) => {
-  if (!preloaded.has(url)) {
-    const img = document.createElement('img');
-    img.src = url;
-    preloaded.add(url);
-  }
-};
-
 const buildDecorations = (from: number, to: number, state: EditorState) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
@@ -94,16 +84,26 @@ const buildDecorations = (from: number, to: number, state: EditorState) => {
   return decorations;
 };
 
+const preloaded = new Set<string>();
+
+const preloadImage = (url: string) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement('img');
+    img.src = url;
+    preloaded.add(url);
+  }
+};
+
 class ImageWidget extends WidgetType {
   constructor(readonly _url: string) {
     super();
   }
 
-  override eq(other: this) {
-    return this._url === (other as any as ImageWidget)._url;
+  override eq(other: this): boolean {
+    return this._url === other._url;
   }
 
-  override toDOM(view: EditorView) {
+  override toDOM(view: EditorView): HTMLImageElement {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');
@@ -113,6 +113,7 @@ class ImageWidget extends WidgetType {
     } else {
       img.classList.add('cm-loaded-image');
     }
+
     return img;
   }
 }

package/src/extensions/markdown/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './editorAction';
+export * from './action';
 export * from './bundle';
 export * from './debug';
 export * from './decorate';