@dxos/react-ui-editor 0.4.2-main.0e5b9e5 → 0.4.2-main.21916d1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.2-main.0e5b9e5",
+  "version": "0.4.2-main.21916d1",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,20 +36,20 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.2-main.0e5b9e5",
-    "@dxos/automerge": "0.4.2-main.0e5b9e5",
-    "@dxos/context": "0.4.2-main.0e5b9e5",
-    "@dxos/debug": "0.4.2-main.0e5b9e5",
-    "@dxos/display-name": "0.4.2-main.0e5b9e5",
-    "@dxos/invariant": "0.4.2-main.0e5b9e5",
-    "@dxos/echo-schema": "0.4.2-main.0e5b9e5",
-    "@dxos/log": "0.4.2-main.0e5b9e5",
-    "@dxos/react-async": "0.4.2-main.0e5b9e5",
-    "@dxos/protocols": "0.4.2-main.0e5b9e5",
-    "@dxos/react-ui-theme": "0.4.2-main.0e5b9e5",
-    "@dxos/text-model": "0.4.2-main.0e5b9e5",
-    "@dxos/react-ui": "0.4.2-main.0e5b9e5",
-    "@dxos/util": "0.4.2-main.0e5b9e5"
+    "@dxos/async": "0.4.2-main.21916d1",
+    "@dxos/context": "0.4.2-main.21916d1",
+    "@dxos/debug": "0.4.2-main.21916d1",
+    "@dxos/display-name": "0.4.2-main.21916d1",
+    "@dxos/invariant": "0.4.2-main.21916d1",
+    "@dxos/echo-schema": "0.4.2-main.21916d1",
+    "@dxos/log": "0.4.2-main.21916d1",
+    "@dxos/protocols": "0.4.2-main.21916d1",
+    "@dxos/react-async": "0.4.2-main.21916d1",
+    "@dxos/react-ui": "0.4.2-main.21916d1",
+    "@dxos/react-ui-theme": "0.4.2-main.21916d1",
+    "@dxos/automerge": "0.4.2-main.21916d1",
+    "@dxos/text-model": "0.4.2-main.21916d1",
+    "@dxos/util": "0.4.2-main.21916d1"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.0",
@@ -76,20 +76,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.1",
-    "@dxos/config": "0.4.2-main.0e5b9e5",
-    "@dxos/echo-signals": "0.4.2-main.0e5b9e5",
-    "@dxos/keyboard": "0.4.2-main.0e5b9e5",
-    "@dxos/echo-typegen": "0.4.2-main.0e5b9e5",
-    "@dxos/random": "0.4.2-main.0e5b9e5",
-    "@dxos/react-client": "0.4.2-main.0e5b9e5",
-    "@dxos/react-ui": "0.4.2-main.0e5b9e5",
-    "@dxos/storybook-utils": "0.4.2-main.0e5b9e5"
+    "@dxos/config": "0.4.2-main.21916d1",
+    "@dxos/echo-signals": "0.4.2-main.21916d1",
+    "@dxos/echo-typegen": "0.4.2-main.21916d1",
+    "@dxos/random": "0.4.2-main.21916d1",
+    "@dxos/keyboard": "0.4.2-main.21916d1",
+    "@dxos/react-client": "0.4.2-main.21916d1",
+    "@dxos/storybook-utils": "0.4.2-main.21916d1",
+    "@dxos/react-ui": "0.4.2-main.21916d1"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.2-main.0e5b9e5"
+    "@dxos/react-client": "0.4.2-main.21916d1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -14,7 +14,7 @@ import { TextObject } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
+import { getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
@@ -39,6 +39,7 @@ import {
   annotations,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
+import translations from '../../translations';
 
 faker.seed(101);
 
@@ -224,21 +225,16 @@ const Story = ({ text, comments, placeholder = 'New document.', ...props }: Stor
   }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex h-full justify-center'>
-        <div className='flex flex-col h-full w-[800px] overflow-y-auto'>
-          <MarkdownEditor
-            ref={view}
-            model={model}
-            placeholder={placeholder}
-            slots={{
-              editor: { className: 'bs-full p-2 bg-white dark:bg-black' },
-            }}
-            {...props}
-          />
-        </div>
-      </div>
-    </div>
+    <MarkdownEditor
+      ref={view}
+      model={model}
+      placeholder={placeholder}
+      slots={{
+        root: { className: mx(textBlockWidth, 'min-bs-dvh') },
+        editor: { className: 'min-bs-dvh p-2 bg-white dark:bg-black' },
+      }}
+      {...props}
+    />
   );
 };
 
@@ -247,6 +243,7 @@ export default {
   component: MarkdownEditor,
   decorators: [withTheme],
   render: Story,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 const defaults = [

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -7,12 +7,13 @@ import '@dxosTheme';
 import React, { useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
-import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor, type TextEditorProps } from './TextEditor';
 import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
+import translations from '../../translations';
 
 const initialText = [
   '# TextEditor',
@@ -36,19 +37,14 @@ const Story = ({
   }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center'>
-        <div className='flex flex-col w-[800px] overflow-y-auto'>
-          <TextEditor
-            model={model}
-            slots={{
-              editor: { className: 'bs-full p-2 bg-white dark:bg-black' },
-            }}
-            {...props}
-          />
-        </div>
-      </div>
-    </div>
+    <TextEditor
+      model={model}
+      slots={{
+        root: { className: mx(textBlockWidth, 'min-bs-dvh') },
+        editor: { className: 'min-bs-dvh p-2 bg-white dark:bg-black' },
+      }}
+      {...props}
+    />
   );
 };
 
@@ -57,6 +53,7 @@ export default {
   component: TextEditor,
   decorators: [withTheme],
   render: Story,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {

package/src/components/TextEditor/TextEditor.tsx

@@ -20,7 +20,7 @@ import React, {
 
 import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
-import { focusRing, mx } from '@dxos/react-ui-theme';
+import { focusRing } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
 import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
@@ -259,10 +259,10 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('grow', focusRing),
+    className: focusRing,
   },
   editor: {
-    className: 'bs-full',
+    className: 'min-bs-full',
   },
 };
 

package/src/components/TextEditor/automerge.stories.tsx

@@ -23,6 +23,7 @@ import { MarkdownEditor } from './TextEditor';
 import { type IDocHandle, automerge, awareness, createBasicBundle } from '../../extensions';
 import { useTextEditor, useTextModel } from '../../hooks';
 import { defaultTheme } from '../../themes';
+import translations from '../../translations';
 
 const initialContent = 'Hello world!';
 
@@ -83,9 +84,9 @@ const Story = () => {
   }
 
   return (
-    <div className='grid grid-cols-2 gap-4'>
-      <Editor handle={object1} />
-      <Editor handle={object2} />
+    <div role='none' className='grid grid-cols-2 bs-full is-full gap-2'>
+      <Editor handle={object1} path={['text']} />
+      <Editor handle={object2} path={['text']} />
     </div>
   );
 };
@@ -94,6 +95,7 @@ export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
   render: () => <Story />,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {};
@@ -113,11 +115,7 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
     return null;
   }
 
-  return (
-    <div className='flex flex-col w-full p-2'>
-      <MarkdownEditor model={model} slots={{ editor: { className: 'bg-white p-2' } }} />
-    </div>
-  );
+  return <MarkdownEditor model={model} />;
 };
 
 export const WithEcho = {

package/src/components/TextEditor/hooks.stories.tsx

@@ -7,7 +7,7 @@ import '@dxosTheme';
 import React from 'react';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
@@ -24,7 +24,9 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
+import { editorWithToolbarLayout } from '../../styles/layout';
 import { markdownTheme } from '../../themes';
+import translations from '../../translations';
 import { Toolbar } from '../Toolbar';
 
 // TODO(burdon): Demo toolbar with hooks.
@@ -53,11 +55,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         themeMode,
         theme: markdownTheme,
         slots: {
-          // TODO(burdon): Document classes re base theme.
-          //  Semantic tokens (e.g., replacement of input surface).
-          editor: {
-            className: 'h-full p-4 bg-white text-black dark:bg-black dark:text-white',
-          },
+          editor: { className: 'min-bs-full' },
         },
       }),
       // TODO(burdon): Move lineWrapping.
@@ -80,16 +78,16 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   // FIXME This doesn't update the state on view changes. Also not
   // sure if view is even guaranteed to exist at this point.
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex h-full justify-center'>
-        <div className='flex flex-col h-full w-[800px]'>
-          <Toolbar.Root onAction={handleAction} state={formattingState}>
-            <Toolbar.Markdown />
-          </Toolbar.Root>
-
-          {/* TODO(burdon): Handle scrolling in component wrapper (like this). */}
-          <div role='none' className='h-full overflow-y-auto' ref={parentRef} />
-        </div>
+    <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
+      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+        <Toolbar.Markdown />
+      </Toolbar.Root>
+      <div role='none' className='overflow-y-auto'>
+        <div
+          role='textbox'
+          className={mx(textBlockWidth, 'min-bs-full p-4 surface-attention fg-base')}
+          ref={parentRef}
+        />
       </div>
     </div>
   );
@@ -100,6 +98,7 @@ export default {
   component: TextEditor,
   decorators: [withTheme],
   render: (args: StoryProps) => <Story {...args} />,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -9,7 +9,7 @@ import React, { type FC, useMemo, useState } from 'react';
 import { TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
@@ -25,6 +25,8 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
+import { editorWithToolbarLayout } from '../../styles';
+import translations from '../../translations';
 import { MarkdownEditor } from '../TextEditor';
 
 faker.seed(101);
@@ -63,17 +65,18 @@ const Story: FC<{ content: string }> = ({ content }) => {
   }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex h-full justify-center'>
-        <div className='flex flex-col h-full w-[800px]'>
-          <Toolbar.Root onAction={handleAction} state={formattingState}>
-            <Toolbar.Markdown />
-            <Toolbar.Separator />
-            <Toolbar.Extended />
-          </Toolbar.Root>
-          <MarkdownEditor ref={editorRef} model={model} extensions={extensions} />
-        </div>
-      </div>
+    <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
+      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+        <Toolbar.Markdown />
+        <Toolbar.Separator />
+        <Toolbar.Extended />
+      </Toolbar.Root>
+      <MarkdownEditor
+        ref={editorRef}
+        model={model}
+        extensions={extensions}
+        slots={{ root: { className: mx(textBlockWidth, 'pli-2') } }}
+      />
     </div>
   );
 };
@@ -83,6 +86,7 @@ export default {
   component: Toolbar,
   render: (args: any) => <Story {...args} />,
   decorators: [withTheme],
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 const content = [