@dxos/react-ui-editor 0.8.4-main.c4373fc → 0.8.4-main.cb12b3f963

package/src/stories/Tags.stories.tsx

@@ -3,13 +3,11 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { trim } from '@dxos/util';
-
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   type XmlWidgetRegistry,
   type XmlWidgetState,
@@ -18,14 +16,35 @@ import {
   decorateMarkdown,
   extendedMarkdown,
   xmlTags,
-} from '../extensions';
+} from '@dxos/ui-editor';
+import { safeParseInt, trim } from '@dxos/util';
+
 import { useTextEditor } from '../hooks';
 
 const registry = {
-  // <test/>
-  ['test' as const]: {
+  /**
+   * Custom tag: <test/>
+   */
+  test: {
     block: true,
-    Component: () => <div className='p-2 border border-separator rounded'>Test</div>,
+    Component: ({ start = '0' }) => {
+      const [count, setCount] = useState<number>(safeParseInt(start, 0));
+      useEffect(() => {
+        const interval = setInterval(() => {
+          setCount((prev) => {
+            if (prev >= 200) {
+              clearInterval(interval);
+              return prev;
+            }
+
+            return prev + 1;
+          });
+        }, 100);
+        return () => clearInterval(interval);
+      }, []);
+
+      return <div className='p-2 border border-separator rounded-sm'>Test {count}</div>;
+    },
   },
 } satisfies XmlWidgetRegistry;
 
@@ -36,7 +55,7 @@ const DefaultStory = ({ text }: { text?: string }) => {
     initialValue: text,
     extensions: [
       createThemeExtensions({ themeMode }),
-      createBasicExtensions({ lineWrapping: true, readOnly: true }),
+      createBasicExtensions({ lineWrapping: true }),
       decorateMarkdown(),
       extendedMarkdown({ registry }),
       xmlTags({ registry, setWidgets }),
@@ -45,8 +64,8 @@ const DefaultStory = ({ text }: { text?: string }) => {
 
   return (
     <>
-      <div ref={parentRef} className='is-full p-4' />
-      {widgets.map(({ Component, root, id, ...props }) => (
+      <div ref={parentRef} className='w-full p-4' />
+      {widgets.map(({ id, root, Component, props }) => (
         <div key={id}>{createPortal(<Component {...props} />, root)}</div>
       ))}
     </>
@@ -56,7 +75,11 @@ const DefaultStory = ({ text }: { text?: string }) => {
 const text = trim`
   # Tags
 
-  <test id="123" />
+  React widget below.
+
+  <test id="t-1" />
+
+  <test id="t-2" start="100" />
 
   React widget above.
 `;
@@ -64,7 +87,7 @@ const text = trim`
 const meta = {
   title: 'ui/react-ui-editor/Tags',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/TextEditor.stories.tsx

@@ -8,22 +8,19 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { editorMonospace } from '../defaults';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   InputModeExtensions,
-  autocomplete,
   decorateMarkdown,
   folding,
   image,
+  join,
   listener,
   mention,
   selectionState,
   staticCompletion,
   typeahead,
-} from '../extensions';
-import { str } from '../testing';
+} from '@dxos/ui-editor';
 
 import {
   EditorStory,
@@ -32,17 +29,15 @@ import {
   defaultExtensions,
   global,
   largeWithImages,
-  links,
   longText,
   names,
-  renderLinkButton,
   text,
 } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     controls: { disable: true },
@@ -100,7 +95,7 @@ export const NoExtensions: Story = {
 export const Vim: Story = {
   render: () => (
     <EditorStory
-      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
+      text={join('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
       extensions={[defaultExtensions, InputModeExtensions.vim]}
     />
   ),
@@ -113,13 +108,13 @@ export const Vim: Story = {
 export const Listener: Story = {
   render: () => (
     <EditorStory
-      text={str('# Listener', '', content.footer)}
+      text={join('# Listener', '', content.footer)}
       extensions={[
         listener({
-          onFocus: (focusing) => {
+          onFocus: ({ focusing }) => {
             log.info('listener', { focusing });
           },
-          onChange: (text) => {
+          onChange: ({ text }) => {
             log.info('listener', { text });
           },
         }),
@@ -143,7 +138,7 @@ export const Folding: Story = {
 export const Scrolling: Story = {
   render: () => (
     <EditorStory
-      text={str('# Large Document', '', longText)}
+      text={join('# Large Document', '', longText)}
       extensions={selectionState({
         setState: (id, state) => global.set(id, state),
         getState: (id) => global.get(id),
@@ -154,7 +149,7 @@ export const Scrolling: Story = {
 
 export const ScrollingWithImages: Story = {
   render: () => (
-    <EditorStory text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
+    <EditorStory text={join('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
   ),
 };
 
@@ -162,7 +157,7 @@ export const ScrollTo: Story = {
   render: () => {
     // NOTE: Selection won't appear if text is reformatted.
     const word = 'Scroll to here...';
-    const text = str('# Scroll To', longText, '', word, '', longText);
+    const text = join('# Scroll To', longText, '', word, '', longText);
     const idx = text.indexOf(word);
     return (
       <EditorStory
@@ -181,33 +176,7 @@ export const ScrollTo: Story = {
 
 export const Typescript: Story = {
   render: () => (
-    <EditorStory
-      text={content.typescript}
-      lineNumbers
-      extensions={[editorMonospace, javascript({ typescript: true })]}
-    />
-  ),
-};
-
-//
-// Autocomplete
-//
-
-export const Autocomplete: Story = {
-  render: () => (
-    <EditorStory
-      text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
-      extensions={[
-        decorateMarkdown({ renderLinkButton }),
-        autocomplete({
-          onSuggest: (text) => {
-            return links
-              .filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()))
-              .map(({ label }) => label);
-          },
-        }),
-      ]}
-    />
+    <EditorStory text={content.typescript} lineNumbers monospace extensions={javascript({ typescript: true })} />
   ),
 };
 
@@ -215,14 +184,13 @@ export const Autocomplete: Story = {
 // Typeahead
 //
 
-const completions = ['type', 'AND', 'OR', 'NOT', 'dxos.org'];
+const completions = ['hello world!', 'dxos.org'];
 
 export const Typeahead: Story = {
   render: () => (
     <EditorStory
-      text={str('# Typeahead', '')}
+      text={join('# Typeahead', '')}
       extensions={[
-        decorateMarkdown({ renderLinkButton }),
         typeahead({
           onComplete: staticCompletion(completions, { minLength: 2 }),
         }),
@@ -238,7 +206,7 @@ export const Typeahead: Story = {
 export const Mention: Story = {
   render: () => (
     <EditorStory
-      text={str('# Mention', '', 'Type @...', content.footer)}
+      text={join('# Mention', '', 'Type @...', content.footer)}
       extensions={[
         mention({
           onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
@@ -255,7 +223,7 @@ export const Mention: Story = {
 export const Search: Story = {
   render: () => (
     <EditorStory
-      text={str('# Search', text)}
+      text={join('# Search', text)}
       extensions={defaultExtensions}
       onReady={(view) => openSearchPanel(view)}
     />

package/src/stories/Theme.stories.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
+
+import { Editor } from '../components';
+
+const createText = (monospace?: boolean) =>
+  [`${monospace ? 'monospace' : 'body'}`, 'Hello world', '0123456789'].join('\n');
+
+const DefaultStory = () => {
+  const { themeMode } = useThemeContext();
+  const [ext1, ext2] = useMemo(
+    () => [
+      //
+      [
+        createBasicExtensions({ placeholder: 'Enter text', search: true }),
+        createThemeExtensions({ themeMode, monospace: false }),
+      ],
+      [
+        createBasicExtensions({ placeholder: 'Enter text', search: true }),
+        createThemeExtensions({ themeMode, monospace: true }),
+      ],
+    ],
+    [],
+  );
+
+  return (
+    <div className='w-full grid grid-cols-2 gap-2'>
+      <Editor.Root>
+        <Editor.View classNames='p-2' extensions={ext1} initialValue={createText(false)} />
+      </Editor.Root>
+      <Editor.Root>
+        <Editor.View classNames='p-2' extensions={ext2} initialValue={createText(true)} />
+      </Editor.Root>
+    </div>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-editor/Theme',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/stories/components/EditorStory.tsx

@@ -3,29 +3,29 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
-import { Expando } from '@dxos/echo/internal';
-import { live } from '@dxos/echo/internal';
+import { Obj } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { useForwardedRef, useThemeContext } from '@dxos/react-ui';
+import { log } from '@dxos/log';
+import { useMergeRefs, useThemeContext } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-import { isNonNullable } from '@dxos/util';
-
-import { editorGutter, editorSlots } from '../../defaults';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import {
   type DebugNode,
   type ThemeExtensionsOptions,
   createBasicExtensions,
-  createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
-} from '../../extensions';
+  documentSlots,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { type EditorController, createEditorController } from '../../components';
 import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
 // Type definitions.
@@ -33,33 +33,37 @@ export type DebugMode = 'raw' | 'tree' | 'raw+tree';
 
 const defaultId = 'editor-' + PublicKey.random().toHex().slice(0, 8);
 
-export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
+export type EditorStoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
   Pick<ThemeExtensionsOptions, 'slots'> & {
     debug?: DebugMode;
     debugCustom?: (view: EditorView) => ReactNode;
     text?: string;
-    object?: Expando;
+    object?: Obj.OfShape<TestSchema.Expando>;
     readOnly?: boolean;
     placeholder?: string;
     lineNumbers?: boolean;
+    monospace?: boolean;
     onReady?: (view: EditorView) => void;
   };
 
-export const EditorStory = forwardRef<EditorView | null, StoryProps>(
-  ({ debug, debugCustom, text, extensions: _extensions, ...props }, forwardedRef) => {
+export const EditorStory = forwardRef<EditorController, EditorStoryProps>(
+  ({ debug, debugCustom, text, extensions: extensionsProp, ...props }, forwardedRef) => {
+    const controllerRef = useRef<EditorController>(null);
+    const mergedRef = useMergeRefs([controllerRef, forwardedRef]);
+
     const attentionAttrs = useAttentionAttributes('test-panel');
     const [tree, setTree] = useState<DebugNode>();
-    const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
-    const viewRef = useForwardedRef(forwardedRef);
+    const [object] = useState(Obj.make(TestSchema.Expando, { content: text ?? '' }));
+
     const extensions = useMemo(
-      () => (debug ? [_extensions, debugTree(setTree)].filter(isNonNullable) : _extensions),
-      [debug, _extensions],
+      () => (debug ? [extensionsProp, debugTree(setTree)].filter(isNonNullable) : extensionsProp),
+      [debug, extensionsProp],
     );
 
-    const view = viewRef.current;
+    const view = controllerRef.current?.view;
     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} />
+      <div className={mx('dx-container grid', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
+        <EditorComponent ref={mergedRef} object={object} text={text} extensions={extensions} {...props} />
 
         {debug && (
           <div
@@ -72,7 +76,16 @@ export const EditorStory = forwardRef<EditorView | null, StoryProps>(
                 {view?.state.doc.toString()}
               </pre>
             )}
-            {(debug === 'tree' || debug === 'raw+tree') && <JsonFilter data={tree} classNames='p-1 text-xs' />}
+            {(debug === 'tree' || debug === 'raw+tree') && (
+              <Syntax.Root data={tree}>
+                <Syntax.Content>
+                  <Syntax.Filter />
+                  <Syntax.Viewport>
+                    <Syntax.Code classNames='p-1 text-xs' />
+                  </Syntax.Viewport>
+                </Syntax.Content>
+              </Syntax.Root>
+            )}
           </div>
         )}
       </div>
@@ -83,7 +96,7 @@ export const EditorStory = forwardRef<EditorView | null, StoryProps>(
 /**
  * Default story component.
  */
-export const EditorComponent = forwardRef<EditorView | null, StoryProps>(
+const EditorComponent = forwardRef<EditorController, EditorStoryProps>(
   (
     {
       id = defaultId,
@@ -92,10 +105,11 @@ export const EditorComponent = forwardRef<EditorView | null, StoryProps>(
       readOnly,
       placeholder = 'New document.',
       lineNumbers,
+      monospace,
       scrollTo,
       selection,
       extensions,
-      slots = editorSlots,
+      slots = documentSlots,
       onReady,
     },
     forwardedRef,
@@ -110,18 +124,20 @@ export const EditorComponent = forwardRef<EditorView | null, StoryProps>(
         selection,
         initialValue: text,
         extensions: [
-          createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
           createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
+          createThemeExtensions({ monospace, themeMode, syntaxHighlighting: true, slots }),
           createMarkdownExtensions(),
-          createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
-          editorGutter,
           extensions || [],
         ],
       }),
       [id, object, extensions, themeMode],
     );
 
-    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
+    // External controller.
+    useImperativeHandle(forwardedRef, () => {
+      log.info('view updated', { id });
+      return createEditorController(view);
+    }, [id, view]);
 
     useEffect(() => {
       if (view) {