@dxos/react-ui-editor 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/src/stories/Comments.stories.tsx

@@ -2,81 +2,89 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { effect, useSignal } from '@preact/signals-react';
-import React, { type FC } from 'react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type FC, useContext, useMemo } 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/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+import { type Comment, annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
+
+import { createRenderer, str } from '../util';
 
 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> = {
+const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Comments
 //
 
-export const Comments = {
-  render: () => {
-    const _comments = useSignal<Comment[]>([]);
-    return (
-      <EditorStory
-        text={str('# Comments', '', content.paragraphs, content.footer)}
-        extensions={[
-          createExternalCommentSync(
-            'test',
-            (sink) => effect(() => sink()),
-            () => _comments.value,
-          ),
-          comments({
-            id: 'test',
-            renderTooltip: createRenderer(CommentTooltip),
-            onCreate: ({ cursor }) => {
-              const id = PublicKey.random().toHex();
-              _comments.value = [..._comments.value, { id, cursor }];
-              return id;
-            },
-            onSelect: (state) => {
-              const debug = false;
-              if (debug) {
-                log.info('update', {
-                  comments: state.comments.length,
-                  active: state.selection.current?.slice(0, 8),
-                  closest: state.selection.closest?.slice(0, 8),
-                });
-              }
-            },
-          }),
-        ]}
-      />
-    );
-  },
+const CommentsStory = () => {
+  const registry = useContext(RegistryContext);
+  const commentsAtom = useMemo(() => Atom.make<Comment[]>([]), []);
+
+  return (
+    <EditorStory
+      text={str('# Comments', '', content.paragraphs, content.footer)}
+      extensions={[
+        createExternalCommentSync(
+          'test',
+          (sink) => registry.subscribe(commentsAtom, () => sink()),
+          () => registry.get(commentsAtom),
+        ),
+        comments({
+          id: 'test',
+          renderTooltip: createRenderer(CommentTooltip),
+          onCreate: ({ cursor }) => {
+            const id = PublicKey.random().toHex();
+            const current = registry.get(commentsAtom);
+            registry.set(commentsAtom, [...current, { id, cursor }]);
+            return id;
+          },
+          onSelect: (state) => {
+            const debug = false;
+            if (debug) {
+              log.info('update', {
+                comments: state.comments.length,
+                active: state.selection.current?.slice(0, 8),
+                closest: state.selection.closest?.slice(0, 8),
+              });
+            }
+          },
+        }),
+      ]}
+    />
+  );
+};
+
+export const Comments: Story = {
+  render: () => <CommentsStory />,
 };
 
 const Key: FC<{ char: string }> = ({ char }) => (
-  <span className='flex justify-center items-center w-[24px] h-[24px] rounded text-xs bg-neutral-200 text-black'>
+  <span className='flex justify-center items-center w-[24px] h-[24px] rounded-sm text-xs bg-neutral-200 text-black'>
     {char}
   </span>
 );
 
 const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
-    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
+    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded-sm'>
       <div>Create comment</div>
       <div className='flex gap-1'>
         {keySymbols(parseShortcut(shortcut)).map((char) => (
@@ -91,7 +99,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

@@ -2,53 +2,71 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
+import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useContext, 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 { EditorToolbar, useEditorToolbarState } from '../components';
-import { editorWidth } from '../defaults';
+import { Panel, useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 import {
+  type EditorInputMode,
+  type EditorViewMode,
   InputModeExtensions,
-  createMarkdownExtensions,
   createBasicExtensions,
+  createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  documentSlots,
   formattingKeymap,
-  useFormattingState,
-} from '../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../hooks';
+  formattingListener,
+} from '@dxos/ui-editor';
+
+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;
+type DefaultStoryProps = { placeholder?: string } & UseTextEditorProps;
 
-const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
+const DefaultStory = ({ autoFocus, initialValue, placeholder }: DefaultStoryProps) => {
   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' }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+        createBasicExtensions({
+          placeholder,
+          lineWrapping: true,
+          readOnly: viewMode === 'readonly',
+          search: true,
+        }),
+        createThemeExtensions({
+          themeMode,
+          syntaxHighlighting: true,
+          slots: documentSlots,
+        }),
+        createMarkdownExtensions(),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
-        trackFormatting,
+        formattingListener(updateToolbarState),
       ],
     }),
     [editorInputMode, viewMode, themeMode, placeholder],
@@ -59,28 +77,41 @@ 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)}>
-        <div className={mx(editorWidth)} ref={parentRef} />
-      </div>
-    </div>
+    <Panel.Root>
+      {toolbarState && (
+        <Panel.Toolbar>
+          <EditorToolbar
+            classNames='dx-document'
+            state={toolbarState}
+            getView={getView}
+            onViewModeChange={handleViewModeChange}
+          />
+        </Panel.Toolbar>
+      )}
+      <Panel.Content>
+        <div role='none' className='dx-container dx-document bg-base-surface' ref={parentRef} />
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations, layout: 'fullscreen' },
-};
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen', classNames: 'bg-sidebar-surface' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
@@ -90,6 +121,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

@@ -2,38 +2,40 @@
 // Copyright 2023 DXOS.org
 //
 
-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/react-ui/testing';
+import { blast, defaultOptions, dropFile, join, typewriter } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
-import { typewriter, blast, defaultOptions, dropFile } from '../extensions';
-import { str } from '../testing';
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  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(',');
+const typewriterItems = localStorage.getItem('org.dxos.testing.typewriter')?.split(',');
 
-export const Typewriter = {
+export const Typewriter: Story = {
   render: () => (
     <EditorStory
-      text={str('# Typewriter', '', content.paragraphs, content.footer)}
+      text={join('# Typewriter', '', content.paragraphs, content.footer)}
       extensions={[typewriter({ items: typewriterItems })]}
     />
   ),
@@ -43,10 +45,10 @@ export const Typewriter = {
 // Blast
 //
 
-export const Blast = {
+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(
@@ -70,10 +72,10 @@ export const Blast = {
 // DND
 //
 
-export const DND = {
+export const DND: Story = {
   render: () => (
     <EditorStory
-      text={str('# DND', '')}
+      text={join('# DND', '')}
       extensions={[
         dropFile({
           onDrop: (view, event) => {

package/src/stories/Markdown.stories.tsx

@@ -2,64 +2,68 @@
 // Copyright 2023 DXOS.org
 //
 
-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/react-ui/testing';
+import { decorateMarkdown, image, join, linkTooltip, table } from '@dxos/ui-editor';
 
 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> = {
+const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  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)}
+      text={join('> Blockquote', 'continuation', content.footer)}
       extensions={decorateMarkdown()}
       debug='raw'
     />
   ),
 };
 
-export const Headings = {
+export const Headings: Story = {
   render: () => <EditorStory text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
 };
 
-export const Links = {
-  render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+export const Links: Story = {
+  render: () => (
+    <EditorStory text={join(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />
+  ),
 };
 
-export const Image = {
-  render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
+export const Image: Story = {
+  render: () => <EditorStory text={join(content.image, content.footer)} extensions={[image()]} />,
 };
 
-export const Code = {
-  render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
+export const Code: Story = {
+  render: () => <EditorStory text={join(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)}
+      text={join(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
       extensions={[decorateMarkdown()]}
     />
   ),
@@ -69,48 +73,48 @@ export const Lists = {
 // Bullet List
 //
 
-export const BulletList = {
-  render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+export const BulletList: Story = {
+  render: () => <EditorStory text={join(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
 // Ordered List
 //
 
-export const OrderedList = {
-  render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+export const OrderedList: Story = {
+  render: () => <EditorStory text={join(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
 // Task List
 //
 
-export const TaskList = {
+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 = {
-  render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
+export const TaskListEmpty: Story = {
+  render: () => <EditorStory text={join('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
 };
 
 //
 // Table
 //
 
-export const Table = {
-  render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
+export const Table: Story = {
+  render: () => <EditorStory text={join(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
 //
 // Commented out
 //
 
-export const CommentedOut = {
+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(),