@blue-patterns/richtext 0.0.0-stage → 0.7.18

package/dist/RichTextEditorToolbar.js

@@ -0,0 +1,688 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file RichTextEditorToolbar.tsx
+ * @input Uses React, @lexical/react (composer context), @lexical/rich-text,
+ *   @lexical/selection, @lexical/list, @lexical/utils, and the lexical core
+ *   command constants, plus Astryx Toolbar / IconButton / Selector /
+ *   ToggleButton / Divider / Layout primitives, and the link popover in
+ *   ToolbarLinkPopover.
+ * @output Exports RichTextEditorToolbar (a compact formatting toolbar with a
+ *   RichText-owned 4px control gutter, a horizontally scrollable action row,
+ *   and a link popover anchored to its Link button) and
+ *   RichTextEditorToolbarProps, plus format and glyph helpers RichText shares
+ *   internally.
+ * @position @blue-patterns/richtext. Drop into RichTextEditor's `toolbar` slot to
+ *   add a flush top formatting toolbar. Themed via Astryx Toolbar, Selector,
+ *   IconButton, and ToggleButton, so it inherits the active theme. Base props
+ *   pass through to the Astryx Toolbar exactly as Toolbar places them
+ *   (spec:AST-061/DEC-8).
+ *
+ * SYNC: When modified, update:
+ * - /packages/richtext/src/index.ts (exports)
+ * - /packages/richtext/src/RichTextEditor.doc.mjs (usage notes)
+ * - /packages/richtext/src/RichTextEditor.test.tsx (tests)
+ * - /apps/storybook/stories/RichTextEditor.stories.tsx (WithToolbar story)
+ *
+ * NOTE: `lexical` and `@lexical/*` are OPTIONAL peer dependencies — install them
+ * to use this.
+ * Behavior mirrors the Lexical playground toolbar (selection sync + format
+ * commands); the UI is built from Astryx primitives so it matches the theme.
+ *
+ * ICONS: Each control resolves its glyph through the core icon registry under a
+ * stable `richtext:*` key (see {@link RICHTEXT_ICON_KEYS}) for the active
+ * theme, falling back to the bundled inline SVGs below — the library seam
+ * `getExtendedIcon` documents. A theme restyles any glyph by naming its key:
+ *   defineTheme({icons: {'richtext:bold': <MyBoldIcon />}});
+ * Undo and redo point backward and forward in time, so they mirror under RTL
+ * whichever glyph draws them.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $setBlocksType } from '@lexical/selection';
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $isListNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
+import { $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import { $isLinkNode } from '@lexical/link';
+import { Toolbar } from '@blue-patterns/core/Toolbar';
+import { IconButton } from '@blue-patterns/core/IconButton';
+import { Selector } from '@blue-patterns/core/Selector';
+import { ToggleButton } from '@blue-patterns/core/ToggleButton';
+import { Divider } from '@blue-patterns/core/Divider';
+import { HStack } from '@blue-patterns/core/Layout';
+import { getExtendedIcon } from '@blue-patterns/core/Icon';
+import { useThemeName } from '@blue-patterns/core/theme';
+import { isRenderable, rtlStyles } from '@blue-patterns/core/utils';
+import '@blue-patterns/core/theme/tokens.stylex';
+import { fontWeightVars, spacingVars, typeScaleVars } from '@blue-patterns/core/theme/tokens.stylex';
+import { useTranslator } from '@blue-patterns/core/i18n';
+import { FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, SELECTION_CHANGE_COMMAND, KEY_DOWN_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_NORMAL, $getSelection, $isNodeSelection, $isRangeSelection, $createParagraphNode } from 'lexical';
+import { ToolbarLinkPopover, isInsertLink, useToolbarLink } from "./internal/ToolbarLinkPopover.js";
+import { $selectedExtensionNodesOnly } from "./markdownExtensionNode.js";
+
+/** Block types exposed by the toolbar's format selector. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; // The link popover's anchor: a box around the Link button that takes no
+// space of its own.
+// A vertical Divider's default 100% height needs a definite parent height.
+// Toolbar slots are sized by their controls instead, so let flexbox stretch
+// these group separators across the slot's resolved height.
+const toolbarDividerStyles = {
+  vertical: {
+    kSGwAc: "xkh2ocl",
+    kZKoxP: "xt7dq6l",
+    $$css: true
+  }
+};
+const glyphStyles = {
+  directional: {
+    k1xSpc: "x3nfvp2",
+    $$css: true
+  }
+};
+const toolbarScrollStyles = {
+  compactToolbar: {
+    "--astryx-section-padding-inline-start": "xcfn0br",
+    "--astryx-section-padding-inline-end": "x1qgjean",
+    keoZOQ: "x1uy92hs",
+    k1K539: "x199tud",
+    $$css: true
+  },
+  actions: {
+    kUk6DE: "x845mor",
+    kzqmXN: "xnalus7",
+    ks0D6T: "x193iq5w",
+    k7Eaqz: "xeuugli",
+    kXHlph: "xw2csxc",
+    kORKVm: "x10wlt62",
+    kvh3hx: "x7p5m3t",
+    k5wCbM: "x1597r2g",
+    $$css: true
+  }
+};
+
+/**
+ * Stable icon-registry keys for the toolbar's controls. A theme overrides any
+ * of these by key: `defineTheme({icons: {'richtext:bold': <MyIcon />}})`.
+ * Keys are namespaced (`richtext:*`) to avoid collisions with the core
+ * semantic icon set.
+ */
+export const RICHTEXT_ICON_KEYS = {
+  bold: 'richtext:bold',
+  italic: 'richtext:italic',
+  underline: 'richtext:underline',
+  strikethrough: 'richtext:strikethrough',
+  code: 'richtext:code',
+  link: 'richtext:link',
+  paragraph: 'richtext:paragraph',
+  h1: 'richtext:h1',
+  h2: 'richtext:h2',
+  h3: 'richtext:h3',
+  quote: 'richtext:quote',
+  bullet: 'richtext:bullet',
+  number: 'richtext:number',
+  undo: 'richtext:undo',
+  redo: 'richtext:redo'
+};
+
+/** The inline formats, in the order a toolbar offers them. */
+export const INLINE_FORMAT_ACTIONS = [{
+  format: 'bold',
+  icon: 'bold'
+}, {
+  format: 'italic',
+  icon: 'italic'
+}, {
+  format: 'underline',
+  icon: 'underline'
+}, {
+  format: 'strikethrough',
+  icon: 'strikethrough'
+}, {
+  format: 'code',
+  icon: 'code'
+}];
+/** The inline formats' button labels. */
+export function inlineFormatLabels(t) {
+  // Literal keys, so the catalog gate can verify every one.
+  return {
+    bold: t('@astryx.richTextEditor.toolbar.bold'),
+    italic: t('@astryx.richTextEditor.toolbar.italic'),
+    underline: t('@astryx.richTextEditor.toolbar.underline'),
+    strikethrough: t('@astryx.richTextEditor.toolbar.strikethrough'),
+    code: t('@astryx.richTextEditor.toolbar.inlineCode')
+  };
+}
+
+/**
+ * The inline formats a range or node selection carries, which their buttons
+ * show pressed. A selection of Markdown plugin nodes alone (a range around
+ * them, or a node selection from a click) shows their formats. Any other
+ * node selection, such as a rule, has none.
+ */
+export function $inlineFormatsOf(selection) {
+  const formats = new Set();
+  const nodesOnly = $selectedExtensionNodesOnly(selection);
+  for (const {
+    format
+  } of INLINE_FORMAT_ACTIONS) {
+    if (nodesOnly != null ? nodesOnly.every(node => node.hasFormat(format)) : $isRangeSelection(selection) && selection.hasFormat(format)) {
+      formats.add(format);
+    }
+  }
+  return formats;
+}
+
+/** Toggles an inline format over the editor's selection. */
+export function formatSelection(editor, format) {
+  editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+}
+
+/**
+ * Bundled 16px inline default icons — no external icon dependency. These are
+ * the fallbacks used when a theme hasn't registered an override for the
+ * corresponding {@link RICHTEXT_ICON_KEYS} entry.
+ */
+const defaultToolbarIcons = {
+  bold: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M6 4h7a4 4 0 0 1 0 8H6zM6 12h8a4 4 0 0 1 0 8H6z",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinejoin: "round"
+    })
+  }),
+  italic: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M10 4h6M8 20h6M14 4l-4 16",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    })
+  }),
+  underline: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M6 4v6a6 6 0 0 0 12 0V4M5 21h14",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    })
+  }),
+  strikethrough: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M4 12h16M8 6a4 3 0 0 1 8 0M8 16a4 3 0 0 0 8 0",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    })
+  }),
+  code: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M9 8l-4 4 4 4M15 8l4 4-4 4",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  }),
+  link: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  }),
+  paragraph: /*#__PURE__*/_jsx(TextGlyph, {
+    label: "\xB6"
+  }),
+  h1: /*#__PURE__*/_jsx(TextGlyph, {
+    label: "H1"
+  }),
+  h2: /*#__PURE__*/_jsx(TextGlyph, {
+    label: "H2"
+  }),
+  h3: /*#__PURE__*/_jsx(TextGlyph, {
+    label: "H3"
+  }),
+  quote: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M6 17h3l2-4V7H5v6h3zM15 17h3l2-4V7h-6v6h3z",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinejoin: "round"
+    })
+  }),
+  bullet: /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9 6h11M9 12h11M9 18h11",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: "4.5",
+      cy: "6",
+      r: "1.5",
+      fill: "currentColor"
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: "4.5",
+      cy: "12",
+      r: "1.5",
+      fill: "currentColor"
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: "4.5",
+      cy: "18",
+      r: "1.5",
+      fill: "currentColor"
+    })]
+  }),
+  number: /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10 6h10M10 12h10M10 18h10",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/_jsx("text", {
+      x: "2",
+      y: "8",
+      fontSize: "6",
+      fill: "currentColor",
+      children: "1"
+    }), /*#__PURE__*/_jsx("text", {
+      x: "2",
+      y: "14",
+      fontSize: "6",
+      fill: "currentColor",
+      children: "2"
+    }), /*#__PURE__*/_jsx("text", {
+      x: "2",
+      y: "20",
+      fontSize: "6",
+      fill: "currentColor",
+      children: "3"
+    })]
+  }),
+  undo: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M9 7L4 12l5 5M4 12h11a5 5 0 0 1 0 10",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  }),
+  redo: /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M15 7l5 5-5 5M20 12H9a5 5 0 0 0 0 10",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  })
+};
+
+/** Renders a short text label as a toolbar glyph (for heading buttons). */
+function TextGlyph({
+  label
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    "aria-hidden": "true",
+    ...{
+      className: "x141an7d x1lvx875 xss6m8b"
+    },
+    children: label
+  });
+}
+/**
+ * Resolve a toolbar glyph for the active theme: the theme's icon for the
+ * stable `richtext:*` key, then a globally registered one, then the bundled
+ * inline default.
+ */
+function resolveIcon(name, themeName) {
+  return getExtendedIcon(RICHTEXT_ICON_KEYS[name], defaultToolbarIcons[name], themeName);
+}
+
+/** The glyph resolver for the active theme, as the toolbars draw glyphs. */
+export function useToolbarIcon() {
+  const themeName = useThemeName();
+  return name => resolveIcon(name, themeName);
+}
+
+/** A glyph that points along the reading direction, mirrored under RTL. */
+function DirectionalGlyph({
+  children
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    "aria-hidden": "true",
+    ...stylex.props(glyphStyles.directional, rtlStyles.mirror),
+    children: children
+  });
+}
+/**
+ * A composable formatting toolbar for {@link RichTextEditor}, built from Astryx
+ * `Toolbar` / `ToggleButton` primitives so it matches the active theme. Reads
+ * the current selection to keep the active states in sync and dispatches the
+ * standard Lexical formatting commands.
+ *
+ * Render it inside the editor's `toolbar` slot — it uses
+ * `useLexicalComposerContext()` to reach the editor, so it must live within the
+ * `LexicalComposer` the editor sets up.
+ *
+ * @example
+ * ```
+ * import {RichTextEditor, RichTextEditorToolbar} from '@blue-patterns/richtext';
+ *
+ * <RichTextEditor
+ *   label="Notes"
+ *   toolbar={<RichTextEditorToolbar />}
+ * />
+ * ```
+ */
+export function RichTextEditorToolbar({
+  label: labelFromProps,
+  headingLevels = ['h1', 'h2', 'h3'],
+  size = 'sm',
+  hasLink = true,
+  promptForUrl,
+  hasNewTabLinks = true,
+  endContent,
+  xstyle,
+  ref,
+  ...rest
+}) {
+  const [editor] = useLexicalComposerContext();
+  const icon = useToolbarIcon();
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.richTextEditor.toolbar.label');
+  // Literal keys, so the catalog gate can verify every one.
+  const headingLabels = {
+    h1: t('@astryx.richTextEditor.toolbar.heading1'),
+    h2: t('@astryx.richTextEditor.toolbar.heading2'),
+    h3: t('@astryx.richTextEditor.toolbar.heading3')
+  };
+  const formatLabels = inlineFormatLabels(t);
+  const [activeFormats, setActiveFormats] = useState(() => new Set());
+  const [blockType, setBlockType] = useState('paragraph');
+  const [isLink, setIsLink] = useState(false);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+  const linkButtonRef = useRef(null);
+  const linkAnchorRef = useRef(null);
+  const link = useToolbarLink(editor, {
+    buttonRef: linkButtonRef,
+    hasNewTabLinks,
+    promptForUrl
+  });
+  const {
+    toggle: toggleLink
+  } = link;
+  const $syncToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) && !$isNodeSelection(selection)) {
+      return;
+    }
+    setActiveFormats($inlineFormatsOf(selection));
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+
+    // Link active state — a link is "active" when the caret/selection anchor
+    // sits inside a LinkNode (or its immediate parent is one):
+    // `$isLinkNode(parent) || $isLinkNode(node)`.
+    const node = selection.anchor.getNode();
+    setIsLink($isLinkNode(node) || $isLinkNode(node.getParent()));
+    const anchorNode = selection.anchor.getNode();
+    const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+    if ($isListNode(element)) {
+      const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+      const type = parentList ? parentList.getListType() : element.getListType();
+      setBlockType(type === 'number' ? 'number' : 'bullet');
+    } else if ($isHeadingNode(element)) {
+      setBlockType(element.getTag());
+    } else if ($isQuoteNode(element)) {
+      setBlockType('quote');
+    } else {
+      setBlockType('paragraph');
+    }
+  }, []);
+  useEffect(() => {
+    return mergeRegister(editor.registerUpdateListener(({
+      editorState
+    }) => {
+      editorState.read($syncToolbar);
+    }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+      $syncToolbar();
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_UNDO_COMMAND, payload => {
+      setCanUndo(payload);
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_REDO_COMMAND, payload => {
+      setCanRedo(payload);
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL), editor.registerEditableListener(editable => {
+      setIsEditable(editable);
+    }),
+    // Cmd/Ctrl+K opens link insertion. Detection mirrors the Lexical
+    // playground's ShortcutsPlugin (isInsertLink → isExactShortcutMatch with
+    // CONTROL_OR_META), so it fires only on the exact primary-modifier combo
+    // and ignores Cmd+Shift+K etc. Only registered when the link button is
+    // enabled. Returns true to consume the event so the browser's own
+    // shortcut doesn't also fire.
+    hasLink ? editor.registerCommand(KEY_DOWN_COMMAND, event => {
+      if (isInsertLink(event)) {
+        event.preventDefault();
+        toggleLink();
+        return true;
+      }
+      return false;
+    }, COMMAND_PRIORITY_NORMAL) : () => {});
+  }, [editor, $syncToolbar, hasLink, toggleLink]);
+  const setBlock = next => {
+    // Selector choices are idempotent: choosing the active block format keeps
+    // it active instead of toggling it back to paragraph.
+    if (!isEditable || blockType === next) {
+      return;
+    }
+    if (next === 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+      return;
+    }
+    if (next === 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+      return;
+    }
+    editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) {
+        return;
+      }
+      $setBlocksType(selection, () => {
+        if (next === 'quote') {
+          return $createQuoteNode();
+        }
+        if (next === 'h1' || next === 'h2' || next === 'h3') {
+          return $createHeadingNode(next);
+        }
+        return $createParagraphNode();
+      });
+    });
+  };
+  const blockOptions = [{
+    value: 'paragraph',
+    label: t('@astryx.richTextEditor.toolbar.paragraph'),
+    icon: icon('paragraph')
+  }, ...headingLevels.map(level => ({
+    value: level,
+    label: headingLabels[level],
+    icon: icon(level)
+  })), {
+    value: 'bullet',
+    label: t('@astryx.richTextEditor.toolbar.bulletedList'),
+    icon: icon('bullet')
+  }, {
+    value: 'number',
+    label: t('@astryx.richTextEditor.toolbar.numberedList'),
+    icon: icon('number')
+  }, {
+    value: 'quote',
+    label: t('@astryx.richTextEditor.toolbar.blockQuote'),
+    icon: icon('quote')
+  }];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Toolbar, {
+      ...rest,
+      ref: ref,
+      label: label,
+      size: size,
+      xstyle: [toolbarScrollStyles.compactToolbar, xstyle],
+      startContent: /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        role: "group",
+        "aria-label": t('@astryx.richTextEditor.toolbar.actions'),
+        xstyle: toolbarScrollStyles.actions,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          label: t('@astryx.richTextEditor.toolbar.undo'),
+          icon: /*#__PURE__*/_jsx(DirectionalGlyph, {
+            children: icon('undo')
+          }),
+          variant: "ghost",
+          tooltip: t('@astryx.richTextEditor.toolbar.undo'),
+          isDisabled: !isEditable || !canUndo,
+          onClick: () => editor.dispatchCommand(UNDO_COMMAND, undefined)
+        }), /*#__PURE__*/_jsx(IconButton, {
+          label: t('@astryx.richTextEditor.toolbar.redo'),
+          icon: /*#__PURE__*/_jsx(DirectionalGlyph, {
+            children: icon('redo')
+          }),
+          variant: "ghost",
+          tooltip: t('@astryx.richTextEditor.toolbar.redo'),
+          isDisabled: !isEditable || !canRedo,
+          onClick: () => editor.dispatchCommand(REDO_COMMAND, undefined)
+        }), /*#__PURE__*/_jsx(Divider, {
+          orientation: "vertical",
+          "aria-label": t('@astryx.richTextEditor.toolbar.historyDivider'),
+          xstyle: toolbarDividerStyles.vertical
+        }), /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x78zum5 x2lah0s"
+          },
+          children: /*#__PURE__*/_jsx(Selector, {
+            label: t('@astryx.richTextEditor.toolbar.blockFormat'),
+            isLabelHidden: true,
+            variant: "ghost",
+            size: size,
+            value: blockType,
+            options: blockOptions,
+            startIcon: icon(blockType),
+            isDisabled: !isEditable,
+            onChange: value => setBlock(value)
+          })
+        }), /*#__PURE__*/_jsx(Divider, {
+          orientation: "vertical",
+          "aria-label": t('@astryx.richTextEditor.toolbar.formatDivider'),
+          xstyle: toolbarDividerStyles.vertical
+        }), INLINE_FORMAT_ACTIONS.map(action => /*#__PURE__*/_jsx(ToggleButton, {
+          label: formatLabels[action.format],
+          icon: icon(action.icon),
+          size: size,
+          isIconOnly: true,
+          isPressed: activeFormats.has(action.format),
+          isDisabled: !isEditable,
+          onPressedChange: () => formatSelection(editor, action.format)
+        }, action.format)), hasLink &&
+        /*#__PURE__*/
+        // The popover anchors to this wrapper, which a press never
+        // scales, and finds the button inside it for its handlers.
+        _jsx("span", {
+          ref: linkAnchorRef,
+          ...{
+            className: "x3nfvp2 x2lah0s"
+          },
+          children: /*#__PURE__*/_jsx(ToggleButton, {
+            ref: linkButtonRef,
+            label: t('@astryx.richTextEditor.toolbar.link'),
+            icon: icon('link'),
+            size: size,
+            isIconOnly: true,
+            isPressed: isLink || link.isOpen,
+            isDisabled: !isEditable,
+            onMouseDown: event => event.preventDefault()
+            // The link popover owns a press on the button, and with it
+            // the button's popup state; `promptForUrl` replaces both.
+            ,
+            onPressedChange: promptForUrl ? toggleLink : undefined
+          })
+        }, "link"), isRenderable(endContent) && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Divider, {
+            orientation: "vertical"
+          }), endContent]
+        })]
+      })
+    }), hasLink && promptForUrl == null && /*#__PURE__*/_jsx(ToolbarLinkPopover, {
+      link: link,
+      anchorRef: linkAnchorRef,
+      size: size
+    })]
+  });
+}
+RichTextEditorToolbar.displayName = 'RichTextEditorToolbar';