@dxos/react-ui-editor 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/src/extensions/markdown/decorate.ts

@@ -3,20 +3,21 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder, type EditorState, StateEffect } from '@codemirror/state';
-import { EditorView, Decoration, type DecorationSet, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { type EditorState, RangeSetBuilder, StateEffect } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
 import { mx } from '@dxos/react-ui-theme';
 
+import { type HeadingLevel, theme } from '../../styles';
+import { type RenderCallback } from '../../types';
+import { wrapWithCatch } from '../../util';
+
 import { adjustChanges } from './changes';
 import { image } from './image';
-import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
+import { bulletListIndentationWidth, formattingStyles, orderedListIndentationWidth } from './styles';
 import { table } from './table';
-import { theme, type HeadingLevel } from '../../styles';
-import { type RenderCallback } from '../../types';
-import { wrapWithCatch } from '../../util';
 
 /**
  * Unicode characters.

package/src/extensions/markdown/formatting.test.ts

@@ -7,21 +7,21 @@ import { EditorState, type StateCommand } from '@codemirror/state';
 import { describe, expect, test } from 'vitest';
 
 import {
+  type Formatting,
+  Inline,
+  List,
   addBlockquote,
   addCodeblock,
   addLink,
   addList,
   addStyle,
   getFormatting,
-  removeStyle,
-  removeLink,
-  removeList,
   removeBlockquote,
   removeCodeblock,
+  removeLink,
+  removeList,
+  removeStyle,
   setHeading,
-  Inline,
-  List,
-  type Formatting,
 } from './formatting';
 
 export const emptyFormatting: Formatting = {

package/src/extensions/markdown/formatting.ts

@@ -7,14 +7,14 @@ import { syntaxTree } from '@codemirror/language';
 import {
   type ChangeSpec,
   EditorSelection,
-  type Extension,
   type EditorState,
+  type Extension,
   type Line,
   type StateCommand,
   type Text,
 } from '@codemirror/state';
-import { EditorView, keymap, type ViewUpdate } from '@codemirror/view';
-import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
+import { EditorView, type ViewUpdate, keymap } from '@codemirror/view';
+import { type SyntaxNode, type SyntaxNodeRef } from '@lezer/common';
 import { useCallback, useMemo } from 'react';
 
 import { debounceAndThrottle } from '@dxos/async';

package/src/extensions/markdown/highlight.ts

@@ -4,7 +4,7 @@
 
 import { markdownLanguage } from '@codemirror/lang-markdown';
 import { HighlightStyle } from '@codemirror/language';
-import { tags, styleTags, Tag } from '@lezer/highlight';
+import { Tag, styleTags, tags } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 
 import { fontBody, theme } from '../../styles';

package/src/extensions/mention.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { autocompletion, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
+import { type CompletionContext, type CompletionResult, autocompletion } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
 
 import { log } from '@dxos/log';

package/src/extensions/outliner/outliner.test.ts

@@ -6,11 +6,12 @@ import { EditorSelection, EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { describe, test } from 'vitest';
 
-import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
-import { listItemToString, outlinerTree, treeFacet } from './tree';
 import { str } from '../../testing';
 import { createMarkdownExtensions } from '../markdown';
 
+import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
+import { listItemToString, outlinerTree, treeFacet } from './tree';
+
 const lines = [
   '- [ ] 1',
   '- [ ] 2',

package/src/extensions/outliner/outliner.ts

@@ -7,12 +7,13 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 
 import { mx } from '@dxos/react-ui-theme';
 
+import { floatingMenu } from '../command';
+import { decorateMarkdown } from '../markdown';
+
 import { commands } from './commands';
 import { editor } from './editor';
-import { selectionCompartment, selectionFacet, selectionEquals } from './selection';
+import { selectionCompartment, selectionEquals, selectionFacet } from './selection';
 import { outlinerTree, treeFacet } from './tree';
-import { floatingMenu } from '../command';
-import { decorateMarkdown } from '../markdown';
 
 // ISSUES:
 // TODO(burdon): Remove requirement for continuous lines to be indented (so that user's can't accidentally delete them and break the layout).

package/src/extensions/outliner/selection.ts

@@ -3,7 +3,7 @@
 //
 
 import { Compartment, type EditorState, Facet, type SelectionRange } from '@codemirror/state';
-import { type EditorView, type Command } from '@codemirror/view';
+import { type Command, type EditorView } from '@codemirror/view';
 
 import { treeFacet } from './tree';
 

package/src/extensions/outliner/tree.test.ts

@@ -6,10 +6,11 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState } from '@codemirror/state';
 import { beforeEach, describe, test } from 'vitest';
 
-import { outlinerTree, treeFacet, listItemToString, type Item } from './tree';
 import { str } from '../../testing';
 import { type Range } from '../../types';
 
+import { type Item, listItemToString, outlinerTree, treeFacet } from './tree';
+
 const lines = [
   '- [ ] 1',
   '- [ ] 2',

package/src/extensions/outliner/tree.ts

@@ -3,7 +3,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { StateField, type Transaction, type Extension, type EditorState } from '@codemirror/state';
+import { type EditorState, type Extension, StateField, type Transaction } from '@codemirror/state';
 import { Facet } from '@codemirror/state';
 import { type SyntaxNode } from '@lezer/common';
 

package/src/hooks/useTextEditor.ts

@@ -4,7 +4,7 @@
 
 import { EditorState, type EditorStateConfig, type Text } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup, type TabsterTypes } from '@fluentui/react-tabster';
+import { type TabsterTypes, useFocusableGroup } from '@fluentui/react-tabster';
 import {
   type DependencyList,
   type KeyboardEventHandler,
@@ -17,9 +17,9 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
-import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
+import { type MaybeProvider, getProviderValue, isNotFalsy } from '@dxos/util';
 
-import { type EditorSelection, documentId, createEditorStateTransaction, editorInputMode } from '../extensions';
+import { type EditorSelection, createEditorStateTransaction, documentId, editorInputMode } from '../extensions';
 import { debugDispatcher } from '../util';
 
 let instanceCount = 0;

package/src/stories/Command.stories.tsx

@@ -4,19 +4,20 @@
 
 import '@dxos-theme';
 
-import React, { useState, type KeyboardEvent } from 'react';
+import React, { type KeyboardEvent, useState } from 'react';
 
-import { Button, Icon, Input, DropdownMenu } from '@dxos/react-ui';
+import { Button, DropdownMenu, Icon, Input } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-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 { editorWidth } from '../defaults';
-import { command, type Action, floatingMenu } from '../extensions';
+import { type Action, command, floatingMenu } from '../extensions';
 import { str } from '../testing';
 import { createRenderer } from '../util';
 
+import { EditorStory } from './components';
+
 const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) => {
   const [text, setText] = useState('');
 

package/src/stories/CommandMenu.stories.tsx

@@ -11,10 +11,9 @@ import React, { useCallback, useRef } from 'react';
 import { Obj, Query } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory, names } from './components';
 import {
   CommandMenu,
   type CommandMenuGroup,
@@ -26,10 +25,12 @@ import {
   insertAtLineStart,
   linkSlashCommands,
 } from '../components';
-import { useCommandMenu, type UseCommandMenuOptions } from '../extensions';
+import { type UseCommandMenuOptions, useCommandMenu } from '../extensions';
 import { str } from '../testing';
 import { createElement } from '../util';
 
+import { EditorStory, names } from './components';
+
 const generator: ValueGenerator = faker as any;
 
 type StoryProps = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
@@ -113,7 +114,7 @@ export const Link: Story = {
           return [];
         }
 
-        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? '';
+        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
         const result = await space?.db.query(Query.type(Testing.Contact)).run();
         const items = result.objects
           .filter((object) => object.name.toLowerCase().includes(name))

package/src/stories/Comments.stories.tsx

@@ -10,14 +10,15 @@ import React, { type FC } from 'react';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 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, content, longText } from './components';
 import { annotations, comments, createExternalCommentSync } from '../extensions';
 import { str } from '../testing';
 import { type Comment } from '../types';
 import { createRenderer } from '../util';
 
+import { EditorStory, content, longText } from './components';
+
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,

package/src/stories/EditorToolbar.stories.tsx

@@ -16,14 +16,14 @@ import { EditorToolbar, useEditorToolbarState } from '../components';
 import { editorWidth } from '../defaults';
 import {
   InputModeExtensions,
-  createMarkdownExtensions,
   createBasicExtensions,
+  createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
   formattingKeymap,
   useFormattingState,
 } from '../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../hooks';
+import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
 import { type EditorInputMode, type EditorViewMode } from '../types';
 
@@ -43,7 +43,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
       moveToEndOfLine: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly' }),
+        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),

package/src/stories/Experimental.stories.tsx

@@ -9,12 +9,13 @@ import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory, content } from './components';
-import { typewriter, blast, defaultOptions, dropFile } from '../extensions';
+import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
 import { str } from '../testing';
 
+import { EditorStory, content } from './components';
+
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,

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,7 +49,7 @@ const PreviewCard = () => {
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
         <Popover.Viewport>
-          <Card.SurfaceRoot 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.SurfaceRoot>
@@ -132,7 +133,7 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
           <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'
@@ -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,

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',
   },
 
   /**
@@ -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/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