@dxos/react-ui-editor 0.8.4-main.fffef41 → 0.9.0

package/dist/types/src/types/types.d.ts

@@ -1,21 +0,0 @@
-import { type EditorView } from '@codemirror/view';
-import * as Schema from 'effect/Schema';
-export type Range = {
-    from: number;
-    to: number;
-};
-export type Comment = {
-    id: string;
-    cursor?: string;
-};
-/**
- * Callback that renders into a DOM element within the editor.
- */
-export type RenderCallback<Props extends object> = (el: HTMLElement, props: Props, view: EditorView) => void;
-export declare const EditorViewModes: readonly ["preview", "readonly", "source"];
-export declare const EditorViewMode: Schema.Schema<"source" | "preview" | "readonly", "source" | "preview" | "readonly", never>;
-export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
-export declare const EditorInputModes: readonly ["default", "vim", "vscode"];
-export declare const EditorInputMode: Schema.Schema<"default" | "vim" | "vscode", "default" | "vim" | "vscode", never>;
-export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;
-//# sourceMappingURL=types.d.ts.map

package/dist/types/src/types/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAGxC,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAIF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,MAAM,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;AAE7G,eAAO,MAAM,eAAe,4CAA6C,CAAC;AAC1E,eAAO,MAAM,cAAc,4FAAuE,CAAC;AACnG,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,uCAAwC,CAAC;AACtE,eAAO,MAAM,eAAe,kFAAwE,CAAC;AACrG,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/types/src/util/cursor.d.ts

@@ -1,31 +0,0 @@
-import { type EditorState } from '@codemirror/state';
-import { type Range } from '../types';
-/**
- * Determines if two ranges overlap.
- * A range is considered to overlap if there is any intersection
- * between the two ranges, inclusive of their boundaries.
- */
-export declare const overlap: (a: Range, b: Range) => boolean;
-/**
- * Converts indexes into the text document into stable peer-independent cursors.
- *
- * See:
- *  - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
- *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
- *
- * @param {assoc} number Negative values will associate the cursor with the previous character
- *  while positive - with the next one.
- */
-export interface CursorConverter {
-    toCursor(position: number, assoc?: -1 | 1 | undefined): string;
-    fromCursor(cursor: string): number;
-}
-export declare class Cursor {
-    static readonly converter: import("@codemirror/state").Facet<unknown, CursorConverter>;
-    static readonly getCursorFromRange: (state: EditorState, range: Range) => string;
-    static readonly getRangeFromCursor: (state: EditorState, cursor: string) => {
-        from: number;
-        to: number;
-    } | undefined;
-}
-//# sourceMappingURL=cursor.d.ts.map

package/dist/types/src/util/cursor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/util/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAItC;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,GAAG,KAAK,EAAE,GAAG,KAAK,KAAG,OAA2C,CAAC;AAEzF;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,qBAAa,MAAM;IACjB,MAAM,CAAC,QAAQ,CAAC,SAAS,8DAA4C;IAErE,MAAM,CAAC,QAAQ,CAAC,kBAAkB,GAAI,OAAO,WAAW,EAAE,OAAO,KAAK,YAKpE;IAEF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,GAAI,OAAO,WAAW,EAAE,QAAQ,MAAM;;;kBAOtE;CACH"}

package/dist/types/src/util/debug.d.ts

@@ -1,21 +0,0 @@
-import { type Transaction } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-/**
- * @deprecated Use `trim` from `@dxos/util`.
- */
-export declare const str: (...lines: string[]) => string;
-export declare const wrapWithCatch: (fn: (...args: any[]) => any, label?: string) => (...args: any[]) => any;
-/**
- * CodeMirror callbacks swallow errors so wrap handlers.
- */
-export declare const callbackWrapper: <T extends Function>(fn: T) => T;
-/**
- * Log all changes before dispatching them to the view.
- * https://codemirror.net/docs/ref/#view.EditorView.dispatch
- */
-export declare const debugDispatcher: (trs: readonly Transaction[], view: EditorView) => void;
-/**
- * Util to log transactions in update listener.
- */
-export declare const logChanges: (trs: readonly Transaction[]) => void;
-//# sourceMappingURL=debug.d.ts.map

package/dist/types/src/util/debug.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../../src/util/debug.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD;;GAEG;AACH,eAAO,MAAM,GAAG,GAAI,GAAG,OAAO,MAAM,EAAE,WAAqB,CAAC;AAE5D,eAAO,MAAM,aAAa,GAAI,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAAE,QAAQ,MAAM,MAC/D,GAAG,MAAM,GAAG,EAAE,QAOvB,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,QAAQ,EAAE,IAAI,CAAC,KAAG,CAOxC,CAAC;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,SAAS,WAAW,EAAE,EAAE,MAAM,UAAU,SAG5E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,KAAK,SAAS,WAAW,EAAE,SAmBrD,CAAC"}

package/dist/types/src/util/decorations.d.ts

@@ -1,4 +0,0 @@
-import { type Range } from '@codemirror/state';
-import { type Decoration, type DecorationSet } from '@codemirror/view';
-export declare const decorationSetToArray: (deco: DecorationSet) => readonly Range<Decoration>[];
-//# sourceMappingURL=decorations.d.ts.map

package/dist/types/src/util/decorations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"decorations.d.ts","sourceRoot":"","sources":["../../../../src/util/decorations.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEvE,eAAO,MAAM,oBAAoB,GAAI,MAAM,aAAa,KAAG,SAAS,KAAK,CAAC,UAAU,CAAC,EAapF,CAAC"}

package/dist/types/src/util/dom.d.ts

@@ -1,10 +0,0 @@
-export type Rect = {
-    readonly left: number;
-    readonly right: number;
-    readonly top: number;
-    readonly bottom: number;
-};
-export declare const flattenRect: (rect: Rect, left: boolean) => Rect;
-export declare const textRange: (node: Text, from: number, to?: number) => Range;
-export declare const clientRectsFor: (dom: Node) => DOMRectList;
-//# sourceMappingURL=dom.d.ts.map

package/dist/types/src/util/dom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../../src/util/dom.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,IAAI,GAAG;IACjB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,EAAE,MAAM,OAAO,KAAG,IAGvD,CAAC;AAIF,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,MAAM,MAAM,EAAE,WAAS,KAAG,KAK/D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,KAAG,WAQ1C,CAAC"}

package/dist/types/src/util/facet.d.ts

@@ -1,3 +0,0 @@
-import { Facet } from '@codemirror/state';
-export declare const singleValueFacet: <I, O = I>(defaultValue?: O) => Facet<I, O>;
-//# sourceMappingURL=facet.d.ts.map

package/dist/types/src/util/facet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"facet.d.ts","sourceRoot":"","sources":["../../../../src/util/facet.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,eAAe,CAAC,gBAMvD,CAAC"}

package/src/components/EditorContent/EditorContent.stories.tsx

@@ -1,70 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { useMemo } from 'react';
-
-import { createDocAccessor, createObject } from '@dxos/client/echo';
-import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { Text } from '@dxos/schema';
-
-import { automerge, createBasicExtensions, createThemeExtensions } from '../../extensions';
-
-import { EditorContent } from './EditorContent';
-
-const meta = {
-  title: 'ui/react-ui-editor/EditorComponent',
-  component: EditorContent,
-  decorators: [withTheme, withLayout({ container: 'column' })],
-} satisfies Meta<typeof EditorContent>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => {
-    const { themeMode } = useThemeContext();
-    const extensions = useMemo(
-      () => [
-        // Basic extensions.
-        createBasicExtensions(),
-        createThemeExtensions({ themeMode }),
-      ],
-      [],
-    );
-
-    return <EditorContent classNames='p-2' {...args} extensions={extensions} />;
-  },
-  args: {
-    selectionEnd: true,
-    value: 'Hello world!',
-    onChange: (value) => console.log(value),
-  },
-};
-
-export const Automerge: Story = {
-  render: ({ value, ...props }) => {
-    const { themeMode } = useThemeContext();
-    const extensions = useMemo(
-      () => [
-        // Basic extensions.
-        createBasicExtensions(),
-        createThemeExtensions({ themeMode }),
-        automerge(createDocAccessor(createObject(Text.make(value)), ['content'])),
-      ],
-      [],
-    );
-
-    // TODO(burdon): Remove the need for initialValue.
-    return <EditorContent classNames='p-2' {...props} initialValue={value} extensions={extensions} />;
-  },
-  args: {
-    selectionEnd: true,
-    value: 'Hello world!',
-    onChange: (value) => console.log(value),
-  },
-};

package/src/components/EditorContent/EditorContent.tsx

@@ -1,70 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Transaction } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { initialSync } from '../../extensions';
-import { type UseTextEditorProps, useTextEditor } from '../../hooks';
-
-import { type EditorController, createEditorController } from './controller';
-
-export type EditorContentProps = ThemedClassName<
-  {
-    value?: string;
-    onChange?: (value: string) => void;
-  } & UseTextEditorProps
->;
-
-/**
- * Minimal text editor.
- * NOTE: This shouold not be used with the automerge extension.
- * @deprecated Use Editor.Content
- */
-export const EditorContent = forwardRef<EditorController, EditorContentProps>(
-  ({ classNames, id, extensions, selectionEnd, value, onChange, ...props }, forwardedRef) => {
-    const { parentRef, focusAttributes, view } = useTextEditor(
-      () => ({
-        id,
-        initialValue: value,
-        selectionEnd,
-        extensions: [
-          extensions ?? [],
-          EditorView.updateListener.of(({ view, docChanged, transactions }) => {
-            const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
-            if (!isInitialSync && docChanged) {
-              onChange?.(view.state.doc.toString());
-            }
-          }),
-        ],
-        ...props,
-      }),
-      [id, extensions, onChange, selectionEnd],
-    );
-
-    // External controller.
-    useImperativeHandle(forwardedRef, () => {
-      return createEditorController(view);
-    }, [id, view]);
-
-    // Set initial value and cursor position.
-    useEffect(() => {
-      requestAnimationFrame(() => {
-        view?.dispatch({
-          annotations: initialSync,
-          changes: value ? [{ from: 0, to: view?.state.doc.length ?? 0, insert: value ?? '' }] : [],
-          selection: selectionEnd ? { anchor: view?.state.doc.length ?? 0 } : undefined,
-        });
-
-        view?.focus();
-      });
-    }, [view, value, selectionEnd]);
-
-    return <div role='none' className={mx('is-full', classNames)} {...focusAttributes} ref={parentRef} />;
-  },
-);

package/src/components/EditorContent/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './controller';
-export * from './EditorContent';

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/components/EditorToolbar/actions.ts

@@ -1,86 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-
-import { type Action, type NodeArg } from '@dxos/app-graph';
-import {
-  type MenuActionProperties,
-  type ToolbarMenuActionGroupProperties,
-  createMenuAction,
-  createMenuItemGroup,
-} from '@dxos/react-ui-menu';
-
-import { List, addList, removeList } from '../../extensions';
-import { translationKey } from '../../translations';
-
-import { type EditorToolbarState } from './useEditorToolbar';
-
-const listStyles = {
-  bullet: 'ph--list-bullets--regular',
-  ordered: 'ph--list-numbers--regular',
-  task: 'ph--list-checks--regular',
-};
-
-export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state.listStyle ?? '';
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value, getView);
-  return {
-    nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
-    edges: [
-      { source: 'root', target: 'list' },
-      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
-    ],
-  };
-};
-
-export const createEditorAction = (id: string, props: Partial<MenuActionProperties>, invoke: () => void) => {
-  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
-
-  return createMenuAction(id, invoke, {
-    label,
-    ...rest,
-  }) as Action<MenuActionProperties>;
-};
-
-export const createEditorActionGroup = (
-  id: string,
-  props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
-  icon?: string,
-) => {
-  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
-
-  return createMenuItemGroup(id, {
-    label,
-    icon,
-    iconOnly: true,
-    ...rest,
-  });
-};
-
-const createListGroupAction = (value: string) =>
-  createEditorActionGroup('list', {
-    variant: 'toggleGroup',
-    selectCardinality: 'single',
-    value,
-  } as ToolbarMenuActionGroupProperties);
-
-const createListActions = (value: string, getView: () => EditorView) =>
-  Object.entries(listStyles).map(([listStyle, icon]) => {
-    const checked = value === listStyle;
-    return createEditorAction(`list-${listStyle}`, { checked, icon }, () => {
-      const view = getView();
-      if (!view) {
-        return;
-      }
-
-      const listType = listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
-      if (checked) {
-        removeList(listType)(view);
-      } else {
-        addList(listType)(view);
-      }
-    });
-  });

package/src/components/EditorToolbar/useEditorToolbar.ts

@@ -1,20 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useMemo } from 'react';
-
-import { type Live, live } from '@dxos/live-object';
-
-import { type Formatting } from '../../extensions';
-import { type EditorViewMode } from '../../types';
-
-// TODO(burdon): Move to extensions.
-export type EditorToolbarState = { viewMode?: EditorViewMode } & Formatting;
-
-/**
- * @deprecated Use Editor.Root
- */
-export const useEditorToolbar = (initialState: Partial<EditorToolbarState> = {}): Live<EditorToolbarState> => {
-  return useMemo(() => live<EditorToolbarState>(initialState), []);
-};

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';