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

package/src/stories/Experimental.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { blast, defaultOptions, dropFile, join, typewriter } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
@@ -16,7 +16,7 @@ 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',
   },
@@ -30,7 +30,7 @@ type Story = StoryObj<typeof meta>;
 // Typewriter
 //
 
-const typewriterItems = localStorage.getItem('dxos.org/testing/typewriter')?.split(',');
+const typewriterItems = localStorage.getItem('org.dxos.testing.typewriter')?.split(',');
 
 export const Typewriter: Story = {
   render: () => (

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,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 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';
 
@@ -13,11 +13,11 @@ import { type EditorController, type EditorMenuGroup, EditorMenuProvider } from
 
 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 +68,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

@@ -8,7 +8,7 @@ import React, { useCallback, useState } from 'react';
 import { Obj, Query } from '@dxos/echo';
 import { faker } 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';
@@ -38,15 +38,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;
 };
 
-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 +57,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 +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',
   },

package/src/stories/Preview.stories.tsx

@@ -10,9 +10,9 @@ 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 { Card, Popover, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Menu, createMenuAction } from '@dxos/react-ui-menu';
 import {
   type PreviewBlock,
   type PreviewLinkRef,
@@ -22,15 +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 ({ label, ref }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
+const handlePreviewLookup = async ({ dxn, label }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
-  faker.seed(ref.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
+  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');
   return {
     label,
@@ -51,24 +51,25 @@ const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
 
 const PreviewCard = () => {
   const { target } = useEditorPreview('PreviewCard');
+  if (!target) {
+    return null;
+  }
 
   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.Title>{target?.label}</Card.Title>
+              <Card.Icon icon='ph--file-text--regular' />
+              <Card.Title>{target.label}</Card.Title>
               <Popover.Close asChild>
-                <Card.Close />
+                <Card.CloseIconButton />
               </Popover.Close>
             </Card.Toolbar>
-            {target && (
-              <Card.Row>
-                <Card.Text variant='description'>{target.text}</Card.Text>
-              </Card.Row>
-            )}
+            <Card.Row>
+              <Card.Text variant='description'>{target.text}</Card.Text>
+            </Card.Row>
           </Card.Root>
         </Popover.Viewport>
         <Popover.Arrow />
@@ -101,7 +102,7 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
       }
 
       const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
+      if (link?.dxn !== action.link.dxn) {
         return;
       }
 
@@ -143,36 +144,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,
   );
 };
@@ -180,7 +190,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',
   },
@@ -217,7 +227,7 @@ export const Default: Story = {
             setPreviewBlocks((prev) => [...prev, block]);
           },
           removeBlockContainer: (block) => {
-            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== block.link.ref));
+            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== block.link.dxn));
           },
         }),
       ];
@@ -230,7 +240,7 @@ export const Default: Story = {
         <PreviewCard />
         {controller?.view &&
           previewBlocks.map(({ link, el }) => (
-            <PreviewBlockComponent key={link.ref} link={link} el={el} view={controller.view!} />
+            <PreviewBlockComponent key={link.dxn} link={link} el={el} view={controller.view!} />
           ))}
       </EditorPreviewProvider>
     );

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,7 +32,7 @@ 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.Root>
@@ -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',
   },

package/src/stories/components/EditorStory.tsx

@@ -12,7 +12,7 @@ import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { useMergeRefs, useThemeContext } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
 import {
   type DebugNode,
   type ThemeExtensionsOptions,
@@ -20,8 +20,7 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
-  decorateMarkdown,
-  editorSlots,
+  documentSlots,
 } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
@@ -34,12 +33,12 @@ export type DebugMode = 'raw' | 'tree' | 'raw+tree';
 
 const defaultId = 'editor-' + PublicKey.random().toHex().slice(0, 8);
 
-export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
+export type EditorStoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
   Pick<ThemeExtensionsOptions, 'slots'> & {
     debug?: DebugMode;
     debugCustom?: (view: EditorView) => ReactNode;
     text?: string;
-    object?: Obj.Obj<TestSchema.Expando>;
+    object?: Obj.OfShape<TestSchema.Expando>;
     readOnly?: boolean;
     placeholder?: string;
     lineNumbers?: boolean;
@@ -47,7 +46,7 @@ export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection
     onReady?: (view: EditorView) => void;
   };
 
-export const EditorStory = forwardRef<EditorController, StoryProps>(
+export const EditorStory = forwardRef<EditorController, EditorStoryProps>(
   ({ debug, debugCustom, text, extensions: extensionsProp, ...props }, forwardedRef) => {
     const controllerRef = useRef<EditorController>(null);
     const mergedRef = useMergeRefs([controllerRef, forwardedRef]);
@@ -63,12 +62,12 @@ export const EditorStory = forwardRef<EditorController, StoryProps>(
 
     const view = controllerRef.current?.view;
     return (
-      <div className={mx('is-full bs-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
+      <div className={mx('dx-container grid', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
         <EditorComponent ref={mergedRef} object={object} text={text} extensions={extensions} {...props} />
 
         {debug && (
           <div
-            className='grid bs-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
+            className='grid h-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
             {...attentionAttrs}
           >
             {view && debugCustom?.(view)}
@@ -77,7 +76,14 @@ export const EditorStory = forwardRef<EditorController, StoryProps>(
                 {view?.state.doc.toString()}
               </pre>
             )}
-            {(debug === 'tree' || debug === 'raw+tree') && <JsonFilter data={tree} classNames='p-1 text-xs' />}
+            {(debug === 'tree' || debug === 'raw+tree') && (
+              <Json.Root data={tree}>
+                <Json.Content>
+                  <Json.Filter />
+                  <Json.Data classNames='p-1 text-xs' />
+                </Json.Content>
+              </Json.Root>
+            )}
           </div>
         )}
       </div>
@@ -88,7 +94,7 @@ export const EditorStory = forwardRef<EditorController, StoryProps>(
 /**
  * Default story component.
  */
-const EditorComponent = forwardRef<EditorController, StoryProps>(
+const EditorComponent = forwardRef<EditorController, EditorStoryProps>(
   (
     {
       id = defaultId,
@@ -101,7 +107,7 @@ const EditorComponent = forwardRef<EditorController, StoryProps>(
       scrollTo,
       selection,
       extensions,
-      slots = editorSlots,
+      slots = documentSlots,
       onReady,
     },
     forwardedRef,
@@ -119,7 +125,6 @@ const EditorComponent = forwardRef<EditorController, StoryProps>(
           createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
           createThemeExtensions({ monospace, themeMode, syntaxHighlighting: true, slots }),
           createMarkdownExtensions(),
-          decorateMarkdown(),
           extensions || [],
         ],
       }),

package/src/stories/components/util.tsx

@@ -4,12 +4,12 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { type Extension } from '@codemirror/state';
-import React, { type FC } from 'react';
 
 import { faker } from '@dxos/random';
-import { Icon } from '@dxos/react-ui';
+import { Domino } from '@dxos/ui';
 import {
   type EditorSelectionState,
+  type RenderCallback,
   decorateMarkdown,
   folding,
   formattingKeymap,
@@ -17,9 +17,9 @@ import {
   linkTooltip,
   table,
 } from '@dxos/ui-editor';
-import { mx } from '@dxos/ui-theme';
+import { safeUrl } from '@dxos/util';
 
-import { createRenderer, str } from '../../util';
+import { str } from '../../util';
 
 export const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
@@ -204,30 +204,27 @@ export const links: Completion[] = [
 export const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
 
 const hover =
-  'rounded-sm text-baseText text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
-
-const LinkTooltip: FC<{ url: string }> = ({ url }) => {
-  const web = new URL(url);
-  return (
-    <a href={url} target='_blank' rel='noreferrer' className={mx(hover, 'flex items-center gap-2')}>
-      {web.origin}
-      <Icon icon='ph--arrow-square-out--regular' size={4} />
-    </a>
+  'rounded-xs text-base-surface-text text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+
+export const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
+  el.appendChild(
+    Domino.of('a')
+      .attributes({ href: url, target: '_blank', rel: 'noreferrer', 'aria-label': 'Open link' })
+      .classNames(hover, 'flex items-center gap-2')
+      .text(safeUrl(url)?.toString() ?? url)
+      .children(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };
 
-export const renderLinkTooltip = createRenderer(LinkTooltip);
-
-const LinkButton: FC<{ url: string }> = ({ url }) => {
-  return (
-    <a href={url} target='_blank' rel='noreferrer' className={mx(hover)}>
-      <Icon icon='ph--arrow-square-out--regular' size={4} classNames='inline-block mis-1 mb-[3px]' />
-    </a>
+export const renderLinkButton: RenderCallback<{ url: string }> = (el, { url }) => {
+  el.appendChild(
+    Domino.of('span')
+      .attributes({ 'aria-hidden': 'true' })
+      .classNames(hover, 'ms-1 inline-block align-[-0.125em]')
+      .children(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };
 
-export const renderLinkButton = createRenderer(LinkButton);
-
 // Shared extensions.
 export const defaultExtensions: Extension[] = [
   decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),

package/src/translations.ts

@@ -10,30 +10,35 @@ export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'strong label': 'Bold',
-        'emphasis label': 'Italics',
-        'strikethrough label': 'Strikethrough',
-        'code label': 'Code',
-        'link label': 'Link',
-        'list-bullet label': 'Bullet list',
-        'list-ordered label': 'Numbered list',
-        'list-task label': 'Task list',
-        'blockquote label': 'Block quote',
-        'codeblock label': 'Code block',
-        'comment label': 'Create comment',
-        'selection overlaps existing comment label': 'Selection overlaps existing comment',
-        'select text to comment label': 'Select text to comment',
-        'image label': 'Insert image',
-        'table label': 'Create table',
-        'heading label': 'Heading level',
-        'heading level label_zero': 'Paragraph',
-        'heading level label_one': 'Heading level {{count}}',
-        'heading level label_other': 'Heading level {{count}}',
-        'search label': 'Search',
-        'view mode label': 'Editor view',
-        'preview mode label': 'Markdown',
-        'readonly mode label': 'Read only',
-        'source mode label': 'Plain text',
+        'comment.label': 'Create comment',
+        'image.label': 'Insert image',
+        'search.label': 'Search',
+
+        'block.label': 'Block',
+        'block.blockquote.label': 'Block quote',
+        'block.codeblock.label': 'Code block',
+        'block.table.label': 'Create table',
+
+        'formatting.label': 'Formatting',
+        'formatting.strong.label': 'Bold',
+        'formatting.emphasis.label': 'Italics',
+        'formatting.strikethrough.label': 'Strikethrough',
+        'formatting.code.label': 'Code',
+        'formatting.link.label': 'Link',
+
+        'list.bullet.label': 'Bullet list',
+        'list.ordered.label': 'Numbered list',
+        'list.task.label': 'Task list',
+
+        'heading.label': 'Heading level',
+        'heading-level.label_zero': 'Paragraph',
+        'heading-level.label_one': 'Heading level {{count}}',
+        'heading-level.label_other': 'Heading level {{count}}',
+
+        'view-mode.label': 'Editor view',
+        'view-mode.preview.label': 'Markdown',
+        'view-mode.source.label': 'Plain text',
+        'view-mode.readonly.label': 'Read only',
       },
     },
   },

package/src/util/react.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type FC, type ReactNode } from 'react';
+import React, { type FC } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { ThemeProvider, Tooltip } from '@dxos/react-ui';
@@ -14,22 +14,13 @@ import { defaultTx } from '@dxos/ui-theme';
  */
 export const str = (...lines: string[]) => lines.join('\n');
 
-/** @deprecated */
-// TODO(wittjosiah): Replace with portals which are lighter weight and inherit context from the main react tree.
-export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
-  createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
-  return root;
-};
-
 /**
- * Utility to create a renderer for a React component.
  * @deprecated
  */
 export const createRenderer =
   <TProps extends object>(Component: FC<TProps>): RenderCallback<TProps> =>
   (el, props) => {
-    renderRoot(
-      el,
+    createRoot(el).render(
       <ThemeProvider tx={defaultTx}>
         <Tooltip.Provider>
           <Component {...props} />