@wix/ricos 11.25.0 → 11.26.0

package/dist/cjs/plugin-ai/ai-menu-modal/ai-menu-modal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-ai/ai-menu-modal/ai-menu-modal.tsx"],
+  "sourcesContent": ["import { IconButton, Input, ListItemSection } from '@wix/design-system';\nimport { ChevronLeftSmall, ChevronRightSmall, ConfirmSmall } from '@wix/wix-ui-icons-common/lazy';\nimport React, { useContext } from 'react';\n\nimport { EditorContext, ModalServiceContext, RicosContext } from './../../ricos-context/index.js';\nimport type { ModalService } from './../../ricos-modals/index.js';\nimport type { TFunction, TiptapEditor } from './../../ricos-types/index.js';\nimport { DropdownModal } from './../../_shared/dropdown-modal/dropdown-modal.js';\nimport { ListItemDivider } from './../../_shared/list-item-divider/list-item-divider.js';\nimport { ListItemSelect } from './../../_shared/list-item-select/list-item-select.js';\nimport { unreachable } from './../../_shared/uncreachable.js';\n\nimport {\n  AI_MENU_BACK,\n  AI_MENU_POPOVER,\n  AI_MENU_PROMPT_INPUT,\n  AI_MENU_PROMPT_SUBMIT,\n} from '../data-hooks.js';\nimport type {\n  AiMenuAction,\n  AiMenuContext,\n  AiMenuItem,\n  AiMenuMode,\n  AiMenuSubmenu,\n  AiPluginEditorConfig,\n  Prompt,\n} from '../types.js';\nimport { AI_MENU_MODAL_ID } from '../types.js';\nimport { getSelectionAsHTML } from '../utils/get-selection-as-html.js';\nimport { getSelectionAsText } from '../utils/get-selection-as-text.js';\nimport styles from './ai-menu-modal-scss.js';\nimport { SubmenuFlyout } from './submenu-flyout.js';\nimport flyoutStyles from './submenu-flyout-scss.js';\n\nconst PROMPT_CHAR_LIMIT = 500;\n\ntype AiMenuModalProps = {\n  mode: AiMenuMode;\n  config: AiPluginEditorConfig;\n  toggleAiContentModal: (\n    editor: TiptapEditor,\n    modalsService: ModalService,\n    initialPrompt?: Prompt | string\n  ) => void;\n};\n\ntype MenuRowsOptions = {\n  t: TFunction;\n  /** Mobile drills into a submenu in place; desktop cascades it into a flyout. */\n  isMobile: boolean;\n  onDrillIn: (submenu: AiMenuSubmenu, key: string) => void;\n  onRun: (item: Prompt | AiMenuAction) => void;\n};\n\ntype OpenFlyout = {\n  key: string;\n  submenu: AiMenuSubmenu;\n  anchor: HTMLElement;\n  viaKeyboard: boolean;\n};\n\n/**\n * One list of menu rows, plus the flyout of whichever of its submenus is open. A flyout renders\n * its own items through this hook too, so submenus nest.\n */\nconst useMenuRows = (items: AiMenuItem[], options: MenuRowsOptions) => {\n  const { t, isMobile, onDrillIn, onRun } = options;\n  const [openFlyout, setOpenFlyout] = React.useState<OpenFlyout | null>(null);\n  // Pointing at a sibling row closes the open flyout, the way a native menu does.\n  const closeOnHover = isMobile ? undefined : () => setOpenFlyout(null);\n\n  const rows = items.map((item, index) => {\n    const key = `${'title' in item ? item.title : item.type}-${index}`;\n    switch (item.type) {\n      case 'prompt':\n      case 'action': {\n        const Icon = item.icon;\n        return (\n          <ListItemSelect\n            key={key}\n            data-menu-key={key}\n            dataHook={(item.type === 'action' && item.dataHook) || item.title}\n            prefix={Icon ? <Icon /> : undefined}\n            title={t(item.title)}\n            onMouseEnter={closeOnHover}\n            onSelect={() => onRun(item)}\n          />\n        );\n      }\n      case 'submenu': {\n        const Icon = item.icon;\n        const isOpen = openFlyout?.key === key;\n        return (\n          <ListItemSelect\n            key={key}\n            data-menu-key={key}\n            dataHook={item.dataHook ?? item.title}\n            className={isOpen ? flyoutStyles.openRow : undefined}\n            prefix={Icon ? <Icon /> : undefined}\n            title={t(item.title)}\n            suffix={<ChevronRightSmall />}\n            aria-haspopup=\"listbox\"\n            aria-expanded={isMobile ? undefined : isOpen}\n            onMouseEnter={\n              isMobile\n                ? undefined\n                : e =>\n                    setOpenFlyout({\n                      key,\n                      submenu: item,\n                      anchor: e.currentTarget,\n                      viaKeyboard: false,\n                    })\n            }\n            onSelect={e => {\n              if (isMobile) {\n                onDrillIn(item, key);\n                return;\n              }\n              setOpenFlyout({\n                key,\n                submenu: item,\n                anchor: e.currentTarget,\n                viaKeyboard: 'key' in e,\n              });\n            }}\n          />\n        );\n      }\n      case 'section': {\n        return <ListItemSection key={key} title={t(item.title)} />;\n      }\n      case 'divider': {\n        return <ListItemDivider key={key} />;\n      }\n      default: {\n        throw unreachable(item);\n      }\n    }\n  });\n\n  const flyout = openFlyout && (\n    <SubmenuFlyout\n      key={openFlyout.key}\n      label={t(openFlyout.submenu.title)}\n      anchor={openFlyout.anchor}\n      autoFocus={openFlyout.viaKeyboard}\n      onClose={() => {\n        openFlyout.anchor.focus();\n        setOpenFlyout(null);\n      }}\n    >\n      <FlyoutRows items={openFlyout.submenu.items} options={options} />\n    </SubmenuFlyout>\n  );\n\n  const closeFlyout = () => setOpenFlyout(null);\n\n  return { rows, flyout, closeFlyout };\n};\n\nconst FlyoutRows: React.FC<{ items: AiMenuItem[]; options: MenuRowsOptions }> = ({\n  items,\n  options,\n}) => {\n  const { rows, flyout } = useMenuRows(items, options);\n  return (\n    <>\n      {rows}\n      {flyout}\n    </>\n  );\n};\n\n/**\n * The \"Create with AI\" / \"Edit with AI\" menu: host actions and prompts, with submenus, above an\n * \"Ask me anything…\" input. Replaces the flow-selection and actions dropdowns when the plugin is\n * configured with `menu`.\n */\nexport const AiMenuModal: React.FC<AiMenuModalProps> = ({ mode, config, toggleAiContentModal }) => {\n  const { t, lastInteraction, isMobile } = useContext(RicosContext);\n  const modalService = useContext(ModalServiceContext);\n  const { adapter, getPublicCommands } = useContext(EditorContext);\n  const editor = adapter.tiptapEditor;\n\n  const [submenus, setSubmenus] = React.useState<AiMenuSubmenu[]>([]);\n  const [promptValue, setPromptValue] = React.useState('');\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  // Mobile drills into submenus in place. Drilling in or back unmounts the focused row, so the\n  // row to focus next is recorded here:\n  // the submenu's first item after drilling in, the row that opened it after going back.\n  const focusAfterNavigationRef = React.useRef<string | null>(null);\n  const openedFromKeysRef = React.useRef<string[]>([]);\n\n  React.useLayoutEffect(() => {\n    const key = focusAfterNavigationRef.current;\n    focusAfterNavigationRef.current = null;\n    if (key === null) {\n      return;\n    }\n    const rows = Array.from(\n      rootRef.current?.querySelectorAll<HTMLElement>('[role=\"option\"]') ?? []\n    );\n    const target =\n      rows.find(row => row.dataset.menuKey === key) ??\n      rows.find(row => row.dataset.menuKey !== AI_MENU_BACK) ??\n      rows[0];\n    target?.focus();\n  }, [submenus]);\n\n  // Opened from the keyboard, the menu takes focus: the button that opened it may be gone (the\n  // floating formatting toolbar unmounts under an exclusive modal), and Escape only reaches the\n  // menu from inside it. The modal stays `visibility: hidden` until positioned, and hidden rows\n  // can't take focus, so this retries for a few frames.\n  React.useEffect(() => {\n    if (lastInteraction !== 'keyboard') {\n      return;\n    }\n    let frameId = 0;\n    let attempts = 0;\n    // A menu whose items were all configured away is just the prompt input.\n    const focusFirstControl = () => {\n      const control =\n        rootRef.current?.querySelector<HTMLElement>('[role=\"option\"]') ??\n        rootRef.current?.querySelector<HTMLElement>('input');\n      control?.focus();\n      if (control?.ownerDocument.activeElement !== control && ++attempts < 10) {\n        frameId = requestAnimationFrame(focusFirstControl);\n      }\n    };\n    focusFirstControl();\n    return () => cancelAnimationFrame(frameId);\n  }, []);\n\n  const openSubmenu = (submenu: AiMenuSubmenu, key: string) => {\n    openedFromKeysRef.current = [...openedFromKeysRef.current, key];\n    focusAfterNavigationRef.current = '';\n    setSubmenus([...submenus, submenu]);\n  };\n\n  const closeSubmenu = () => {\n    focusAfterNavigationRef.current = openedFromKeysRef.current.at(-1) ?? '';\n    openedFromKeysRef.current = openedFromKeysRef.current.slice(0, -1);\n    setSubmenus(submenus.slice(0, -1));\n  };\n\n  const closeMenu = React.useCallback(() => {\n    modalService.closeModal(AI_MENU_MODAL_ID);\n  }, [modalService]);\n\n  const getContext = (): AiMenuContext =>\n    mode === 'edit'\n      ? {\n          mode,\n          selection: { nodes: getPublicCommands().getSelectionSlice() ?? [] },\n          selectionHtml: getSelectionAsHTML(editor),\n          selectionText: getSelectionAsText(editor),\n        }\n      : { mode, selection: { nodes: [] }, selectionHtml: '', selectionText: '' };\n\n  const items = (mode === 'edit' ? config.menu?.editItems : config.menu?.createItems) ?? [];\n\n  const submitPrompt = () => {\n    const prompt = promptValue.trim();\n    if (!prompt) {\n      return;\n    }\n    const context = getContext();\n    closeMenu();\n    if (config.menu?.onPromptSubmit?.(prompt, context) === 'stop') {\n      return;\n    }\n    toggleAiContentModal(editor, modalService, prompt);\n  };\n\n  const currentSubmenu = submenus[submenus.length - 1];\n  const { rows, flyout, closeFlyout } = useMenuRows(currentSubmenu ? currentSubmenu.items : items, {\n    t,\n    isMobile,\n    onDrillIn: openSubmenu,\n    onRun: item => {\n      if (item.type === 'prompt') {\n        closeMenu();\n        toggleAiContentModal(editor, modalService, item);\n        return;\n      }\n      const context = getContext();\n      closeMenu();\n      item.onClick(context);\n    },\n  });\n\n  const options = [\n    ...(currentSubmenu\n      ? [\n          <ListItemSelect\n            key={AI_MENU_BACK}\n            data-menu-key={AI_MENU_BACK}\n            dataHook={AI_MENU_BACK}\n            prefix={<ChevronLeftSmall />}\n            title={t(currentSubmenu.title)}\n            aria-label={t('AIPlugin_Menu_Back_AriaLabel')}\n            onSelect={closeSubmenu}\n          />,\n        ]\n      : []),\n    ...rows,\n  ];\n\n  return (\n    <div ref={rootRef}>\n      <DropdownModal\n        dataHook={AI_MENU_POPOVER}\n        title={t(\n          mode === 'edit'\n            ? 'AIPlugin_ToolbarButton_EditWithAI'\n            : 'AIPlugin_ToolbarButton_CreateWithAI'\n        )}\n        onCloseButtonClick={closeMenu}\n        minWidth={240}\n        maxHeight={304}\n        options={options}\n        footer={\n          // Pointing at or focusing the prompt leaves the open submenu behind, as a sibling row would.\n          <div className={styles.promptRow} onMouseEnter={closeFlyout} onFocus={closeFlyout}>\n            <div className={styles.promptInput}>\n              <Input\n                dataHook={AI_MENU_PROMPT_INPUT}\n                size=\"small\"\n                value={promptValue}\n                maxLength={PROMPT_CHAR_LIMIT}\n                placeholder={t('AIPlugin_Menu_PromptInput_Placeholder')}\n                onChange={e => setPromptValue(e.target.value)}\n                onEnterPressed={submitPrompt}\n              />\n            </div>\n            {promptValue.trim() && (\n              <IconButton\n                dataHook={AI_MENU_PROMPT_SUBMIT}\n                size=\"small\"\n                ariaLabel={t('AIPlugin_Menu_PromptInput_Submit_AriaLabel')}\n                onClick={submitPrompt}\n              >\n                <ConfirmSmall />\n              </IconButton>\n            )}\n          </div>\n        }\n      />\n      {flyout}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "flyoutStyles", "rows", "styles"]
+}

package/dist/cjs/plugin-ai/ai-menu-modal/submenu-flyout-scss.js

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var submenu_flyout_exports = {};
+__export(submenu_flyout_exports, {
+  default: () => submenu_flyout_default
+});
+module.exports = __toCommonJS(submenu_flyout_exports);
+var submenu_flyout_default = {
+  "flyout": "c79DI",
+  "openRow": "sPuJg"
+};
+//# sourceMappingURL=submenu-flyout-scss.js.map

package/dist/cjs/plugin-ai/ai-menu-modal/submenu-flyout-scss.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-ai/ai-menu-modal/submenu-flyout.scss"],
+  "sourcesContent": ["export default {\n  \"flyout\": \"c79DI\",\n  \"openRow\": \"sPuJg\"\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAO,yBAAQ;AAAA,EACb,UAAU;AAAA,EACV,WAAW;AACb;",
+  "names": []
+}

package/dist/cjs/plugin-ai/ai-menu-modal/submenu-flyout.js

@@ -0,0 +1,90 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var submenu_flyout_exports = {};
+__export(submenu_flyout_exports, {
+  SubmenuFlyout: () => SubmenuFlyout
+});
+module.exports = __toCommonJS(submenu_flyout_exports);
+var import_react_dom = require("@floating-ui/react-dom");
+var import_react = __toESM(require("react"));
+var import_ricos_context = require("./../../ricos-context/index.js");
+var import_data_hooks = require("../data-hooks.js");
+var import_submenu_flyout_scss = __toESM(require("./submenu-flyout-scss.js"));
+const MENU_OVERLAP = -12;
+const SubmenuFlyout = ({
+  label,
+  anchor,
+  autoFocus,
+  onClose,
+  children
+}) => {
+  const { jsdomMode } = (0, import_react.useContext)(import_ricos_context.RicosContext);
+  const [flyoutElement, setFlyoutElement] = import_react.default.useState(null);
+  const { x, y, strategy, isPositioned, refs } = (0, import_react_dom.useFloating)({
+    elements: { reference: anchor },
+    placement: "right",
+    strategy: "fixed",
+    middleware: [(0, import_react_dom.offset)(MENU_OVERLAP), (0, import_react_dom.flip)(), (0, import_react_dom.shift)({ padding: 8 })],
+    whileElementsMounted: import_react_dom.autoUpdate
+  });
+  const isVisible = isPositioned || jsdomMode;
+  import_react.default.useEffect(() => {
+    if (autoFocus && isVisible) {
+      flyoutElement?.querySelector('[role="option"]')?.focus();
+    }
+  }, [autoFocus, isVisible, flyoutElement]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: (element) => {
+        refs.setFloating(element);
+        setFlyoutElement(element);
+      },
+      className: import_submenu_flyout_scss.default.flyout,
+      "data-hook": import_data_hooks.AI_MENU_SUBMENU,
+      role: "listbox",
+      "aria-label": label,
+      style: {
+        position: strategy,
+        left: x ?? 0,
+        top: y ?? 0,
+        visibility: isVisible ? void 0 : "hidden"
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Escape" || e.key === "ArrowLeft") {
+          e.preventDefault();
+          e.stopPropagation();
+          onClose();
+        }
+      }
+    },
+    children
+  );
+};
+//# sourceMappingURL=submenu-flyout.js.map

package/dist/cjs/plugin-ai/ai-menu-modal/submenu-flyout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-ai/ai-menu-modal/submenu-flyout.tsx"],
+  "sourcesContent": ["import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react-dom';\nimport React, { useContext } from 'react';\n\nimport { RicosContext } from './../../ricos-context/index.js';\n\nimport { AI_MENU_SUBMENU } from '../data-hooks.js';\nimport styles from './submenu-flyout-scss.js';\n\n/** The flyout sits over the menu's end padding, right after the row's chevron. */\nconst MENU_OVERLAP = -12;\n\ntype SubmenuFlyoutProps = {\n  /** The translated submenu title, naming the list for assistive technology. */\n  label: string;\n  anchor: HTMLElement;\n  /** Moves focus to the flyout's first row once it is positioned (opened from the keyboard). */\n  autoFocus: boolean;\n  /** Closes the flyout from inside it: Escape or ArrowLeft, focus going back to `anchor`. */\n  onClose: () => void;\n  children: React.ReactNode;\n};\n\n/**\n * A submenu's items, cascading to the side of the row that opened it while the menu stays put.\n * Rendered inside the menu's own element so clicks in it are not clicks outside the menu.\n */\nexport const SubmenuFlyout: React.FC<SubmenuFlyoutProps> = ({\n  label,\n  anchor,\n  autoFocus,\n  onClose,\n  children,\n}) => {\n  const { jsdomMode } = useContext(RicosContext);\n  const [flyoutElement, setFlyoutElement] = React.useState<HTMLDivElement | null>(null);\n  const { x, y, strategy, isPositioned, refs } = useFloating({\n    elements: { reference: anchor },\n    placement: 'right',\n    strategy: 'fixed',\n    middleware: [offset(MENU_OVERLAP), flip(), shift({ padding: 8 })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  // Hidden until positioned, and a hidden row can't take focus.\n  const isVisible = isPositioned || jsdomMode;\n\n  React.useEffect(() => {\n    if (autoFocus && isVisible) {\n      flyoutElement?.querySelector<HTMLElement>('[role=\"option\"]')?.focus();\n    }\n  }, [autoFocus, isVisible, flyoutElement]);\n\n  return (\n    <div\n      ref={element => {\n        refs.setFloating(element);\n        setFlyoutElement(element);\n      }}\n      className={styles.flyout}\n      data-hook={AI_MENU_SUBMENU}\n      role=\"listbox\"\n      aria-label={label}\n      style={{\n        position: strategy,\n        left: x ?? 0,\n        top: y ?? 0,\n        visibility: isVisible ? undefined : 'hidden',\n      }}\n      onKeyDown={e => {\n        if (e.key === 'Escape' || e.key === 'ArrowLeft') {\n          // Before the modal's own Escape handler, which would close the whole menu.\n          e.preventDefault();\n          e.stopPropagation();\n          onClose();\n        }\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA6D;AAC7D,mBAAkC;AAElC,2BAA6B;AAE7B,wBAAgC;AAChC,iCAAmB;AAGnB,MAAM,eAAe;AAiBd,MAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,UAAU,QAAI,yBAAW,iCAAY;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,aAAAA,QAAM,SAAgC,IAAI;AACpF,QAAM,EAAE,GAAG,GAAG,UAAU,cAAc,KAAK,QAAI,8BAAY;AAAA,IACzD,UAAU,EAAE,WAAW,OAAO;AAAA,IAC9B,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY,KAAC,yBAAO,YAAY,OAAG,uBAAK,OAAG,wBAAM,EAAE,SAAS,EAAE,CAAC,CAAC;AAAA,IAChE,sBAAsB;AAAA,EACxB,CAAC;AAGD,QAAM,YAAY,gBAAgB;AAElC,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,WAAW;AAC1B,qBAAe,cAA2B,iBAAiB,GAAG,MAAM;AAAA,IACtE;AAAA,EACF,GAAG,CAAC,WAAW,WAAW,aAAa,CAAC;AAExC,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,aAAW;AACd,aAAK,YAAY,OAAO;AACxB,yBAAiB,OAAO;AAAA,MAC1B;AAAA,MACA,WAAW,2BAAAC,QAAO;AAAA,MAClB,aAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,QACL,UAAU;AAAA,QACV,MAAM,KAAK;AAAA,QACX,KAAK,KAAK;AAAA,QACV,YAAY,YAAY,SAAY;AAAA,MACtC;AAAA,MACA,WAAW,OAAK;AACd,YAAI,EAAE,QAAQ,YAAY,EAAE,QAAQ,aAAa;AAE/C,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAClB,kBAAQ;AAAA,QACV;AAAA,MACF;AAAA;AAAA,IAEC;AAAA,EACH;AAEJ;",
+  "names": ["React", "styles"]
+}

package/dist/cjs/plugin-ai/ai-plus-button/ai-plus-button-scss.js

@@ -22,6 +22,6 @@ __export(ai_plus_button_exports, {
 });
 module.exports = __toCommonJS(ai_plus_button_exports);
 var ai_plus_button_default = {
-  "button": "_07gVH"
+  "button": "vzSqA"
 };
 //# sourceMappingURL=ai-plus-button-scss.js.map

package/dist/cjs/plugin-ai/ai-plus-button/ai-plus-button-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-ai/ai-plus-button/ai-plus-button.scss"],
-  "sourcesContent": ["export default {\n  \"button\": \"_07gVH\"\n};"],
+  "sourcesContent": ["export default {\n  \"button\": \"vzSqA\"\n};"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAO,yBAAQ;AAAA,EACb,UAAU;AACZ;",
   "names": []
 }

package/dist/cjs/plugin-ai/data-hooks.js

@@ -24,6 +24,7 @@ __export(data_hooks_exports, {
   AI_FLOW_ITEM_CONTENT: () => AI_FLOW_ITEM_CONTENT,
   AI_FLOW_ITEM_IMAGE: () => AI_FLOW_ITEM_IMAGE,
   AI_FLOW_SELECTION_POPOVER: () => AI_FLOW_SELECTION_POPOVER,
+  AI_FOOTER_BUTTON: () => AI_FOOTER_BUTTON,
   AI_IMAGE_MODAL_ACTION_INSERT: () => AI_IMAGE_MODAL_ACTION_INSERT,
   AI_IMAGE_MODAL_ACTION_INSERT_ABOVE: () => AI_IMAGE_MODAL_ACTION_INSERT_ABOVE,
   AI_IMAGE_MODAL_ACTION_INSERT_BELOW: () => AI_IMAGE_MODAL_ACTION_INSERT_BELOW,
@@ -38,6 +39,11 @@ __export(data_hooks_exports, {
   AI_IMAGE_MODAL_PROMPT_INPUT: () => AI_IMAGE_MODAL_PROMPT_INPUT,
   AI_IMAGE_MODAL_ROOT: () => AI_IMAGE_MODAL_ROOT,
   AI_IMAGE_MODAL_SUBMIT_BUTTON: () => AI_IMAGE_MODAL_SUBMIT_BUTTON,
+  AI_MENU_BACK: () => AI_MENU_BACK,
+  AI_MENU_POPOVER: () => AI_MENU_POPOVER,
+  AI_MENU_PROMPT_INPUT: () => AI_MENU_PROMPT_INPUT,
+  AI_MENU_PROMPT_SUBMIT: () => AI_MENU_PROMPT_SUBMIT,
+  AI_MENU_SUBMENU: () => AI_MENU_SUBMENU,
   AI_MODAL_CANCEL_BUTTON: () => AI_MODAL_CANCEL_BUTTON,
   AI_MODAL_DISCARD_MODAL: () => AI_MODAL_DISCARD_MODAL,
   AI_MODAL_ERROR_CANCEL_BUTTON: () => AI_MODAL_ERROR_CANCEL_BUTTON,
@@ -56,6 +62,7 @@ __export(data_hooks_exports, {
   AI_MODAL_RESULTS_SECOND_ACTION_BUTTON: () => AI_MODAL_RESULTS_SECOND_ACTION_BUTTON,
   AI_MODAL_ROOT: () => AI_MODAL_ROOT,
   AI_MODAL_SUBMIT_BUTTON: () => AI_MODAL_SUBMIT_BUTTON,
+  AI_SELECTION_BUTTON: () => AI_SELECTION_BUTTON,
   TEXT_BUTTON_AI: () => TEXT_BUTTON_AI
 });
 module.exports = __toCommonJS(data_hooks_exports);
@@ -98,4 +105,11 @@ const AI_IMAGE_MODAL_ACTION_INSERT = "ai-image-modal-action-insert";
 const AI_IMAGE_MODAL_IMAGE_STYLE = "ai-image-modal-image-style";
 const AI_IMAGE_MODAL_PROMPT_HELPER_POPOVER = "ai-image-modal-prompt-helper-popover";
 const AI_IMAGE_MODAL_PROMPT_HELPER_POPOVER_CLOSE = "ai-image-modal-prompt-helper-popover-close";
+const AI_MENU_POPOVER = "ai-menu-popover";
+const AI_MENU_PROMPT_INPUT = "ai-menu-prompt-input";
+const AI_MENU_BACK = "ai-menu-back";
+const AI_MENU_SUBMENU = "ai-menu-submenu";
+const AI_MENU_PROMPT_SUBMIT = "ai-menu-prompt-submit";
+const AI_FOOTER_BUTTON = "footer-button-ai";
+const AI_SELECTION_BUTTON = "ai-selection-button";
 //# sourceMappingURL=data-hooks.js.map

package/dist/cjs/plugin-ai/data-hooks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-ai/data-hooks.ts"],
-  "sourcesContent": ["export const TEXT_BUTTON_AI = 'text-button-ai';\nexport const AI_MODAL_FLOATING_MENU_POPOVER = 'ai-modal-floating-menu-popover';\nexport const AI_MODAL_ROOT = 'ai-modal-root';\nexport const AI_MODAL_PROMPT_INPUT = 'ai-modal-prompt-input';\nexport const AI_MODAL_CANCEL_BUTTON = 'ai-modal-cancel-button';\nexport const AI_MODAL_SUBMIT_BUTTON = 'ai-modal-submit-button';\nexport const AI_MODAL_PROMPT_LIST_ITEM = 'ai-modal-prompt-list-item';\nexport const AI_MODAL_LOADING_INDICATOR = 'ai-modal-loading-indicator';\nexport const AI_MODAL_RESULTS_CONTENT = 'ai-modal-results-content';\nexport const AI_MODAL_RESULTS_CONTENT_ITEM = 'ai-modal-results-content-item';\nexport const AI_MODAL_RESULTS_FIST_ACTION_BUTTON = 'ai-modal-results-first-action-button';\nexport const AI_MODAL_RESULTS_SECOND_ACTION_BUTTON = 'ai-modal-results-second-action-button';\nexport const AI_MODAL_RESULTS_ACTIONS_POPOVER = 'ai-modal-results-actions-popover';\nexport const AI_MODAL_RESULTS_ACTIONS_POPOVER_TRIGGER = 'ai-modal-results-actions-popover-trigger';\nexport const AI_MODAL_NO_SELECTION_CONTAINER = 'ai-modal-no-selection-container';\nexport const AI_MODAL_ERROR_CONTAINER = 'ai-modal-error-container';\nexport const AI_MODAL_ERROR_RETRY_BUTTON = 'ai-modal-error-retry-button';\nexport const AI_MODAL_ERROR_CANCEL_BUTTON = 'ai-modal-error-cancel-button';\nexport const AI_MODAL_DISCARD_MODAL = 'ai-modal-discard-modal';\n\nexport const AI_EXPORTS_ALT_TEXT_INPUT_AREA = 'ai-exports-image-alt-text-input-area';\nexport const AI_EXPORTS_ALT_TEXT_GENERATE_BUTTON = 'ai-exports-image-alt-text-generate-button';\nexport const AI_EXPORTS_CAPTION_TRIGGER_BUTTON = 'ai-exports-image-caption-trigger-button';\n\nexport const AI_FLOW_SELECTION_POPOVER = 'ai-flow-selection-popover';\nexport const AI_FLOW_ITEM_CONTENT = 'ai-flow-popover-item-content';\nexport const AI_FLOW_ITEM_IMAGE = 'ai-flow-popover-item-image';\n\nexport const AI_IMAGE_MODAL_ROOT = 'ai-image-modal-root';\nexport const AI_IMAGE_MODAL_PROMPT_INPUT = 'ai-image-modal-prompt-input';\nexport const AI_IMAGE_MODAL_CANCEL_BUTTON = 'ai-image--modal-cancel-button';\nexport const AI_IMAGE_MODAL_SUBMIT_BUTTON = 'ai-image--modal-submit-button';\nexport const AI_IMAGE_MODAL_ERROR_RETRY_BUTTON = 'ai-modal-error-retry-button';\nexport const AI_IMAGE_MODAL_ERROR_CANCEL_BUTTON = 'ai-modal-error-cancel-button';\nexport const AI_IMAGE_MODAL_FEED_ITEM = 'ai-image-modal-feed-item';\nexport const AI_IMAGE_MODAL_FEED_LOADER = 'ai-image-modal-image-loader';\nexport const AI_IMAGE_MODAL_ACTION_INSERT_ABOVE = 'ai-image-modal-action-insert-above';\nexport const AI_IMAGE_MODAL_ACTION_INSERT_BELOW = 'ai-image-modal-action-insert-below';\nexport const AI_IMAGE_MODAL_ACTION_INSERT = 'ai-image-modal-action-insert';\nexport const AI_IMAGE_MODAL_IMAGE_STYLE = 'ai-image-modal-image-style';\nexport const AI_IMAGE_MODAL_PROMPT_HELPER_POPOVER = 'ai-image-modal-prompt-helper-popover';\nexport const AI_IMAGE_MODAL_PROMPT_HELPER_POPOVER_CLOSE =\n  'ai-image-modal-prompt-helper-popover-close';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,iBAAiB;AACvB,MAAM,iCAAiC;AACvC,MAAM,gBAAgB;AACtB,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,6BAA6B;AACnC,MAAM,2BAA2B;AACjC,MAAM,gCAAgC;AACtC,MAAM,sCAAsC;AAC5C,MAAM,wCAAwC;AAC9C,MAAM,mCAAmC;AACzC,MAAM,2CAA2C;AACjD,MAAM,kCAAkC;AACxC,MAAM,2BAA2B;AACjC,MAAM,8BAA8B;AACpC,MAAM,+BAA+B;AACrC,MAAM,yBAAyB;AAE/B,MAAM,iCAAiC;AACvC,MAAM,sCAAsC;AAC5C,MAAM,oCAAoC;AAE1C,MAAM,4BAA4B;AAClC,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AACpC,MAAM,+BAA+B;AACrC,MAAM,+BAA+B;AACrC,MAAM,oCAAoC;AAC1C,MAAM,qCAAqC;AAC3C,MAAM,2BAA2B;AACjC,MAAM,6BAA6B;AACnC,MAAM,qCAAqC;AAC3C,MAAM,qCAAqC;AAC3C,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AACnC,MAAM,uCAAuC;AAC7C,MAAM,6CACX;",
+  "sourcesContent": ["export const TEXT_BUTTON_AI = 'text-button-ai';\nexport const AI_MODAL_FLOATING_MENU_POPOVER = 'ai-modal-floating-menu-popover';\nexport const AI_MODAL_ROOT = 'ai-modal-root';\nexport const AI_MODAL_PROMPT_INPUT = 'ai-modal-prompt-input';\nexport const AI_MODAL_CANCEL_BUTTON = 'ai-modal-cancel-button';\nexport const AI_MODAL_SUBMIT_BUTTON = 'ai-modal-submit-button';\nexport const AI_MODAL_PROMPT_LIST_ITEM = 'ai-modal-prompt-list-item';\nexport const AI_MODAL_LOADING_INDICATOR = 'ai-modal-loading-indicator';\nexport const AI_MODAL_RESULTS_CONTENT = 'ai-modal-results-content';\nexport const AI_MODAL_RESULTS_CONTENT_ITEM = 'ai-modal-results-content-item';\nexport const AI_MODAL_RESULTS_FIST_ACTION_BUTTON = 'ai-modal-results-first-action-button';\nexport const AI_MODAL_RESULTS_SECOND_ACTION_BUTTON = 'ai-modal-results-second-action-button';\nexport const AI_MODAL_RESULTS_ACTIONS_POPOVER = 'ai-modal-results-actions-popover';\nexport const AI_MODAL_RESULTS_ACTIONS_POPOVER_TRIGGER = 'ai-modal-results-actions-popover-trigger';\nexport const AI_MODAL_NO_SELECTION_CONTAINER = 'ai-modal-no-selection-container';\nexport const AI_MODAL_ERROR_CONTAINER = 'ai-modal-error-container';\nexport const AI_MODAL_ERROR_RETRY_BUTTON = 'ai-modal-error-retry-button';\nexport const AI_MODAL_ERROR_CANCEL_BUTTON = 'ai-modal-error-cancel-button';\nexport const AI_MODAL_DISCARD_MODAL = 'ai-modal-discard-modal';\n\nexport const AI_EXPORTS_ALT_TEXT_INPUT_AREA = 'ai-exports-image-alt-text-input-area';\nexport const AI_EXPORTS_ALT_TEXT_GENERATE_BUTTON = 'ai-exports-image-alt-text-generate-button';\nexport const AI_EXPORTS_CAPTION_TRIGGER_BUTTON = 'ai-exports-image-caption-trigger-button';\n\nexport const AI_FLOW_SELECTION_POPOVER = 'ai-flow-selection-popover';\nexport const AI_FLOW_ITEM_CONTENT = 'ai-flow-popover-item-content';\nexport const AI_FLOW_ITEM_IMAGE = 'ai-flow-popover-item-image';\n\nexport const AI_IMAGE_MODAL_ROOT = 'ai-image-modal-root';\nexport const AI_IMAGE_MODAL_PROMPT_INPUT = 'ai-image-modal-prompt-input';\nexport const AI_IMAGE_MODAL_CANCEL_BUTTON = 'ai-image--modal-cancel-button';\nexport const AI_IMAGE_MODAL_SUBMIT_BUTTON = 'ai-image--modal-submit-button';\nexport const AI_IMAGE_MODAL_ERROR_RETRY_BUTTON = 'ai-modal-error-retry-button';\nexport const AI_IMAGE_MODAL_ERROR_CANCEL_BUTTON = 'ai-modal-error-cancel-button';\nexport const AI_IMAGE_MODAL_FEED_ITEM = 'ai-image-modal-feed-item';\nexport const AI_IMAGE_MODAL_FEED_LOADER = 'ai-image-modal-image-loader';\nexport const AI_IMAGE_MODAL_ACTION_INSERT_ABOVE = 'ai-image-modal-action-insert-above';\nexport const AI_IMAGE_MODAL_ACTION_INSERT_BELOW = 'ai-image-modal-action-insert-below';\nexport const AI_IMAGE_MODAL_ACTION_INSERT = 'ai-image-modal-action-insert';\nexport const AI_IMAGE_MODAL_IMAGE_STYLE = 'ai-image-modal-image-style';\nexport const AI_IMAGE_MODAL_PROMPT_HELPER_POPOVER = 'ai-image-modal-prompt-helper-popover';\nexport const AI_IMAGE_MODAL_PROMPT_HELPER_POPOVER_CLOSE =\n  'ai-image-modal-prompt-helper-popover-close';\n\nexport const AI_MENU_POPOVER = 'ai-menu-popover';\nexport const AI_MENU_PROMPT_INPUT = 'ai-menu-prompt-input';\nexport const AI_MENU_BACK = 'ai-menu-back';\nexport const AI_MENU_SUBMENU = 'ai-menu-submenu';\nexport const AI_MENU_PROMPT_SUBMIT = 'ai-menu-prompt-submit';\nexport const AI_FOOTER_BUTTON = 'footer-button-ai';\nexport const AI_SELECTION_BUTTON = 'ai-selection-button';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,iBAAiB;AACvB,MAAM,iCAAiC;AACvC,MAAM,gBAAgB;AACtB,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,6BAA6B;AACnC,MAAM,2BAA2B;AACjC,MAAM,gCAAgC;AACtC,MAAM,sCAAsC;AAC5C,MAAM,wCAAwC;AAC9C,MAAM,mCAAmC;AACzC,MAAM,2CAA2C;AACjD,MAAM,kCAAkC;AACxC,MAAM,2BAA2B;AACjC,MAAM,8BAA8B;AACpC,MAAM,+BAA+B;AACrC,MAAM,yBAAyB;AAE/B,MAAM,iCAAiC;AACvC,MAAM,sCAAsC;AAC5C,MAAM,oCAAoC;AAE1C,MAAM,4BAA4B;AAClC,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AACpC,MAAM,+BAA+B;AACrC,MAAM,+BAA+B;AACrC,MAAM,oCAAoC;AAC1C,MAAM,qCAAqC;AAC3C,MAAM,2BAA2B;AACjC,MAAM,6BAA6B;AACnC,MAAM,qCAAqC;AAC3C,MAAM,qCAAqC;AAC3C,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AACnC,MAAM,uCAAuC;AAC7C,MAAM,6CACX;AAEK,MAAM,kBAAkB;AACxB,MAAM,uBAAuB;AAC7B,MAAM,eAAe;AACrB,MAAM,kBAAkB;AACxB,MAAM,wBAAwB;AAC9B,MAAM,mBAAmB;AACzB,MAAM,sBAAsB;",
   "names": []
 }

package/dist/cjs/plugin-ai/editor.js

@@ -39,16 +39,20 @@ var import_memo_last = require("./../_shared/memo-last.js");
 var import_is_always_visible = require("./../_shared/resolvers/is-always-visible.js");
 var import_is_node_or_caption_selected = require("./../_shared/resolvers/is-node-or-caption-selected.js");
 var import_tiptap = require("./../tiptap/index.js");
+var import_editor_common = require("./../editor-common/index.js");
 var import_ai_actions_modal = require("./ai-actions-modal/ai-actions-modal.js");
 var import_ai_content_modal = require("./ai-content-modal/ai-content-modal.js");
 var import_ai_flow_selection_modal = require("./ai-flow-selection-modal/ai-flow-selection-modal.js");
 var import_ai_image_modal = require("./ai-image-modal/ai-image-modal.js");
+var import_ai_menu_modal = require("./ai-menu-modal/ai-menu-modal.js");
 var import_data_hooks = require("./data-hooks.js");
 var import_discard_confirmation_modal = require("./discard-confirmation-modal/discard-confirmation-modal.js");
 var import_alt_text_input = require("./exports/image-alt-text-input/alt-text-input.js");
 var import_caption_trigger = require("./exports/image-caption-integration/caption-trigger.js");
 var import_floating_toolbar_button = require("./floating-toolbar-button/floating-toolbar-button.js");
+var import_edit_with_ai_button = require("./selection-button/edit-with-ai-button.js");
 var import_extensions = require("./tiptap/extensions.js");
+var import_ai_icon = require("./toolbar/ai-icon.js");
 var import_ai_toolbar_button = require("./toolbar/ai-toolbar-button.js");
 var import_toolbar_button_small = require("./toolbar/toolbar-button-small.js");
 var import_types = require("./types.js");
@@ -64,7 +68,14 @@ const DEFAULT_CONFIG = {
 };
 const pluginAi = (pluginConfig) => {
   const config = { ...DEFAULT_CONFIG, ...pluginConfig };
-  const aiIcon = (0, import_memo_last.memoLast)((t) => () => /* @__PURE__ */ import_react.default.createElement(import_toolbar_button_small.ToolbarButtonSmall, { showLabel: config.showToolbarButtonText ?? false, t }));
+  const aiIcon = (0, import_memo_last.memoLast)((t) => () => /* @__PURE__ */ import_react.default.createElement(
+    import_toolbar_button_small.ToolbarButtonSmall,
+    {
+      showLabel: config.showToolbarButtonText ?? false,
+      t,
+      labelKey: config.menu ? MENU_BUTTON_LABEL : void 0
+    }
+  ));
   const openDiscardModal = (modalsService, referenceElement) => {
     return new Promise((resolve) => {
       modalsService.openModal({
@@ -105,7 +116,7 @@ const pluginAi = (pluginConfig) => {
       referenceElement: getFakeReferenceElement(editor),
       placement: "right-start"
     },
-    dropdownValue: initialPrompt ? (0, import_get_prompt_bi.getPromptBiValue)(initialPrompt) : void 0,
+    dropdownValue: initialPrompt && typeof initialPrompt !== "string" ? (0, import_get_prompt_bi.getPromptBiValue)(initialPrompt) : void 0,
     entryType,
     returnFocusToEditor: false
   });
@@ -152,6 +163,43 @@ const pluginAi = (pluginConfig) => {
       autoFocus: false
     });
   };
+  const toggleAiMenu = (mode, entryType) => (modalsService, referenceElement) => {
+    if (modalsService.isModalOpen(import_types.AI_MENU_MODAL_ID)) {
+      modalsService.closeModal(import_types.AI_MENU_MODAL_ID);
+      return;
+    }
+    const element = referenceElement instanceof HTMLElement ? referenceElement : void 0;
+    modalsService.openModal({
+      id: import_types.AI_MENU_MODAL_ID,
+      Component: import_ai_menu_modal.AiMenuModal,
+      componentProps: {
+        mode,
+        config,
+        toggleAiContentModal: toggleAiModal(entryType)
+      },
+      layout: referenceElement ? "floating" : "dialog",
+      positioning: {
+        referenceElement: element ? toStableReference(element) : referenceElement,
+        placement: "bottom-start"
+      },
+      // Positioned `fixed`, so without it the menu stays put on screen while its button scrolls away.
+      sticky: true,
+      // The default click-outside check needs an element reference, not a virtual one.
+      ...referenceElement && {
+        onClickOutside: (event) => {
+          if (!element?.contains(event.target)) {
+            modalsService.closeModal(import_types.AI_MENU_MODAL_ID);
+          }
+        },
+        focusReturnElement: element
+      },
+      type: "exclusive",
+      entryType,
+      disableArrowNavigation: true,
+      returnFocusToEditor: false,
+      autoFocus: false
+    });
+  };
   const toggleAiImageModal = (entryType) => (editor, modalsService, convertSelectionToPrompt) => modalsService.togglePluginPanel({
     id: import_types.AI_IMAGE_MODAL_ID,
     Component: import_ai_image_modal.AiImageModal,
@@ -194,14 +242,25 @@ const pluginAi = (pluginConfig) => {
     config,
     type: import_types.AI_TYPE,
     tiptapExtensions: import_extensions.tiptapExtensions,
+    ...config.menu && config.menu.selectionButton !== false ? {
+      GlobalComponent: () => /* @__PURE__ */ import_react.default.createElement(import_edit_with_ai_button.EditWithAiButton, { toggleEditMenu: toggleAiMenu("edit", "SELECTION_BUTTON") })
+    } : {},
     textButtons: [
       {
         id: import_types.AI_TYPE,
         type: "modal",
         presentation: {
           dataHook: import_data_hooks.TEXT_BUTTON_AI,
-          tooltip: "AIPlugin_ToolbarButton_Tooltip",
-          renderer: (toolbarItem) => /* @__PURE__ */ import_react.default.createElement(import_ai_toolbar_button.AiToolbarButton, { toolbarItem, showLabel: config.showToolbarButtonText }),
+          // An external toolbar, e.g. a host's own header, shows only the icon and this tooltip.
+          tooltip: config.menu ? MENU_BUTTON_LABEL : "AIPlugin_ToolbarButton_Tooltip",
+          renderer: (toolbarItem) => /* @__PURE__ */ import_react.default.createElement(
+            import_ai_toolbar_button.AiToolbarButton,
+            {
+              toolbarItem,
+              showLabel: config.showToolbarButtonText,
+              labelKey: config.menu ? MENU_BUTTON_LABEL : void 0
+            }
+          ),
           getIcon: ({ t }) => aiIcon(t)
         },
         attributes: {
@@ -210,6 +269,10 @@ const pluginAi = (pluginConfig) => {
         },
         command: ({ editor, modalService, editorQuery, referenceElement }) => (event) => {
           const target = event?.target ?? referenceElement;
+          if (config.menu) {
+            toggleAiMenu("create", import_ricos_types.ToolbarType.FORMATTING)(modalService, target);
+            return false;
+          }
           if (checkContextualMode({ editorQuery: editorQuery.query }) && target && // No activeElement in JSDOM tests, always assume editor is focused
           (event?.view?.document ? event.view.document.activeElement === editor.view.dom : true)) {
             const { from, to } = editor.state.selection;
@@ -241,7 +304,8 @@ const pluginAi = (pluginConfig) => {
         }
       }
     ],
-    floatingToolbarButton: {
+    // With the menu, the selection's "Edit with AI" button takes over the side button's job.
+    floatingToolbarButton: config.menu ? void 0 : {
       Component: ({ position, className }) => /* @__PURE__ */ import_react.default.createElement(
         import_floating_toolbar_button.FloatingToolbarButton,
         {
@@ -261,7 +325,23 @@ const pluginAi = (pluginConfig) => {
       // handle's internals directly.
       isVisible: (args) => checkContextualMode(args) && !args.pluginExports.blockDragHandle?.isActive
     },
-    getQuickActions: ({ pluginServices }) => pluginServices?.context.isMobile ? [] : [
+    getAddButtons: (_config, services) => config.menu?.footerButton ? [
+      {
+        id: import_editor_common.AI_CREATE_ADD_BUTTON_ID,
+        label: import_editor_common.INSERT_PLUGIN_BUTTONS.AI,
+        dataHook: import_data_hooks.AI_FOOTER_BUTTON,
+        icon: import_ai_icon.AiIcon,
+        tooltip: "AIPlugin_ToolbarButton_CreateWithAI",
+        toolbars: [import_ricos_types.ToolbarType.FOOTER],
+        showLabel: true,
+        command: ({ referenceElement }) => {
+          toggleAiMenu("create", import_ricos_types.ToolbarType.FOOTER)(services.modals, referenceElement);
+          return true;
+        }
+      }
+    ] : [],
+    // The menu's items are all the host's, so its own AI flows stay out of the quick actions too.
+    getQuickActions: ({ pluginServices }) => config.menu || pluginServices?.context.isMobile ? [] : [
       {
         id: "writeWithAi",
         title: "QuickActionsPlugin_ActionTitle_WriteWithAI",
@@ -353,11 +433,34 @@ const pluginAi = (pluginConfig) => {
           altTextInput: config.enableImageAltTextExport ? (0, import_alt_text_input.createAltTextInput)(config) : void 0
         }
       },
-      ...config.enableImageGeneration ? {
-        modals: {
+      modals: {
+        ...config.enableImageGeneration && {
           AI_IMAGE: (editor, services) => toggleAiImageModal("EXTERNAL")(editor, services.modals)
+        },
+        // "Create with AI", under the host's element or else the block at the cursor.
+        ...config.menu && {
+          AI_MENU: (editor, services, { referenceElement } = {}) => {
+            const { view } = editor;
+            const blockDOM = view.nodeDOM(view.state.selection.$from.before(1));
+            toggleAiMenu("create", "EXTERNAL")(
+              services.modals,
+              referenceElement ?? (blockDOM instanceof HTMLElement ? blockDOM : view.dom)
+            );
+          }
         }
-      } : {}
+      }
+    }
+  };
+};
+const MENU_BUTTON_LABEL = "AIPlugin_ToolbarButton_CreateWithAI";
+const toStableReference = (element) => {
+  let lastRect = element.getBoundingClientRect();
+  return {
+    getBoundingClientRect: () => {
+      if (element.isConnected) {
+        lastRect = element.getBoundingClientRect();
+      }
+      return lastRect;
     }
   };
 };