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

package/src/components/Toolbar/Toolbar.tsx

@@ -4,6 +4,7 @@
 
 import {
   type Icon,
+  CaretRight,
   ChatText,
   Code,
   CodeBlock,
@@ -22,25 +23,14 @@ import {
   TextHFive,
   TextHSix,
   TextItalic,
-  Quotes,
-  CaretDown,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
 
-import {
-  DensityProvider,
-  ElevationProvider,
-  Select,
-  type ThemedClassName,
-  Toolbar as NaturalToolbar,
-  type ToolbarToggleGroupItemProps,
-  useTranslation,
-} from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
+import { Button, type ButtonProps, DensityProvider, Select } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
 
 import { type Formatting } from '../../extensions';
-import { translationKey } from '../../translations';
 
 const HeadingIcons: { [key: string]: Icon } = {
   '0': Paragraph,
@@ -76,49 +66,61 @@ export type Action = {
   data?: any;
 };
 
-export type ToolbarProps = ThemedClassName<
-  PropsWithChildren<{
-    state: Formatting | null;
-    onAction?: (action: Action) => void;
-  }>
->;
+export type ToolbarProps = PropsWithChildren<{
+  state: Formatting | null;
+  onAction?: (action: Action) => void;
+}>;
 
 const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
 
-const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) => {
+const ToolbarRoot = ({ children, onAction, state }: ToolbarProps) => {
   return (
     <ToolbarContextProvider onAction={onAction} state={state}>
       <DensityProvider density='fine'>
-        <ElevationProvider elevation='chrome'>
-          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto p-1', classNames]}>
-            {children}
-          </NaturalToolbar.Root>
-        </ElevationProvider>
+        <div role='toolbar' className='flex w-full shrink-0 p-1 gap-4 items-center whitespace-nowrap overflow-hidden'>
+          {children}
+        </div>
       </DensityProvider>
     </ToolbarContextProvider>
   );
 };
 
-type ToolbarButtonProps = ToolbarToggleGroupItemProps & {
+type ToolbarButtonProps = {
   Icon: Icon;
-};
+  disable?: (state: Formatting) => boolean;
+  getState?: (state: Formatting) => boolean;
+  onClick: (state: Formatting | null) => Action | undefined;
+} & NonNullable<Pick<ButtonProps, 'title'>>;
 
-const buttonStyles = 'min-bs-0 p-2';
-const iconStyles = getSize(4);
+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 ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   return (
-    <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
-      <Icon className={iconStyles} />
-      <span className='sr-only'>{children}</span>
-    </NaturalToolbar.ToggleGroupItem>
+    <Button
+      variant='ghost'
+      classNames={mx('p-2', active && 'ring-[1px]')}
+      onMouseDown={handleClick}
+      title={title}
+      disabled={disabled}
+    >
+      <Icon className={getSize(5)} />
+    </Button>
   );
 };
 
-const ToolbarSeparator = () => <div role='separator' className='grow' />;
+const ToolbarSeparator = () => <div 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);
@@ -130,16 +132,11 @@ const MarkdownHeading = () => {
       value={value ?? '0'}
       onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
     >
-      <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.TriggerButton>
+        <HeadingIcon className={getSize(5)} />
+      </Select.TriggerButton>
       <Select.Portal>
         <Select.Content>
-          <Select.ScrollUpButton />
           <Select.Viewport>
             <Select.Option value='0'>Paragraph</Select.Option>
             {[1, 2, 3, 4, 5, 6].map((level) => (
@@ -148,117 +145,99 @@ const MarkdownHeading = () => {
               </Select.Option>
             ))}
           </Select.Viewport>
-          <Select.ScrollDownButton />
-          <Select.Arrow />
         </Select.Content>
       </Select.Portal>
     </Select.Root>
   );
 };
 
-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 MarkdownStyles = () => {
-  const { onAction, state } = useToolbarContext('MarkdownStyles');
-  const { t } = useTranslation(translationKey);
-
-  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 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 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 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 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 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 = () => (
+  <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>
+);
 
-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 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 MarkdownStandard = () => (
   <>
@@ -266,19 +245,13 @@ const MarkdownStandard = () => (
     <MarkdownStyles />
     <MarkdownLists />
     <MarkdownBlocks />
+    <MarkdownLinks />
   </>
 );
 
-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>
-  );
-};
+const MarkdownExtended = () => (
+  <Toolbar.Button Icon={ChatText} title='Create comment' onClick={() => ({ type: 'comment' })} />
+);
 
 export const Toolbar = {
   Root: ToolbarRoot,

package/src/extensions/automerge/automerge.ts

@@ -4,14 +4,15 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { StateField, type Extension } from '@codemirror/state';
+import { invertedEffects } from '@codemirror/commands';
+import { StateField, type Extension, type StateEffect } 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 { Syncer } from './sync';
+import { PatchSemaphore } from './semaphore';
 import { Cursor } from '../cursor';
 
 export type AutomergeOptions = {
@@ -54,7 +55,7 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
     },
   });
 
-  const syncer = new Syncer(handle, syncState);
+  const semaphore = new PatchSemaphore(handle, syncState);
 
   return [
     Cursor.converter.of(cursorConverter(handle, path)),
@@ -72,7 +73,7 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
         }
 
         _handleChange() {
-          syncer.reconcile(this._view, false);
+          semaphore.reconcile(this._view);
         }
       },
     ),
@@ -80,8 +81,23 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
     // Reconcile local updates.
     EditorView.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
-        syncer.reconcile(view, true);
+        semaphore.reconcile(view);
       }
     }),
+
+    // 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/{sync.ts → semaphore.ts}

@@ -12,11 +12,11 @@ import { next as A } from '@dxos/automerge/automerge';
 import {
   getLastHeads,
   getPath,
-  type IDocHandle,
-  type State,
+  isReconcile,
   reconcileAnnotation,
   updateHeads,
-  isReconcile,
+  type IDocHandle,
+  type State,
 } 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 Syncer {
-  private _pending = false;
+export class PatchSemaphore {
+  private _inReconcile = false;
 
   // prettier-ignore
   constructor(
@@ -33,44 +33,46 @@ export class Syncer {
     private readonly _state: StateField<State>
   ) {}
 
-  reconcile(view: EditorView, editor: boolean) {
-    // TODO(burdon): Better way to do mutex?
-    if (this._pending) {
-      return;
+  reconcile(view: EditorView) {
+    if (!this._inReconcile) {
+      this._inReconcile = true;
+      this.doReconcile(view);
+      this._inReconcile = false;
     }
-
-    this._pending = true;
-    if (editor) {
-      this.onEditorChange(view);
-    } else {
-      this.onAutomergeChange(view);
-    }
-    this._pending = false;
   }
 
-  onEditorChange(view: EditorView) {
-    // Apply the unreconciled transactions to the document.
-    const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
-    const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
+  private doReconcile(view: EditorView) {
+    const path = getPath(view.state, this._state);
 
-    if (newHeads) {
+    // Get the heads before the unreconciled transactions are applied.
+    const oldHeads = getLastHeads(view.state, this._state);
+    let selection = view.state.selection;
+
+    // First undo all the unreconciled transactions.
+    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);
       view.dispatch({
-        effects: updateHeads(newHeads),
-        annotations: reconcileAnnotation.of(false),
+        changes: inverted,
+        annotations: reconcileAnnotation.of(true),
       });
     }
-  }
 
-  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);
+    // 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()!);
+    }
 
-    const selection = view.state.selection;
-    const path = getPath(view.state, this._state);
+    // Now get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
+    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.docSync()!, oldHeads, newHeads);
     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, editorWithToolbarLayout } from './styles';
+export { getToken } from './styles';
 export * from './themes';
 export * from './util';

package/src/styles/index.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"sync.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/automerge/sync.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,KAAK,EAIX,MAAM,QAAQ,CAAC;AAIhB;;GAEG;AACH,qBAAa,MAAM;IAKf,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,MAAM;IALzB,OAAO,CAAC,QAAQ,CAAS;gBAIN,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC;IAG5C,SAAS,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO;IAe3C,cAAc,CAAC,IAAI,EAAE,UAAU;IAa/B,iBAAiB,CAAC,IAAI,EAAE,UAAU;CAenC"}

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

@@ -1,2 +0,0 @@
-export declare const editorWithToolbarLayout = "fixed inset-0 grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden";
-//# sourceMappingURL=layout.d.ts.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,20 +0,0 @@
-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

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

package/src/styles/layout.ts

@@ -1,6 +0,0 @@
-//
-// 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

@@ -1,25 +0,0 @@
-//
-// 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',
-      },
-    },
-  },
-];