@dxos/ui-editor 0.0.0

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @dxos/react-ui-editor
+
+Document editing experience within a DXOS shell.
+
+## Installation
+
+```bash
+pnpm i @dxos/react-ui-editor
+```
+
+## DXOS Resources
+
+- [Website](https://dxos.org)
+- [Developer Documentation](https://docs.dxos.org)
+- Talk to us on [Discord](https://dxos.org/discord)
+
+## Contributions
+
+Your ideas, issues, and code are most welcome. Please take a look at our [community code of conduct](https://github.com/dxos/dxos/blob/main/CODE_OF_CONDUCT.md), the [issue guide](https://github.com/dxos/dxos/blob/main/CONTRIBUTING.md#submitting-issues), and the [PR contribution guide](https://github.com/dxos/dxos/blob/main/CONTRIBUTING.md#submitting-prs).
+
+License: [MIT](./LICENSE) Copyright 2022 © DXOS

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@dxos/ui-editor",
+  "version": "0.0.0",
+  "description": "Text editor components.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": "./dist/lib/node-esm/types/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@automerge/automerge": "3.2.1",
+    "@codemirror/autocomplete": "^6.19.0",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "6.3.4",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/language-data": "^6.5.1",
+    "@codemirror/lint": "6.8.5",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.4",
+    "@lezer/common": "^1.2.2",
+    "@lezer/generator": "^1.7.1",
+    "@lezer/highlight": "^1.2.1",
+    "@lezer/markdown": "^1.3.1",
+    "@replit/codemirror-vim": "^6.2.1",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
+    "@uiw/codemirror-theme-vscode": "^4.25.2",
+    "ajv": "^8.17.1",
+    "codemirror": "^6.0.1",
+    "lib0": "^0.2.65",
+    "lodash.defaultsdeep": "^4.6.1",
+    "lodash.merge": "^4.6.2",
+    "lodash.sortby": "^4.7.0",
+    "style-mod": "^4.1.0",
+    "@dxos/app-graph": "0.8.3",
+    "@dxos/context": "0.8.3",
+    "@dxos/async": "0.8.3",
+    "@dxos/client": "0.8.3",
+    "@dxos/debug": "0.8.3",
+    "@dxos/invariant": "0.8.3",
+    "@dxos/echo-db": "0.8.3",
+    "@dxos/echo": "0.8.3",
+    "@dxos/live-object": "0.8.3",
+    "@dxos/log": "0.8.3",
+    "@dxos/protocols": "0.8.3",
+    "@dxos/display-name": "0.8.3",
+    "@dxos/ui-types": "0.0.0",
+    "@dxos/ui": "0.0.0",
+    "@dxos/ui-theme": "0.0.0",
+    "@dxos/lit-ui": "0.8.3",
+    "@dxos/util": "0.8.3"
+  },
+  "devDependencies": {
+    "@automerge/automerge": "3.2.1",
+    "@automerge/automerge-repo": "2.5.1",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
+    "@effect/platform": "0.93.6",
+    "@types/chai": "^4.2.15",
+    "@types/chai-dom": "^1.11.0",
+    "@types/lodash.defaultsdeep": "^4.6.6",
+    "@types/lodash.merge": "^4.6.6",
+    "@types/lodash.sortby": "^4.7.7",
+    "chai": "^4.4.1",
+    "chai-dom": "^1.11.0",
+    "effect": "3.19.11",
+    "happy-dom": "^13.3.1",
+    "jsdom": "^27.0.0",
+    "mocha": "^10.6.0",
+    "vite": "7.1.9",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.5.0",
+    "@dxos/echo": "0.8.3",
+    "@dxos/keyboard": "0.8.3",
+    "@dxos/echo-signals": "0.8.3",
+    "@dxos/config": "0.8.3",
+    "@dxos/random": "0.8.3",
+    "@dxos/storybook-utils": "0.8.3",
+    "@dxos/ui-theme": "0.0.0",
+    "@dxos/schema": "0.8.3"
+  },
+  "peerDependencies": {
+    "@effect/platform": "0.93.6",
+    "effect": "3.19.11",
+    "@dxos/ui-theme": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "vitest-ui": "vitest --ui"
+  }
+}

package/src/defaults.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+
+import { type ThemeExtensionsOptions } from './extensions';
+
+/**
+ * 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 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

@@ -0,0 +1,55 @@
+//
+// 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

@@ -0,0 +1,151 @@
+//
+// 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

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

package/src/extensions/autocomplete/match.ts

@@ -0,0 +1,46 @@
+//
+// 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

@@ -0,0 +1,117 @@
+//
+// 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

@@ -0,0 +1,87 @@
+//
+// 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,
+        },
+      ]),
+    ),
+  ];
+};