@dxos/react-ui-editor 0.3.11-main.927e4ba → 0.3.11-main.9b81c36

package/src/components/TextEditor/TextEditor.tsx

@@ -4,7 +4,7 @@
 
 import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+// import { useFocusableGroup } from '@fluentui/react-tabster';
 import { vim } from '@replit/codemirror-vim';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
@@ -20,9 +20,10 @@ import React, {
 
 import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
-import { attentionSurface, mx } from '@dxos/react-ui-theme';
+import { focusRing, mx } from '@dxos/react-ui-theme';
+import { isNotFalsy } from '@dxos/util';
 
-import { basicBundle, markdownBundle } from '../../extensions';
+import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
 import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
@@ -86,7 +87,12 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
     },
     forwardedRef,
   ) => {
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    // TODO(burdon): Hook causes error even if properties are not spread into div.
+    //  Uncaught TypeError: Cannot read properties of undefined (reading 'relatedTarget')
+    //  Uses event.detail, which is deprecated (not event.details). At runtime the event has a property `details`.
+    //  https://github.com/microsoft/tabster/blob/master/src/State/FocusedElement.ts#L348 (e.detail.relatedTarget)
+    //  https://github.com/microsoft/keyborg/blob/49e49b2c3ba0a5f6cc518ac46825d7551def8109/src/FocusEvent.ts#L58
+    // const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
     const { themeMode } = useThemeContext();
 
     const rootRef = useRef<HTMLDivElement>(null);
@@ -98,7 +104,12 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
     // Set focus.
     useEffect(() => {
-      if (autoFocus) {
+      if (autoFocus && !view?.hasFocus) {
+        if (view?.state.selection.main?.from === 0) {
+          // Start at end of line.
+          const { to } = view.state.doc.lineAt(0);
+          view?.dispatch({ selection: { anchor: to } });
+        }
         view?.focus();
       }
     }, [view, autoFocus]);
@@ -132,18 +143,19 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           EditorView.contentAttributes.of({ class: slots.content?.className ?? '' }),
 
           // State.
+          EditorView.editable.of(!readonly),
           EditorState.readOnly.of(!!readonly),
 
           // Storage and replication.
           // NOTE: This must come before user extensions.
           model.extension,
 
-          // TODO(burdon): Factor out (requires special handling for Escape/focus).
+          // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
           editorMode === 'vim' && vim(),
 
           // Custom.
           ...extensions,
-        ].filter(Boolean) as Extension[],
+        ].filter(isNotFalsy),
       });
 
       //
@@ -175,6 +187,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
     // Handles tab/focus.
     // Pressing Escape focuses the outer div (to support tab navigation); pressing Enter refocuses the editor.
+    // TODO(burdon): Convert to keymap?
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
@@ -186,7 +199,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
           case 'Escape': {
             if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
-              rootRef.current?.focus();
+              view?.focus();
             }
             break;
           }
@@ -200,16 +213,15 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
         key={model.id}
         role='none'
         tabIndex={0}
-        onKeyUp={handleKeyUp}
         {...slots.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        onKeyUp={handleKeyUp}
         ref={rootRef}
       />
     );
   },
 );
 
-// TODO(burdon): Single-line/scroll.
 export const TextEditor = forwardRef<EditorView, TextEditorProps>(
   ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
@@ -218,7 +230,7 @@ export const TextEditor = forwardRef<EditorView, TextEditorProps>(
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[basicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
+        extensions={[createBasicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -235,7 +247,7 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[markdownBundle({ themeMode, readonly, placeholder }), ...extensions]}
+        extensions={[createMarkdownExtensions({ themeMode, placeholder }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -246,11 +258,10 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    // TODO(burdon): Add focusRing by default/as property?
-    className: mx('flex flex-col grow overflow-y-auto', attentionSurface),
+    className: mx('grow', focusRing),
   },
   editor: {
-    className: 'h-full p-2',
+    className: 'bs-full',
   },
 };
 

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

@@ -13,7 +13,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { type Prop } from '@dxos/automerge/automerge';
 import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
-import { Filter, setGlobalAutomergePreference } from '@dxos/echo-schema';
+import { Filter } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -130,7 +130,6 @@ const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
 
 export const WithEcho = {
   render: () => {
-    setGlobalAutomergePreference(true);
     return (
       <ClientRepeater
         count={2}

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

@@ -0,0 +1,106 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { TextEditor } from './TextEditor';
+import {
+  code,
+  createMarkdownExtensions,
+  formatting,
+  heading,
+  hr,
+  image,
+  link,
+  table,
+  tasklist,
+} from '../../extensions';
+import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
+import { markdownTheme } from '../../themes';
+import { Toolbar } from '../Toolbar';
+
+// TODO(burdon): Demo toolbar with hooks.
+// TODO(burdon): Build components from hooks and adapters for model/extensions, etc.
+// TODO(burdon): Remove BaseTextEditor.
+// TODO(burdon): Move scrolling container layout/logic into TextEditor/MarkdownEditor components.
+// TODO(burdon): Define keymap in composer framework format.
+
+type StoryProps = {
+  autoFocus?: boolean;
+  placeholder?: string;
+  doc?: string;
+  readonly?: boolean;
+};
+
+const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef, view } = useTextEditor({
+    autoFocus,
+    doc,
+    extensions: [
+      //
+      createDataExtensions({ readonly }),
+      createThemeExtensions({
+        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',
+          },
+        },
+      }),
+      // TODO(burdon): Move lineWrapping.
+      createMarkdownExtensions({ placeholder, lineWrapping: true }),
+      // TODO(burdon): Move into markdown bundle (with React callbacks).
+      code(),
+      formatting(),
+      heading(),
+      hr(),
+      image(),
+      link(),
+      table(),
+      tasklist(),
+    ],
+  });
+
+  const handleAction = useActionHandler(view);
+
+  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}>
+            <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>
+  );
+};
+
+export default {
+  title: 'react-ui-editor/useTextEditor',
+  component: TextEditor,
+  decorators: [withTheme],
+  render: (args: StoryProps) => <Story {...args} />,
+};
+
+export const Default = {
+  args: {
+    autoFocus: true,
+    placeholder: 'Text...',
+    doc: '# Demo\n\nThis is a document.\n\n',
+  },
+};

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

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React, { type FC, useMemo, useState } from 'react';
+
+import { TextObject } from '@dxos/echo-schema';
+import { PublicKey } from '@dxos/keys';
+import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Toolbar } from './Toolbar';
+import { code, comments, formatting, heading, image, table, tasklist, useComments } from '../../extensions';
+import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
+import { MarkdownEditor } from '../TextEditor';
+
+faker.seed(101);
+
+const Story: FC<{ content: string }> = ({ content }) => {
+  const [item] = useState({ text: new TextObject(content) });
+  const [_comments, setComments] = useState<Comment[]>([]);
+  const [editorRef, editorView] = useEditorView();
+  const model = useTextModel({ text: item.text });
+  const extensions = useMemo(
+    () => [
+      code(),
+      comments({
+        onCreate: (cursor) => {
+          const id = PublicKey.random().toHex();
+          setComments((comments) => [...comments, { id, cursor }]);
+          return id;
+        },
+      }),
+      formatting(),
+      heading(),
+      image(),
+      table(),
+      tasklist(),
+    ],
+    [],
+  );
+
+  useComments(editorView, _comments);
+  const handleAction = useActionHandler(editorView);
+
+  if (!model) {
+    return null;
+  }
+
+  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}>
+            <Toolbar.Markdown />
+            <Toolbar.Separator />
+            <Toolbar.Extended />
+          </Toolbar.Root>
+          <MarkdownEditor ref={editorRef} model={model} extensions={extensions} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'react-ui-editor/Toolbar',
+  component: Toolbar,
+  render: (args: any) => <Story {...args} />,
+  decorators: [withTheme],
+};
+
+const content = [
+  'Demo',
+  '',
+  'The editor supports **Markdown** styles.',
+  '',
+  faker.lorem.paragraph({ min: 5, max: 8 }),
+  '',
+  '',
+].join('\n');
+
+export const Default = {
+  args: {
+    content,
+  },
+};

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,166 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import {
+  type Icon,
+  At,
+  CaretRight,
+  ChatText,
+  Code,
+  Image,
+  Link,
+  ListBullets,
+  ListChecks,
+  ListNumbers,
+  TextStrikethrough,
+  Table,
+  TextB,
+  TextItalic,
+} from '@phosphor-icons/react';
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren } from 'react';
+
+import { Button, type ButtonProps, DensityProvider, Select } from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+
+// TODO(burdon): Revert to string to make extensible?
+export type ActionType =
+  | 'blockquote'
+  | 'bold'
+  | 'codeblock'
+  | 'comment'
+  | 'heading'
+  | 'image'
+  | 'italic'
+  | 'link'
+  | 'list'
+  | 'list-ordered'
+  | 'list-tasks'
+  | 'mention'
+  | 'prompt'
+  | 'strikethrough'
+  | 'table';
+
+export type Action = {
+  type: ActionType;
+  data?: any;
+};
+
+export type ToolbarProps = PropsWithChildren<{
+  onAction?: (action: Action) => void;
+}>;
+
+const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
+
+const ToolbarRoot = ({ children, onAction }: ToolbarProps) => {
+  return (
+    <ToolbarContextProvider onAction={onAction}>
+      <DensityProvider density='fine'>
+        <div role='toolbar' className='flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden'>
+          {children}
+        </div>
+      </DensityProvider>
+    </ToolbarContextProvider>
+  );
+};
+
+type ToolbarButtonProps = {
+  Icon: Icon;
+  onClick: () => Action | undefined;
+} & NonNullable<Pick<ButtonProps, 'title'>>;
+
+const ToolbarButton = ({ Icon, onClick, title }: ToolbarButtonProps) => {
+  const { onAction } = useToolbarContext('ToolbarButton');
+  const handleClick = () => {
+    const action = onClick();
+    if (action) {
+      onAction?.(action);
+    }
+  };
+
+  return (
+    <Button variant='ghost' classNames='p-2' onClick={handleClick} title={title}>
+      <Icon className={getSize(5)} />
+    </Button>
+  );
+};
+
+const ToolbarSeparator = () => <div className='grow' />;
+
+const MarkdownHeading = () => {
+  const { onAction } = useToolbarContext('MarkdownFormatting');
+  return (
+    <Select.Root defaultValue='0' onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}>
+      <Select.TriggerButton classNames='w-[8rem]' />
+      <Select.Portal>
+        <Select.Content>
+          <Select.Viewport>
+            <Select.Option value='0'>Paragraph</Select.Option>
+            {[1, 2, 3, 4, 5, 6].map((level) => (
+              <Select.Option key={level} value={String(level)}>
+                Heading {level}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
+const MarkdownStyles = () => (
+  <div role='none'>
+    <ToolbarButton Icon={TextB} title='Bold' onClick={() => ({ type: 'bold' })} />
+    <ToolbarButton Icon={TextItalic} title='Italic' onClick={() => ({ type: 'italic' })} />
+    <ToolbarButton Icon={TextStrikethrough} title='Strike-through' onClick={() => ({ type: 'strikethrough' })} />
+  </div>
+);
+
+const MarkdownLists = () => (
+  <div role='none'>
+    <ToolbarButton Icon={ListBullets} title='Bullet list' onClick={() => ({ type: 'list' })} />
+    <ToolbarButton Icon={ListNumbers} title='Numbered list' onClick={() => ({ type: 'list-ordered' })} />
+    <ToolbarButton Icon={ListChecks} title='Task list' onClick={() => ({ type: 'list-tasks' })} />
+  </div>
+);
+
+const MarkdownBlocks = () => (
+  <div role='none'>
+    <ToolbarButton Icon={CaretRight} title='Block quite' onClick={() => ({ type: 'blockquote' })} />
+    <ToolbarButton Icon={Code} title='Code block' onClick={() => ({ type: 'codeblock' })} />
+    <ToolbarButton Icon={Table} title='Table' onClick={() => ({ type: 'table' })} />
+  </div>
+);
+
+const MarkdownLinks = () => (
+  <div role='none'>
+    <ToolbarButton Icon={Link} title='Link' onClick={() => ({ type: 'link' })} />
+    <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
+    <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
+  </div>
+);
+
+const MarkdownStandard = () => (
+  <>
+    <MarkdownHeading />
+    <MarkdownStyles />
+    <MarkdownLists />
+    <MarkdownBlocks />
+    <MarkdownLinks />
+  </>
+);
+
+const MarkdownExtended = () => (
+  <Toolbar.Button Icon={ChatText} title='Create comment' onClick={() => ({ type: 'comment' })} />
+);
+
+export const Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  Separator: ToolbarSeparator,
+  Markdown: MarkdownStandard,
+  Extended: MarkdownExtended,
+};
+
+export { useToolbarContext };

package/src/components/Toolbar/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Toolbar';

package/src/components/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './TextEditor';
+export * from './Toolbar';

package/src/extensions/automerge/automerge.spec.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { render, screen } from '@testing-library/react';
+import chai, { expect } from 'chai';
+import chaiDom from 'chai-dom';
+import get from 'lodash.get';
+import React, { type FC, useEffect, useRef, useState } from 'react';
+import { describe, test } from 'vitest';
+
+import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
+
+import { automerge } from './automerge';
+
+type TestObject = {
+  text: string;
+};
+
+const path = ['text'];
+
+class Generator {
+  constructor(private readonly _handle: DocHandle<TestObject>) {}
+  update(text: string) {
+    this._handle.change((doc: TestObject) => {
+      doc.text = text;
+    });
+  }
+}
+
+const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ handle, generator }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [view, setView] = useState<EditorView>();
+  useEffect(() => {
+    const extensions = [
+      automerge({ handle, path }),
+      EditorView.updateListener.of((update) => {
+        if (view.state.doc.toString() === 'hello!') {
+          // Update editor.
+          update.view.dispatch({ changes: { from: view.state.doc.length - 1, insert: ' world' } });
+        }
+      }),
+    ];
+
+    const view = new EditorView({
+      state: EditorState.create({ doc: get(handle.docSync()!, path), extensions }),
+      parent: ref.current!,
+    });
+
+    setView(view);
+  }, []);
+
+  useEffect(() => {}, [view]);
+
+  return <div ref={ref} />;
+};
+
+chai.use(chaiDom);
+
+describe('Automerge', () => {
+  test('basic sync', () => {
+    const repo = new Repo({ network: [] });
+    const handle = repo.create<TestObject>();
+    const generator = new Generator(handle);
+    render(<Test handle={handle} generator={generator} />);
+    expect(screen.getByRole('textbox')).to.have.text('');
+
+    generator.update('hello!');
+    expect(screen.getByRole('textbox')).to.have.text('hello world!');
+  });
+
+  // TODO(burdon): Test history/undo.
+  // TODO(burdon): https://testing-library.com/docs/react-testing-library/example-intro/
+});

package/src/extensions/automerge/automerge.test.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+describe('Test', () => {
+  test('checks sanity', async () => {
+    expect(true).to.be.true;
+  });
+});