@dxos/react-ui-editor 0.4.8-main.05fda5d → 0.4.8-main.06fa7e4

package/src/components/Toolbar/Toolbar.tsx

@@ -7,11 +7,13 @@ import {
   ChatText,
   Code,
   CodeBlock,
+  Image,
   Link,
   ListBullets,
   ListChecks,
   ListNumbers,
   Paragraph,
+  Quotes,
   TextStrikethrough,
   Table,
   TextB,
@@ -22,24 +24,25 @@ import {
   TextHFive,
   TextHSix,
   TextItalic,
-  Quotes,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 
 import {
   DensityProvider,
   ElevationProvider,
   Select,
-  type ThemedClassName,
   Toolbar as NaturalToolbar,
   Tooltip,
-  type ToolbarToggleGroupItemProps,
+  type ThemedClassName,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
   useTranslation,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { type Formatting } from '../../extensions';
+import { type Action, type ActionType, type Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
@@ -54,33 +57,9 @@ const HeadingIcons: { [key: string]: Icon } = {
   '6': TextHSix,
 };
 
-// TODO(burdon): Revert to string to make extensible?
-export type ActionType =
-  | 'blockquote'
-  | 'strong'
-  | 'codeblock'
-  | 'comment'
-  | 'heading'
-  | 'image'
-  | 'emphasis'
-  | 'code'
-  | 'link'
-  | 'list-bullet'
-  | 'list-ordered'
-  | 'list-task'
-  | 'mention'
-  | 'prompt'
-  | 'strikethrough'
-  | 'table';
-
-export type Action = {
-  type: ActionType;
-  data?: any;
-};
-
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    state: Formatting | null;
+    state: Formatting | undefined;
     onAction?: (action: Action) => void;
   }>
 >;
@@ -111,9 +90,9 @@ type ButtonProps = {
   disabled?: (state: Formatting) => boolean;
 };
 
-type ToolbarButtonProps = ToolbarToggleGroupItemProps & { Icon: Icon };
+type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };
 
-const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
@@ -132,6 +111,27 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   );
 };
 
+type ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };
+
+const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon className={iconStyles} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
 const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 const MarkdownHeading = () => {
@@ -227,7 +227,7 @@ const MarkdownStyles = () => {
       value={markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
     >
       {markdownStyles.map(({ type, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
@@ -235,7 +235,7 @@ const MarkdownStyles = () => {
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -253,14 +253,14 @@ const MarkdownLists = () => {
   return (
     <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ? `list-${state.listStyle}` : ''}>
       {markdownLists.map(({ type, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -292,7 +292,7 @@ const MarkdownBlocks = () => {
   return (
     <NaturalToolbar.ToggleGroup type='single' value={value?.type ?? ''}>
       {markdownBlocks.map(({ type, disabled, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
@@ -300,7 +300,7 @@ const MarkdownBlocks = () => {
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -315,38 +315,80 @@ const MarkdownStandard = () => (
   </>
 );
 
-const MarkdownExtended = () => {
+// TODO(burdon): Make extensible.
+export type MarkdownCustomOptions = {
+  onUpload?: (file: File) => Promise<{ url?: string }>;
+};
+
+const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
+  // https://react-dropzone.js.org/#src
+  const { acceptedFiles, getInputProps, open } = useDropzone({
+    multiple: false,
+    noDrag: true,
+    accept: {
+      'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
+    },
+  });
+
+  useEffect(() => {
+    if (onUpload && acceptedFiles.length) {
+      requestAnimationFrame(async () => {
+        // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
+        const f = acceptedFiles[0];
+        const file = new File([f], f.name, {
+          type: f.type,
+          lastModified: f.lastModified,
+        });
+
+        const { url } = await onUpload(file);
+        if (url) {
+          onAction?.({ type: 'image', data: url });
+        }
+      });
+    }
+  }, [acceptedFiles]);
+
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <NaturalToolbar.Button
-          variant='ghost'
-          data-testid='editor.toolbar.comment'
-          onClick={() => onAction?.({ type: 'comment' })}
-          classNames={buttonStyles}
-        >
-          <ChatText className={iconStyles} />
-          <span className='sr-only'>{t('comment label')}</span>
-        </NaturalToolbar.Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {t('comment label')}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <>
+      <input {...getInputProps()} />
+      <ToolbarButton value='image' Icon={Image} onClick={() => open()}>
+        {t('image label')}
+      </ToolbarButton>
+    </>
+  );
+};
+
+// TODO(burdon): Make extensible.
+const MarkdownActions = () => {
+  const { onAction } = useToolbarContext('MarkdownStyles');
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      {/* TODO(burdon): Toggle readonly state. */}
+      {/* <ToolbarButton value='comment' Icon={BookOpenText} onClick={() => onAction?.({ type: 'comment' })}> */}
+      {/*  {t('comment label')} */}
+      {/* </ToolbarButton> */}
+      <ToolbarButton
+        value='comment'
+        Icon={ChatText}
+        data-testid='editor.toolbar.comment'
+        onClick={() => onAction?.({ type: 'comment' })}
+      >
+        {t('comment label')}
+      </ToolbarButton>
+    </>
   );
 };
 
 export const Toolbar = {
   Root: ToolbarRoot,
-  Button: ToolbarButton,
+  Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
   Markdown: MarkdownStandard,
-  Extended: MarkdownExtended,
+  Custom: MarkdownCustom,
+  Actions: MarkdownActions,
 };
 
 export { useToolbarContext };

package/src/extensions/automerge/automerge.stories.tsx

@@ -9,7 +9,7 @@ import '@preact/signals-react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Repo } from '@dxos/automerge/automerge-repo';
-import { createDocAccessor, Filter } from '@dxos/echo-schema';
+import { createDocAccessor, Filter, DocAccessor } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
@@ -17,9 +17,9 @@ import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { automerge } from './automerge';
-import { DocAccessor } from './defs';
-import { createBasicExtensions, createThemeExtensions, useTextEditor } from '../../hooks';
+import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
+import { createBasicExtensions, createThemeExtensions } from '../factories';
 
 const initialContent = 'Hello world!';
 
@@ -34,21 +34,19 @@ type EditorProps = {
 
 const Editor = ({ source, autoFocus }: EditorProps) => {
   const { themeMode } = useThemeContext();
-  const extensions = useMemo(
-    () => [
-      createBasicExtensions({ placeholder: 'Type here...' }),
-      createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
-      automerge(source),
-    ],
-    [themeMode, source],
+  const { parentRef } = useTextEditor(
+    () => ({
+      doc: DocAccessor.getValue(source),
+      extensions: [
+        createBasicExtensions({ placeholder: 'Type here...' }),
+        createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
+        automerge(source),
+      ],
+      autoFocus,
+    }),
+    [source, themeMode],
   );
 
-  const { parentRef } = useTextEditor({
-    doc: DocAccessor.getValue(source),
-    extensions,
-    autoFocus,
-  });
-
   return <div ref={parentRef} />;
 };
 
@@ -114,7 +112,8 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
 
 export const Default = {};
 
-// TODO(burdon): Feed already added error.
+// TODO(burdon): Error:
+//  chunk-6NX3RPDS.mjs:2021 ControlPipeline#5 Error: invariant violation: Feed already added
 export const WithEcho = {
   decorators: [withTheme],
   render: () => {

package/src/extensions/automerge/automerge.ts

@@ -8,9 +8,10 @@ import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { next as A } from '@dxos/automerge/automerge';
+import { type DocAccessor } from '@dxos/echo-schema';
 
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State, type DocAccessor } from './defs';
+import { updateHeadsEffect, isReconcile, type State } from './defs';
 import { Syncer } from './sync';
 import { Cursor } from '../cursor';
 
@@ -59,16 +60,16 @@ export const automerge = (accessor: DocAccessor): Extension => {
     ViewPlugin.fromClass(
       class {
         constructor(private readonly _view: EditorView) {
-          accessor.handle.addListener('change', this._handleChange.bind(this));
+          accessor.handle.addListener('change', this._handleChange);
         }
 
         destroy() {
-          accessor.handle.removeListener('change', this._handleChange.bind(this));
+          accessor.handle.removeListener('change', this._handleChange);
         }
 
-        _handleChange() {
+        readonly _handleChange = () => {
           syncer.reconcile(this._view, false);
-        }
+        };
       },
     ),
 

package/src/extensions/automerge/cursor.ts

@@ -5,9 +5,9 @@
 import get from 'lodash.get';
 
 import { next as A } from '@dxos/automerge/automerge';
+import { type DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 
-import { type DocAccessor } from './defs';
 import { type CursorConverter } from '../cursor';
 
 export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter => ({

package/src/extensions/automerge/defs.ts

@@ -5,9 +5,8 @@
 //
 
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
-import get from 'lodash.get';
 
-import { type ChangeFn, type ChangeOptions, type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
+import { type Heads, type Prop } from '@dxos/automerge/automerge';
 
 export type State = {
   path: Prop[];
@@ -31,23 +30,3 @@ export const reconcileAnnotation = Annotation.define<boolean>();
 export const isReconcile = (tr: Transaction): boolean => {
   return !!tr.annotation(reconcileAnnotation);
 };
-
-// TODO(burdon): Reconcile with echo.
-export interface DocAccessor<T = any> {
-  handle: IDocHandle<T>;
-  get path(): string[]; // TODO(burdon): Getter or prop?
-}
-
-// TODO(burdon): Reconcile with echo.
-export const DocAccessor = {
-  getValue: (accessor: DocAccessor) => get(accessor.handle, accessor.path),
-};
-
-// TODO(burdon): Reconcile with echo.
-export interface IDocHandle<T = any> {
-  docSync(): Doc<T> | undefined;
-  change(callback: ChangeFn<T>, options?: ChangeOptions<T>): void;
-  changeAt(heads: Heads, callback: ChangeFn<T>, options?: ChangeOptions<T>): string[] | undefined;
-  addListener(event: 'change', listener: () => void): void;
-  removeListener(event: 'change', listener: () => void): void;
-}

package/src/extensions/automerge/index.ts

@@ -3,4 +3,3 @@
 //
 
 export { automerge } from './automerge';
-export { type IDocHandle } from './defs';

package/src/extensions/automerge/sync.ts

@@ -8,16 +8,9 @@ import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
 import { next as A } from '@dxos/automerge/automerge';
+import { type IDocHandle } from '@dxos/echo-schema';
 
-import {
-  getLastHeads,
-  getPath,
-  type IDocHandle,
-  type State,
-  reconcileAnnotation,
-  updateHeads,
-  isReconcile,
-} from './defs';
+import { getLastHeads, getPath, type State, reconcileAnnotation, updateHeads, isReconcile } from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 

package/src/extensions/automerge/update-automerge.ts

@@ -7,8 +7,9 @@
 import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
 import { next as A, type Heads } from '@dxos/automerge/automerge';
+import { type IDocHandle } from '@dxos/echo-schema';
 
-import { type IDocHandle, type State } from './defs';
+import { type State } from './defs';
 
 export const updateAutomerge = (
   field: StateField<State>,

package/src/{hooks → extensions/awareness}/awareness-provider.ts

@@ -9,7 +9,7 @@ import { log } from '@dxos/log';
 import { type Space } from '@dxos/react-client/echo';
 import { type GossipMessage } from '@dxos/react-client/mesh';
 
-import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from '../extensions';
+import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
 
 type ProtocolMessage =
   | {

package/src/extensions/{awareness.ts → awareness/awareness.ts}

@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { Cursor, type CursorConverter } from './cursor';
+import { Cursor, type CursorConverter } from '../cursor';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;

package/src/extensions/awareness/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './awareness';
+export * from './awareness-provider';

package/src/extensions/command/state.ts

@@ -59,8 +59,8 @@ export const commandState = StateField.define<CommandState>({
                       selection: { anchor: pos + action.insert.length },
                     });
                   }
-                  // TODO(burdon): Truncates text if set focus immediately.
-                  setTimeout(() => view.focus());
+                  // NOTE: Truncates text if set focus immediately.
+                  requestAnimationFrame(() => view.focus());
                 });
               },
             };
@@ -74,7 +74,7 @@ export const commandState = StateField.define<CommandState>({
 
     return state;
   },
-  provide: (f) => [showTooltip.from(f, (value) => value.tooltip ?? null)],
+  provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
 });
 
 export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();

package/src/extensions/comments.ts

@@ -13,7 +13,7 @@ import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
 import { Cursor } from './cursor';
-import { type Comment, type Range } from '../hooks';
+import { type Comment, type Range } from './types';
 import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 
@@ -508,12 +508,16 @@ export const focusComment = (view: EditorView, id: string, center = true) => {
 /**
  * Update comments state field.
  */
-export const useComments = (view: EditorView | null, id: string, comments: Comment[] = []) => {
+export const useComments = (view: EditorView | null | undefined, id: string, comments?: Comment[]) => {
   useEffect(() => {
     if (view) {
-      view.dispatch({
-        effects: setComments.of({ id, comments }),
-      });
+      // Check same document.
+      // NOTE: Hook might be called before editor state is updated.
+      if (id === view.state.facet(documentId)) {
+        view.dispatch({
+          effects: setComments.of({ id, comments: comments ?? [] }),
+        });
+      }
     }
   }, [id, view, comments]);
 };

package/src/extensions/cursor.ts

@@ -4,7 +4,7 @@
 
 import { type EditorState, Facet } from '@codemirror/state';
 
-import type { Range } from '../hooks';
+import type { Range } from './types';
 
 /**
  * Converts indexes into the text document into stable peer-independent cursors.

package/src/extensions/dnd.ts

@@ -3,15 +3,37 @@
 //
 
 import type { Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+import { dropCursor, EditorView } from '@codemirror/view';
 
-import { log } from '@dxos/log';
+import { getToken } from '../styles';
 
-// TODO(burdon): DND experiment.
-export const dnd = (): Extension => {
-  return EditorView.domEventHandlers({
-    drop: (event, view) => {
-      log.info('domEventHandlersDrop', { event });
-    },
-  });
+export type DNDOptions = { onDrop?: (view: EditorView, event: { files: FileList }) => void };
+
+const styles = EditorView.baseTheme({
+  '.cm-dropCursor': {
+    borderLeft: `2px solid ${getToken('extend.colors.primary.500')}`,
+    color: getToken('extend.colors.primary.500'),
+    padding: '0 4px',
+  },
+  '.cm-dropCursor:after': {
+    content: '"←"',
+  },
+});
+
+export const dropFile = (options: DNDOptions = {}): Extension => {
+  return [
+    styles,
+    dropCursor(),
+    EditorView.domEventHandlers({
+      drop: (event, view) => {
+        event.preventDefault();
+        const files = event.dataTransfer?.files;
+        const pos = view.posAtCoords(event);
+        if (files?.length && pos !== null) {
+          view.dispatch({ selection: { anchor: pos } });
+          options.onDrop?.(view, { files });
+        }
+      },
+    }),
+  ];
 };

package/src/extensions/doc.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+
+import { invariant } from '@dxos/invariant';
+
+export const documentId = Facet.define<string, string>({
+  combine: (providers) => {
+    invariant(providers.length <= 1);
+    return providers[0];
+  },
+});