@dxos/react-ui-editor 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

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 { 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 { 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='grow overflow-hidden'>
-        <div className={mx(editorWidth)} ref={parentRef} />
-      </div>
-    </div>
+    <Editor.Root extensions={extensions} viewMode={viewMode}>
+      <Editor.Content>
+        <Editor.Toolbar classNames='dx-document' />
+        <div role='none' 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(), withLayout({ layout: 'fullscreen' })],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen', classNames: 'bg-sidebar-surface' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/stories/Experimental.stories.tsx

@@ -7,9 +7,9 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { blast, defaultOptions, dropFile, join, typewriter } from '@dxos/ui-editor';
+import { blast, defaultOptions, dropFile, join, snippets } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
 
@@ -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/Outliner.stories.tsx

@@ -5,19 +5,18 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
-import { withLayout, 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()], []);

package/src/stories/Popover.stories.tsx

@@ -6,7 +6,7 @@ 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { TestSchema, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
@@ -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',
@@ -41,12 +40,12 @@ const placeholder = (trigger: string[]) => {
     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']>>(

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 { random } from '@dxos/random';
 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   type PreviewBlock,
   type PreviewLinkRef,
@@ -25,13 +25,12 @@ import { hoverableControls } from '@dxos/ui-theme';
 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,
@@ -61,7 +60,7 @@ const PreviewCard = () => {
         <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.CloseIconButton />
@@ -167,7 +166,7 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
       <Card.Root classNames={hoverableControls}>
         {!view?.state.readOnly && (
           <Card.Toolbar>
-            <Card.Icon toolbar icon='ph--bookmark--regular' />
+            <Card.Icon icon='ph--bookmark--regular' />
             <Card.Title>{link.label}</Card.Title>
             {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
             <Menu.Trigger asChild disabled={!menuItems?.length}>

package/src/stories/Theme.stories.tsx

@@ -34,10 +34,10 @@ const DefaultStory = () => {
   return (
     <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>
   );

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 { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import {
   type DebugNode,
   type ThemeExtensionsOptions,
@@ -20,7 +20,7 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
-  editorSlots,
+  documentSlots,
 } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
@@ -33,7 +33,7 @@ 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;
@@ -46,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]);
@@ -62,7 +62,7 @@ export const EditorStory = forwardRef<EditorController, StoryProps>(
 
     const view = controllerRef.current?.view;
     return (
-      <div className={mx('w-full h-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 && (
@@ -76,7 +76,16 @@ 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') && (
+              <Syntax.Root data={tree}>
+                <Syntax.Content>
+                  <Syntax.Filter />
+                  <Syntax.Viewport>
+                    <Syntax.Code classNames='p-1 text-xs' />
+                  </Syntax.Viewport>
+                </Syntax.Content>
+              </Syntax.Root>
+            )}
           </div>
         )}
       </div>
@@ -87,7 +96,7 @@ export const EditorStory = forwardRef<EditorController, StoryProps>(
 /**
  * Default story component.
  */
-const EditorComponent = forwardRef<EditorController, StoryProps>(
+const EditorComponent = forwardRef<EditorController, EditorStoryProps>(
   (
     {
       id = defaultId,
@@ -100,7 +109,7 @@ const EditorComponent = forwardRef<EditorController, StoryProps>(
       scrollTo,
       selection,
       extensions,
-      slots = editorSlots,
+      slots = documentSlots,
       onReady,
     },
     forwardedRef,

package/src/stories/components/util.tsx

@@ -5,11 +5,10 @@
 import { type Completion } from '@codemirror/autocomplete';
 import { type Extension } from '@codemirror/state';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Domino } from '@dxos/ui';
 import {
   type EditorSelectionState,
-  type RenderCallback,
   decorateMarkdown,
   folding,
   formattingKeymap,
@@ -17,11 +16,12 @@ import {
   linkTooltip,
   table,
 } from '@dxos/ui-editor';
+import { type RenderCallback } from '@dxos/ui-editor/types';
 import { safeUrl } from '@dxos/util';
 
 import { str } from '../../util';
 
-export const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
+export const num = () => random.number.int({ min: 0, max: 9999 }).toLocaleString();
 
 export const img = '![dxos](https://dxos.network/dxos-logotype-blue.png)';
 
@@ -41,11 +41,11 @@ export const content = {
     // prettier-ignore
     '### TaskList',
     '',
-    `- [x] ${faker.lorem.sentences()}`,
-    `- [ ] ${faker.lorem.sentences()}`,
-    `  - [ ] ${faker.lorem.sentences()}`,
-    `    - [ ] ${faker.lorem.sentences()}`,
-    `    - [x] ${faker.lorem.sentences()}`,
+    `- [x] ${random.lorem.sentences()}`,
+    `- [ ] ${random.lorem.sentences()}`,
+    `  - [ ] ${random.lorem.sentences()}`,
+    `    - [ ] ${random.lorem.sentences()}`,
+    `    - [x] ${random.lorem.sentences()}`,
     '',
   ),
 
@@ -53,11 +53,11 @@ export const content = {
     // prettier-ignore
     '### BulletList',
     '',
-    `- ${faker.lorem.sentences()}`,
-    `- ${faker.lorem.sentences()}`,
-    `  - ${faker.lorem.sentences()}`,
-    `  - ${faker.lorem.sentences()}`,
-    `- ${faker.lorem.sentences()}`,
+    `- ${random.lorem.sentences()}`,
+    `- ${random.lorem.sentences()}`,
+    `  - ${random.lorem.sentences()}`,
+    `  - ${random.lorem.sentences()}`,
+    `- ${random.lorem.sentences()}`,
     '',
   ),
 
@@ -65,17 +65,17 @@ export const content = {
     // prettier-ignore
     '### OrderedList (part 1)',
     '',
-    `1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
-    `    1. ${faker.lorem.sentences()}`,
-    `    1. ${faker.lorem.sentences()}`,
-    `        1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
+    `    1. ${random.lorem.sentences()}`,
+    `    1. ${random.lorem.sentences()}`,
+    `        1. ${random.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
     '',
     '### OrderedList (part 2)',
     '',
-    `1. ${faker.lorem.sentences()}`,
+    `1. ${random.lorem.sentences()}`,
     '',
   ),
 
@@ -123,7 +123,7 @@ export const content = {
     // prettier-ignore
     '### Tables',
     '',
-    `| ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} |`,
+    `| ${random.lorem.word().padStart(12)} | ${random.lorem.word().padStart(12)} | ${random.lorem.word().padStart(12)} |`,
     `|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|`,
     `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
     `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
@@ -134,7 +134,9 @@ export const content = {
   image: str('### Image', '', img),
 
   headings: str(
-    ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
+    ...[1, 2, 3, 4, 5, 6]
+      .map((level) => ['#'.repeat(level) + ` Heading ${level}`, random.lorem.sentences(), ''])
+      .flat(),
   ),
 
   formatting: str(
@@ -159,7 +161,7 @@ export const content = {
     '',
   ),
 
-  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
+  paragraphs: str(...random.helpers.multiple(() => [random.lorem.paragraph(), ''], { count: 3 }).flat()),
 
   footer: str('', '', '', '', ''),
 };
@@ -211,17 +213,17 @@ export const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url })
     Domino.of('a')
       .attributes({ href: url, target: '_blank', rel: 'noreferrer', 'aria-label': 'Open link' })
       .classNames(hover, 'flex items-center gap-2')
-      .text(safeUrl(url)?.origin ?? url)
-      .children(Domino.svg('ph--arrow-square-out--regular')).root,
+      .text(safeUrl(url)?.toString() ?? url)
+      .append(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };
 
 export const renderLinkButton: RenderCallback<{ url: string }> = (el, { url }) => {
   el.appendChild(
-    Domino.of('a')
-      .attributes({ href: url, target: '_blank', rel: 'noreferrer', 'aria-label': 'Open link' })
-      .classNames(hover, 'inline-block ms-1 align-[-0.125em]') // Center icon.
-      .children(Domino.svg('ph--arrow-square-out--regular')).root,
+    Domino.of('span')
+      .attributes({ 'aria-hidden': 'true' })
+      .classNames(hover, 'ms-1 inline-block align-[-0.125em]')
+      .append(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };
 
@@ -242,18 +244,18 @@ export const allExtensions: Extension[] = [
 ];
 
 // Long text for scrolling stories.
-export const longText = faker.helpers
-  .multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 })
+export const longText = random.helpers
+  .multiple(() => random.lorem.paragraph({ min: 8, max: 16 }), { count: 20 })
   .join('\n\n');
 
-export const largeWithImages = faker.helpers
-  .multiple(() => [faker.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
+export const largeWithImages = random.helpers
+  .multiple(() => [random.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
   .flatMap((x) => x)
   .join('\n\n');
 
 export const headings = str(
   ...[1, 2, 2, 3, 3, 4, 4, 4, 5, 5, 2, 3, 3, 2, 2, 6, 1]
-    .map((level) => ['#'.repeat(level) + ' ' + faker.lorem.sentence(3), faker.lorem.sentences(), ''])
+    .map((level) => ['#'.repeat(level) + ' ' + random.lorem.sentence(3), random.lorem.sentences(), ''])
     .flat(),
 );
 

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

@@ -6,7 +6,7 @@ import React, { type FC } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { ThemeProvider, Tooltip } from '@dxos/react-ui';
-import { type RenderCallback } from '@dxos/ui-editor';
+import { type RenderCallback } from '@dxos/ui-editor/types';
 import { defaultTx } from '@dxos/ui-theme';
 
 /**

package/dist/types/src/components/EditorContent/EditorContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorContent/EditorContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAErE,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,cAAc,CAAC;AAE7E,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAC9C;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,GAAG,kBAAkB,CACvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa;gBAXV,OAAO;YACX,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;0CA8DrC,CAAC"}

package/dist/types/src/components/EditorContent/controller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorContent/controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,IAAI,IAAI,UAAU,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,gBAO5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,UAAU,GAAG,IAAI,KAAG,gBA2BhE,CAAC"}

package/dist/types/src/components/EditorContent/index.d.ts

@@ -1,3 +0,0 @@
-export * from './controller';
-export * from './EditorContent';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/EditorContent/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorContent/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}