@dxos/react-ui-editor 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/components/EditorMenuProvider/util.ts

@@ -1,31 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-
-// TODO(burdon): Factor out.
-
-export const insertAtCursor = (view: EditorView, from: number, insert: string) => {
-  view.dispatch({
-    changes: { from, to: from, insert },
-    selection: { anchor: from + insert.length, head: from + insert.length },
-  });
-};
-
-/**
- * If the cursor is at the start of a line, insert the text at the cursor.
- * Otherwise, insert the text on a new line.
- */
-export const insertAtLineStart = (view: EditorView, from: number, insert: string) => {
-  const line = view.state.doc.lineAt(from);
-  if (line.from === from) {
-    insertAtCursor(view, from, insert);
-  } else {
-    insert = '\n' + insert;
-    view.dispatch({
-      changes: { from: line.to, to: line.to, insert },
-      selection: { anchor: line.to + insert.length, head: line.to + insert.length },
-    });
-  }
-};

package/src/defaults.ts

@@ -1,52 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { EditorView } from '@codemirror/view';
-
-import { mx } from '@dxos/react-ui-theme';
-
-import { type ThemeExtensionsOptions } from './extensions';
-import { fontMono } from './styles';
-
-/**
- * CodeMirror content width.
- * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
- * 50rem = 800px. Maximum content width for solo mode.
- * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
- */
-export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
-
-export const editorSlots: ThemeExtensionsOptions['slots'] = {
-  scroll: {
-    className: 'pbs-2',
-  },
-  content: {
-    className: editorWidth,
-  },
-};
-
-export const editorGutter = EditorView.theme({
-  '.cm-gutters': {
-    // NOTE: Color required to cover content if scrolling horizontally.
-    // TODO(burdon): Non-transparent background clips the focus ring.
-    background: 'var(--dx-baseSurface) !important',
-    paddingRight: '1rem',
-  },
-});
-
-export const editorMonospace = EditorView.theme({
-  '.cm-content': {
-    fontFamily: fontMono,
-  },
-});
-
-export const editorWithToolbarLayout =
-  'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
-
-// NOTE: Padding is added to the editor to account for the focus ring (since otherwise the CM gutter will clip it)
-export const stackItemContentEditorClassNames = (role?: string) =>
-  mx(
-    'p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2',
-    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
-  );

package/src/extensions/annotations.ts

@@ -1,55 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension, RangeSetBuilder } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-const annotationMark = Decoration.mark({ class: 'cm-annotation' });
-
-export type AnnotationOptions = {
-  match?: RegExp; // TODO(burdon): Update via hook (e.g., for search).
-};
-
-/**
- *
- */
-export const annotations = ({ match }: AnnotationOptions = {}): Extension => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet = Decoration.none;
-        update(update: ViewUpdate) {
-          const builder = new RangeSetBuilder<Decoration>();
-          if (match) {
-            // Only process visible lines.
-            const { from, to } = update.view.viewport;
-            const text = update.state.doc.sliceString(from, to);
-            const matches = text.matchAll(match);
-            for (const m of matches) {
-              if (m.index !== undefined) {
-                // Adjust match position relative to viewport.
-                const start = from + m.index;
-                const end = start + m[0].length;
-                builder.add(start, end, annotationMark);
-              }
-            }
-          }
-
-          this.decorations = builder.finish();
-        }
-      },
-      {
-        decorations: (v) => v.decorations,
-      },
-    ),
-
-    EditorView.theme({
-      '.cm-annotation': {
-        textDecoration: 'underline',
-        textDecorationStyle: 'wavy',
-        textDecorationColor: 'var(--dx-errorText)',
-      },
-    }),
-  ];
-};

package/src/extensions/autocomplete/autocomplete.ts

@@ -1,151 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Extension, Prec } from '@codemirror/state';
-import {
-  Decoration,
-  type DecorationSet,
-  EditorView,
-  ViewPlugin,
-  type ViewUpdate,
-  WidgetType,
-  keymap,
-} from '@codemirror/view';
-
-export type AutocompleteOptions = {
-  /**
-   * Function that returns a list of suggestions based on the current text.
-   * @param text The current text before the cursor
-   * @returns Array of suggestion strings
-   */
-  onSuggest?: (text: string) => string[];
-};
-
-/**
- * Creates an autocomplete extension that shows inline suggestions.
- * Pressing Tab will complete the suggestion.
- *
- * @deprecated Use typeahead.
- */
-export const autocomplete = ({ onSuggest }: AutocompleteOptions = {}): Extension => {
-  const suggest = ViewPlugin.fromClass(
-    class {
-      _decorations: DecorationSet;
-      _currentSuggestion: string | null = null;
-
-      constructor(view: EditorView) {
-        this._decorations = this.computeDecorations(view);
-      }
-
-      update(update: ViewUpdate) {
-        if (update.docChanged || update.selectionSet) {
-          this._decorations = this.computeDecorations(update.view);
-        }
-      }
-
-      private computeDecorations(view: EditorView): DecorationSet {
-        const text = view.state.doc.toString();
-        const suggestions = onSuggest?.(text) ?? [];
-        if (!suggestions.length) {
-          this._currentSuggestion = null;
-          return Decoration.none;
-        }
-
-        // Get the first suggestion.
-        this._currentSuggestion = suggestions[0];
-        const suffix = this._currentSuggestion.slice(text.length);
-        if (!suffix) {
-          return Decoration.none;
-        }
-
-        // Always show ghost text at the end of the document.
-        return Decoration.set([
-          Decoration.widget({
-            widget: new InlineSuggestionWidget(suffix),
-            side: 1,
-          }).range(view.state.doc.length),
-        ]);
-      }
-
-      completeSuggestion(view: EditorView): boolean {
-        if (!this._currentSuggestion) {
-          return false;
-        }
-
-        const text = view.state.doc.toString();
-        const suffix = this._currentSuggestion.slice(text.length);
-        if (!suffix) {
-          return false;
-        }
-
-        view.dispatch({
-          changes: {
-            from: view.state.doc.length,
-            insert: suffix,
-          },
-          selection: {
-            anchor: view.state.doc.length + suffix.length,
-          },
-        });
-
-        return true;
-      }
-    },
-    {
-      decorations: (v) => v._decorations,
-    },
-  );
-
-  return [
-    suggest,
-    EditorView.theme({
-      '.cm-inline-suggestion': {
-        opacity: 0.4,
-      },
-    }),
-
-    Prec.highest(
-      keymap.of([
-        {
-          key: 'Tab',
-          preventDefault: true,
-          run: (view) => {
-            const plugin = view.plugin(suggest);
-            return plugin?.completeSuggestion(view) ?? false;
-          },
-        },
-        {
-          key: 'ArrowRight',
-          preventDefault: true,
-          run: (view) => {
-            // Only complete if cursor is at the end
-            if (view.state.selection.main.head !== view.state.doc.length) {
-              return false;
-            }
-
-            const plugin = view.plugin(suggest);
-            return plugin?.completeSuggestion(view) ?? false;
-          },
-        },
-      ]),
-    ),
-  ];
-};
-
-class InlineSuggestionWidget extends WidgetType {
-  constructor(private suffix: string) {
-    super();
-  }
-
-  override eq(other: this) {
-    return this.suffix === other.suffix;
-  }
-
-  override toDOM() {
-    const span = document.createElement('span');
-    span.textContent = this.suffix;
-    span.className = 'cm-inline-suggestion';
-    return span;
-  }
-}

package/src/extensions/autocomplete/index.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './autocomplete';
-export * from './match';
-export * from './placeholder';
-export * from './typeahead';

package/src/extensions/autocomplete/match.ts

@@ -1,46 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export type CompoetionContext = { line: string };
-
-export type CompletionOptions = {
-  default?: string;
-  minLength?: number;
-};
-
-/**
- * Util to match current line to a static list of completions.
- */
-export const staticCompletion =
-  (completions: string[], options: CompletionOptions = {}) =>
-  ({ line }: CompoetionContext) => {
-    if (line.length === 0 && options.default) {
-      return options.default;
-    }
-
-    const parts = line.split(/\s+/).filter(Boolean);
-    if (parts.length) {
-      const str = parts.at(-1)!;
-      if (str.length >= (options.minLength ?? 0)) {
-        for (const completion of completions) {
-          const match = matchCompletion(completion, str);
-          if (match) {
-            return match;
-          }
-        }
-      }
-    }
-  };
-
-export const matchCompletion = (completion: string, str: string, minLength = 0): string | undefined => {
-  if (
-    str.length >= minLength &&
-    completion.length > str.length &&
-    completion.startsWith(str)
-    // TODO(burdon): If case insensitive, need to replace existing chars.
-    // completion.toLowerCase().startsWith(str.toLowerCase())
-  ) {
-    return completion.slice(str.length);
-  }
-};

package/src/extensions/autocomplete/placeholder.ts

@@ -1,117 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-// Based on https://github.com/codemirror/view/blob/main/src/placeholder.ts
-//
-
-import { type Extension } from '@codemirror/state';
-import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
-
-import { clientRectsFor, flattenRect } from '../../util';
-
-type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
-
-export type PlaceholderOptions = {
-  content: Content;
-  delay?: number;
-};
-
-/**
- * Shows a transient placeholder at the current cursor position.
- */
-export const placeholder = ({ content, delay = 3_000 }: PlaceholderOptions): Extension => {
-  const plugin = ViewPlugin.fromClass(
-    class {
-      _timeout: ReturnType<typeof setTimeout> | undefined;
-      _decorations = Decoration.none;
-
-      update(update: ViewUpdate) {
-        if (this._timeout) {
-          window.clearTimeout(this._timeout);
-          this._timeout = undefined;
-        }
-
-        // Check if the active line (where cursor is) is empty.
-        const activeLine = update.view.state.doc.lineAt(update.view.state.selection.main.head);
-        const isEmpty = activeLine.text.trim() === '';
-        if (isEmpty) {
-          // Create widget decoration at the start of the current line.
-          const lineStart = activeLine.from;
-          this._timeout = setTimeout(() => {
-            this._decorations = Decoration.set([
-              Decoration.widget({
-                widget: new PlaceholderWidget(content),
-                side: 1,
-              }).range(lineStart),
-            ]);
-
-            update.view.update([]);
-          }, delay);
-        }
-
-        this._decorations = Decoration.none;
-      }
-
-      destroy() {
-        if (this._timeout) {
-          clearTimeout(this._timeout);
-        }
-      }
-    },
-    {
-      provide: (plugin) => {
-        return [EditorView.decorations.of((view) => view.plugin(plugin)?._decorations ?? Decoration.none)];
-      },
-    },
-  );
-
-  return typeof content === 'string'
-    ? [plugin, EditorView.contentAttributes.of({ 'aria-placeholder': content })]
-    : plugin;
-};
-
-export class PlaceholderWidget extends WidgetType {
-  constructor(readonly content: Content) {
-    super();
-  }
-
-  toDOM(view: EditorView) {
-    const wrap = document.createElement('span');
-    wrap.className = 'cm-placeholder';
-    wrap.style.pointerEvents = 'none';
-    wrap.setAttribute('aria-hidden', 'true');
-    wrap.appendChild(
-      typeof this.content === 'string'
-        ? document.createTextNode(this.content)
-        : typeof this.content === 'function'
-          ? this.content(view)
-          : this.content.cloneNode(true),
-    );
-
-    return wrap;
-  }
-
-  override coordsAt(dom: HTMLElement) {
-    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
-    if (!rects.length) {
-      return null;
-    }
-
-    const style = getComputedStyle(dom.parentNode as HTMLElement);
-    const rect = flattenRect(rects[0], style.direction !== 'rtl');
-    const lineHeight = parseInt(style.lineHeight);
-    if (rect.bottom - rect.top > lineHeight * 1.5) {
-      return {
-        left: rect.left,
-        right: rect.right,
-        top: rect.top,
-        bottom: rect.top + lineHeight,
-      };
-    }
-
-    return rect;
-  }
-
-  override ignoreEvent() {
-    return false;
-  }
-}

package/src/extensions/autocomplete/typeahead.ts

@@ -1,87 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { EditorSelection, type Extension, Prec, RangeSetBuilder } from '@codemirror/state';
-import {
-  type Command,
-  Decoration,
-  type DecorationSet,
-  type EditorView,
-  ViewPlugin,
-  type ViewUpdate,
-  keymap,
-} from '@codemirror/view';
-
-import { type CompoetionContext } from './match';
-import { PlaceholderWidget } from './placeholder';
-
-// TODO(burdon): Option to complete only at end of line.
-export type TypeaheadOptions = {
-  onComplete?: (context: CompoetionContext) => string | undefined;
-};
-
-/**
- * Shows a completion placeholder.
- */
-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 PlaceholderWidget(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,
-        },
-      ]),
-    ),
-  ];
-};

package/src/extensions/automerge/automerge.stories.tsx

@@ -1,149 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@preact/signals-react';
-
-import { Repo } from '@automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
-import { type Identity, useIdentity } from '@dxos/react-client/halo';
-import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
-import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { render } from '@dxos/storybook-utils';
-
-import { editorSlots } from '../../defaults';
-import { useTextEditor } from '../../hooks';
-import { translations } from '../../translations';
-import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
-
-const initialContent = 'Hello world!';
-
-type TestObject = {
-  text: string;
-};
-
-type EditorProps = {
-  source: DocAccessor;
-  autoFocus?: boolean;
-  space?: Space;
-  identity?: Identity;
-};
-
-const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(
-    () => ({
-      initialValue: DocAccessor.getValue(source),
-      extensions: [
-        createBasicExtensions({ placeholder: 'Type here...', search: true }),
-        createThemeExtensions({ themeMode, slots: editorSlots }),
-        createDataExtensions({ id: 'test', text: source, space, identity }),
-      ],
-      autoFocus,
-    }),
-    [source, themeMode],
-  );
-
-  return <div ref={parentRef} className='flex is-full' />;
-};
-
-const DefaultStory = () => {
-  const [object1, setObject1] = useState<DocAccessor<TestObject>>();
-  const [object2, setObject2] = useState<DocAccessor<TestObject>>();
-
-  useEffect(() => {
-    queueMicrotask(async () => {
-      const repo1 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
-      const repo2 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
-
-      const object1 = repo1.create<TestObject>();
-      object1.change((doc: TestObject) => {
-        doc.text = initialContent;
-      });
-
-      const object2 = await repo2.find<TestObject>(object1.url);
-      await object2.whenReady();
-
-      // TODO(mykola): Fix types.
-      setObject1({ handle: object1 as any, path: ['text'] });
-      setObject2({ handle: object2 as any, path: ['text'] });
-    });
-  }, []);
-
-  if (!object1 || !object2) {
-    return null;
-  }
-
-  return (
-    <div role='none' className='grid grid-cols-2 bs-full is-full divide-x divide-neutral-500'>
-      <Editor source={object1} autoFocus />
-      <Editor source={object2} />
-    </div>
-  );
-};
-
-const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
-  const identity = useIdentity();
-  const space = useSpace(spaceKey);
-  const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery(space, Query.type(Type.Expando, { type: 'test' }));
-
-  useEffect(() => {
-    const content = objects[0]?.content.target;
-    if (!source && content) {
-      const source = createDocAccessor(content, ['content']);
-      setSource(source);
-    }
-  }, [objects, source]);
-
-  if (!source) {
-    return null;
-  }
-
-  return <Editor source={source} space={space} identity={identity ?? undefined} />;
-};
-
-const meta = {
-  title: 'ui/react-ui-editor/Automerge',
-  component: Editor as any,
-  render: render(DefaultStory),
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const WithEcho: Story = {
-  render: () => {
-    return (
-      <ClientRepeater
-        count={2}
-        component={EchoStory}
-        createSpace
-        onCreateSpace={async ({ space }) => {
-          space.db.add(
-            Obj.make(Type.Expando, {
-              type: 'test',
-              content: Ref.make(Obj.make(Type.Expando, { content: initialContent })),
-            }),
-          );
-        }}
-      />
-    );
-  },
-};