@dxos/react-ui-editor 0.8.2 → 0.8.3-main.672df60

package/src/stories/Preview.stories.tsx

@@ -11,7 +11,7 @@ import { IconButton, Popover } from '@dxos/react-ui';
 import { hoverableHidden } from '@dxos/react-ui-theme';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { EditorStory } from './util';
+import { EditorStory } from './components';
 import { RefPopover, useRefPopover } from '../components';
 import {
   preview,
@@ -108,8 +108,8 @@ const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLook
 
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Preview',
+  component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: EditorStory,
   parameters: { layout: 'fullscreen' },
 };
 

package/src/stories/TextEditor.stories.tsx

@@ -23,7 +23,7 @@ import {
   names,
   renderLinkButton,
   text,
-} from './util';
+} from './components';
 import { editorMonospace } from '../defaults';
 import {
   InputModeExtensions,
@@ -41,9 +41,9 @@ import { str } from '../testing';
 
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/TextEditor',
-  render: EditorStory,
+  component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: 'fullscreen', controls: { disable: true } },
 };
 
 export default meta;

package/src/stories/components/EditorStory.tsx

@@ -0,0 +1,135 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { type ReactNode, forwardRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
+
+import { Expando } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { PublicKey } from '@dxos/keys';
+import { live } from '@dxos/live-object';
+import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { useForwardedRef, 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 { editorSlots, editorGutter } from '../../defaults';
+import {
+  type DebugNode,
+  type ThemeExtensionsOptions,
+  createDataExtensions,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  debugTree,
+} from '../../extensions';
+import { useTextEditor, type UseTextEditorProps } 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'> &
+  Pick<ThemeExtensionsOptions, 'slots'> & {
+    id?: string;
+    debug?: DebugMode;
+    debugCustom?: (view: EditorView) => ReactNode;
+    text?: string;
+    object?: Expando;
+    readOnly?: boolean;
+    placeholder?: string;
+    lineNumbers?: boolean;
+    onReady?: (view: EditorView) => void;
+  };
+
+export const EditorStory = forwardRef<EditorView | undefined, StoryProps>(
+  ({ debug, debugCustom, text, extensions: _extensions, ...props }, forwardedRef) => {
+    const attentionAttrs = useAttentionAttributes('testing');
+    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],
+    );
+
+    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} />
+
+        {debug && (
+          <div
+            className='grid h-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
+            {...attentionAttrs}
+          >
+            {view && debugCustom?.(view)}
+            {(debug === 'raw' || debug === 'raw+tree') && (
+              <pre className='p-1 text-xs text-green-800 dark:text-green-200 overflow-auto'>
+                {view?.state.doc.toString()}
+              </pre>
+            )}
+            {(debug === 'tree' || debug === 'raw+tree') && <JsonFilter data={tree} classNames='p-1 text-xs' />}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * Default story component.
+ */
+export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
+  (
+    {
+      id = defaultId,
+      text,
+      object,
+      readOnly,
+      placeholder = 'New document.',
+      lineNumbers,
+      scrollTo,
+      selection,
+      extensions,
+      slots = editorSlots,
+      onReady,
+    },
+    forwardedRef,
+  ) => {
+    invariant(object);
+    const { themeMode } = useThemeContext();
+    const attentionAttrs = useAttentionAttributes(id);
+    const { parentRef, focusAttributes, view } = useTextEditor(
+      () => ({
+        id,
+        scrollTo,
+        selection,
+        initialValue: text,
+        extensions: [
+          createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
+          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
+          createMarkdownExtensions({ themeMode }),
+          createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
+          editorGutter,
+          extensions || [],
+        ],
+      }),
+      [id, object, extensions, themeMode],
+    );
+
+    useImperativeHandle(forwardedRef, () => view, [view]);
+
+    useEffect(() => {
+      if (view) {
+        onReady?.(view);
+      }
+    }, [view]);
+
+    return <div ref={parentRef} className='flex overflow-hidden' {...attentionAttrs} {...focusAttributes} />;
+  },
+);

package/src/stories/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './EditorStory';
+export * from './util';

package/src/stories/{util.tsx → components/util.tsx}

@@ -4,38 +4,23 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { type Extension } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-import React, { type ReactNode, useEffect, useState, type FC } from 'react';
+import React, { type FC } from 'react';
 
-import { Expando } from '@dxos/echo-schema';
-import { PublicKey } from '@dxos/keys';
-import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { useThemeContext, Icon } from '@dxos/react-ui';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
+import { Icon } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { editorSlots, editorGutter } from '../defaults';
 import {
-  type DebugNode,
   type EditorSelectionState,
-  createDataExtensions,
-  createBasicExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
   decorateMarkdown,
-  debugTree,
   folding,
   formattingKeymap,
   image,
   linkTooltip,
   table,
-  type ThemeExtensionsOptions,
-} from '../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../hooks';
-import { str } from '../testing';
-import { createRenderer } from '../util';
+} from '../../extensions';
+import { str } from '../../testing';
+import { createRenderer } from '../../util';
 
 export const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
@@ -244,83 +229,3 @@ export const headings = str(
 );
 
 export const global = new Map<string, EditorSelectionState>();
-
-// Type definitions
-export type DebugMode = 'raw' | 'tree' | 'raw+tree';
-
-export type StoryProps = {
-  id?: string;
-  debug?: DebugMode;
-  debugCustom?: (view: EditorView) => ReactNode;
-  text?: string;
-  readOnly?: boolean;
-  placeholder?: string;
-  lineNumbers?: boolean;
-  onReady?: (view: EditorView) => void;
-} & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'> &
-  Pick<ThemeExtensionsOptions, 'slots'>;
-
-// Default story component
-export const EditorStory = ({
-  id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
-  debug,
-  debugCustom,
-  text,
-  readOnly,
-  placeholder = 'New document.',
-  lineNumbers,
-  scrollTo,
-  selection,
-  extensions,
-  slots = editorSlots,
-  onReady,
-}: StoryProps) => {
-  const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
-  const { themeMode } = useThemeContext();
-  const [tree, setTree] = useState<DebugNode>();
-  const { parentRef, focusAttributes, view } = useTextEditor(
-    () => ({
-      id,
-      initialValue: text,
-      extensions: [
-        createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-        createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({
-          themeMode,
-          syntaxHighlighting: true,
-          slots,
-        }),
-        editorGutter,
-        extensions || [],
-        debug ? debugTree(setTree) : [],
-      ],
-      scrollTo,
-      selection,
-    }),
-    [object, extensions, themeMode],
-  );
-
-  useEffect(() => {
-    if (view) {
-      onReady?.(view);
-    }
-  }, [view]);
-
-  return (
-    <div className={mx('w-full h-full grid overflow-hidden', debug && 'grid-cols-[1fr_600px]')}>
-      <div role='none' className='flex overflow-hidden' ref={parentRef} {...focusAttributes} />
-      {debug && (
-        <div className='grid h-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'>
-          {view && debugCustom?.(view)}
-          {(debug === 'raw' || debug === 'raw+tree') && (
-            <pre className='p-1 text-xs text-green-800 dark:text-green-200 overflow-auto'>
-              {view?.state.doc.toString()}
-            </pre>
-          )}
-          {(debug === 'tree' || debug === 'raw+tree') && <JsonFilter data={tree} classNames='p-1 text-xs' />}
-        </div>
-      )}
-    </div>
-  );
-};

package/dist/types/src/stories/util.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/stories/util.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAY5E,OAAO,EAEL,KAAK,oBAAoB,EAYzB,KAAK,sBAAsB,EAC5B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAIlE,eAAO,MAAM,GAAG,cAAiE,CAAC;AAElF,eAAO,MAAM,GAAG,yDAAyD,CAAC;AAE1E,eAAO,MAAM,IAAI,QAOhB,CAAC;AAGF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CA+FnB,CAAC;AAGF,eAAO,MAAM,IAAI,QAwBhB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,UAAU,EAM7B,CAAC;AAEF,eAAO,MAAM,KAAK,UAA4E,CAAC;AAe/F,eAAO,MAAM,iBAAiB;SAVD,MAAM;EAUyB,CAAC;AAU7D,eAAO,MAAM,gBAAgB;SARD,MAAM;EAQwB,CAAC;AAG3D,eAAO,MAAM,iBAAiB,EAAE,SAAS,EAIxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAAS,EAOpC,CAAC;AAGF,eAAO,MAAM,QAAQ,QAEN,CAAC;AAEhB,eAAO,MAAM,eAAe,QAGb,CAAC;AAEhB,eAAO,MAAM,QAAQ,QAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAA0C,CAAC;AAG9D,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,SAAS,CAAC;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,GACnE,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;AAGxC,eAAO,MAAM,WAAW,GAAI,wHAazB,UAAU,sBAiDZ,CAAC"}