@dxos/react-ui-editor 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

package/src/stories/Comments.stories.tsx

@@ -9,18 +9,18 @@ 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 { withTheme } from '@dxos/react-ui/testing';
+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 { annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
+import { type Comment } from '@dxos/ui-editor/types';
 
 import { createRenderer, str } from '../util';
-
 import { EditorStory, content, longText } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withRegistry, withTheme()],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -77,14 +77,14 @@ export const Comments: Story = {
 };
 
 const Key: FC<{ char: string }> = ({ char }) => (
-  <span className='flex justify-center items-center is-[24px] bs-[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 pli-2 plb-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) => (

package/src/stories/EditorToolbar.stories.tsx

@@ -2,96 +2,68 @@
 // Copyright 2024 DXOS.org
 //
 
-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 React, { useMemo } from 'react';
 
-import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+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,
+  documentSlots,
   formattingKeymap,
-  formattingListener,
 } from '@dxos/ui-editor';
-import { attentionSurface, mx } from '@dxos/ui-theme';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
-import { EditorToolbar, type EditorToolbarState, useEditorToolbar } from '../components';
-import { type UseTextEditorProps, useTextEditor } from '../hooks';
-import { translations } from '../translations';
+import { translations } from '#translations';
 
-type StoryProps = { placeholder?: string } & UseTextEditorProps;
+import { Editor } from '../components';
+import { type UseTextEditorProps } from '../hooks';
 
-const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
-  const { themeMode } = useThemeContext();
-  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],
-  );
+type DefaultStoryProps = { placeholder?: string; viewMode?: EditorViewMode } & UseTextEditorProps;
 
-  // TODO(wittjosiah): Provide way to change the input mode.
-  const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
-  const { parentRef, view } = useTextEditor(
-    () => ({
-      autoFocus,
-      initialValue,
-      selectionEnd: true,
-      extensions: [
-        editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
-        createMarkdownExtensions(),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        viewMode === 'source' ? [] : decorateMarkdown(),
-        formattingKeymap(),
-        formattingListener(updateToolbarState),
-      ],
-    }),
-    [editorInputMode, viewMode, themeMode, placeholder],
-  );
-
-  const getView = useCallback(() => {
-    invariant(view);
-    return view;
-  }, [view]);
+const DefaultStory = ({ autoFocus, initialValue, placeholder, viewMode = 'source' }: DefaultStoryProps) => {
+  const { themeMode } = useThemeContext();
 
-  const handleViewModeChange = useCallback(
-    (mode: EditorViewMode) => {
-      registry.update(toolbarState, (state) => ({ ...state, viewMode: mode }));
-    },
-    [registry, toolbarState],
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions({
+        placeholder,
+        lineWrapping: true,
+        readOnly: viewMode === 'readonly',
+        search: true,
+      }),
+      createThemeExtensions({
+        themeMode,
+        syntaxHighlighting: true,
+        slots: documentSlots,
+      }),
+      createMarkdownExtensions(),
+      viewMode === 'source' ? [] : decorateMarkdown(),
+      formattingKeymap(),
+    ],
+    [viewMode, themeMode, placeholder],
   );
 
-  // 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} onViewModeChange={handleViewModeChange} />}
-      <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
-        <div className={mx(editorWidth)} ref={parentRef} />
-      </div>
-    </div>
+    <Editor.Root extensions={extensions} viewMode={viewMode}>
+      <Editor.Content>
+        <Editor.Toolbar classNames='dx-document' />
+        <div className='dx-container dx-document bg-base-surface'>
+          <Editor.View autoFocus={autoFocus} initialValue={initialValue} selectionEnd />
+        </div>
+      </Editor.Content>
+    </Editor.Root>
   );
 };
 
 const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withRegistry, withTheme()],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen', classNames: 'bg-sidebar-surface' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/stories/Experimental.stories.tsx

@@ -7,16 +7,16 @@ import defaultsDeep from 'lodash.defaultsdeep';
 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, join, typewriter } from '@dxos/ui-editor';
+import { random } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { blast, defaultOptions, dropFile, join, snippets } 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',
   },
@@ -27,16 +27,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 //
-// Typewriter
+// Snippets
 //
 
-const typewriterItems = localStorage.getItem('dxos.org/testing/typewriter')?.split(',');
+const snippetItems = localStorage.getItem('org.dxos.testing.snippets')?.split(',');
 
-export const Typewriter: Story = {
+export const Snippets: Story = {
   render: () => (
     <EditorStory
-      text={join('# Typewriter', '', content.paragraphs, content.footer)}
-      extensions={[typewriter({ items: typewriterItems })]}
+      text={join('# Snippets', '', content.paragraphs, content.footer)}
+      extensions={[snippets({ items: snippetItems })]}
     />
   ),
 };
@@ -50,15 +50,15 @@ export const Blast: Story = {
     <EditorStory
       text={join('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
-        typewriter({ items: typewriterItems }),
+        snippets({ items: snippetItems }),
         blast(
           defaultsDeep(
             {
               effect: 2,
               particleGravity: 0.2,
               particleShrinkRate: 0.995,
-              color: () => [faker.number.int({ min: 100, max: 200 }), 0, 0],
-              // color: () => [faker.number.int(256), faker.number.int(256), faker.number.int(256)],
+              color: () => [random.number.int({ min: 100, max: 200 }), 0, 0],
+              // color: () => [random.number.int(256), random.number.int(256), random.number.int(256)],
             },
             defaultOptions,
           ),

package/src/stories/Markdown.stories.tsx

@@ -6,7 +6,7 @@ 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 { 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';
@@ -14,7 +14,7 @@ import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, t
 const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/Outliner.stories.tsx

@@ -5,19 +5,18 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { deleteItem, hashtag, join, listItemToString, outliner, treeFacet } from '@dxos/ui-editor';
 
 import { type EditorController, type EditorMenuGroup, EditorMenuProvider } from '../components';
-
 import { EditorStory } from './components';
 
-type StoryProps = {
+type DefaultStoryProps = {
   text?: string;
 };
 
-const DefaultStory = ({ text }: StoryProps) => {
+const DefaultStory = ({ text }: DefaultStoryProps) => {
   const [controller, setController] = useState<EditorController | null>(null);
 
   const extensions = useMemo(() => [outliner(), hashtag()], []);
@@ -68,7 +67,7 @@ const DefaultStory = ({ text }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/Outliner',
   render: DefaultStory,
-  decorators: [withTheme(), withAttention()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/Popover.stories.tsx

@@ -6,9 +6,9 @@ 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 { random } from '@dxos/random';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/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';
@@ -25,10 +25,9 @@ import {
   linkSlashCommands,
   useEditorMenu,
 } from '../components';
-
 import { EditorStory } from './components';
 
-const generator: ValueGenerator = faker as any;
+const generator: ValueGenerator = random as any;
 
 const customCompletions: EditorMenuGroup = createMenuGroup({
   id: 'test',
@@ -38,15 +37,15 @@ const customCompletions: EditorMenuGroup = createMenuGroup({
 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-sm mx-1 pli-1 pbs-[2px] pbe-[3px]')).text(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;
+  return Domino.of('div').append(pressEl, ...triggerEls, forCommandsEl).root;
 };
 
-type StoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
+type DefaultStoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
 
-const DefaultStory = ({ text, ...props }: StoryProps) => {
+const DefaultStory = ({ text, ...props }: DefaultStoryProps) => {
   const [controller, setController] = useState<EditorController | null>(null);
   const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
 
@@ -57,7 +56,7 @@ const DefaultStory = ({ text, ...props }: StoryProps) => {
   );
 };
 
-const LinkStory = (args: StoryProps) => {
+const LinkStory = (args: DefaultStoryProps) => {
   const { space } = useClientStory();
 
   const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
@@ -103,7 +102,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',
   },

package/src/stories/Preview.stories.tsx

@@ -9,10 +9,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
-import { faker } from '@dxos/random';
-import { Popover } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Card } from '@dxos/react-ui-mosaic';
+import { random } from '@dxos/random';
+import { Card, Popover, Toolbar } from '@dxos/react-ui';
+import { Menu, createMenuAction } from '@dxos/react-ui-menu';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   type PreviewBlock,
   type PreviewLinkRef,
@@ -22,16 +22,15 @@ import {
   preview,
 } from '@dxos/ui-editor';
 import { hoverableControls } from '@dxos/ui-theme';
-import { isTruthy, trim } from '@dxos/util';
+import { trim } from '@dxos/util';
 
 import { type EditorController, EditorPreviewProvider, useEditorPreview } from '../components';
-
 import { EditorStory } from './components';
 
 const handlePreviewLookup = async ({ dxn, label }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
-  faker.seed(dxn.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
-  const text = Array.from({ length: 2 }, () => faker.lorem.paragraphs()).join('\n\n');
+  random.seed(dxn.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
+  const text = Array.from({ length: 2 }, () => random.lorem.paragraphs()).join('\n\n');
   return {
     label,
     text,
@@ -58,13 +57,13 @@ const PreviewCard = () => {
   return (
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
-        <Popover.Viewport classNames='popover-card-width'>
+        <Popover.Viewport classNames='dx-card-popover-width'>
           <Card.Root border={false}>
             <Card.Toolbar>
-              <Card.Icon toolbar icon='ph--file-text--regular' />
+              <Card.Icon icon='ph--file-text--regular' />
               <Card.Title>{target.label}</Card.Title>
               <Popover.Close asChild>
-                <Card.Close />
+                <Card.CloseIconButton />
               </Popover.Close>
             </Card.Toolbar>
             <Card.Row>
@@ -144,36 +143,45 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
     }
   }, [handleAction, link, target]);
 
+  const menuItems = useMemo(
+    () => [
+      createMenuAction('delete', handleDelete, {
+        label: link.suggest ? 'Discard' : 'Delete',
+        icon: 'ph--x--regular',
+      }),
+      ...(target
+        ? [
+            createMenuAction('apply', handleInsert, {
+              label: 'Apply',
+              icon: 'ph--check--regular',
+            }),
+          ]
+        : []),
+    ],
+    [handleDelete, handleInsert, link.suggest, target],
+  );
+
   return createPortal(
-    <Card.Root classNames={hoverableControls}>
-      {!view?.state.readOnly && (
-        <Card.Toolbar>
-          <Card.Icon toolbar icon='ph--bookmark--regular' />
-          <Card.Title>{link.label}</Card.Title>
-          <Card.Menu
-            items={[
-              {
-                id: 'delete',
-                label: link.suggest ? 'Discard' : 'Delete',
-                icon: 'ph--x--regular',
-                onClick: handleDelete,
-              },
-              target && {
-                id: 'apply',
-                label: 'Apply',
-                icon: 'ph--check--regular',
-                onClick: handleInsert,
-              },
-            ].filter(isTruthy)}
-          />
-        </Card.Toolbar>
-      )}
-      {target && (
-        <Card.Row>
-          <Card.Text className='text-description'>{target.text}</Card.Text>
-        </Card.Row>
-      )}
-    </Card.Root>,
+    <Menu.Root>
+      <Card.Root classNames={hoverableControls}>
+        {!view?.state.readOnly && (
+          <Card.Toolbar>
+            <Card.Icon icon='ph--bookmark--regular' />
+            <Card.Title>{link.label}</Card.Title>
+            {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
+            <Menu.Trigger asChild disabled={!menuItems?.length}>
+              <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Menu' />
+            </Menu.Trigger>
+            <Menu.Content items={menuItems} />
+          </Card.Toolbar>
+        )}
+        {target && (
+          <Card.Row>
+            <Card.Text className='text-description'>{target.text}</Card.Text>
+          </Card.Row>
+        )}
+      </Card.Root>
+    </Menu.Root>,
     el,
   );
 };
@@ -181,7 +189,7 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
 const meta = {
   title: 'ui/react-ui-editor/Preview',
   component: EditorStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/Tags.stories.tsx

@@ -7,7 +7,7 @@ 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   type XmlWidgetRegistry,
   type XmlWidgetState,
@@ -25,7 +25,7 @@ const registry = {
   /**
    * Custom tag: <test/>
    */
-  ['test' as const]: {
+  test: {
     block: true,
     Component: ({ start = '0' }) => {
       const [count, setCount] = useState<number>(safeParseInt(start, 0));
@@ -43,7 +43,7 @@ const registry = {
         return () => clearInterval(interval);
       }, []);
 
-      return <div className='p-2 border border-separator rounded'>Test {count}</div>;
+      return <div className='p-2 border border-separator rounded-sm'>Test {count}</div>;
     },
   },
 } satisfies XmlWidgetRegistry;
@@ -64,7 +64,7 @@ const DefaultStory = ({ text }: { text?: string }) => {
 
   return (
     <>
-      <div ref={parentRef} className='is-full p-4' />
+      <div ref={parentRef} className='w-full p-4' />
       {widgets.map(({ id, root, Component, props }) => (
         <div key={id}>{createPortal(<Component {...props} />, root)}</div>
       ))}
@@ -87,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,7 +8,7 @@ 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   InputModeExtensions,
   decorateMarkdown,
@@ -37,7 +37,7 @@ import {
 const meta = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     controls: { disable: true },

package/src/stories/Theme.stories.tsx

@@ -32,12 +32,12 @@ const DefaultStory = () => {
   );
 
   return (
-    <div className='is-full grid grid-cols-2 gap-2'>
+    <div className='w-full grid grid-cols-2 gap-2'>
       <Editor.Root>
-        <Editor.Content classNames='p-2' extensions={ext1} initialValue={createText(false)} />
+        <Editor.View classNames='p-2' extensions={ext1} initialValue={createText(false)} />
       </Editor.Root>
       <Editor.Root>
-        <Editor.Content classNames='p-2' extensions={ext2} initialValue={createText(true)} />
+        <Editor.View classNames='p-2' extensions={ext2} initialValue={createText(true)} />
       </Editor.Root>
     </div>
   );
@@ -46,7 +46,7 @@ const DefaultStory = () => {
 const meta: Meta<typeof DefaultStory> = {
   title: 'ui/react-ui-editor/Theme',
   component: DefaultStory,
-  decorators: [withTheme(), withLayout()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },