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

package/src/components/Toolbar/Toolbar.tsx

@@ -4,7 +4,6 @@
 
 import {
   type Icon,
-  CaretRight,
   ChatText,
   Code,
   CodeBlock,
@@ -23,14 +22,25 @@ import {
   TextHFive,
   TextHSix,
   TextItalic,
+  Quotes,
+  CaretDown,
 } 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, mx } from '@dxos/react-ui-theme';
+import {
+  DensityProvider,
+  ElevationProvider,
+  Select,
+  type ThemedClassName,
+  Toolbar as NaturalToolbar,
+  type ToolbarToggleGroupItemProps,
+  useTranslation,
+} from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
 
 import { type Formatting } from '../../extensions';
+import { translationKey } from '../../translations';
 
 const HeadingIcons: { [key: string]: Icon } = {
   '0': Paragraph,
@@ -66,61 +76,49 @@ export type Action = {
   data?: any;
 };
 
-export type ToolbarProps = PropsWithChildren<{
-  state: Formatting | null;
-  onAction?: (action: Action) => void;
-}>;
+export type ToolbarProps = ThemedClassName<
+  PropsWithChildren<{
+    state: Formatting | null;
+    onAction?: (action: Action) => void;
+  }>
+>;
 
 const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
 
-const ToolbarRoot = ({ children, onAction, state }: ToolbarProps) => {
+const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) => {
   return (
     <ToolbarContextProvider onAction={onAction} state={state}>
       <DensityProvider density='fine'>
-        <div role='toolbar' className='flex w-full shrink-0 p-1 gap-4 items-center whitespace-nowrap overflow-hidden'>
-          {children}
-        </div>
+        <ElevationProvider elevation='chrome'>
+          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto p-1', classNames]}>
+            {children}
+          </NaturalToolbar.Root>
+        </ElevationProvider>
       </DensityProvider>
     </ToolbarContextProvider>
   );
 };
 
-type ToolbarButtonProps = {
+type ToolbarButtonProps = ToolbarToggleGroupItemProps & {
   Icon: Icon;
-  disable?: (state: Formatting) => boolean;
-  getState?: (state: Formatting) => boolean;
-  onClick: (state: Formatting | null) => Action | undefined;
-} & NonNullable<Pick<ButtonProps, 'title'>>;
-
-const ToolbarButton = ({ Icon, onClick, title, getState, disable }: ToolbarButtonProps) => {
-  const { onAction, state } = useToolbarContext('ToolbarButton');
-  const active = getState && state ? getState(state) : false;
-  const disabled = disable && state ? disable(state) : false;
+};
 
-  const handleClick = (event: React.MouseEvent) => {
-    const action = onClick(state);
-    if (action) {
-      onAction?.(action);
-      event.preventDefault();
-    }
-  };
+const buttonStyles = 'min-bs-0 p-2';
+const iconStyles = getSize(4);
 
+const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   return (
-    <Button
-      variant='ghost'
-      classNames={mx('p-2', active && 'ring-[1px]')}
-      onMouseDown={handleClick}
-      title={title}
-      disabled={disabled}
-    >
-      <Icon className={getSize(5)} />
-    </Button>
+    <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
+      <Icon className={iconStyles} />
+      <span className='sr-only'>{children}</span>
+    </NaturalToolbar.ToggleGroupItem>
   );
 };
 
-const ToolbarSeparator = () => <div className='grow' />;
+const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 const MarkdownHeading = () => {
+  const { t } = useTranslation(translationKey);
   const { onAction, state } = useToolbarContext('MarkdownFormatting');
   const blockType = state ? state.blockType : 'paragraph';
   const header = blockType && /heading(\d)/.exec(blockType);
@@ -132,11 +130,16 @@ const MarkdownHeading = () => {
       value={value ?? '0'}
       onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
     >
-      <Select.TriggerButton>
-        <HeadingIcon className={getSize(5)} />
-      </Select.TriggerButton>
+      <Select.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' classNames={buttonStyles}>
+          <span className='sr-only'>{t('heading label')}</span>
+          <HeadingIcon className={iconStyles} />
+          <CaretDown className={getSize(2)} weight='bold' />
+        </NaturalToolbar.Button>
+      </Select.Trigger>
       <Select.Portal>
         <Select.Content>
+          <Select.ScrollUpButton />
           <Select.Viewport>
             <Select.Option value='0'>Paragraph</Select.Option>
             {[1, 2, 3, 4, 5, 6].map((level) => (
@@ -145,99 +148,117 @@ const MarkdownHeading = () => {
               </Select.Option>
             ))}
           </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
         </Select.Content>
       </Select.Portal>
     </Select.Root>
   );
 };
 
-const MarkdownStyles = () => (
-  <div role='none'>
-    <ToolbarButton
-      Icon={TextB}
-      title='String'
-      disable={(s) => s.blockType === 'codeblock'}
-      getState={(s) => s.strong}
-      onClick={(s) => ({ type: 'strong', data: s ? !s.strong : null })}
-    />
-    <ToolbarButton
-      Icon={TextItalic}
-      title='Emphasis'
-      disable={(s) => s.blockType === 'codeblock'}
-      getState={(s) => s.emphasis}
-      onClick={(s) => ({ type: 'emphasis', data: s ? !s.emphasis : null })}
-    />
-    <ToolbarButton
-      Icon={TextStrikethrough}
-      title='Strike-through'
-      disable={(s) => s.blockType === 'codeblock'}
-      getState={(s) => s.strikethrough}
-      onClick={(s) => ({ type: 'strikethrough', data: s ? !s.strikethrough : null })}
-    />
-    <ToolbarButton
-      Icon={Code}
-      title='Inline code'
-      disable={(s) => s.blockType === 'codeblock'}
-      getState={(s) => s.code}
-      onClick={(s) => ({ type: 'code', data: s ? !s.code : null })}
-    />
-  </div>
-);
+const markdownStyles = [
+  { key: 'strong' as const, Icon: TextB },
+  { key: 'emphasis' as const, Icon: TextItalic },
+  { key: 'strikethrough' as const, Icon: TextStrikethrough },
+  { key: 'code' as const, Icon: Code },
+  { key: 'link' as const, Icon: Link },
+  // <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
+  // <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
+];
 
-const MarkdownLists = () => (
-  <div role='none'>
-    <ToolbarButton
-      Icon={ListBullets}
-      title='Bullet list'
-      getState={(s) => s.listStyle === 'bullet'}
-      onClick={(s) => ({ type: 'list-bullet', data: s ? s.listStyle !== 'bullet' : null })}
-    />
-    <ToolbarButton
-      Icon={ListNumbers}
-      title='Numbered list'
-      getState={(s) => s.listStyle === 'ordered'}
-      onClick={(s) => ({ type: 'list-ordered', data: s ? s.listStyle !== 'ordered' : null })}
-    />
-    <ToolbarButton
-      Icon={ListChecks}
-      title='Task list'
-      getState={(s) => s.listStyle === 'task'}
-      onClick={(s) => ({ type: 'list-tasks', data: s ? s.listStyle !== 'task' : null })}
-    />
-  </div>
-);
+const MarkdownStyles = () => {
+  const { onAction, state } = useToolbarContext('MarkdownStyles');
+  const { t } = useTranslation(translationKey);
 
-const MarkdownBlocks = () => (
-  <div role='none'>
-    <ToolbarButton
-      Icon={CaretRight}
-      title='Block quote'
-      getState={(s) => s.blockQuote}
-      onClick={(s) => ({ type: 'blockquote', data: s ? !s.blockQuote : null })}
-    />
-    <ToolbarButton
-      Icon={CodeBlock}
-      title='Code block'
-      disable={(s) => !s.blankLine}
-      getState={(s) => s.blockType === 'codeblock'}
-      onClick={(s) => ({ type: 'codeblock', data: s ? s.blockType !== 'codeblock' : null })}
-    />
-    <ToolbarButton Icon={Table} title='Table' disable={(s) => !s.blankLine} onClick={() => ({ type: 'table' })} />
-  </div>
-);
+  return (
+    <NaturalToolbar.ToggleGroup
+      type='multiple'
+      value={markdownStyles.filter(({ key }) => !!state?.[key]).map(({ key }) => key)}
+    >
+      {markdownStyles.map(({ key, Icon }) => (
+        <ToolbarButton
+          key={key}
+          value={key}
+          Icon={Icon}
+          disabled={state?.blockType === 'codeblock'}
+          onClick={() => onAction?.({ type: key, data: state ? !state[key] : null })}
+        >
+          {t(`${key} label`)}
+        </ToolbarButton>
+      ))}
+    </NaturalToolbar.ToggleGroup>
+  );
+};
 
-const MarkdownLinks = () => (
-  <div role='none'>
-    <ToolbarButton
-      Icon={Link}
-      title='Link'
-      getState={(s) => s.link}
-      onClick={(s) => ({ type: 'link', data: s ? !s.link : null })}
-    />
-    {/* <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} /> */}
-    {/* <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} /> */}
-  </div>
-);
+const markdownLists = [
+  { key: 'bullet' as const, Icon: ListBullets, actionType: 'list-bullet' as const },
+  { key: 'ordered' as const, Icon: ListNumbers, actionType: 'list-ordered' as const },
+  { key: 'task' as const, Icon: ListChecks, actionType: 'list-tasks' as const },
+];
+
+const MarkdownLists = () => {
+  const { onAction, state } = useToolbarContext('MarkdownStyles');
+  const { t } = useTranslation(translationKey);
+  return (
+    <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ?? undefined}>
+      {markdownLists.map(({ key, Icon, actionType }) => (
+        <ToolbarButton
+          key={key}
+          value={key}
+          Icon={Icon}
+          onClick={() => onAction?.({ type: actionType, data: state ? state.listStyle !== key : null })}
+        >
+          {t(`${key} label`)}
+        </ToolbarButton>
+      ))}
+    </NaturalToolbar.ToggleGroup>
+  );
+};
+
+const markdownBlocks = [
+  {
+    key: 'blockquote' as const,
+    Icon: Quotes,
+    pressed: (state: Formatting | null) => state?.blockQuote,
+    action: (state: Formatting | null) => ({ type: 'blockquote' as const, data: state ? !state.blockQuote : null }),
+    disabled: (state: Formatting | null) => false,
+  },
+  {
+    key: 'codeblock' as const,
+    Icon: CodeBlock,
+    pressed: (state: Formatting | null) => state?.blockType === 'codeblock',
+    action: (state: Formatting | null) => ({ type: 'blockquote' as const, data: state ? !state.blockQuote : null }),
+    disabled: (state: Formatting | null) => !state?.blankLine,
+  },
+];
+
+const MarkdownBlocks = () => {
+  const { onAction, state } = useToolbarContext('MarkdownStyles');
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      <NaturalToolbar.ToggleGroup
+        type='multiple'
+        value={markdownBlocks.filter(({ pressed }) => pressed(state)).map(({ key }) => key)}
+      >
+        {markdownBlocks.map(({ key, Icon, action }) => (
+          <ToolbarButton key={key} value={key} Icon={Icon} onClick={() => onAction?.(action(state))}>
+            {t(`${key} label`)}
+          </ToolbarButton>
+        ))}
+      </NaturalToolbar.ToggleGroup>
+      <NaturalToolbar.Button
+        variant='ghost'
+        disabled={!state?.blankLine}
+        onClick={() => onAction?.({ type: 'table' })}
+        classNames={buttonStyles}
+      >
+        <Table className={iconStyles} />
+        <span className='sr-only'>{t('table label')}</span>
+      </NaturalToolbar.Button>
+    </>
+  );
+};
 
 const MarkdownStandard = () => (
   <>
@@ -245,13 +266,19 @@ const MarkdownStandard = () => (
     <MarkdownStyles />
     <MarkdownLists />
     <MarkdownBlocks />
-    <MarkdownLinks />
   </>
 );
 
-const MarkdownExtended = () => (
-  <Toolbar.Button Icon={ChatText} title='Create comment' onClick={() => ({ type: 'comment' })} />
-);
+const MarkdownExtended = () => {
+  const { onAction } = useToolbarContext('MarkdownStyles');
+  const { t } = useTranslation(translationKey);
+  return (
+    <NaturalToolbar.Button variant='ghost' onClick={() => onAction?.({ type: 'comment' })} classNames={buttonStyles}>
+      <ChatText className={iconStyles} />
+      <span className='sr-only'>{t('comment label')}</span>
+    </NaturalToolbar.Button>
+  );
+};
 
 export const Toolbar = {
   Root: ToolbarRoot,

package/src/extensions/automerge/automerge.ts

@@ -4,15 +4,14 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { invertedEffects } from '@codemirror/commands';
-import { StateField, type Extension, type StateEffect } from '@codemirror/state';
+import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { next as A, type Prop } from '@dxos/automerge/automerge';
 
 import { cursorConverter } from './cursor';
 import { updateHeadsEffect, type IDocHandle, isReconcile, type State } from './defs';
-import { PatchSemaphore } from './semaphore';
+import { Syncer } from './sync';
 import { Cursor } from '../cursor';
 
 export type AutomergeOptions = {
@@ -55,7 +54,7 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
     },
   });
 
-  const semaphore = new PatchSemaphore(handle, syncState);
+  const syncer = new Syncer(handle, syncState);
 
   return [
     Cursor.converter.of(cursorConverter(handle, path)),
@@ -73,7 +72,7 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
         }
 
         _handleChange() {
-          semaphore.reconcile(this._view);
+          syncer.reconcile(this._view, false);
         }
       },
     ),
@@ -81,23 +80,8 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
     // Reconcile local updates.
     EditorView.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
-        semaphore.reconcile(view);
+        syncer.reconcile(view, true);
       }
     }),
-
-    // TODO(burdon): Record undo transactions.
-    //  See https://github.com/yjs/y-codemirror.next/tree/main
-    // https://codemirror.net/examples/inverted-effect
-    invertedEffects.of((tr) => {
-      // Each change results it three transactions: insert, delete, insert.
-      const effects: StateEffect<any>[] = [];
-      if (!tr.changes.empty) {
-        tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
-          // effects.push(effectType.of({});
-        });
-      }
-
-      return effects;
-    }),
   ];
 };

package/src/extensions/automerge/{semaphore.ts → sync.ts}

@@ -12,11 +12,11 @@ import { next as A } from '@dxos/automerge/automerge';
 import {
   getLastHeads,
   getPath,
-  isReconcile,
-  reconcileAnnotation,
-  updateHeads,
   type IDocHandle,
   type State,
+  reconcileAnnotation,
+  updateHeads,
+  isReconcile,
 } from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
@@ -24,8 +24,8 @@ import { updateCodeMirror } from './update-codemirror';
 /**
  * Implements three-way merge (on each mutation).
  */
-export class PatchSemaphore {
-  private _inReconcile = false;
+export class Syncer {
+  private _pending = false;
 
   // prettier-ignore
   constructor(
@@ -33,46 +33,44 @@ export class PatchSemaphore {
     private readonly _state: StateField<State>
   ) {}
 
-  reconcile(view: EditorView) {
-    if (!this._inReconcile) {
-      this._inReconcile = true;
-      this.doReconcile(view);
-      this._inReconcile = false;
+  reconcile(view: EditorView, editor: boolean) {
+    // TODO(burdon): Better way to do mutex?
+    if (this._pending) {
+      return;
     }
-  }
-
-  private doReconcile(view: EditorView) {
-    const path = getPath(view.state, this._state);
 
-    // Get the heads before the unreconciled transactions are applied.
-    const oldHeads = getLastHeads(view.state, this._state);
-    let selection = view.state.selection;
+    this._pending = true;
+    if (editor) {
+      this.onEditorChange(view);
+    } else {
+      this.onAutomergeChange(view);
+    }
+    this._pending = false;
+  }
 
-    // First undo all the unreconciled transactions.
+  onEditorChange(view: EditorView) {
+    // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
-    const toInvert = transactions.slice().reverse();
-    for (const tr of toInvert) {
-      const inverted = tr.changes.invert(tr.startState.doc);
-      selection = selection.map(inverted);
+    const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
+
+    if (newHeads) {
       view.dispatch({
-        changes: inverted,
-        annotations: reconcileAnnotation.of(true),
+        effects: updateHeads(newHeads),
+        annotations: reconcileAnnotation.of(false),
       });
     }
+  }
 
-    // Apply the unreconciled transactions to the document.
-    // NOTE: null and undefined each come from automerge and repo respectively.
-    let newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
-    if (newHeads === null || newHeads === undefined) {
-      // TODO(alexjg): this is the call that's resetting the editor state on click.
-      newHeads = A.getHeads(this._handle.docSync()!);
-    }
-
-    // Now get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
+  onAutomergeChange(view: EditorView) {
+    // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
+    const oldHeads = getLastHeads(view.state, this._state);
+    const newHeads = A.getHeads(this._handle.docSync()!);
     const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.docSync()!, oldHeads, newHeads);
+
+    const selection = view.state.selection;
+    const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
 
-    // Update automerge state.
     view.dispatch({
       effects: updateHeads(newHeads),
       annotations: reconcileAnnotation.of(false),

package/src/index.ts

@@ -10,6 +10,6 @@ export { type EditorView, keymap } from '@codemirror/view';
 export * from './components';
 export * from './extensions';
 export * from './hooks';
-export { getToken } from './styles';
+export { getToken, editorWithToolbarLayout } from './styles';
 export * from './themes';
 export * from './util';

package/src/styles/index.ts

@@ -5,3 +5,4 @@
 export * from './cursors';
 export * from './markdown';
 export * from './tokens';
+export * from './layout';

package/src/styles/layout.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export const editorWithToolbarLayout =
+  'fixed inset-0 grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden';

package/src/translations.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const translationKey = 'react-ui-editor';
+
+export default [
+  {
+    'en-US': {
+      [translationKey]: {
+        'strong label': 'Strong',
+        'emphasis label': 'Emphasis',
+        'strikethrough label': 'Strike-through',
+        'code label': 'Code',
+        'bullet label': 'Bullet list',
+        'ordered label': 'Numbered list',
+        'task label': 'Task list',
+        'blockquote label': 'Block quote',
+        'codeblock label': 'Code block',
+        'comment label': 'Create comment',
+        'heading label': 'Heading level',
+      },
+    },
+  },
+];

package/dist/types/src/extensions/automerge/semaphore.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"semaphore.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/automerge/semaphore.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD,OAAO,EAML,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,QAAQ,CAAC;AAIhB;;GAEG;AACH,qBAAa,cAAc;IAKvB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,MAAM;IALzB,OAAO,CAAC,YAAY,CAAS;gBAIV,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC;IAG5C,SAAS,CAAC,IAAI,EAAE,UAAU;IAQ1B,OAAO,CAAC,WAAW;CAqCpB"}