@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b

package/src/stories/EditorToolbar.stories.tsx

@@ -2,43 +2,55 @@
 // Copyright 2024 DXOS.org
 //
 
+import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { attentionSurface, mx } from '@dxos/react-ui-theme';
-
-import { EditorToolbar, useEditorToolbarState } from '../components';
-import { editorWidth } from '../defaults';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 import {
+  type EditorInputMode,
+  type EditorViewMode,
   InputModeExtensions,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  editorWidth,
   formattingKeymap,
-  useFormattingState,
-} from '../extensions';
+  formattingListener,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+
+import { EditorToolbar, type EditorToolbarState, useEditorToolbar } from '../components';
 import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
-import { type EditorInputMode, type EditorViewMode } from '../types';
 
 type StoryProps = { placeholder?: string } & UseTextEditorProps;
 
 const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   const { themeMode } = useThemeContext();
-  const toolbarState = useEditorToolbarState({ viewMode: 'source' });
-  const viewMode = toolbarState.viewMode;
-  const trackFormatting = useFormattingState(toolbarState);
+  const registry = useContext(RegistryContext);
+
+  const toolbarState = useEditorToolbar({ viewMode: 'source' });
+  const { viewMode } = useAtomValue(toolbarState);
+
+  const updateToolbarState = useCallback(
+    (formatting: EditorToolbarState) => {
+      registry.update(toolbarState, (state) => ({ ...state, ...formatting }));
+    },
+    [registry, toolbarState],
+  );
+
   // TODO(wittjosiah): Provide way to change the input mode.
   const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
   const { parentRef, view } = useTextEditor(
     () => ({
       autoFocus,
       initialValue,
-      moveToEndOfLine: true,
+      selectionEnd: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
         createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
@@ -46,7 +58,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
-        trackFormatting,
+        formattingListener(updateToolbarState),
       ],
     }),
     [editorInputMode, viewMode, themeMode, placeholder],
@@ -57,16 +69,19 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
     return view;
   }, [view]);
 
-  const handleViewModeChange = useCallback((mode: EditorViewMode) => {
-    toolbarState.viewMode = mode;
-  }, []);
+  const handleViewModeChange = useCallback(
+    (mode: EditorViewMode) => {
+      registry.update(toolbarState, (state) => ({ ...state, viewMode: mode }));
+    },
+    [registry, toolbarState],
+  );
 
   // TODO(marijn): This doesn't update the state on view changes.
   //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} viewMode={handleViewModeChange} />}
-      <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
+      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} onViewModeChange={handleViewModeChange} />}
+      <div role='none' className='grow overflow-hidden'>
         <div className={mx(editorWidth)} ref={parentRef} />
       </div>
     </div>
@@ -76,7 +91,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -91,6 +106,6 @@ export const Default: Story = {
   args: {
     autoFocus: true,
     placeholder: 'Text...',
-    initialValue: '# Demo\n\nThis is a document.\n\n',
+    initialValue: '# Demo\n\nThis is a **document**.\n\n',
   },
 };

package/src/stories/Experimental.stories.tsx

@@ -8,17 +8,15 @@ import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
-import { str } from '../testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { blast, defaultOptions, dropFile, join, typewriter } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -37,7 +35,7 @@ const typewriterItems = localStorage.getItem('dxos.org/testing/typewriter')?.spl
 export const Typewriter: Story = {
   render: () => (
     <EditorStory
-      text={str('# Typewriter', '', content.paragraphs, content.footer)}
+      text={join('# Typewriter', '', content.paragraphs, content.footer)}
       extensions={[typewriter({ items: typewriterItems })]}
     />
   ),
@@ -50,7 +48,7 @@ export const Typewriter: Story = {
 export const Blast: Story = {
   render: () => (
     <EditorStory
-      text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
+      text={join('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
         typewriter({ items: typewriterItems }),
         blast(
@@ -77,7 +75,7 @@ export const Blast: Story = {
 export const DND: Story = {
   render: () => (
     <EditorStory
-      text={str('# DND', '')}
+      text={join('# DND', '')}
       extensions={[
         dropFile({
           onDrop: (view, event) => {

package/src/stories/Markdown.stories.tsx

@@ -6,17 +6,15 @@ import { markdown } from '@codemirror/lang-markdown';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
-import { str } from '../testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { decorateMarkdown, image, join, linkTooltip, table } from '@dxos/ui-editor';
 
 import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -37,7 +35,7 @@ export const Default: Story = {
 export const Blockquote: Story = {
   render: () => (
     <EditorStory
-      text={str('> Blockquote', 'continuation', content.footer)}
+      text={join('> Blockquote', 'continuation', content.footer)}
       extensions={decorateMarkdown()}
       debug='raw'
     />
@@ -49,21 +47,23 @@ export const Headings: Story = {
 };
 
 export const Links: Story = {
-  render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+  render: () => (
+    <EditorStory text={join(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />
+  ),
 };
 
 export const Image: Story = {
-  render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
+  render: () => <EditorStory text={join(content.image, content.footer)} extensions={[image()]} />,
 };
 
 export const Code: Story = {
-  render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const Lists: Story = {
   render: () => (
     <EditorStory
-      text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
+      text={join(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
       extensions={[decorateMarkdown()]}
     />
   ),
@@ -74,7 +74,7 @@ export const Lists: Story = {
 //
 
 export const BulletList: Story = {
-  render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
@@ -82,7 +82,7 @@ export const BulletList: Story = {
 //
 
 export const OrderedList: Story = {
-  render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
@@ -91,12 +91,12 @@ export const OrderedList: Story = {
 
 export const TaskList: Story = {
   render: () => (
-    <EditorStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
+    <EditorStory text={join(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
   ),
 };
 
 export const TaskListEmpty: Story = {
-  render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
+  render: () => <EditorStory text={join('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
 };
 
 //
@@ -104,7 +104,7 @@ export const TaskListEmpty: Story = {
 //
 
 export const Table: Story = {
-  render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
+  render: () => <EditorStory text={join(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
 //
@@ -114,7 +114,7 @@ export const Table: Story = {
 export const CommentedOut: Story = {
   render: () => (
     <EditorStory
-      text={str('# Commented out', '', content.comment, content.footer)}
+      text={join('# Commented out', '', content.comment, content.footer)}
       extensions={[
         decorateMarkdown(),
         markdown(),

package/src/stories/Outliner.stories.tsx

@@ -2,23 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
+import { deleteItem, hashtag, join, listItemToString, outliner, treeFacet } from '@dxos/ui-editor';
 
-import {
-  type PopoverMenuGroup,
-  PopoverMenuProvider,
-  deleteItem,
-  hashtag,
-  listItemToString,
-  outliner,
-  treeFacet,
-} from '../extensions';
-import { str } from '../testing';
+import { type EditorController, type EditorMenuGroup, EditorMenuProvider } from '../components';
 
 import { EditorStory } from './components';
 
@@ -27,9 +18,10 @@ type StoryProps = {
 };
 
 const DefaultStory = ({ text }: StoryProps) => {
-  const viewRef = useRef<EditorView>(null);
+  const [controller, setController] = useState<EditorController | null>(null);
 
-  const commandGroups: PopoverMenuGroup[] = useMemo(
+  const extensions = useMemo(() => [outliner(), hashtag()], []);
+  const commandGroups: EditorMenuGroup[] = useMemo(
     () => [
       {
         id: 'outliner-actions',
@@ -37,7 +29,7 @@ const DefaultStory = ({ text }: StoryProps) => {
           {
             id: 'delete-row',
             label: 'Delete',
-            onSelect: (view: EditorView) => {
+            onSelect: ({ view }) => {
               deleteItem(view);
             },
           },
@@ -48,19 +40,19 @@ const DefaultStory = ({ text }: StoryProps) => {
   );
 
   return (
-    <PopoverMenuProvider
-      view={viewRef.current}
+    <EditorMenuProvider
+      view={controller?.view}
       groups={commandGroups}
       onSelect={({ view, item }) => {
         if (item.onSelect) {
-          return item.onSelect(view, view.state.selection.main.head);
+          return item.onSelect({ view, head: view.state.selection.main.head });
         }
       }}
     >
       <EditorStory
-        ref={viewRef}
+        ref={setController}
         text={text}
-        extensions={[outliner(), hashtag()]}
+        extensions={extensions}
         debug='raw+tree'
         debugCustom={(view) => {
           const tree = view.state.facet(treeFacet);
@@ -69,14 +61,14 @@ const DefaultStory = ({ text }: StoryProps) => {
           return <pre className='p-1 overflow-auto text-xs text-green-800 dark:text-green-200'>{lines.join('\n')}</pre>;
         }}
       />
-    </PopoverMenuProvider>
+    </EditorMenuProvider>
   );
 };
 
 const meta = {
   title: 'ui/react-ui-editor/Outliner',
   render: DefaultStory,
-  decorators: [withTheme, withAttention],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },
@@ -92,7 +84,7 @@ export const Empty: Story = {
 
 export const Basic: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '- [ ] B',
@@ -107,7 +99,7 @@ export const Basic: Story = {
 
 export const Nested: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '  - [ ] B',
@@ -122,7 +114,7 @@ export const Nested: Story = {
 
 export const Continuation: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '- [ ] B',

package/src/stories/Popover.stories.tsx

@@ -2,71 +2,66 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
 import { Obj, Query } from '@dxos/echo';
 import { faker } from '@dxos/random';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { Domino } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { TestSchema, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { Domino, mx } from '@dxos/ui';
+import { insertAtCursor, insertAtLineStart, join } from '@dxos/ui-editor';
 
 import {
-  type PopoverMenuGroup,
-  type PopoverMenuItem,
-  PopoverMenuProvider,
-  type UsePopoverMenuProps,
+  type EditorController,
+  type EditorMenuGroup,
+  type EditorMenuItem,
+  EditorMenuProvider,
+  type UseEditorMenuProps,
   createMenuGroup,
   filterMenuGroups,
   formattingCommands,
-  insertAtCursor,
-  insertAtLineStart,
   linkSlashCommands,
-  usePopoverMenu,
-} from '../extensions';
-import { str } from '../testing';
+  useEditorMenu,
+} from '../components';
 
 import { EditorStory } from './components';
 
 const generator: ValueGenerator = faker as any;
 
-const customCompletions: PopoverMenuGroup = createMenuGroup({
+const customCompletions: EditorMenuGroup = createMenuGroup({
   id: 'test',
   items: ['Hello world!', 'Hello DXOS', 'Hello Composer', 'https://dxos.org'],
 });
 
-const placeholder = (trigger: string[]) =>
-  Domino.of('div')
-    .children(
-      Domino.of('span').text('Press'),
-      ...trigger.map((trigger) =>
-        Domino.of('span')
-          .text(trigger)
-          .classNames('border border-separator rounded-sm mx-1 pis-1 pie-1 pbs-[2px] pbe-[3px]'),
-      ),
-      Domino.of('span').text('for commands'),
-    )
-    .build();
-
-type StoryProps = Omit<UsePopoverMenuProps, 'viewRef'> & { text: string };
+const placeholder = (trigger: string[]) => {
+  const pressEl = Domino.of('span').text('Press');
+  const triggerEls = trigger.map((trigger) =>
+    Domino.of('span').classNames(mx('border border-separator rounded-xs mx-1 px-1 py-[2px] pb-[3px]')).text(trigger),
+  );
+  const forCommandsEl = Domino.of('span').text('for commands');
+  return Domino.of('div').children(pressEl, ...triggerEls, forCommandsEl).root;
+};
+
+type StoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
 
 const DefaultStory = ({ text, ...props }: StoryProps) => {
-  const [view, setView] = useState<EditorView | null>(null);
-  const { groupsRef, extension, ...menuProps } = usePopoverMenu(props);
+  const [controller, setController] = useState<EditorController | null>(null);
+  const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
 
   return (
-    <PopoverMenuProvider view={view} groups={groupsRef.current} {...menuProps}>
-      <EditorStory ref={setView} text={text} extensions={extension} />
-    </PopoverMenuProvider>
+    <EditorMenuProvider view={controller?.view} groups={groupsRef.current} {...menuProps}>
+      <EditorStory ref={setController} text={text} extensions={extension} />
+    </EditorMenuProvider>
   );
 };
 
 const LinkStory = (args: StoryProps) => {
-  const { space } = useClientProvider();
-  const getMenu = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
-    async ({ text, trigger }): Promise<PopoverMenuGroup[]> => {
+  const { space } = useClientStory();
+
+  const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
+    async ({ text, trigger }): Promise<EditorMenuGroup[]> => {
       if (trigger === '/') {
         return filterMenuGroups([linkSlashCommands], (item) =>
           text ? (item.label as string).toLowerCase().includes(text.toLowerCase()) : true,
@@ -78,15 +73,15 @@ const LinkStory = (args: StoryProps) => {
       }
 
       const name = text?.startsWith('@') ? text.slice(1).toLowerCase() : (text?.toLowerCase() ?? '');
-      const result = await space?.db.query(Query.type(Testing.Contact)).run();
-      const items = result.objects
+      const result = await space?.db.query(Query.type(TestSchema.Person)).run();
+      const items = result
         .filter((object) => object.name.toLowerCase().includes(name))
         .map(
-          (object): PopoverMenuItem => ({
+          (object): EditorMenuItem => ({
             id: object.id,
             label: object.name,
             icon: 'ph--user--regular',
-            onSelect: (view, head) => {
+            onSelect: ({ view, head }) => {
               const link = `[${object.name}](${Obj.getDXN(object)})`;
               if (text?.startsWith('@')) {
                 insertAtLineStart(view, head, `!${link}\n`);
@@ -108,7 +103,7 @@ const LinkStory = (args: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/Popover',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -120,7 +115,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    text: str('# Autocomplete', '', ''),
+    text: join('# Autocomplete', '', ''),
     triggerKey: 'Ctrl-Space',
     filter: true,
     getMenu: () => [customCompletions],
@@ -129,7 +124,7 @@ export const Default: Story = {
 
 export const Formatting: Story = {
   args: {
-    text: str('# Slash command', '', ''),
+    text: join('# Slash command', '', ''),
     trigger: '/',
     placeholder: {
       content: () => placeholder(['/']),
@@ -144,17 +139,17 @@ export const Link: Story = {
     withClientProvider({
       createSpace: true,
       onInitialized: async (client) => {
-        client.addTypes([Testing.Contact]);
+        await client.addTypes([TestSchema.Person]);
       },
       onCreateSpace: async ({ space }) => {
         const createObjects = createObjectFactory(space.db, generator);
-        await createObjects([{ type: Testing.Contact, count: 10 }]);
+        await createObjects([{ type: TestSchema.Person, count: 10 }]);
         await space.db.flush({ indexes: true });
       },
     }),
   ],
   args: {
-    text: str('# Links', '', ''),
+    text: join('# Links', '', ''),
     trigger: ['/', '@'],
     placeholder: {
       content: () => placeholder(['/', '@']),