@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.422d1c7879

package/src/{extensions/popover/usePopoverMenu.ts → components/EditorMenuProvider/useEditorMenu.ts}

@@ -7,13 +7,13 @@ import { type EditorState } from '@codemirror/state';
 import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
+import { modalStateEffect } from '@dxos/ui-editor';
 import { type MaybePromise } from '@dxos/util';
 
-import { type PopoverMenuGroup, type PopoverMenuItem } from './menu';
+import { type EditorMenuProviderProps } from './EditorMenuProvider';
+import { type EditorMenuGroup, type EditorMenuItem } from './menu';
 import { filterMenuGroups, getMenuItem, getNextMenuItem, getPreviousMenuItem } from './menu';
-import { modalStateEffect } from './modal';
 import { type PopoverOptions, popover, popoverRangeEffect, popoverStateField } from './popover';
-import { type PopoverMenuProviderProps } from './PopoverMenuProvider';
 
 export type GetMenuContext = {
   state: EditorState;
@@ -22,36 +22,36 @@ export type GetMenuContext = {
   trigger?: string;
 };
 
-export type UsePopoverMenuProps = {
+export type UseEditorMenuProps = {
   filter?: boolean;
-  getMenu?: (context: GetMenuContext) => MaybePromise<PopoverMenuGroup[]>;
+  getMenu?: (context: GetMenuContext) => MaybePromise<EditorMenuGroup[]>;
 } & Pick<PopoverOptions, 'trigger' | 'triggerKey' | 'placeholder'>;
 
-export type UsePopoverMenu = {
-  groupsRef: RefObject<PopoverMenuGroup[]>;
+export type UseEditorMenu = {
+  groupsRef: RefObject<EditorMenuGroup[]>;
   extension: Extension;
-} & Pick<PopoverMenuProviderProps, 'currentItem' | 'open' | 'onOpenChange' | 'onActivate' | 'onSelect' | 'onCancel'>;
+} & Pick<EditorMenuProviderProps, 'currentItem' | 'open' | 'onOpenChange' | 'onActivate' | 'onSelect' | 'onCancel'>;
 
 /**
  * ```tsx
- * const { groupsRef, extension, ...menuProps } = usePopoverMenu();
+ * const { groupsRef, extension, ...menuProps } = useEditorMenu();
  * const { parentRef, viewRef } = useTextEditor({ extensions: [extension] });
  * return (
- *   <PopoverMenuProvider view={viewRef.current} groups={groupsRef.current} {...menuProps}>
+ *   <EditorMenuProvider view={viewRef.current} groups={groupsRef.current} {...menuProps}>
  *     <div ref={parentRef} />
- *   </PopoverMenuProvider>
+ *   </EditorMenuProvider>
  * );
  * ```
  */
-export const usePopoverMenu = ({
+export const useEditorMenu = ({
   trigger,
   triggerKey,
   placeholder,
   filter = true,
   getMenu,
-}: UsePopoverMenuProps): UsePopoverMenu => {
-  const groupsRef = useRef<PopoverMenuGroup[]>([]);
-  const currentRef = useRef<PopoverMenuItem | null>(null);
+}: UseEditorMenuProps): UseEditorMenu => {
+  const groupsRef = useRef<EditorMenuGroup[]>([]);
+  const currentRef = useRef<EditorMenuItem | null>(null);
   const [currentItem, setCurrentItem] = useState<string>();
   const [open, setOpen] = useState(false);
   const [_, refresh] = useState({});
@@ -59,10 +59,11 @@ export const usePopoverMenu = ({
   /**
    * Get filtered options.
    */
-  const getMenuOptions = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
+  const getMenuOptions = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
     async ({ text, trigger, ...props }) => {
       const groups = (await getMenu?.({ text, trigger, ...props })) ?? [];
-      return filter
+      // The "@" menu can use "@@" as syntax for block embeds, so it owns its own query filtering.
+      return filter && trigger !== '@'
         ? filterMenuGroups(groups, (item) =>
             text ? (item.label as string).toLowerCase().startsWith(text.toLowerCase()) : true,
           )
@@ -71,7 +72,7 @@ export const usePopoverMenu = ({
     [getMenu, filter],
   );
 
-  const handleOpenChange = useCallback<NonNullable<UsePopoverMenu['onOpenChange']>>(
+  const handleOpenChange = useCallback<NonNullable<UseEditorMenu['onOpenChange']>>(
     async ({ view, open }) => {
       invariant(view);
       setOpen(open);
@@ -93,7 +94,7 @@ export const usePopoverMenu = ({
     [getMenuOptions],
   );
 
-  const handleActivate = useCallback<NonNullable<UsePopoverMenu['onActivate']>>(
+  const handleActivate = useCallback<NonNullable<UseEditorMenu['onActivate']>>(
     async ({ view, trigger }) => {
       const item = getMenuItem(groupsRef.current, currentItem);
       if (item) {
@@ -107,11 +108,17 @@ export const usePopoverMenu = ({
     [open, handleOpenChange],
   );
 
-  const handleSelect = useCallback<NonNullable<UsePopoverMenu['onSelect']>>(({ view, item }) => {
-    void item.onSelect?.(view, view.state.selection.main.head);
+  const handleSelect = useCallback<NonNullable<UseEditorMenu['onSelect']>>(({ view, item }) => {
+    // Delete trigger range (e.g., "/" and any typed filter text).
+    const { range } = view.state.field(popoverStateField) ?? {};
+    if (range) {
+      view.dispatch({ changes: { from: range.from, to: range.to, insert: '' } });
+    }
+    void item.onSelect?.({ view, head: view.state.selection.main.head });
+    view.focus();
   }, []);
 
-  const handleCancel = useCallback<NonNullable<UsePopoverMenu['onCancel']>>(({ view }) => {
+  const handleCancel = useCallback<NonNullable<UseEditorMenu['onCancel']>>(({ view }) => {
     // Delete trigger.
     const { range, trigger } = view.state.field(popoverStateField) ?? {};
     if (range && trigger) {

package/src/components/EditorPreviewProvider/EditorPreviewProvider.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate, Popover } from '@dxos/react-ui';
+import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/ui-editor';
+
+type EditorPreviewPopoverValue = Partial<{
+  link: PreviewLinkRef;
+  target: PreviewLinkTarget;
+  pending: boolean;
+}>;
+
+const [EditorPreviewContextProvider, useEditorPreview] = createContext<EditorPreviewPopoverValue>('PreviewPopover', {});
+
+export type EditorPreviewProviderProps = PropsWithChildren<{
+  onLookup?: (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
+}>;
+
+/**
+ * NOTE: In Composer, the DeckPlugin provides the Popover.Root as part of the DeckLayout.
+ */
+// TOOD(burdon): Reconcile with PreviewPlugin.
+export const EditorPreviewProvider = ({ children, onLookup }: EditorPreviewProviderProps) => {
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const [value, setValue] = useState<EditorPreviewPopoverValue>({});
+  const [open, setOpen] = useState(false);
+
+  const handleActivate = useCallback(
+    (event: DxAnchorActivate) => {
+      const { dxn, label, trigger } = event;
+      setValue((value) => ({
+        ...value,
+        link: { label, dxn },
+        pending: true,
+      }));
+
+      triggerRef.current = trigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({ label, dxn }).then((target) =>
+        setValue((value) => ({
+          ...value,
+          target: target ?? undefined,
+          pending: false,
+        })),
+      );
+    },
+    [onLookup],
+  );
+
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!root || !handleActivate) {
+      return;
+    }
+
+    return addEventListener(root, DX_ANCHOR_ACTIVATE as any, handleActivate, {
+      capture: true,
+      passive: false,
+    });
+  }, [root, handleActivate]);
+
+  return (
+    <EditorPreviewContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.VirtualTrigger virtualRef={triggerRef as unknown as RefObject<HTMLButtonElement>} />
+        <div role='none' className='contents' ref={setRoot}>
+          {children}
+        </div>
+      </Popover.Root>
+    </EditorPreviewContextProvider>
+  );
+};
+
+export { useEditorPreview };

package/src/components/EditorPreviewProvider/index.ts

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

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,134 +2,110 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { type EditorView } from '@codemirror/view';
+import { Atom } from '@effect-atom/atom-react';
 import React, { memo, useMemo } from 'react';
 
-import { rxFromSignal } from '@dxos/app-graph';
-import { ElevationProvider } from '@dxos/react-ui';
-import {
-  type ActionGraphProps,
-  MenuProvider,
-  ToolbarMenu,
-  createGapSeparator,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
+import { type Node } from '@dxos/app-graph';
+import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
+import { type ActionGraphProps, Menu, type MenuAction, MenuBuilder, useMenuActions } from '@dxos/react-ui-menu';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
-import { createBlocks } from './blocks';
-import { createFormatting } from './formatting';
-import { createHeadings } from './headings';
-import { createImageUpload } from './image';
-import { createLists } from './lists';
-import { createSearch } from './search';
-import { type EditorToolbarActionGraphProps, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
-import { createViewMode } from './view-mode';
+import { addBlocks } from './blocks';
+import { addFormatting } from './formatting';
+import { addHeadings } from './headings';
+import { addImageUpload } from './image';
+import { addLists } from './lists';
+import { addSearch } from './search';
+import { type EditorToolbarState } from './types';
+import { addViewMode } from './view-mode';
 
-const createToolbarActions = ({
-  getView,
-  state,
-  customActions,
-  ...features
-}: EditorToolbarFeatureFlags &
-  Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): Rx.Rx<ActionGraphProps> => {
-  return Rx.make((get) => {
-    const graph: ActionGraphProps = {
-      nodes: [],
-      edges: [],
-    };
+export type EditorToolbarFeatureFlags = Partial<{
+  showHeadings: boolean;
+  showFormatting: boolean;
+  showLists: boolean;
+  showBlocks: boolean;
+  showSearch: boolean;
 
-    if (features.headings ?? true) {
-      const headings = get(rxFromSignal(() => createHeadings(state, getView)));
-      graph.nodes.push(...headings.nodes);
-      graph.edges.push(...headings.edges);
-    }
-    if (features.formatting ?? true) {
-      const formatting = get(rxFromSignal(() => createFormatting(state, getView)));
-      graph.nodes.push(...formatting.nodes);
-      graph.edges.push(...formatting.edges);
-    }
-    if (features.lists ?? true) {
-      const lists = get(rxFromSignal(() => createLists(state, getView)));
-      graph.nodes.push(...lists.nodes);
-      graph.edges.push(...lists.edges);
-    }
-    if (features.blocks ?? true) {
-      const blocks = get(rxFromSignal(() => createBlocks(state, getView)));
-      graph.nodes.push(...blocks.nodes);
-      graph.edges.push(...blocks.edges);
-    }
-    if (features.image) {
-      const image = get(rxFromSignal(() => createImageUpload(features.image!)));
-      graph.nodes.push(...image.nodes);
-      graph.edges.push(...image.edges);
-    }
-    {
-      const gap = createGapSeparator();
-      graph.nodes.push(...gap.nodes);
-      graph.edges.push(...gap.edges);
-    }
-    if (customActions) {
-      const custom = get(customActions);
-      graph.nodes.push(...custom.nodes);
-      graph.edges.push(...custom.edges);
-    }
-    if (features.search ?? true) {
-      const search = get(rxFromSignal(() => createSearch(getView)));
-      graph.nodes.push(...search.nodes);
-      graph.edges.push(...search.edges);
-    }
-    if (features.viewMode) {
-      const viewMode = get(rxFromSignal(() => createViewMode(state, features.viewMode!)));
-      graph.nodes.push(...viewMode.nodes);
-      graph.edges.push(...viewMode.edges);
-    }
+  // TODO(wittjosiah): Factor out (depends on plugin-level capabilities.)
+  onImageUpload: () => void;
+  onViewModeChange: (mode: EditorViewMode) => void;
+}>;
 
-    return graph;
-  });
+export type EditorToolbarActionGraphProps = {
+  state: Atom.Atom<EditorToolbarState>;
+  getView: () => EditorView;
+  // TODO(wittjosiah): Control positioning.
+  customActions?: Atom.Atom<ActionGraphProps>;
 };
 
+export type EditorToolbarProps = ThemedClassName<
+  {
+    role?: string;
+    attendableId?: string;
+    /** Handler for executing actions. Required when customActions use Operation.invoke. */
+    onAction?: (action: MenuAction, params: Node.InvokeProps) => void;
+  } & (EditorToolbarActionGraphProps & EditorToolbarFeatureFlags)
+>;
+
+export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, ...props }: EditorToolbarProps) => {
+  const menuActions = useEditorToolbarActionGraph(props);
+
+  return (
+    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+      <Menu.Root {...menuActions} attendableId={attendableId} onAction={onAction}>
+        <Menu.Toolbar classNames={classNames} />
+      </Menu.Root>
+    </ElevationProvider>
+  );
+});
+
+type ToolbarActionsProps = Pick<EditorToolbarActionGraphProps, 'state' | 'getView' | 'customActions'> &
+  EditorToolbarFeatureFlags;
+
 // TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
 //   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
 //   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
-const useEditorToolbarActionGraph = (props: EditorToolbarProps) => {
+// TODO(burdon): Some actions should toggle the state (e.g., toggle bullets on/off depending on the current state).
+const useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
   const menuCreator = useMemo(
-    () =>
-      createToolbarActions({
-        getView: props.getView,
-        state: props.state,
-        customActions: props.customActions,
-        headings: props.headings,
-        formatting: props.formatting,
-        lists: props.lists,
-        blocks: props.blocks,
-        image: props.image,
-        search: props.search,
-        viewMode: props.viewMode,
-      }),
+    () => createToolbarActions({ state, getView, customActions, ...features }),
     [
-      props.getView,
-      props.state,
-      props.customActions,
-      props.headings,
-      props.formatting,
-      props.lists,
-      props.blocks,
-      props.image,
-      props.search,
-      props.viewMode,
+      state,
+      getView,
+      customActions,
+      features?.showHeadings,
+      features?.showFormatting,
+      features?.showLists,
+      features?.showBlocks,
+      features?.showSearch,
+      features?.onImageUpload,
+      features?.onViewModeChange,
     ],
   );
 
   return useMenuActions(menuCreator);
 };
 
-export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-
-  return (
-    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} textBlockWidth />
-      </MenuProvider>
-    </ElevationProvider>
-  );
-});
+const createToolbarActions = ({
+  state,
+  getView,
+  customActions,
+  ...features
+}: ToolbarActionsProps): Atom.Atom<ActionGraphProps> => {
+  return Atom.make((get) => {
+    // Subscribe to state changes.
+    const stateSnapshot = get(state);
+    return MenuBuilder.make()
+      .subgraph(features?.showHeadings !== false && addHeadings(stateSnapshot, getView))
+      .subgraph(features?.showFormatting !== false && addFormatting(stateSnapshot, getView))
+      .subgraph(features?.showLists !== false && addLists(stateSnapshot, getView))
+      .subgraph(features?.showBlocks !== false && addBlocks(stateSnapshot, getView))
+      .subgraph(features?.onImageUpload && addImageUpload(features.onImageUpload))
+      .separator('gap')
+      .subgraph(customActions && get(customActions))
+      .subgraph(features?.showSearch !== false && addSearch(getView))
+      .subgraph(features?.onViewModeChange && addViewMode(stateSnapshot, features.onViewModeChange))
+      .build();
+  });
+};

package/src/components/EditorToolbar/blocks.ts

@@ -4,56 +4,63 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '@dxos/ui-editor';
 
-import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '../../extensions';
+import { translationKey } from '../../translations';
+import { type EditorToolbarState } from './types';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
-
-const createBlockGroupAction = (value: string) =>
-  createEditorActionGroup('block', {
-    variant: 'toggleGroup',
-    selectCardinality: 'single',
-    value,
-  } as ToolbarMenuActionGroupProperties);
-
-const createBlockActions = (value: string, getView: () => EditorView, blankLine?: boolean) =>
-  Object.entries({
-    blockquote: 'ph--quotes--regular',
-    codeblock: 'ph--code-block--regular',
-    table: 'ph--table--regular',
-  }).map(([type, icon]) => {
-    const checked = type === value;
-    return createEditorAction(type, { checked, ...(type === 'table' && { disabled: !!blankLine }), icon }, () => {
-      const view = getView();
-      if (!view) {
-        return;
-      }
+const blockTypes = {
+  blockquote: 'ph--quotes--regular',
+  codeblock: 'ph--code-block--regular',
+  table: 'ph--table--regular',
+};
 
-      switch (type) {
-        case 'blockquote':
-          checked ? removeBlockquote(view) : addBlockquote(view);
-          break;
-        case 'codeblock':
-          checked ? removeCodeblock(view) : addCodeblock(view);
-          break;
-        case 'table':
-          insertTable(view);
-          break;
-      }
-    });
-  });
+/** Add block actions to the builder. */
+export const addBlocks =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const value = state?.blockQuote ? 'blockquote' : (state.blockType ?? '');
+    builder.group(
+      'block',
+      {
+        label: ['block.label', { ns: translationKey }],
+        iconOnly: true,
+        variant: 'toggleGroup',
+        selectCardinality: 'single',
+        value,
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [type, icon] of Object.entries(blockTypes)) {
+          const checked = type === value;
+          group.action(
+            type,
+            {
+              label: [`block.${type}.label`, { ns: translationKey }],
+              checked,
+              ...(type === 'table' && { disabled: !!state.blankLine }),
+              icon,
+            },
+            () => {
+              const view = getView();
+              if (!view) {
+                return;
+              }
 
-export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state?.blockQuote ? 'blockquote' : (state.blockType ?? '');
-  const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, getView, state.blankLine);
-  return {
-    nodes: [blockGroupAction as NodeArg<any>, ...blockActions],
-    edges: [
-      { source: 'root', target: 'block' },
-      ...blockActions.map(({ id }) => ({ source: blockGroupAction.id, target: id })),
-    ],
+              switch (type) {
+                case 'blockquote':
+                  checked ? removeBlockquote(view) : addBlockquote(view);
+                  break;
+                case 'codeblock':
+                  checked ? removeCodeblock(view) : addCodeblock(view);
+                  break;
+                case 'table':
+                  insertTable(view);
+                  break;
+              }
+            },
+          );
+        }
+      },
+    );
   };
-};

package/src/components/EditorToolbar/formatting.ts

@@ -4,12 +4,11 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type ActionGroupBuilderFn, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type Formatting, Inline, addLink, removeLink, setStyle } from '@dxos/ui-editor';
 
-import { type Formatting, Inline, addLink, removeLink, setStyle } from '../../extensions';
-
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { translationKey } from '../../translations';
+import { type EditorToolbarState } from './types';
 
 const formats = {
   strong: 'ph--text-b--regular',
@@ -19,47 +18,46 @@ const formats = {
   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, getView: () => EditorView) =>
-  Object.entries(formats).map(([type, icon]) => {
-    const checked = !!formatting[type as keyof Formatting];
-    return createEditorAction(type, { checked, icon }, () => {
-      const view = getView();
-      if (!view) {
-        return;
-      }
-
-      if (type === 'link') {
-        checked ? removeLink(view) : addLink()(view);
-        return;
-      }
-
-      const inlineType =
-        type === 'strong'
-          ? Inline.Strong
-          : type === 'emphasis'
-            ? Inline.Emphasis
-            : type === 'strikethrough'
-              ? Inline.Strikethrough
-              : Inline.Code;
-      setStyle(inlineType, !checked)(view);
-    });
-  });
-
-export const createFormatting = (state: EditorToolbarState, getView: () => EditorView) => {
-  const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state, getView);
-  return {
-    nodes: [formattingGroupAction as NodeArg<any>, ...formattingActions],
-    edges: [
-      { source: 'root', target: 'formatting' },
-      ...formattingActions.map(({ id }) => ({ source: formattingGroupAction.id, target: id })),
-    ],
+/** Add formatting actions to the builder. */
+export const addFormatting =
+  (state: EditorToolbarState, getView: () => EditorView): ActionGroupBuilderFn =>
+  (builder) => {
+    const formatting: Formatting = state;
+    builder.group(
+      'formatting',
+      {
+        label: ['formatting.label', { ns: translationKey }],
+        iconOnly: true,
+        variant: 'toggleGroup',
+        selectCardinality: 'multiple',
+        value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
+      } as ToolbarMenuActionGroupProperties,
+      (group) => {
+        for (const [type, icon] of Object.entries(formats)) {
+          const checked = !!formatting[type as keyof Formatting];
+          group.action(type, { label: [`formatting.${type}.label`, { ns: translationKey }], checked, icon }, () => {
+            const view = getView();
+            if (!view) {
+              return;
+            }
+
+            if (type === 'link') {
+              checked ? removeLink(view) : addLink()(view);
+              return;
+            }
+
+            setStyle(
+              type === 'strong'
+                ? Inline.Strong
+                : type === 'emphasis'
+                  ? Inline.Emphasis
+                  : type === 'strikethrough'
+                    ? Inline.Strikethrough
+                    : Inline.Code,
+              !checked,
+            )(view);
+          });
+        }
+      },
+    );
   };
-};