@dxos/react-ui-editor 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -0,0 +1,106 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type NodeArg } from '@dxos/app-graph';
+import { ElevationProvider } from '@dxos/react-ui';
+import {
+  ToolbarMenu,
+  MenuProvider,
+  type MenuActionHandler,
+  useMenuActions,
+  createGapSeparator,
+} from '@dxos/react-ui-menu';
+import { textBlockWidth } from '@dxos/react-ui-theme';
+
+import { createBlocks } from './blocks';
+import { createComment } from './comment';
+import { createFormatting } from './formatting';
+import { createHeadings } from './headings';
+import { createLists } from './lists';
+import {
+  type EditorToolbarActionGraphProps,
+  type EditorToolbarFeatureFlags,
+  type EditorToolbarProps,
+  editorToolbarSearch,
+} from './util';
+import { createViewMode } from './viewMode';
+import { stackItemContentToolbarClassNames } from '../../styles/stack-item-content-class-names';
+
+const createToolbar = ({
+  state,
+  customActions,
+  ...features
+}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'state' | 'customActions'>): {
+  nodes: NodeArg<any>[];
+  edges: { source: string; target: string }[];
+} => {
+  const nodes = [];
+  const edges = [];
+  if (features.headings ?? true) {
+    const headings = createHeadings(state);
+    nodes.push(...headings.nodes);
+    edges.push(...headings.edges);
+  }
+  if (features.formatting ?? true) {
+    const formatting = createFormatting(state);
+    nodes.push(...formatting.nodes);
+    edges.push(...formatting.edges);
+  }
+  if (features.lists ?? true) {
+    const lists = createLists(state);
+    nodes.push(...lists.nodes);
+    edges.push(...lists.edges);
+  }
+  if (features.blocks ?? true) {
+    const blocks = createBlocks(state);
+    nodes.push(...blocks.nodes);
+    edges.push(...blocks.edges);
+  }
+  if (customActions) {
+    const custom = customActions();
+    nodes.push(...custom.nodes);
+    edges.push(...custom.edges);
+  }
+  const editorToolbarGap = createGapSeparator();
+  nodes.push(...editorToolbarGap.nodes);
+  edges.push(...editorToolbarGap.edges);
+  if (features.comment ?? true) {
+    const comment = createComment(state);
+    nodes.push(...comment.nodes);
+    edges.push(...comment.edges);
+  }
+  if (features.search ?? true) {
+    nodes.push(editorToolbarSearch);
+    edges.push({ source: 'root', target: editorToolbarSearch.id });
+  }
+  if (features.viewMode ?? true) {
+    const viewMode = createViewMode(state);
+    nodes.push(...viewMode.nodes);
+    edges.push(...viewMode.edges);
+  }
+  return { nodes, edges };
+};
+
+const useEditorToolbarActionGraph = ({ onAction, ...props }: EditorToolbarProps) => {
+  const menuCreator = useCallback(() => createToolbar(props), [props]);
+
+  const { resolveGroupItems } = useMenuActions(menuCreator);
+
+  return { resolveGroupItems, onAction: onAction as MenuActionHandler };
+};
+
+export const EditorToolbar = ({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
+  const menuProps = useEditorToolbarActionGraph(props);
+  return (
+    <div role='none' className={stackItemContentToolbarClassNames(role)}>
+      <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+        <MenuProvider {...menuProps} attendableId={attendableId}>
+          <ToolbarMenu classNames={[textBlockWidth, '!bg-transparent', classNames]} />
+        </MenuProvider>
+      </ElevationProvider>
+    </div>
+  );
+};

package/src/components/EditorToolbar/blocks.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type NodeArg } from '@dxos/app-graph';
+import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+
+import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { type PayloadType } from '../../extensions';
+
+const createBlockGroupAction = (value: string) =>
+  createEditorActionGroup('block', {
+    variant: 'toggleGroup',
+    selectCardinality: 'single',
+    value,
+  } as ToolbarMenuActionGroupProperties);
+
+const createBlockActions = (value: string, blankLine?: boolean) =>
+  Object.entries({
+    blockquote: 'ph--quotes--regular',
+    codeblock: 'ph--code-block--regular',
+    table: 'ph--table--regular',
+  }).map(([type, icon]) => {
+    return createEditorAction(
+      { type: type as PayloadType, checked: type === value, ...(type === 'table' && { disabled: !!blankLine }) },
+      icon,
+    );
+  });
+
+export const createBlocks = (state: EditorToolbarState) => {
+  const value = state?.blockQuote ? 'blockquote' : state.blockType ?? '';
+  const blockGroupAction = createBlockGroupAction(value);
+  const blockActions = createBlockActions(value, state.blankLine);
+  return {
+    nodes: [blockGroupAction as NodeArg<any>, ...blockActions],
+    edges: [
+      { source: 'root', target: 'block' },
+      ...blockActions.map(({ id }) => ({ source: blockGroupAction.id, target: id })),
+    ],
+  };
+};

package/src/components/EditorToolbar/comment.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Label } from '@dxos/react-ui';
+
+import { createEditorAction, type EditorToolbarState } from './util';
+import { translationKey } from '../../translations';
+
+const commentLabel = (comment?: boolean, selection?: boolean) =>
+  comment
+    ? 'selection overlaps existing comment label'
+    : selection === false
+      ? 'select text to comment label'
+      : 'comment label';
+
+const createCommentAction = (label: Label) =>
+  createEditorAction({ type: 'comment', testId: 'editor.toolbar.comment' }, 'ph--chat-text--regular', label);
+
+export const createComment = (state: EditorToolbarState) => ({
+  nodes: [createCommentAction([commentLabel(state.comment, state.selection), { ns: translationKey }])],
+  edges: [{ source: 'root', target: 'comment' }],
+});

package/src/components/EditorToolbar/formatting.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type NodeArg } from '@dxos/app-graph';
+import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+
+import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { type Formatting, type PayloadType } from '../../extensions';
+
+const formats = {
+  strong: 'ph--text-b--regular',
+  emphasis: 'ph--text-italic--regular',
+  strikethrough: 'ph--text-strikethrough--regular',
+  code: 'ph--code--regular',
+  link: 'ph--link--regular',
+};
+
+const createFormattingGroup = (formatting: Formatting) =>
+  createEditorActionGroup('formatting', {
+    variant: 'toggleGroup',
+    selectCardinality: 'multiple',
+    value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
+  } as ToolbarMenuActionGroupProperties);
+
+const createFormattingActions = (formatting: Formatting) =>
+  Object.entries(formats).map(([type, icon]) =>
+    createEditorAction({ type: type as PayloadType, checked: !!formatting[type as keyof Formatting] }, icon),
+  );
+
+export const createFormatting = (state: EditorToolbarState) => {
+  const formattingGroupAction = createFormattingGroup(state);
+  const formattingActions = createFormattingActions(state);
+  return {
+    nodes: [formattingGroupAction as NodeArg<any>, ...formattingActions],
+    edges: [
+      { source: 'root', target: 'formatting' },
+      ...formattingActions.map(({ id }) => ({ source: formattingGroupAction.id, target: id })),
+    ],
+  };
+};

package/src/components/EditorToolbar/headings.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type NodeArg } from '@dxos/app-graph';
+import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+
+import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { translationKey } from '../../translations';
+
+const createHeadingGroupAction = (value: string) =>
+  createEditorActionGroup(
+    'heading',
+    {
+      variant: 'dropdownMenu',
+      applyActive: true,
+      selectCardinality: 'single',
+      value,
+    } as ToolbarMenuActionGroupProperties,
+    'ph--text-h--regular',
+  );
+
+const createHeadingActions = (value: string) =>
+  Object.entries({
+    '0': 'ph--paragraph--regular',
+    '1': 'ph--text-h-one--regular',
+    '2': 'ph--text-h-two--regular',
+    '3': 'ph--text-h-three--regular',
+    '4': 'ph--text-h-four--regular',
+    '5': 'ph--text-h-five--regular',
+    '6': 'ph--text-h-six--regular',
+  }).map(([levelStr, icon]) => {
+    const level = parseInt(levelStr);
+    return createEditorAction(
+      { type: 'heading', data: level, checked: value === levelStr },
+      icon,
+      ['heading level label', { count: level, ns: translationKey }],
+      `heading--${levelStr}`,
+    );
+  });
+
+const computeHeadingValue = (state: EditorToolbarState) => {
+  const blockType = state ? state.blockType : 'paragraph';
+  const header = blockType && /heading(\d)/.exec(blockType);
+  return header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : '';
+};
+
+export const createHeadings = (state: EditorToolbarState) => {
+  const headingValue = computeHeadingValue(state);
+  const headingGroupAction = createHeadingGroupAction(headingValue);
+  const headingActions = createHeadingActions(headingValue);
+  return {
+    nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
+    edges: [
+      { source: 'root', target: 'heading' },
+      ...headingActions.map(({ id }) => ({ source: headingGroupAction.id, target: id })),
+    ],
+  };
+};

package/src/components/EditorToolbar/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './EditorToolbar';
+export { type EditorToolbarState, useEditorToolbarState, createEditorAction, createEditorActionGroup } from './util';

package/src/components/EditorToolbar/lists.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type NodeArg } from '@dxos/app-graph';
+import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+
+import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { type PayloadType } from '../../extensions';
+
+const listStyles = {
+  bullet: 'ph--list-bullets--regular',
+  ordered: 'ph--list-numbers--regular',
+  task: 'ph--list-checks--regular',
+};
+
+const createListGroupAction = (value: string) =>
+  createEditorActionGroup('list', {
+    variant: 'toggleGroup',
+    selectCardinality: 'single',
+    value,
+  } as ToolbarMenuActionGroupProperties);
+
+const createListActions = (value: string) =>
+  Object.entries(listStyles).map(([listStyle, icon]) =>
+    createEditorAction({ type: `list-${listStyle}` as PayloadType, checked: value === listStyle }, icon),
+  );
+
+export const createLists = (state: EditorToolbarState) => {
+  const value = state.listStyle ?? '';
+  const listGroupAction = createListGroupAction(value);
+  const listActionsMap = createListActions(value);
+  return {
+    nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
+    edges: [
+      { source: 'root', target: 'list' },
+      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
+    ],
+  };
+};

package/src/components/EditorToolbar/util.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { create, type ReactiveObject } from '@dxos/live-object';
+import { type Label, type ThemedClassName } from '@dxos/react-ui';
+import {
+  type MenuSeparator,
+  type MenuItemGroup,
+  type ToolbarMenuActionGroupProperties,
+  type MenuActionProperties,
+  createMenuAction,
+  createMenuItemGroup,
+  type ActionGraphProps,
+} from '@dxos/react-ui-menu';
+
+import type { EditorAction, EditorActionPayload, EditorViewMode, Formatting } from '../../extensions';
+import { translationKey } from '../../translations';
+
+export type EditorToolbarState = Formatting &
+  Partial<{ comment: boolean; viewMode: EditorViewMode; selection: boolean }>;
+
+export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
+  return useMemo(() => create<EditorToolbarState>(initialState), []);
+};
+
+export type EditorToolbarFeatureFlags = Partial<{
+  headings: boolean;
+  formatting: boolean;
+  lists: boolean;
+  blocks: boolean;
+  comment: boolean;
+  search: boolean;
+  viewMode: boolean;
+}>;
+
+export type EditorToolbarActionGraphProps = {
+  state: ReactiveObject<EditorToolbarState>;
+  // TODO(wittjosiah): Control positioning.
+  customActions?: () => ActionGraphProps;
+  onAction: (action: EditorAction) => void;
+};
+
+export type EditorToolbarProps = ThemedClassName<
+  EditorToolbarActionGraphProps & EditorToolbarFeatureFlags & { attendableId?: string; role?: string }
+>;
+
+export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
+
+export const createEditorAction = (
+  payload: EditorActionPayload & Partial<MenuActionProperties>,
+  icon: string,
+  label: Label = [`${payload.type} label`, { ns: translationKey }],
+  id: string = payload.type,
+) => createMenuAction(id, { icon, label, ...payload }) as EditorAction;
+
+export const createEditorActionGroup = (
+  id: string,
+  props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
+  icon?: string,
+) => createMenuItemGroup(id, { icon, iconOnly: true, ...props });
+
+export const editorToolbarSearch = createEditorAction({ type: 'search' }, 'ph--magnifying-glass--regular');

package/src/components/EditorToolbar/viewMode.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type NodeArg } from '@dxos/app-graph';
+import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+
+import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { translationKey } from '../../translations';
+
+const createViewModeGroupAction = (value: string) =>
+  createEditorActionGroup(
+    'viewMode',
+    {
+      variant: 'dropdownMenu',
+      applyActive: true,
+      selectCardinality: 'single',
+      value,
+    } as ToolbarMenuActionGroupProperties,
+    'ph--eye--regular',
+  );
+
+const createViewModeActions = (value: string) =>
+  Object.entries({
+    preview: 'ph--eye--regular',
+    source: 'ph--pencil-simple--regular',
+    readonly: 'ph--pencil-slash--regular',
+  }).map(([viewMode, icon]) => {
+    return createEditorAction(
+      { type: 'view-mode', data: viewMode, checked: viewMode === value },
+      icon,
+      [`${viewMode} mode label`, { ns: translationKey }],
+      `view-mode--${viewMode}`,
+    );
+  });
+
+export const createViewMode = (state: EditorToolbarState) => {
+  const value = state.viewMode ?? 'source';
+  const viewModeGroupAction = createViewModeGroupAction(value);
+  const viewModeActions = createViewModeActions(value);
+  return {
+    nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
+    edges: [
+      { source: 'root', target: 'viewMode' },
+      ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id })),
+    ],
+  };
+};

package/src/components/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './Toolbar';
+export * from './EditorToolbar';

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

@@ -74,12 +74,12 @@ const Story = () => {
       const repo1 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
       const repo2 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
 
-      const object1 = repo1.create();
+      const object1 = repo1.create<TestObject>();
       object1.change((doc: TestObject) => {
         doc.text = initialContent;
       });
 
-      const object2 = repo2.find(object1.url);
+      const object2 = repo2.find<TestObject>(object1.url);
       await object2.whenReady();
 
       setObject1({ handle: object1, path: ['text'] });

package/src/extensions/comments.ts

@@ -22,13 +22,15 @@ import {
   ViewPlugin,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { debounce, type UnsubscribeCallback } from '@dxos/async';
+import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
-import { nonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 import { documentId } from './selection';
+import { type EditorToolbarState } from '../components';
 import { type Comment, type Range } from '../types';
 import { Cursor, overlap, singleValueFacet, callbackWrapper } from '../util';
 
@@ -85,7 +87,7 @@ export const commentsState = StateField.define<CommentsState>({
             const range = Cursor.getRangeFromCursor(tr.state, comment.cursor);
             return range && { comment, range };
           })
-          .filter(nonNullable);
+          .filter(isNonNullable);
 
         return { ...value, comments: commentStates };
       }
@@ -149,7 +151,7 @@ const commentsDecorations = EditorView.decorations.compute([commentsState], (sta
       const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
       return mark.range(range.from, range.to);
     })
-    .filter(nonNullable);
+    .filter(isNonNullable);
 
   return Decoration.set(decorations);
 });
@@ -505,7 +507,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     }),
 
     options.onUpdate && trackPastedComments(options.onUpdate),
-  ].filter(nonNullable);
+  ].filter(isNonNullable);
 };
 
 //
@@ -608,26 +610,17 @@ export const createExternalCommentSync = (
     },
   );
 
-export const useCommentState = (): [{ comment: boolean; selection: boolean }, Extension] => {
-  const [state, setState] = useState<{ comment: boolean; selection: boolean }>({
-    comment: false,
-    selection: false,
-  });
-
-  const observer = useMemo(
+export const useCommentState = (state: ReactiveObject<EditorToolbarState>): Extension => {
+  return useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
-          setState({
-            comment: selectionOverlapsComment(update.state),
-            selection: hasActiveSelection(update.state),
-          });
+          state.comment = selectionOverlapsComment(update.state);
+          state.selection = hasActiveSelection(update.state);
         }
       }),
-    [],
+    [state],
   );
-
-  return [state, observer];
 };
 
 /**

package/src/extensions/factories.ts

@@ -27,7 +27,7 @@ import { log } from '@dxos/log';
 import { type DocAccessor, type Space } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
 import { type ThemeMode } from '@dxos/react-ui';
-import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
+import { type HuePalette } from '@dxos/react-ui-theme';
 import { hexToHue, isNotFalsy } from '@dxos/util';
 
 import { automerge } from './automerge';
@@ -124,6 +124,13 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
         ...(props.history ? historyKeymap : []),
         // https://codemirror.net/docs/ref/#search.searchKeymap
         ...(props.search ? searchKeymap : []),
+        // Disable bindings that conflict with system shortcuts.
+        // TODO(burdon): Catalog global shortcuts.
+        {
+          key: 'Mod-Shift-k',
+          preventDefault: true,
+          run: () => true,
+        },
       ].filter(isNotFalsy),
     ),
   ].filter(isNotFalsy);
@@ -194,8 +201,7 @@ export const createDataExtensions = <T>({ id, text, space, identity }: DataExten
 
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
-    const { cursorLightValue, cursorDarkValue } =
-      hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
+    const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
 
     extensions.push(
       awareness(
@@ -205,8 +211,8 @@ export const createDataExtensions = <T>({ id, text, space, identity }: DataExten
           peerId: identity.identityKey.toHex(),
           info: {
             displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-            darkColor: cursorDarkValue,
-            lightColor: cursorLightValue,
+            darkColor: `var(--dx-${hue}Cursor)`,
+            lightColor: `var(--dx-${hue}Cursor)`,
           },
         }),
       ),

package/src/extensions/markdown/decorate.ts

@@ -73,7 +73,7 @@ class CheckboxWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const input = document.createElement('input');
-    input.className = 'cm-task-checkbox ch-checkbox';
+    input.className = 'cm-task-checkbox dx-checkbox';
     input.type = 'checkbox';
     input.tabIndex = -1;
     input.checked = this._checked;