@dxos/react-ui-editor 0.8.4-main.c1de068 → 0.8.4-main.dedc0f3

package/src/stories/TextEditor.stories.tsx

@@ -6,24 +6,12 @@ import '@dxos-theme';
 
 import { javascript } from '@codemirror/lang-javascript';
 import { openSearchPanel } from '@codemirror/search';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import {
-  EditorStory,
-  allExtensions,
-  content,
-  defaultExtensions,
-  global,
-  largeWithImages,
-  links,
-  longText,
-  names,
-  renderLinkButton,
-  text,
-} from './components';
 import { editorMonospace } from '../defaults';
 import {
   InputModeExtensions,
@@ -39,12 +27,26 @@ import {
 } from '../extensions';
 import { str } from '../testing';
 
-const meta: Meta<typeof EditorStory> = {
+import {
+  EditorStory,
+  allExtensions,
+  content,
+  defaultExtensions,
+  global,
+  largeWithImages,
+  links,
+  longText,
+  names,
+  renderLinkButton,
+  text,
+} from './components';
+
+const meta = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: { layout: 'fullscreen', controls: { disable: true } },
-};
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
@@ -52,7 +54,9 @@ export default meta;
 // Default
 //
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} />,
 };
 
@@ -60,7 +64,7 @@ export const Default = {
 // Everything
 //
 
-export const Everything = {
+export const Everything: Story = {
   render: () => <EditorStory text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
 };
 
@@ -68,7 +72,7 @@ export const Everything = {
 // Empty
 //
 
-export const Empty = {
+export const Empty: Story = {
   render: () => <EditorStory extensions={defaultExtensions} />,
 };
 
@@ -76,7 +80,7 @@ export const Empty = {
 // Readonly
 //
 
-export const Readonly = {
+export const Readonly: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} readOnly />,
 };
 
@@ -84,7 +88,7 @@ export const Readonly = {
 // No Extensions
 //
 
-export const NoExtensions = {
+export const NoExtensions: Story = {
   render: () => <EditorStory text={text} />,
 };
 
@@ -92,7 +96,7 @@ export const NoExtensions = {
 // Vim
 //
 
-export const Vim = {
+export const Vim: Story = {
   render: () => (
     <EditorStory
       text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
@@ -105,7 +109,7 @@ export const Vim = {
 // Listener
 //
 
-export const Listener = {
+export const Listener: Story = {
   render: () => (
     <EditorStory
       text={str('# Listener', '', content.footer)}
@@ -127,7 +131,7 @@ export const Listener = {
 // Folding
 //
 
-export const Folding = {
+export const Folding: Story = {
   render: () => <EditorStory text={text} extensions={[folding()]} />,
 };
 
@@ -135,7 +139,7 @@ export const Folding = {
 // Scrolling
 //
 
-export const Scrolling = {
+export const Scrolling: Story = {
   render: () => (
     <EditorStory
       text={str('# Large Document', '', longText)}
@@ -147,13 +151,13 @@ export const Scrolling = {
   ),
 };
 
-export const ScrollingWithImages = {
+export const ScrollingWithImages: Story = {
   render: () => (
     <EditorStory text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
   ),
 };
 
-export const ScrollTo = {
+export const ScrollTo: Story = {
   render: () => {
     // NOTE: Selection won't appear if text is reformatted.
     const word = 'Scroll to here...';
@@ -174,7 +178,7 @@ export const ScrollTo = {
 // Typescript
 //
 
-export const Typescript = {
+export const Typescript: Story = {
   render: () => (
     <EditorStory
       text={content.typescript}
@@ -188,15 +192,17 @@ export const Typescript = {
 // Autocomplete
 //
 
-export const Autocomplete = {
+export const Autocomplete: Story = {
   render: () => (
     <EditorStory
       text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
       extensions={[
         decorateMarkdown({ renderLinkButton }),
         autocomplete({
-          onSearch: (text) => {
-            return links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()));
+          onSuggest: (text) => {
+            return links
+              .filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()))
+              .map(({ label }) => label);
           },
         }),
       ]}
@@ -210,7 +216,7 @@ export const Autocomplete = {
 
 const completions = ['type', 'AND', 'OR', 'NOT', 'dxos.org'];
 
-export const Typeahead = {
+export const Typeahead: Story = {
   render: () => (
     <EditorStory
       text={str('# Typeahead', '')}
@@ -228,7 +234,7 @@ export const Typeahead = {
 // Mention
 //
 
-export const Mention = {
+export const Mention: Story = {
   render: () => (
     <EditorStory
       text={str('# Mention', '', 'Type @...', content.footer)}
@@ -245,7 +251,7 @@ export const Mention = {
 // Search
 //
 
-export const Search = {
+export const Search: Story = {
   render: () => (
     <EditorStory
       text={str('# Search', text)}

package/src/stories/components/EditorStory.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { type ReactNode, forwardRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
+import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 
 import { Expando } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -16,26 +16,25 @@ import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { editorSlots, editorGutter } from '../../defaults';
+import { editorGutter, editorSlots } from '../../defaults';
 import {
   type DebugNode,
   type ThemeExtensionsOptions,
-  createDataExtensions,
   createBasicExtensions,
+  createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
 } from '../../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../../hooks';
+import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
 // Type definitions.
 export type DebugMode = 'raw' | 'tree' | 'raw+tree';
 
 const defaultId = 'editor-' + PublicKey.random().toHex().slice(0, 8);
 
-export type StoryProps = Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'> &
+export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
   Pick<ThemeExtensionsOptions, 'slots'> & {
-    id?: string;
     debug?: DebugMode;
     debugCustom?: (view: EditorView) => ReactNode;
     text?: string;
@@ -48,16 +47,16 @@ export type StoryProps = Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'ex
 
 export const EditorStory = forwardRef<EditorView | undefined, StoryProps>(
   ({ debug, debugCustom, text, extensions: _extensions, ...props }, forwardedRef) => {
-    const attentionAttrs = useAttentionAttributes('testing');
+    const attentionAttrs = useAttentionAttributes('test-panel');
     const [tree, setTree] = useState<DebugNode>();
     const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
     const viewRef = useForwardedRef(forwardedRef);
-    const view = viewRef.current;
     const extensions = useMemo(
       () => (debug ? [_extensions, debugTree(setTree)].filter(isNonNullable) : _extensions),
       [debug, _extensions],
     );
 
+    const view = viewRef.current;
     return (
       <div className={mx('w-full h-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
         <EditorComponent ref={viewRef} object={object} text={text} extensions={extensions} {...props} />
@@ -112,8 +111,8 @@ export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
         initialValue: text,
         extensions: [
           createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
-          createMarkdownExtensions({ themeMode }),
+          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
+          createMarkdownExtensions(),
           createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
           editorGutter,
           extensions || [],

package/src/styles/theme.ts

@@ -64,7 +64,7 @@ export const defaultTheme: ThemeStyles = {
     fontFamily: fontBody,
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: '16px',
-    lineHeight: 1.5,
+    lineHeight: '24px',
     color: 'unset',
   },
 
@@ -74,7 +74,7 @@ export const defaultTheme: ThemeStyles = {
    */
   '.cm-gutters': {
     borderRight: 'none',
-    background: 'transparent',
+    // background: 'transparent',
   },
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers': {
@@ -88,14 +88,15 @@ export const defaultTheme: ThemeStyles = {
    * Height is set to match the corresponding line (which may have wrapped).
    */
   '.cm-gutterElement': {
-    fontSize: '12px',
     lineHeight: '24px',
+    fontSize: '12px',
   },
 
   /**
    * Line.
    */
   '.cm-line': {
+    lineHeight: '24px',
     paddingInline: 0,
   },
   '.cm-activeLine': {
@@ -155,7 +156,7 @@ export const defaultTheme: ThemeStyles = {
    * Tooltip.
    */
   '.cm-tooltip': {
-    background: 'var(--dx-baseSurface)',
+    background: 'var(--dx-modalSurface)',
   },
   '.cm-tooltip-below': {},
 
@@ -176,7 +177,8 @@ export const defaultTheme: ThemeStyles = {
     padding: '4px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-    background: 'var(--dx-hoverSurface)',
+    background: 'var(--dx-accentSurface)',
+    color: 'var(--dx-accentSurfaceText)',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
@@ -232,7 +234,7 @@ export const defaultTheme: ThemeStyles = {
     outline: '1px solid transparent',
   },
   '.cm-panel input, .cm-panel button': {
-    backgroundColor: 'var(--dx-input)',
+    backgroundColor: 'var(--dx-inputSurface)',
   },
   '.cm-panel input:focus, .cm-panel button:focus': {
     outline: '1px solid var(--dx-neutralFocusIndicator)',

package/src/testing/util.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
+/** deprecated Replace with @dxos/util trim */
+// TODO(burdon): Remove
 export const str = (...lines: string[]) => lines.join('\n');

package/src/translations.ts

@@ -24,8 +24,8 @@ export const translations = [
         'selection overlaps existing comment label': 'Selection overlaps existing comment',
         'select text to comment label': 'Select text to comment',
         'image label': 'Insert image',
-        'heading label': 'Heading level',
         'table label': 'Create table',
+        'heading label': 'Heading level',
         'heading level label_zero': 'Paragraph',
         'heading level label_one': 'Heading level {{count}}',
         'heading level label_other': 'Heading level {{count}}',

package/src/util/cursor.ts

@@ -4,9 +4,10 @@
 
 import { type EditorState } from '@codemirror/state';
 
-import { singleValueFacet } from './facet';
 import { type Range } from '../types';
 
+import { singleValueFacet } from './facet';
+
 /**
  * Determines if two ranges overlap.
  * A range is considered to overlap if there is any intersection

package/src/util/debug.ts

@@ -7,12 +7,12 @@ import { type EditorView } from '@codemirror/view';
 
 import { log } from '@dxos/log';
 
-export const wrapWithCatch = (fn: (...args: any[]) => any) => {
+export const wrapWithCatch = (fn: (...args: any[]) => any, label?: string) => {
   return (...args: any[]) => {
     try {
       return fn(...args);
     } catch (err) {
-      log.catch(err);
+      log.catch(err, { label });
     }
   };
 };

package/src/util/decorations.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Range } from '@codemirror/state';
+import { type Decoration, type DecorationSet } from '@codemirror/view';
+
+export const decorationSetToArray = (deco: DecorationSet): readonly Range<Decoration>[] => {
+  const ranges: Range<Decoration>[] = [];
+  const iter = deco.iter();
+  while (iter.value) {
+    ranges.push({
+      from: iter.from,
+      to: iter.to,
+      value: iter.value,
+    });
+    iter.next();
+  }
+
+  return ranges;
+};

package/src/util/dom.ts

@@ -2,30 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
-// Copied from @codemirror/view
-
-export interface Rect {
+export type Rect = {
   readonly left: number;
   readonly right: number;
   readonly top: number;
   readonly bottom: number;
-}
+};
 
-export const flattenRect = (rect: Rect, left: boolean) => {
+export const flattenRect = (rect: Rect, left: boolean): Rect => {
   const x = left ? rect.left : rect.right;
   return { left: x, right: x, top: rect.top, bottom: rect.bottom };
 };
 
 let scratchRange: Range | null;
 
-export const textRange = (node: Text, from: number, to = from) => {
+export const textRange = (node: Text, from: number, to = from): Range => {
   const range = scratchRange || (scratchRange = document.createRange());
   range.setEnd(node, to);
   range.setStart(node, from);
   return range;
 };
 
-export const clientRectsFor = (dom: Node) => {
+export const clientRectsFor = (dom: Node): DOMRectList => {
   if (dom.nodeType === 3) {
     return textRange(dom as Text, 0, dom.nodeValue!.length).getClientRects();
   } else if (dom.nodeType === 1) {
@@ -34,23 +32,3 @@ export const clientRectsFor = (dom: Node) => {
     return [] as any as DOMRectList;
   }
 };
-
-export type ElementOptions = {
-  className?: string;
-  text?: string;
-};
-
-export const createElement = (tag: string, options?: ElementOptions, children?: HTMLElement[]): HTMLElement => {
-  const el = document.createElement(tag);
-  if (options?.className) {
-    el.className = options.className;
-  }
-  if (options?.text) {
-    el.textContent = options.text;
-  }
-  if (children) {
-    el.append(...(Array.isArray(children) ? children : [children]));
-  }
-
-  return el;
-};

package/src/util/domino.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/react-ui-theme';
+import { type ClassNameValue } from '@dxos/react-ui-types';
+
+/**
+ * Super lightweight chainable DOM builder.
+ */
+export class Domino<T extends HTMLElement> {
+  static of<K extends keyof HTMLElementTagNameMap>(tag: K): Domino<HTMLElementTagNameMap[K]> {
+    return new Domino<HTMLElementTagNameMap[K]>(tag);
+  }
+
+  private readonly _el: T;
+  constructor(tag: keyof HTMLElementTagNameMap) {
+    this._el = document.createElement(tag) as T;
+  }
+  classNames(...classNames: ClassNameValue[]): this {
+    this._el.className = mx(classNames);
+    return this;
+  }
+  text(value: string): this {
+    this._el.textContent = value;
+    return this;
+  }
+  data(key: string, value: string): this {
+    this._el.dataset[key] = value;
+    return this;
+  }
+  style(styles: Partial<CSSStyleDeclaration>): this {
+    Object.assign(this._el.style, styles);
+    return this;
+  }
+  attr<K extends keyof T>(key: K, value: T[K]): this {
+    (this._el as any)[key] = value;
+    return this;
+  }
+  child<C extends HTMLElement>(...children: Domino<C>[]): this {
+    children.forEach((child) => this._el.appendChild(child.build()));
+    return this;
+  }
+  on(event: string, handler: (e: Event) => void): this {
+    this._el.addEventListener(event, handler);
+    return this;
+  }
+  build(): T {
+    return this._el;
+  }
+}

package/src/util/index.ts

@@ -3,7 +3,9 @@
 //
 
 export * from './cursor';
+export * from './decorations';
 export * from './debug';
 export * from './dom';
+export * from './domino';
 export * from './facet';
 export * from './react';

package/src/util/react.tsx

@@ -22,7 +22,7 @@ export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
  * @deprecated
  */
 export const createRenderer =
-  <Props extends object>(Component: FC<Props>): RenderCallback<Props> =>
+  <TProps extends object>(Component: FC<TProps>): RenderCallback<TProps> =>
   (el, props) => {
     renderRoot(
       el,