@dxos/react-ui-editor 0.8.3-staging.0fa589b → 0.8.4-main.28f8d3d

package/src/stories/Markdown.stories.tsx

@@ -7,12 +7,13 @@ import '@dxos-theme';
 import { markdown } from '@codemirror/lang-markdown';
 import React from 'react';
 
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
 import { str } from '../testing';
 
+import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
+
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,

package/src/stories/Outliner.stories.tsx

@@ -9,13 +9,14 @@ import React, { useRef } from 'react';
 
 import { DropdownMenu } from '@dxos/react-ui';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory } from './components';
 import { RefDropdownMenu } from '../components';
-import { outliner, listItemToString, treeFacet, deleteItem, hashtag } from '../extensions';
+import { deleteItem, hashtag, listItemToString, outliner, treeFacet } from '../extensions';
 import { str } from '../testing';
 
+import { EditorStory } from './components';
+
 type StoryProps = {
   text: string;
 };

package/src/stories/Preview.stories.tsx

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import { syntaxTree } from '@codemirror/language';
 import { type EditorView } from '@codemirror/view';
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
@@ -14,12 +14,13 @@ import { faker } from '@dxos/random';
 import { Popover } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-stack';
 import { hoverableControlItem, hoverableControlItemTransition, hoverableControls } from '@dxos/react-ui-theme';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
+import { trim } from '@dxos/util';
 
-import { EditorStory } from './components';
 import { PreviewProvider, useRefPopover } from '../components';
-import { preview, image, type PreviewLinkRef, type PreviewLinkTarget, getLinkRef } from '../extensions';
-import { str } from '../testing';
+import { type PreviewLinkRef, type PreviewLinkTarget, getLinkRef, image, preview } from '../extensions';
+
+import { EditorStory } from './components';
 
 const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
@@ -48,10 +49,10 @@ const PreviewCard = () => {
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
         <Popover.Viewport>
-          <Card.Container role='popover'>
+          <Card.SurfaceRoot role='card--popover'>
             <Card.Heading>{target?.label}</Card.Heading>
             {target && <Card.Text classNames='line-clamp-3'>{target.text}</Card.Text>}
-          </Card.Container>
+          </Card.SurfaceRoot>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -126,13 +127,13 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
   }, [handleAction, link, target]);
 
   return createPortal(
-    <Card.Content classNames={hoverableControls}>
+    <Card.StaticRoot classNames={hoverableControls}>
       <div className='flex items-start'>
         {!view?.state.readOnly && (
           <Card.Toolbar classNames='is-min p-[--dx-cardSpacingInline]'>
             {(link.suggest && (
               <>
-                <Card.ToolbarIconButton label='Discard' icon={'ph--x--regular'} onClick={handleDelete} />
+                <Card.ToolbarIconButton label='Discard' icon='ph--x--regular' onClick={handleDelete} />
                 {target && (
                   <Card.ToolbarIconButton
                     classNames='bg-successSurface text-successSurfaceText'
@@ -159,7 +160,7 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
         </Card.Heading>
       </div>
       {target && <Card.Text classNames='line-clamp-3 mbs-0'>{target.text}</Card.Text>}
-    </Card.Content>,
+    </Card.StaticRoot>,
     el,
   );
 };
@@ -200,22 +201,20 @@ export const Default = {
       <PreviewProvider onLookup={handlePreviewLookup}>
         <EditorStory
           ref={handleViewRef}
-          text={str(
-            '# Preview',
-            '',
-            'This project is part of the [DXOS][dxn:queue:data:123] SDK.',
-            '',
-            '![DXOS][?dxn:queue:data:123]',
-            '',
-            'It consists of [ECHO][dxn:queue:data:echo], [HALO][dxn:queue:data:halo], and [MESH][dxn:queue:data:mesh].',
-            '',
-            '## Deep dive',
-            '',
-            '![ECHO][dxn:queue:data:echo]',
-            '',
-            '',
-            '',
-          )}
+          text={trim`
+            # Preview
+
+            This project is part of the [DXOS][dxn:queue:data:123] SDK.
+
+            ![DXOS][?dxn:queue:data:123]
+
+            It consists of [ECHO][dxn:queue:data:echo], [HALO][dxn:queue:data:halo], and [MESH][dxn:queue:data:mesh].
+
+            ## Deep dive
+
+            ![ECHO][dxn:queue:data:echo]
+
+          `}
           extensions={extensions}
         />
         <PreviewCard />

package/src/stories/TextEditor.stories.tsx

@@ -9,21 +9,8 @@ import { openSearchPanel } from '@codemirror/search';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { type Meta, 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,6 +26,20 @@ import {
 } from '../extensions';
 import { str } from '../testing';
 
+import {
+  EditorStory,
+  allExtensions,
+  content,
+  defaultExtensions,
+  global,
+  largeWithImages,
+  links,
+  longText,
+  names,
+  renderLinkButton,
+  text,
+} from './components';
+
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
@@ -217,7 +218,7 @@ export const Typeahead = {
       extensions={[
         decorateMarkdown({ renderLinkButton }),
         typeahead({
-          onComplete: staticCompletion(completions, completions[0]),
+          onComplete: staticCompletion(completions, { minLength: 2 }),
         }),
       ]}
     />

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,17 +16,17 @@ 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';
@@ -112,7 +112,7 @@ export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
         initialValue: text,
         extensions: [
           createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
+          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
           createMarkdownExtensions({ themeMode }),
           createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
           editorGutter,

package/src/styles/theme.ts

@@ -79,18 +79,17 @@ export const defaultTheme: ThemeStyles = {
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers': {
     paddingRight: '4px',
-    borderRight: '1px solid var(--dx-separator)',
+    borderRight: '1px solid var(--dx-subduedSeparator)',
   },
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
     minWidth: '40px',
-    alignContent: 'center',
   },
   /**
-   * Height is set to match the corresponding line.
+   * Height is set to match the corresponding line (which may have wrapped).
    */
   '.cm-gutterElement': {
-    alignItems: 'center',
     fontSize: '12px',
+    lineHeight: '24px',
   },
 
   /**
@@ -110,7 +109,7 @@ export const defaultTheme: ThemeStyles = {
     borderLeft: '2px solid var(--dx-cmCursor)',
   },
   '.cm-placeholder': {
-    color: 'var(--dx-subdued)',
+    color: 'var(--dx-placeholder)',
   },
 
   /**
@@ -156,7 +155,7 @@ export const defaultTheme: ThemeStyles = {
    * Tooltip.
    */
   '.cm-tooltip': {
-    background: 'var(--dx-baseSurface)',
+    background: 'var(--dx-modalSurface)',
   },
   '.cm-tooltip-below': {},
 
@@ -177,7 +176,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',
@@ -233,7 +233,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

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type Resource } from '@dxos/react-ui';
+
 export const translationKey = 'react-ui-editor';
 
-export default [
+export const translations = [
   {
     'en-US': {
       [translationKey]: {
@@ -35,4 +37,4 @@ export default [
       },
     },
   },
-];
+] as const satisfies Resource[];

package/src/types/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './types';

package/src/types/types.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { Schema } from 'effect';
+
+// Runtime data structure.
+export type Range = {
+  from: number;
+  to: number;
+};
+
+// Persistent data structure.
+// TODO(burdon): Rename annotation?
+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 const EditorViewModes = ['preview', 'readonly', 'source'] as const;
+export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
+export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
+
+export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
+export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
+export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;

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