@dxos/react-ui-editor 0.4.2 → 0.4.3-main.c3bfede

package/dist/types/src/styles/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/styles/layout.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,4GACuE,CAAC"}

package/dist/types/src/translations.d.ts

@@ -0,0 +1,20 @@
+export declare const translationKey = "react-ui-editor";
+declare const _default: {
+    'en-US': {
+        "react-ui-editor": {
+            'strong label': string;
+            'emphasis label': string;
+            'strikethrough label': string;
+            'code label': string;
+            'bullet label': string;
+            'ordered label': string;
+            'task label': string;
+            'blockquote label': string;
+            'codeblock label': string;
+            'comment label': string;
+            'heading label': string;
+        };
+    };
+}[];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

package/dist/types/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;AAEhD,wBAkBE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.2",
+  "version": "0.4.3-main.c3bfede",
   "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",
-    "@dxos/context": "0.4.2",
-    "@dxos/display-name": "0.4.2",
-    "@dxos/debug": "0.4.2",
-    "@dxos/echo-schema": "0.4.2",
-    "@dxos/log": "0.4.2",
-    "@dxos/invariant": "0.4.2",
-    "@dxos/protocols": "0.4.2",
-    "@dxos/react-ui": "0.4.2",
-    "@dxos/react-async": "0.4.2",
-    "@dxos/automerge": "0.4.2",
-    "@dxos/react-ui-theme": "0.4.2",
-    "@dxos/text-model": "0.4.2",
-    "@dxos/util": "0.4.2"
+    "@dxos/async": "0.4.3-main.c3bfede",
+    "@dxos/automerge": "0.4.3-main.c3bfede",
+    "@dxos/debug": "0.4.3-main.c3bfede",
+    "@dxos/context": "0.4.3-main.c3bfede",
+    "@dxos/echo-schema": "0.4.3-main.c3bfede",
+    "@dxos/display-name": "0.4.3-main.c3bfede",
+    "@dxos/protocols": "0.4.3-main.c3bfede",
+    "@dxos/invariant": "0.4.3-main.c3bfede",
+    "@dxos/react-async": "0.4.3-main.c3bfede",
+    "@dxos/log": "0.4.3-main.c3bfede",
+    "@dxos/react-ui": "0.4.3-main.c3bfede",
+    "@dxos/react-ui-theme": "0.4.3-main.c3bfede",
+    "@dxos/text-model": "0.4.3-main.c3bfede",
+    "@dxos/util": "0.4.3-main.c3bfede"
   },
   "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",
-    "@dxos/echo-typegen": "0.4.2",
-    "@dxos/echo-signals": "0.4.2",
-    "@dxos/random": "0.4.2",
-    "@dxos/keyboard": "0.4.2",
-    "@dxos/react-client": "0.4.2",
-    "@dxos/react-ui": "0.4.2",
-    "@dxos/storybook-utils": "0.4.2"
+    "@dxos/config": "0.4.3-main.c3bfede",
+    "@dxos/echo-signals": "0.4.3-main.c3bfede",
+    "@dxos/keyboard": "0.4.3-main.c3bfede",
+    "@dxos/random": "0.4.3-main.c3bfede",
+    "@dxos/echo-typegen": "0.4.3-main.c3bfede",
+    "@dxos/react-client": "0.4.3-main.c3bfede",
+    "@dxos/react-ui": "0.4.3-main.c3bfede",
+    "@dxos/storybook-utils": "0.4.3-main.c3bfede"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.2"
+    "@dxos/react-client": "0.4.3-main.c3bfede"
   },
   "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

@@ -5,11 +5,10 @@
 import '@dxosTheme';
 
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
-import { EditorView } from '@codemirror/view';
-import '@preact/signals-react'; // Register react integration
-import { basicSetup } from 'codemirror';
+import '@preact/signals-react';
+import { EditorView } from '@codemirror/view'; // Register react integration.
 import get from 'lodash.get';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { type Prop } from '@dxos/automerge/automerge';
 import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
@@ -21,38 +20,42 @@ import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor } from './TextEditor';
-import { type IDocHandle, automerge, awareness } from '../../extensions';
-import { useTextModel } from '../../hooks';
+import { type IDocHandle, automerge, awareness, createBasicBundle } from '../../extensions';
+import { useTextEditor, useTextModel } from '../../hooks';
+import { defaultTheme } from '../../themes';
+import translations from '../../translations';
 
-// TODO(burdon): Move to components.
+const initialContent = 'Hello world!';
+
+type TestObject = {
+  text: string;
+};
 
 type EditorProps = {
   handle: IDocHandle;
-  path: Prop[];
+  path?: Prop[];
 };
 
-const Editor = ({ handle, path }: EditorProps) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const editorRoot = useRef<EditorView>();
-
-  useEffect(() => {
-    const view = (editorRoot.current = new EditorView({
-      doc: get(handle.docSync()!, path),
-      extensions: [basicSetup, automerge({ handle, path }), awareness()],
-      parent: containerRef.current as any,
-    }));
-
-    return () => {
-      view.destroy();
-    };
-  }, []);
+const Editor = ({ handle, path = ['text'] }: EditorProps) => {
+  const { parentRef } = useTextEditor({
+    autoFocus: true,
+    doc: get(handle.docSync()!, path),
+    extensions: [
+      //
+      EditorView.baseTheme(defaultTheme),
+      EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
+      createBasicBundle({ placeholder: 'Type here...' }),
+      automerge({ handle, path }),
+      awareness(),
+    ],
+  });
 
-  return <div className='codemirror-editor' ref={containerRef} onKeyDown={(evt) => evt.stopPropagation()} />;
+  return <div ref={parentRef} />;
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<DocHandle<any> | null>(null);
-  const [object2, setObject2] = useState<DocHandle<any> | null>(null);
+  const [object1, setObject1] = useState<DocHandle<TestObject>>();
+  const [object2, setObject2] = useState<DocHandle<TestObject>>();
 
   useEffect(() => {
     queueMicrotask(async () => {
@@ -64,8 +67,8 @@ const Story = () => {
       });
 
       const object1 = repo1.create();
-      object1.change((doc: any) => {
-        doc.text = 'Hello world!';
+      object1.change((doc: TestObject) => {
+        doc.text = initialContent;
       });
 
       const object2 = repo2.find(object1.url);
@@ -81,13 +84,9 @@ const Story = () => {
   }
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', width: '100vw' }}>
-      <div>
-        <Editor handle={object1} path={['text']} />
-      </div>
-      <div>
-        <Editor handle={object2} path={['text']} />
-      </div>
+    <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>
   );
 };
@@ -96,6 +95,7 @@ export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
   render: () => <Story />,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {};
@@ -115,16 +115,11 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
     return null;
   }
 
-  return (
-    <div className='flex overflow-hidden'>
-      <div className='flex flex-col w-[800px] overflow-y-scroll'>
-        <MarkdownEditor model={model} />
-      </div>
-    </div>
-  );
+  return <MarkdownEditor model={model} />;
 };
 
 export const WithEcho = {
+  decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
@@ -134,7 +129,7 @@ export const WithEcho = {
           space.db.add(
             new Expando({
               type: 'test',
-              content: new TextObject('Hello world!'),
+              content: new TextObject(initialContent),
             }),
           );
         }}
@@ -142,5 +137,4 @@ export const WithEcho = {
       />
     );
   },
-  decorators: [withTheme],
 };

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 = [