@dxos/react-ui-editor 0.4.2-main.ec5936e → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.2-main.ec5936e",
+  "version": "0.4.2",
   "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.ec5936e",
-    "@dxos/display-name": "0.4.2-main.ec5936e",
-    "@dxos/context": "0.4.2-main.ec5936e",
-    "@dxos/debug": "0.4.2-main.ec5936e",
-    "@dxos/automerge": "0.4.2-main.ec5936e",
-    "@dxos/echo-schema": "0.4.2-main.ec5936e",
-    "@dxos/invariant": "0.4.2-main.ec5936e",
-    "@dxos/protocols": "0.4.2-main.ec5936e",
-    "@dxos/log": "0.4.2-main.ec5936e",
-    "@dxos/react-async": "0.4.2-main.ec5936e",
-    "@dxos/react-ui-theme": "0.4.2-main.ec5936e",
-    "@dxos/text-model": "0.4.2-main.ec5936e",
-    "@dxos/util": "0.4.2-main.ec5936e",
-    "@dxos/react-ui": "0.4.2-main.ec5936e"
+    "@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"
   },
   "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.ec5936e",
-    "@dxos/echo-signals": "0.4.2-main.ec5936e",
-    "@dxos/echo-typegen": "0.4.2-main.ec5936e",
-    "@dxos/keyboard": "0.4.2-main.ec5936e",
-    "@dxos/random": "0.4.2-main.ec5936e",
-    "@dxos/react-client": "0.4.2-main.ec5936e",
-    "@dxos/react-ui": "0.4.2-main.ec5936e",
-    "@dxos/storybook-utils": "0.4.2-main.ec5936e"
+    "@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"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.2-main.ec5936e"
+    "@dxos/react-client": "0.4.2"
   },
   "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 { getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
@@ -39,7 +39,6 @@ import {
   annotations,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
-import translations from '../../translations';
 
 faker.seed(101);
 
@@ -225,16 +224,21 @@ const Story = ({ text, comments, placeholder = 'New document.', ...props }: Stor
   }
 
   return (
-    <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}
-    />
+    <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>
   );
 };
 
@@ -243,7 +247,6 @@ export default {
   component: MarkdownEditor,
   decorators: [withTheme],
   render: Story,
-  parameters: { translations, layout: 'fullscreen' },
 };
 
 const defaults = [

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

@@ -7,13 +7,12 @@ import '@dxosTheme';
 import React, { useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, groupSurface, mx } 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',
@@ -37,14 +36,19 @@ const Story = ({
   }
 
   return (
-    <TextEditor
-      model={model}
-      slots={{
-        root: { className: mx(textBlockWidth, 'min-bs-dvh') },
-        editor: { className: 'min-bs-dvh p-2 bg-white dark:bg-black' },
-      }}
-      {...props}
-    />
+    <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>
   );
 };
 
@@ -53,7 +57,6 @@ 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 } from '@dxos/react-ui-theme';
+import { focusRing, mx } 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: focusRing,
+    className: mx('grow', focusRing),
   },
   editor: {
-    className: 'min-bs-full',
+    className: 'bs-full',
   },
 };
 

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

@@ -5,10 +5,11 @@
 import '@dxosTheme';
 
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
-import '@preact/signals-react';
-import { EditorView } from '@codemirror/view'; // Register react integration.
+import { EditorView } from '@codemirror/view';
+import '@preact/signals-react'; // Register react integration
+import { basicSetup } from 'codemirror';
 import get from 'lodash.get';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { type Prop } from '@dxos/automerge/automerge';
 import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
@@ -20,42 +21,38 @@ import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 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';
+import { type IDocHandle, automerge, awareness } from '../../extensions';
+import { useTextModel } from '../../hooks';
 
-const initialContent = 'Hello world!';
-
-type TestObject = {
-  text: string;
-};
+// TODO(burdon): Move to components.
 
 type EditorProps = {
   handle: IDocHandle;
-  path?: Prop[];
+  path: Prop[];
 };
 
-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(),
-    ],
-  });
+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();
+    };
+  }, []);
 
-  return <div ref={parentRef} />;
+  return <div className='codemirror-editor' ref={containerRef} onKeyDown={(evt) => evt.stopPropagation()} />;
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<DocHandle<TestObject>>();
-  const [object2, setObject2] = useState<DocHandle<TestObject>>();
+  const [object1, setObject1] = useState<DocHandle<any> | null>(null);
+  const [object2, setObject2] = useState<DocHandle<any> | null>(null);
 
   useEffect(() => {
     queueMicrotask(async () => {
@@ -67,8 +64,8 @@ const Story = () => {
       });
 
       const object1 = repo1.create();
-      object1.change((doc: TestObject) => {
-        doc.text = initialContent;
+      object1.change((doc: any) => {
+        doc.text = 'Hello world!';
       });
 
       const object2 = repo2.find(object1.url);
@@ -84,9 +81,13 @@ const Story = () => {
   }
 
   return (
-    <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 style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', width: '100vw' }}>
+      <div>
+        <Editor handle={object1} path={['text']} />
+      </div>
+      <div>
+        <Editor handle={object2} path={['text']} />
+      </div>
     </div>
   );
 };
@@ -95,7 +96,6 @@ export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
   render: () => <Story />,
-  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {};
@@ -115,11 +115,16 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
     return null;
   }
 
-  return <MarkdownEditor model={model} />;
+  return (
+    <div className='flex overflow-hidden'>
+      <div className='flex flex-col w-[800px] overflow-y-scroll'>
+        <MarkdownEditor model={model} />
+      </div>
+    </div>
+  );
 };
 
 export const WithEcho = {
-  decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
@@ -129,7 +134,7 @@ export const WithEcho = {
           space.db.add(
             new Expando({
               type: 'test',
-              content: new TextObject(initialContent),
+              content: new TextObject('Hello world!'),
             }),
           );
         }}
@@ -137,4 +142,5 @@ 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 { mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
@@ -24,9 +24,7 @@ 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.
@@ -55,7 +53,11 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         themeMode,
         theme: markdownTheme,
         slots: {
-          editor: { className: 'min-bs-full' },
+          // 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',
+          },
         },
       }),
       // TODO(burdon): Move lineWrapping.
@@ -78,16 +80,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 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 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>
     </div>
   );
@@ -98,7 +100,6 @@ 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 { mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
@@ -25,8 +25,6 @@ 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);
@@ -65,18 +63,17 @@ const Story: FC<{ content: string }> = ({ content }) => {
   }
 
   return (
-    <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 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>
   );
 };
@@ -86,7 +83,6 @@ export default {
   component: Toolbar,
   render: (args: any) => <Story {...args} />,
   decorators: [withTheme],
-  parameters: { translations, layout: 'fullscreen' },
 };
 
 const content = [