@dxos/react-ui-editor 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/src/stories/Command.stories.tsx

@@ -4,19 +4,21 @@
 
 import '@dxos-theme';
 
-import React, { useState, type KeyboardEvent } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 { 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('');
 
@@ -64,7 +66,7 @@ const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) =>
   );
 };
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/Command',
   decorators: [withTheme, withLayout({ fullscreen: true })],
   render: () => (
@@ -90,8 +92,10 @@ const meta: Meta<typeof EditorStory> = {
     </RefDropdownMenu.Provider>
   ),
   parameters: { layout: 'fullscreen' },
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/CommandMenu.stories.tsx

@@ -5,16 +5,15 @@
 import '@dxos-theme';
 
 import { type EditorView } from '@codemirror/view';
-import { type StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 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 { 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 };
@@ -63,18 +64,18 @@ const groups: CommandMenuGroup[] = [
   },
 ];
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-editor/CommandMenu',
+  render: DefaultStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: (args) => <DefaultStory {...args} />,
   parameters: {
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 // TODO(burdon): Not working.
 export const Slash: Story = {
@@ -99,7 +100,7 @@ export const Slash: Story = {
 };
 
 export const Link: Story = {
-  render: (args) => {
+  render: (args: StoryProps) => {
     const { space } = useClientProvider();
     const getMenu = useCallback(
       async (trigger: string, query?: string): Promise<CommandMenuGroup[]> => {
@@ -139,10 +140,6 @@ export const Link: Story = {
 
     return <DefaultStory {...args} getMenu={getMenu} />;
   },
-  args: {
-    text: str('# Link', '', names.join(' '), ''),
-    trigger: ['/', '@'],
-  },
   decorators: [
     withClientProvider({
       createSpace: true,
@@ -156,4 +153,9 @@ export const Link: Story = {
       },
     }),
   ],
+  args: {
+    text: str('# Link', '', names.join(' '), ''),
+    trigger: ['/', '@'],
+    getMenu: () => [],
+  },
 };

package/src/stories/Comments.stories.tsx

@@ -5,33 +5,37 @@
 import '@dxos-theme';
 
 import { effect, useSignal } from '@preact/signals-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 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 { 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';
 
-const meta: Meta<typeof EditorStory> = {
+import { EditorStory, content, longText } from './components';
+
+const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: { layout: 'fullscreen' },
-};
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Comments
 //
 
-export const Comments = {
+export const Comments: Story = {
   render: () => {
     const _comments = useSignal<Comment[]>([]);
     return (
@@ -91,7 +95,7 @@ const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
 // Annotations
 //
 
-export const Annotations = {
+export const Annotations: Story = {
   render: () => (
     <EditorStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
   ),

package/src/stories/EditorToolbar.stories.tsx

@@ -4,26 +4,26 @@
 
 import '@dxos-theme';
 
-import { type StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx } from '@dxos/react-ui-theme';
-import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 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(),
@@ -75,12 +75,12 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: { translations, layout: 'fullscreen' },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 

package/src/stories/Experimental.stories.tsx

@@ -4,33 +4,37 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { 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';
 
-const meta: Meta<typeof EditorStory> = {
+import { EditorStory, content } from './components';
+
+const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: { layout: 'fullscreen' },
-};
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Typewriter
 //
 
 const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
 
-export const Typewriter = {
+export const Typewriter: Story = {
   render: () => (
     <EditorStory
       text={str('# Typewriter', '', content.paragraphs, content.footer)}
@@ -43,7 +47,7 @@ export const Typewriter = {
 // Blast
 //
 
-export const Blast = {
+export const Blast: Story = {
   render: () => (
     <EditorStory
       text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
@@ -70,7 +74,7 @@ export const Blast = {
 // DND
 //
 
-export const DND = {
+export const DND: Story = {
   render: () => (
     <EditorStory
       text={str('# DND', '')}

package/src/stories/Markdown.stories.tsx

@@ -5,32 +5,36 @@
 import '@dxos-theme';
 
 import { markdown } from '@codemirror/lang-markdown';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { 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';
 
-const meta: Meta<typeof EditorStory> = {
+import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
+
+const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: { layout: 'fullscreen' },
-};
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Default
 //
 
-export const Default = {
+export const Default: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} />,
 };
 
-export const Blockquote = {
+export const Blockquote: Story = {
   render: () => (
     <EditorStory
       text={str('> Blockquote', 'continuation', content.footer)}
@@ -40,23 +44,23 @@ export const Blockquote = {
   ),
 };
 
-export const Headings = {
+export const Headings: Story = {
   render: () => <EditorStory text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
 };
 
-export const Links = {
+export const Links: Story = {
   render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
 };
 
-export const Image = {
+export const Image: Story = {
   render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
 };
 
-export const Code = {
+export const Code: Story = {
   render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
-export const Lists = {
+export const Lists: Story = {
   render: () => (
     <EditorStory
       text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
@@ -69,7 +73,7 @@ export const Lists = {
 // Bullet List
 //
 
-export const BulletList = {
+export const BulletList: Story = {
   render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
@@ -77,7 +81,7 @@ export const BulletList = {
 // Ordered List
 //
 
-export const OrderedList = {
+export const OrderedList: Story = {
   render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
@@ -85,13 +89,13 @@ export const OrderedList = {
 // Task List
 //
 
-export const TaskList = {
+export const TaskList: Story = {
   render: () => (
     <EditorStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
   ),
 };
 
-export const TaskListEmpty = {
+export const TaskListEmpty: Story = {
   render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
 };
 
@@ -99,7 +103,7 @@ export const TaskListEmpty = {
 // Table
 //
 
-export const Table = {
+export const Table: Story = {
   render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
@@ -107,7 +111,7 @@ export const Table = {
 // Commented out
 //
 
-export const CommentedOut = {
+export const CommentedOut: Story = {
   render: () => (
     <EditorStory
       text={str('# Commented out', '', content.comment, content.footer)}

package/src/stories/Outliner.stories.tsx

@@ -5,19 +5,21 @@
 import '@dxos-theme';
 
 import { type EditorView } from '@codemirror/view';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 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 { 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;
+  text?: string;
 };
 
 const DefaultStory = ({ text }: StoryProps) => {
@@ -58,20 +60,22 @@ const DefaultStory = ({ text }: StoryProps) => {
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-editor/Outliner',
   render: DefaultStory,
   decorators: [withAttention, withTheme, withLayout({ fullscreen: true })],
   parameters: { layout: 'fullscreen' },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Empty = {
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
   args: {},
 };
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     text: str(
       //
@@ -86,7 +90,7 @@ export const Basic = {
   },
 };
 
-export const Nested = {
+export const Nested: Story = {
   args: {
     text: str(
       //
@@ -101,7 +105,7 @@ export const Nested = {
   },
 };
 
-export const Continuation = {
+export const Continuation: Story = {
   args: {
     text: str(
       //

package/src/stories/Preview.stories.tsx

@@ -6,7 +6,8 @@ import '@dxos-theme';
 
 import { syntaxTree } from '@codemirror/language';
 import { type EditorView } from '@codemirror/view';
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
@@ -14,12 +15,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 { 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.
@@ -132,7 +134,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'
@@ -164,16 +166,18 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
   );
 };
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/Preview',
   component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: { layout: 'fullscreen' },
-};
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   render: () => {
     const [view, setView] = useState<EditorView>();
     const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
@@ -200,22 +204,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 />