@wix/ricos 11.20.6 → 11.21.1

package/dist/es/plugin-button/get-toolbar-buttons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-button/get-toolbar-buttons.tsx"],
-  "sourcesContent": ["import type { RicosServices, TiptapEditor, ToolbarButton } from './../ricos-types/index.js';\nimport { PAYWALL_EXTENSION_NAME } from './../_shared/paywall/paywall-extension-name.js';\nimport { isPaywallSelection } from './../_shared/paywall/paywall-selection.js';\nimport { createAnimationButton } from './../_shared/plugin-toolbar/create-animation-button.js';\nimport { createDeleteButton } from './../_shared/plugin-toolbar/create-delete-button.js';\nimport { createLinkButton } from './../_shared/plugin-toolbar/create-link-button.js';\nimport { createNodeAlignmentButton } from './../_shared/plugin-toolbar/create-node-alignment-button.js';\nimport { createSettingsButton } from './../_shared/plugin-toolbar/create-settings-button.js';\nimport { createSeparator } from './../_shared/plugin-toolbar/separator/create-separator.js';\n\nimport { buttonsModals } from './constants.js';\nimport { isLastPaywallButton } from './is-last-paywall-button.js';\nimport { ButtonSettingsModal } from './modals/settings-modal.js';\nimport { LINK_BUTTON_TYPE } from './types.js';\nimport type {\n  ACTION_BUTTON_TYPE,\n  ActionButtonPluginEditorConfig,\n  LinkButtonPluginEditorConfig,\n} from './types.js';\n\n/**\n * Without the plugin a PAYWALL layout is ordinary content, so both controls stay available.\n *\n * Asked of the extension list rather than of `editor.commands`, whose getter allocates a\n * transaction and rewraps every command on each read — and these resolvers run on every\n * toolbar resolution.\n */\nconst hasPaywallPlugin = (editor: TiptapEditor): boolean =>\n  editor.extensionManager.extensions.some(extension => extension.name === PAYWALL_EXTENSION_NAME);\n\nexport const getToolbarButtons = ({\n  config,\n  services,\n  type,\n}:\n  | {\n      type: typeof LINK_BUTTON_TYPE;\n      services: RicosServices;\n      config: LinkButtonPluginEditorConfig;\n    }\n  | {\n      type: typeof ACTION_BUTTON_TYPE;\n      services: RicosServices;\n      config: ActionButtonPluginEditorConfig;\n    }): ToolbarButton[] => {\n  const alignmentModalId = buttonsModals.alignment[type];\n  const settingsModalId = buttonsModals.settings[type];\n\n  const alignmentButton = createNodeAlignmentButton({ services, modalId: alignmentModalId });\n\n  const linkButton = createLinkButton(services);\n  linkButton.attributes = {\n    ...linkButton.attributes,\n    // A subscribe button's target is the paywall's viewer config rather than an authored\n    // link, so inside a paywall a link editor writes a value nothing reads.\n    visible: (_content, _resolverServices, editor) =>\n      type === LINK_BUTTON_TYPE ||\n      !editor?.state ||\n      !hasPaywallPlugin(editor) ||\n      !isPaywallSelection(editor.state.selection),\n  };\n  const settingsButton = createSettingsButton({\n    modalId: settingsModalId,\n    command: ({ modals, referenceElement, attributes }) => {\n      modals.togglePluginPanel({\n        id: settingsModalId,\n        isMobile: services.context.isMobile,\n        Component: ButtonSettingsModal,\n        componentProps: {\n          nodeId: attributes.selectedNode?.attrs.id,\n          settings: config,\n          type,\n          modalId: settingsModalId,\n          referenceElement,\n        },\n        positioning: {\n          referenceElement:\n            referenceElement?.closest('[data-hook~=floating-plugin-toolbar]') ?? referenceElement,\n          placement: 'right-start',\n        },\n        onClickOutside: {\n          on: 'pointerup',\n          handler: () => {},\n        },\n        focusReturnElement: referenceElement,\n      });\n    },\n  });\n  const separator = createSeparator();\n  const animation = createAnimationButton(services);\n  const deleteButton = createDeleteButton({\n    attributes: {\n      // A paywall's last subscribe button cannot be deleted while the paywall survives, so\n      // the trash there would only produce a rejected transaction.\n      visible: (_content, _resolverServices, editor) =>\n        !editor || !hasPaywallPlugin(editor) || !isLastPaywallButton(editor),\n    },\n  });\n\n  return services.context.environment === 'wixel'\n    ? [settingsButton, linkButton, alignmentButton, animation, deleteButton]\n    : [alignmentButton, linkButton, settingsButton, animation, separator, deleteButton];\n};\n"],
-  "mappings": "AACA,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAEhC,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAcjC,MAAM,mBAAmB,CAAC,WACxB,OAAO,iBAAiB,WAAW,KAAK,eAAa,UAAU,SAAS,sBAAsB;AAEzF,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAU2B;AACzB,QAAM,mBAAmB,cAAc,UAAU,IAAI;AACrD,QAAM,kBAAkB,cAAc,SAAS,IAAI;AAEnD,QAAM,kBAAkB,0BAA0B,EAAE,UAAU,SAAS,iBAAiB,CAAC;AAEzF,QAAM,aAAa,iBAAiB,QAAQ;AAC5C,aAAW,aAAa;AAAA,IACtB,GAAG,WAAW;AAAA;AAAA;AAAA,IAGd,SAAS,CAAC,UAAU,mBAAmB,WACrC,SAAS,oBACT,CAAC,QAAQ,SACT,CAAC,iBAAiB,MAAM,KACxB,CAAC,mBAAmB,OAAO,MAAM,SAAS;AAAA,EAC9C;AACA,QAAM,iBAAiB,qBAAqB;AAAA,IAC1C,SAAS;AAAA,IACT,SAAS,CAAC,EAAE,QAAQ,kBAAkB,WAAW,MAAM;AACrD,aAAO,kBAAkB;AAAA,QACvB,IAAI;AAAA,QACJ,UAAU,SAAS,QAAQ;AAAA,QAC3B,WAAW;AAAA,QACX,gBAAgB;AAAA,UACd,QAAQ,WAAW,cAAc,MAAM;AAAA,UACvC,UAAU;AAAA,UACV;AAAA,UACA,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX,kBACE,kBAAkB,QAAQ,sCAAsC,KAAK;AAAA,UACvE,WAAW;AAAA,QACb;AAAA,QACA,gBAAgB;AAAA,UACd,IAAI;AAAA,UACJ,SAAS,MAAM;AAAA,UAAC;AAAA,QAClB;AAAA,QACA,oBAAoB;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,QAAM,YAAY,gBAAgB;AAClC,QAAM,YAAY,sBAAsB,QAAQ;AAChD,QAAM,eAAe,mBAAmB;AAAA,IACtC,YAAY;AAAA;AAAA;AAAA,MAGV,SAAS,CAAC,UAAU,mBAAmB,WACrC,CAAC,UAAU,CAAC,iBAAiB,MAAM,KAAK,CAAC,oBAAoB,MAAM;AAAA,IACvE;AAAA,EACF,CAAC;AAED,SAAO,SAAS,QAAQ,gBAAgB,UACpC,CAAC,gBAAgB,YAAY,iBAAiB,WAAW,YAAY,IACrE,CAAC,iBAAiB,YAAY,gBAAgB,WAAW,WAAW,YAAY;AACtF;",
+  "sourcesContent": ["import { TextSmall } from '@wix/wix-ui-icons-common/lazy';\n\nimport type { RicosServices, TiptapEditor, ToolbarButton } from './../ricos-types/index.js';\nimport type { ToolbarButtonCommand } from './../ricos-types/plugin-types.js';\nimport { PAYWALL_EXTENSION_NAME } from './../_shared/paywall/paywall-extension-name.js';\nimport { isPaywallSelection } from './../_shared/paywall/paywall-selection.js';\nimport { createAnimationButton } from './../_shared/plugin-toolbar/create-animation-button.js';\nimport { createDeleteButton } from './../_shared/plugin-toolbar/create-delete-button.js';\nimport { createLinkButton } from './../_shared/plugin-toolbar/create-link-button.js';\nimport { createNodeAlignmentButton } from './../_shared/plugin-toolbar/create-node-alignment-button.js';\nimport { createSettingsButton } from './../_shared/plugin-toolbar/create-settings-button.js';\nimport { PLUGIN_TOOLBAR_BUTTON_ID } from './../_shared/plugin-toolbar/plugin-toolbar-buttons-ids.js';\nimport { createSeparator } from './../_shared/plugin-toolbar/separator/create-separator.js';\n\nimport { LinkModalButtonTextField } from './components/button-text-field.js';\nimport { buttonsModals } from './constants.js';\nimport { PLUGIN_TOOLBAR_TEXT_BUTTON } from './data-hooks.js';\nimport { isLastPaywallButton } from './is-last-paywall-button.js';\nimport { ActionButtonTextModal } from './modals/action-button-text-modal.js';\nimport { ButtonSettingsModal } from './modals/settings-modal.js';\nimport { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from './types.js';\nimport type { ActionButtonPluginEditorConfig, LinkButtonPluginEditorConfig } from './types.js';\n\n/**\n * Without the plugin a PAYWALL layout is ordinary content, so both controls stay available.\n *\n * Asked of the extension list rather than of `editor.commands`, whose getter allocates a\n * transaction and rewraps every command on each read — and these resolvers run on every\n * toolbar resolution.\n */\nconst hasPaywallPlugin = (editor: TiptapEditor): boolean =>\n  editor.extensionManager.extensions.some(extension => extension.name === PAYWALL_EXTENSION_NAME);\n\nexport const getToolbarButtons = ({\n  config,\n  services,\n  type,\n}:\n  | {\n      type: typeof LINK_BUTTON_TYPE;\n      services: RicosServices;\n      config: LinkButtonPluginEditorConfig;\n    }\n  | {\n      type: typeof ACTION_BUTTON_TYPE;\n      services: RicosServices;\n      config: ActionButtonPluginEditorConfig;\n    }): ToolbarButton[] => {\n  const alignmentModalId = buttonsModals.alignment[type];\n  const settingsModalId = buttonsModals.settings[type];\n\n  const alignmentButton = createNodeAlignmentButton({ services, modalId: alignmentModalId });\n\n  // Action buttons edit their text in a modal of their own instead.\n  const linkButton = createLinkButton(\n    services,\n    type === LINK_BUTTON_TYPE ? { ExtraField: LinkModalButtonTextField } : {}\n  );\n  linkButton.attributes = {\n    ...linkButton.attributes,\n    // A subscribe button's target is the paywall's viewer config rather than an authored\n    // link, so inside a paywall a link editor writes a value nothing reads.\n    visible: (_content, _resolverServices, editor) =>\n      type === LINK_BUTTON_TYPE ||\n      !editor?.state ||\n      !hasPaywallPlugin(editor) ||\n      !isPaywallSelection(editor.state.selection),\n  };\n  const togglePanel =\n    (modalId: string, Component: typeof ButtonSettingsModal): ToolbarButtonCommand =>\n    ({ modals, referenceElement, attributes }) => {\n      modals.togglePluginPanel({\n        id: modalId,\n        isMobile: services.context.isMobile,\n        Component,\n        componentProps: {\n          nodeId: attributes.selectedNode?.attrs.id,\n          settings: config,\n          type,\n          modalId,\n          referenceElement,\n        },\n        positioning: {\n          referenceElement:\n            referenceElement?.closest('[data-hook~=floating-plugin-toolbar]') ?? referenceElement,\n          placement: 'right-start',\n        },\n        onClickOutside: {\n          on: 'pointerup',\n          handler: () => {},\n        },\n        focusReturnElement: referenceElement,\n      });\n    };\n  const settingsButton = createSettingsButton({\n    modalId: settingsModalId,\n    command: togglePanel(settingsModalId, ButtonSettingsModal),\n  });\n  const textModalId = buttonsModals.text[ACTION_BUTTON_TYPE];\n  const textButtons =\n    type === ACTION_BUTTON_TYPE\n      ? [\n          createSettingsButton({\n            modalId: textModalId,\n            command: togglePanel(textModalId, ActionButtonTextModal),\n            buttonId: PLUGIN_TOOLBAR_BUTTON_ID.TEXT,\n            dataHook: PLUGIN_TOOLBAR_TEXT_BUTTON,\n            icon: TextSmall,\n            tooltip: 'ButtonPlugin_EditText_Tooltip',\n          }),\n        ]\n      : [];\n  const separator = createSeparator();\n  const animation = createAnimationButton(services);\n  const deleteButton = createDeleteButton({\n    attributes: {\n      // A paywall's last subscribe button cannot be deleted while the paywall survives, so\n      // the trash there would only produce a rejected transaction.\n      visible: (_content, _resolverServices, editor) =>\n        !editor || !hasPaywallPlugin(editor) || !isLastPaywallButton(editor),\n    },\n  });\n\n  return services.context.environment === 'wixel'\n    ? [...textButtons, settingsButton, linkButton, alignmentButton, animation, deleteButton]\n    : [\n        alignmentButton,\n        linkButton,\n        ...textButtons,\n        settingsButton,\n        animation,\n        separator,\n        deleteButton,\n      ];\n};\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAI1B,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AACzC,SAAS,uBAAuB;AAEhC,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB,wBAAwB;AAUrD,MAAM,mBAAmB,CAAC,WACxB,OAAO,iBAAiB,WAAW,KAAK,eAAa,UAAU,SAAS,sBAAsB;AAEzF,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAU2B;AACzB,QAAM,mBAAmB,cAAc,UAAU,IAAI;AACrD,QAAM,kBAAkB,cAAc,SAAS,IAAI;AAEnD,QAAM,kBAAkB,0BAA0B,EAAE,UAAU,SAAS,iBAAiB,CAAC;AAGzF,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,SAAS,mBAAmB,EAAE,YAAY,yBAAyB,IAAI,CAAC;AAAA,EAC1E;AACA,aAAW,aAAa;AAAA,IACtB,GAAG,WAAW;AAAA;AAAA;AAAA,IAGd,SAAS,CAAC,UAAU,mBAAmB,WACrC,SAAS,oBACT,CAAC,QAAQ,SACT,CAAC,iBAAiB,MAAM,KACxB,CAAC,mBAAmB,OAAO,MAAM,SAAS;AAAA,EAC9C;AACA,QAAM,cACJ,CAAC,SAAiB,cAClB,CAAC,EAAE,QAAQ,kBAAkB,WAAW,MAAM;AAC5C,WAAO,kBAAkB;AAAA,MACvB,IAAI;AAAA,MACJ,UAAU,SAAS,QAAQ;AAAA,MAC3B;AAAA,MACA,gBAAgB;AAAA,QACd,QAAQ,WAAW,cAAc,MAAM;AAAA,QACvC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,kBACE,kBAAkB,QAAQ,sCAAsC,KAAK;AAAA,QACvE,WAAW;AAAA,MACb;AAAA,MACA,gBAAgB;AAAA,QACd,IAAI;AAAA,QACJ,SAAS,MAAM;AAAA,QAAC;AAAA,MAClB;AAAA,MACA,oBAAoB;AAAA,IACtB,CAAC;AAAA,EACH;AACF,QAAM,iBAAiB,qBAAqB;AAAA,IAC1C,SAAS;AAAA,IACT,SAAS,YAAY,iBAAiB,mBAAmB;AAAA,EAC3D,CAAC;AACD,QAAM,cAAc,cAAc,KAAK,kBAAkB;AACzD,QAAM,cACJ,SAAS,qBACL;AAAA,IACE,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,SAAS,YAAY,aAAa,qBAAqB;AAAA,MACvD,UAAU,yBAAyB;AAAA,MACnC,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACX,CAAC;AAAA,EACH,IACA,CAAC;AACP,QAAM,YAAY,gBAAgB;AAClC,QAAM,YAAY,sBAAsB,QAAQ;AAChD,QAAM,eAAe,mBAAmB;AAAA,IACtC,YAAY;AAAA;AAAA;AAAA,MAGV,SAAS,CAAC,UAAU,mBAAmB,WACrC,CAAC,UAAU,CAAC,iBAAiB,MAAM,KAAK,CAAC,oBAAoB,MAAM;AAAA,IACvE;AAAA,EACF,CAAC;AAED,SAAO,SAAS,QAAQ,gBAAgB,UACpC,CAAC,GAAG,aAAa,gBAAgB,YAAY,iBAAiB,WAAW,YAAY,IACrF;AAAA,IACE;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACN;",
   "names": []
 }

package/dist/es/plugin-button/modals/action-button-text-modal.js

@@ -0,0 +1,34 @@
+import { Box } from "@wix/design-system";
+import React, { useContext } from "react";
+import { ModalServiceContext, RicosContext } from "./../../ricos-context/index.js";
+import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
+import { useNodeAttrs } from "./../../_shared/use-node-attrs.js";
+import {
+  Panel,
+  PanelHeader,
+  useClickOutside,
+  usePanelContainerElement
+} from "./../../ui-components/index.js";
+import { ButtonTextField } from "../components/button-text-field.js";
+import { TEXT_MODAL } from "../data-hooks.js";
+const ActionButtonTextModal = ({ nodeId, modalId, referenceElement }) => {
+  const { t } = useContext(RicosContext);
+  const modalService = useContext(ModalServiceContext) || {};
+  const containerEl = usePanelContainerElement();
+  const logBi = useBiNext({ modalId, pluginId: "actionButton", nodeId });
+  const { patchPmNodeAttrs, pmNodeAttrs } = useNodeAttrs(nodeId, "ACTION_BUTTON");
+  const closeModal = () => modalService.closeModal(modalId);
+  useClickOutside({
+    containerRef: { current: containerEl },
+    onClickOutside: (e) => {
+      if (!referenceElement?.contains(e.target)) {
+        closeModal();
+      }
+    }
+  });
+  return pmNodeAttrs ? /* @__PURE__ */ React.createElement(Panel, { closeButtonProps: { onClick: closeModal }, dataHook: TEXT_MODAL }, /* @__PURE__ */ React.createElement(PanelHeader, { title: t("ButtonModal_Header") }), /* @__PURE__ */ React.createElement(Box, { padding: "SP3", paddingTop: "SP4", width: "100%" }, /* @__PURE__ */ React.createElement(ButtonTextField, { buttonData: pmNodeAttrs, onChange: patchPmNodeAttrs, logBi }))) : null;
+};
+export {
+  ActionButtonTextModal
+};
+//# sourceMappingURL=action-button-text-modal.js.map

package/dist/es/plugin-button/modals/action-button-text-modal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-button/modals/action-button-text-modal.tsx"],
+  "sourcesContent": ["import { Box } from '@wix/design-system';\nimport type { FC } from 'react';\nimport React, { useContext } from 'react';\n\nimport { ModalServiceContext, RicosContext } from './../../ricos-context/index.js';\nimport { useBiNext } from './../../_shared/bi-context-provider/bi-context-provider.js';\nimport { useNodeAttrs } from './../../_shared/use-node-attrs.js';\nimport {\n  Panel,\n  PanelHeader,\n  useClickOutside,\n  usePanelContainerElement,\n} from './../../ui-components/index.js';\n\nimport { ButtonTextField } from '../components/button-text-field.js';\nimport { TEXT_MODAL } from '../data-hooks.js';\n\ninterface Props {\n  nodeId: string;\n  modalId: string;\n  referenceElement?: HTMLElement;\n}\n\n/** Link buttons edit their text in the link modal instead. */\nexport const ActionButtonTextModal: FC<Props> = ({ nodeId, modalId, referenceElement }) => {\n  const { t } = useContext(RicosContext);\n  const modalService = useContext(ModalServiceContext) || {};\n\n  const containerEl = usePanelContainerElement();\n\n  const logBi = useBiNext({ modalId, pluginId: 'actionButton', nodeId });\n\n  const { patchPmNodeAttrs, pmNodeAttrs } = useNodeAttrs(nodeId, 'ACTION_BUTTON');\n\n  const closeModal = () => modalService.closeModal(modalId);\n\n  useClickOutside({\n    containerRef: { current: containerEl },\n    onClickOutside: (e: MouseEvent | TouchEvent) => {\n      if (!referenceElement?.contains(e.target as Node)) {\n        closeModal();\n      }\n    },\n  });\n\n  return pmNodeAttrs ? (\n    <Panel closeButtonProps={{ onClick: closeModal }} dataHook={TEXT_MODAL}>\n      <PanelHeader title={t('ButtonModal_Header')} />\n      <Box padding=\"SP3\" paddingTop=\"SP4\" width=\"100%\">\n        <ButtonTextField buttonData={pmNodeAttrs} onChange={patchPmNodeAttrs} logBi={logBi} />\n      </Box>\n    </Panel>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,OAAO,SAAS,kBAAkB;AAElC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AASpB,MAAM,wBAAmC,CAAC,EAAE,QAAQ,SAAS,iBAAiB,MAAM;AACzF,QAAM,EAAE,EAAE,IAAI,WAAW,YAAY;AACrC,QAAM,eAAe,WAAW,mBAAmB,KAAK,CAAC;AAEzD,QAAM,cAAc,yBAAyB;AAE7C,QAAM,QAAQ,UAAU,EAAE,SAAS,UAAU,gBAAgB,OAAO,CAAC;AAErE,QAAM,EAAE,kBAAkB,YAAY,IAAI,aAAa,QAAQ,eAAe;AAE9E,QAAM,aAAa,MAAM,aAAa,WAAW,OAAO;AAExD,kBAAgB;AAAA,IACd,cAAc,EAAE,SAAS,YAAY;AAAA,IACrC,gBAAgB,CAAC,MAA+B;AAC9C,UAAI,CAAC,kBAAkB,SAAS,EAAE,MAAc,GAAG;AACjD,mBAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,cACL,oCAAC,SAAM,kBAAkB,EAAE,SAAS,WAAW,GAAG,UAAU,cAC1D,oCAAC,eAAY,OAAO,EAAE,oBAAoB,GAAG,GAC7C,oCAAC,OAAI,SAAQ,OAAM,YAAW,OAAM,OAAM,UACxC,oCAAC,mBAAgB,YAAY,aAAa,UAAU,kBAAkB,OAAc,CACtF,CACF,IACE;AACN;",
+  "names": []
+}

package/dist/es/plugin-button/modals/settings-modal-content.js

@@ -1,29 +1,17 @@
-import { Box, Tabs } from "@wix/design-system";
+import { Box } from "@wix/design-system";
 import React, { useContext, useMemo } from "react";
 import { RicosContext } from "./../../ricos-context/index.js";
 import { ACTION_COLOR_DEFAULT } from "./../../ricos-styles/theme-constants.js";
-import { unreachable } from "./../../_shared/uncreachable.js";
 import { dataHook } from "./../../wix-rich-content-common/index.js";
 import { Panel, PanelHeader } from "./../../ui-components/index.js";
 import { DesignComponent } from "../components/design-component.js";
-import { SettingsComponent } from "../components/settings-component.js";
-import { SETTINGS_TAB } from "../constants.js";
-import {
-  ROOT,
-  SETTINGS_DESIGN_TAB,
-  SETTINGS_GENERAL_TAB,
-  SETTINGS_MODAL,
-  SETTINGS_TABS
-} from "../data-hooks.js";
+import { ROOT, SETTINGS_MODAL } from "../data-hooks.js";
 import classes from "../statics/styles/button-input-modal-scss.js";
 const SettingsModalContent = ({
-  buttonData,
   onChange,
   config,
   nodeId,
   nodeType,
-  activeTab,
-  onTabChange,
   onClose,
   logBi
 }) => {
@@ -35,51 +23,18 @@ const SettingsModalContent = ({
     const defaultTextColor2 = config.colors?.color1 ?? (style?.getPropertyValue("--ricos-text-on-action-color") || style?.getPropertyValue("--ricos-background-color") || "#FFFFFF");
     return { defaultBackgroundColor: defaultBackgroundColor2, defaultTextColor: defaultTextColor2 };
   }, []);
-  return /* @__PURE__ */ React.createElement("div", { className: classes.modal }, /* @__PURE__ */ React.createElement(Panel, { closeButtonProps: { onClick: onClose }, dataHook: SETTINGS_MODAL }, /* @__PURE__ */ React.createElement(PanelHeader, { title: t("ButtonModal_Header") }), /* @__PURE__ */ React.createElement(
-    Tabs,
+  return /* @__PURE__ */ React.createElement("div", { className: classes.modal }, /* @__PURE__ */ React.createElement(Panel, { closeButtonProps: { onClick: onClose }, dataHook: SETTINGS_MODAL }, /* @__PURE__ */ React.createElement(PanelHeader, { title: t("ButtonModal_Header") }), /* @__PURE__ */ React.createElement(Box, { className: isMobile ? void 0 : classes.content }, /* @__PURE__ */ React.createElement(
+    DesignComponent,
     {
-      dataHook: SETTINGS_TABS,
-      onClick: (tab) => onTabChange(tab.id),
-      activeId: activeTab,
-      size: "small",
-      alignment: "center",
-      type: "uniformFull",
-      minWidth: 0,
-      items: [
-        {
-          id: SETTINGS_TAB.SETTINGS,
-          title: t("ButtonModal_Settings_Tab"),
-          dataHook: SETTINGS_GENERAL_TAB
-        },
-        {
-          id: SETTINGS_TAB.DESIGN,
-          title: t("ButtonModal_Design_Tab"),
-          dataHook: SETTINGS_DESIGN_TAB
-        }
-      ]
+      onChange,
+      config,
+      defaultBackgroundColor,
+      defaultTextColor,
+      nodeId,
+      nodeType,
+      logBi
     }
-  ), /* @__PURE__ */ React.createElement(Box, { className: isMobile ? void 0 : classes.content }, (() => {
-    switch (activeTab) {
-      case SETTINGS_TAB.SETTINGS:
-        return /* @__PURE__ */ React.createElement(SettingsComponent, { buttonData, onChange, logBi });
-      case SETTINGS_TAB.DESIGN:
-        return /* @__PURE__ */ React.createElement(
-          DesignComponent,
-          {
-            onChange,
-            config,
-            defaultBackgroundColor,
-            defaultTextColor,
-            nodeId,
-            nodeType,
-            logBi
-          }
-        );
-      default:
-        unreachable(activeTab);
-        return null;
-    }
-  })())));
+  ))));
 };
 export {
   SettingsModalContent

package/dist/es/plugin-button/modals/settings-modal-content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-button/modals/settings-modal-content.tsx"],
-  "sourcesContent": ["import { Box, Tabs } from '@wix/design-system';\nimport React, { useContext, useMemo } from 'react';\n\nimport { RicosContext } from './../../ricos-context/index.js';\nimport { ACTION_COLOR_DEFAULT } from './../../ricos-styles/theme-constants.js';\nimport type { LogBiFn } from './../../_shared/bi-context-provider/bi-context-provider.js';\nimport type { PmActionButtonNode, PmLinkButtonNode, PmNodeType } from './../../_shared/pm-node-types.js';\nimport { unreachable } from './../../_shared/uncreachable.js';\nimport { dataHook } from './../../wix-rich-content-common/index.js';\nimport { Panel, PanelHeader } from './../../ui-components/index.js';\n\nimport { DesignComponent } from '../components/design-component.js';\nimport { SettingsComponent } from '../components/settings-component.js';\nimport type { SettingsTab } from '../constants.js';\nimport { SETTINGS_TAB } from '../constants.js';\nimport {\n  ROOT,\n  SETTINGS_DESIGN_TAB,\n  SETTINGS_GENERAL_TAB,\n  SETTINGS_MODAL,\n  SETTINGS_TABS,\n} from '../data-hooks.js';\nimport classes from '../statics/styles/button-input-modal-scss.js';\nimport type { ButtonPluginEditorConfigCommon } from '../types.js';\n\ntype Props = {\n  buttonData: (PmLinkButtonNode | PmActionButtonNode)['attrs'];\n  config: ButtonPluginEditorConfigCommon;\n  onClose: () => void;\n  onChange: (data: Partial<(PmLinkButtonNode | PmActionButtonNode)['attrs']>) => void;\n  nodeId: string;\n  nodeType: typeof PmNodeType.LINK_BUTTON | typeof PmNodeType.ACTION_BUTTON;\n  activeTab: SettingsTab;\n  onTabChange: (tab: SettingsTab) => void;\n  logBi: LogBiFn;\n};\n\nexport const SettingsModalContent: React.FC<Props> = ({\n  buttonData,\n  onChange,\n  config,\n  nodeId,\n  nodeType,\n  activeTab,\n  onTabChange,\n  onClose,\n  logBi,\n}) => {\n  const { t, isMobile } = useContext(RicosContext);\n\n  const { defaultBackgroundColor, defaultTextColor } = useMemo(() => {\n    const button = document.querySelector(dataHook(`editor-${nodeId}`, ROOT));\n    const style = button ? window.getComputedStyle(button) : undefined;\n    // var name and fallback taken from statics/styles/default-styles.scss\n    const defaultBackgroundColor =\n      config.colors?.color8 ??\n      (style?.getPropertyValue('--ricos-action-color') || ACTION_COLOR_DEFAULT);\n    const defaultTextColor =\n      config.colors?.color1 ??\n      (style?.getPropertyValue('--ricos-text-on-action-color') ||\n        style?.getPropertyValue('--ricos-background-color') ||\n        '#FFFFFF');\n    return { defaultBackgroundColor, defaultTextColor };\n  }, []);\n\n  return (\n    <div className={classes.modal}>\n      <Panel closeButtonProps={{ onClick: onClose }} dataHook={SETTINGS_MODAL}>\n        <PanelHeader title={t('ButtonModal_Header')} />\n        <Tabs\n          dataHook={SETTINGS_TABS}\n          onClick={tab => onTabChange(tab.id as SettingsTab)}\n          activeId={activeTab}\n          size=\"small\"\n          alignment=\"center\"\n          type=\"uniformFull\"\n          minWidth={0}\n          items={[\n            {\n              id: SETTINGS_TAB.SETTINGS,\n              title: t('ButtonModal_Settings_Tab'),\n              dataHook: SETTINGS_GENERAL_TAB,\n            },\n            {\n              id: SETTINGS_TAB.DESIGN,\n              title: t('ButtonModal_Design_Tab'),\n              dataHook: SETTINGS_DESIGN_TAB,\n            },\n          ]}\n        />\n        <Box className={isMobile ? undefined : classes.content}>\n          {(() => {\n            switch (activeTab) {\n              case SETTINGS_TAB.SETTINGS:\n                return (\n                  <SettingsComponent buttonData={buttonData} onChange={onChange} logBi={logBi} />\n                );\n              case SETTINGS_TAB.DESIGN:\n                return (\n                  <DesignComponent\n                    onChange={onChange}\n                    config={config}\n                    defaultBackgroundColor={defaultBackgroundColor}\n                    defaultTextColor={defaultTextColor}\n                    nodeId={nodeId}\n                    nodeType={nodeType}\n                    logBi={logBi}\n                  />\n                );\n              default:\n                unreachable(activeTab);\n                return null;\n            }\n          })()}\n        </Box>\n      </Panel>\n    </div>\n  );\n};\n"],
-  "mappings": "AAAA,SAAS,KAAK,YAAY;AAC1B,OAAO,SAAS,YAAY,eAAe;AAE3C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAGrC,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,OAAO,mBAAmB;AAEnC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAElC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,aAAa;AAeb,MAAM,uBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,GAAG,SAAS,IAAI,WAAW,YAAY;AAE/C,QAAM,EAAE,wBAAwB,iBAAiB,IAAI,QAAQ,MAAM;AACjE,UAAM,SAAS,SAAS,cAAc,SAAS,UAAU,MAAM,IAAI,IAAI,CAAC;AACxE,UAAM,QAAQ,SAAS,OAAO,iBAAiB,MAAM,IAAI;AAEzD,UAAMA,0BACJ,OAAO,QAAQ,WACd,OAAO,iBAAiB,sBAAsB,KAAK;AACtD,UAAMC,oBACJ,OAAO,QAAQ,WACd,OAAO,iBAAiB,8BAA8B,KACrD,OAAO,iBAAiB,0BAA0B,KAClD;AACJ,WAAO,EAAE,wBAAAD,yBAAwB,kBAAAC,kBAAiB;AAAA,EACpD,GAAG,CAAC,CAAC;AAEL,SACE,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,SAAM,kBAAkB,EAAE,SAAS,QAAQ,GAAG,UAAU,kBACvD,oCAAC,eAAY,OAAO,EAAE,oBAAoB,GAAG,GAC7C;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,SAAS,SAAO,YAAY,IAAI,EAAiB;AAAA,MACjD,UAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAU;AAAA,MACV,MAAK;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,QACL;AAAA,UACE,IAAI,aAAa;AAAA,UACjB,OAAO,EAAE,0BAA0B;AAAA,UACnC,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,UACE,IAAI,aAAa;AAAA,UACjB,OAAO,EAAE,wBAAwB;AAAA,UACjC,UAAU;AAAA,QACZ;AAAA,MACF;AAAA;AAAA,EACF,GACA,oCAAC,OAAI,WAAW,WAAW,SAAY,QAAQ,YAC3C,MAAM;AACN,YAAQ,WAAW;AAAA,MACjB,KAAK,aAAa;AAChB,eACE,oCAAC,qBAAkB,YAAwB,UAAoB,OAAc;AAAA,MAEjF,KAAK,aAAa;AAChB,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,MAEJ;AACE,oBAAY,SAAS;AACrB,eAAO;AAAA,IACX;AAAA,EACF,GAAG,CACL,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import { Box } from '@wix/design-system';\nimport React, { useContext, useMemo } from 'react';\n\nimport { RicosContext } from './../../ricos-context/index.js';\nimport { ACTION_COLOR_DEFAULT } from './../../ricos-styles/theme-constants.js';\nimport type { LogBiFn } from './../../_shared/bi-context-provider/bi-context-provider.js';\nimport type { PmActionButtonNode, PmLinkButtonNode, PmNodeType } from './../../_shared/pm-node-types.js';\nimport { dataHook } from './../../wix-rich-content-common/index.js';\nimport { Panel, PanelHeader } from './../../ui-components/index.js';\n\nimport { DesignComponent } from '../components/design-component.js';\nimport { ROOT, SETTINGS_MODAL } from '../data-hooks.js';\nimport classes from '../statics/styles/button-input-modal-scss.js';\nimport type { ButtonPluginEditorConfigCommon } from '../types.js';\n\ntype Props = {\n  config: ButtonPluginEditorConfigCommon;\n  onClose: () => void;\n  onChange: (data: Partial<(PmLinkButtonNode | PmActionButtonNode)['attrs']>) => void;\n  nodeId: string;\n  nodeType: typeof PmNodeType.LINK_BUTTON | typeof PmNodeType.ACTION_BUTTON;\n  logBi: LogBiFn;\n};\n\nexport const SettingsModalContent: React.FC<Props> = ({\n  onChange,\n  config,\n  nodeId,\n  nodeType,\n  onClose,\n  logBi,\n}) => {\n  const { t, isMobile } = useContext(RicosContext);\n\n  const { defaultBackgroundColor, defaultTextColor } = useMemo(() => {\n    const button = document.querySelector(dataHook(`editor-${nodeId}`, ROOT));\n    const style = button ? window.getComputedStyle(button) : undefined;\n    // var name and fallback taken from statics/styles/default-styles.scss\n    const defaultBackgroundColor =\n      config.colors?.color8 ??\n      (style?.getPropertyValue('--ricos-action-color') || ACTION_COLOR_DEFAULT);\n    const defaultTextColor =\n      config.colors?.color1 ??\n      (style?.getPropertyValue('--ricos-text-on-action-color') ||\n        style?.getPropertyValue('--ricos-background-color') ||\n        '#FFFFFF');\n    return { defaultBackgroundColor, defaultTextColor };\n  }, []);\n\n  return (\n    <div className={classes.modal}>\n      <Panel closeButtonProps={{ onClick: onClose }} dataHook={SETTINGS_MODAL}>\n        <PanelHeader title={t('ButtonModal_Header')} />\n        <Box className={isMobile ? undefined : classes.content}>\n          <DesignComponent\n            onChange={onChange}\n            config={config}\n            defaultBackgroundColor={defaultBackgroundColor}\n            defaultTextColor={defaultTextColor}\n            nodeId={nodeId}\n            nodeType={nodeType}\n            logBi={logBi}\n          />\n        </Box>\n      </Panel>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,SAAS,YAAY,eAAe;AAE3C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAGrC,SAAS,gBAAgB;AACzB,SAAS,OAAO,mBAAmB;AAEnC,SAAS,uBAAuB;AAChC,SAAS,MAAM,sBAAsB;AACrC,OAAO,aAAa;AAYb,MAAM,uBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,GAAG,SAAS,IAAI,WAAW,YAAY;AAE/C,QAAM,EAAE,wBAAwB,iBAAiB,IAAI,QAAQ,MAAM;AACjE,UAAM,SAAS,SAAS,cAAc,SAAS,UAAU,MAAM,IAAI,IAAI,CAAC;AACxE,UAAM,QAAQ,SAAS,OAAO,iBAAiB,MAAM,IAAI;AAEzD,UAAMA,0BACJ,OAAO,QAAQ,WACd,OAAO,iBAAiB,sBAAsB,KAAK;AACtD,UAAMC,oBACJ,OAAO,QAAQ,WACd,OAAO,iBAAiB,8BAA8B,KACrD,OAAO,iBAAiB,0BAA0B,KAClD;AACJ,WAAO,EAAE,wBAAAD,yBAAwB,kBAAAC,kBAAiB;AAAA,EACpD,GAAG,CAAC,CAAC;AAEL,SACE,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,SAAM,kBAAkB,EAAE,SAAS,QAAQ,GAAG,UAAU,kBACvD,oCAAC,eAAY,OAAO,EAAE,oBAAoB,GAAG,GAC7C,oCAAC,OAAI,WAAW,WAAW,SAAY,QAAQ,WAC7C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,CACF,CACF;AAEJ;",
   "names": ["defaultBackgroundColor", "defaultTextColor"]
 }

package/dist/es/plugin-button/modals/settings-modal.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
 import { ModalServiceContext } from "./../../ricos-context/index.js";
 import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
 import { useNodeAttrs } from "./../../_shared/use-node-attrs.js";
@@ -6,7 +6,7 @@ import {
   useClickOutside,
   usePanelContainerElement
 } from "./../../ui-components/index.js";
-import { SETTINGS_TAB, buttonsModals } from "../constants.js";
+import { buttonsModals } from "../constants.js";
 import { LINK_BUTTON_TYPE } from "../types.js";
 import { SettingsModalContent } from "./settings-modal-content.js";
 const ButtonSettingsModal = ({
@@ -14,19 +14,17 @@ const ButtonSettingsModal = ({
   settings,
   type,
   modalId,
-  activeTab: tab,
   referenceElement
 }) => {
   const modalService = useContext(ModalServiceContext) || {};
   const containerEl = usePanelContainerElement();
   const nodeType = type === LINK_BUTTON_TYPE ? "LINK_BUTTON" : "ACTION_BUTTON";
   const logBi = useBiNext({
-    modalId: buttonsModals.settings[type],
+    modalId,
     pluginId: nodeType === "LINK_BUTTON" ? "linkButton" : "actionButton",
     nodeId
   });
   const { patchPmNodeAttrs, pmNodeAttrs } = useNodeAttrs(nodeId, nodeType);
-  const [activeTab, setActiveTab] = useState(tab ?? SETTINGS_TAB.SETTINGS);
   const handleOnChange = (data) => patchPmNodeAttrs?.(data);
   const isColorPickerModalOpen = () => modalService.isModalOpen(buttonsModals.colorPicker);
   const closeModal = () => modalService.closeModal(modalId);
@@ -44,14 +42,11 @@ const ButtonSettingsModal = ({
   return pmNodeAttrs ? /* @__PURE__ */ React.createElement(
     SettingsModalContent,
     {
-      buttonData: pmNodeAttrs,
       config: settings,
       onClose: closeModal,
       onChange: handleOnChange,
       nodeId,
       nodeType,
-      activeTab,
-      onTabChange: setActiveTab,
       logBi
     }
   ) : null;

package/dist/es/plugin-button/modals/settings-modal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-button/modals/settings-modal.tsx"],
-  "sourcesContent": ["import type { FC } from 'react';\nimport React, { useContext, useState } from 'react';\n\nimport { ModalServiceContext } from './../../ricos-context/index.js';\nimport { useBiNext } from './../../_shared/bi-context-provider/bi-context-provider.js';\nimport type { PmActionButtonNode, PmLinkButtonNode, PmNodeType } from './../../_shared/pm-node-types.js';\nimport { useNodeAttrs } from './../../_shared/use-node-attrs.js';\nimport {\n  useClickOutside,\n  usePanelContainerElement,\n} from './../../ui-components/index.js';\n\nimport type { SettingsTab } from '../constants.js';\nimport { SETTINGS_TAB, buttonsModals } from '../constants.js';\nimport type { ACTION_BUTTON_TYPE, ButtonPluginEditorConfigCommon } from '../types.js';\nimport { LINK_BUTTON_TYPE } from '../types.js';\nimport { SettingsModalContent } from './settings-modal-content.js';\n\ninterface Props {\n  nodeId: string;\n  modalId: string;\n  settings: ButtonPluginEditorConfigCommon;\n  type: typeof LINK_BUTTON_TYPE | typeof ACTION_BUTTON_TYPE;\n  activeTab?: SettingsTab;\n  referenceElement?: HTMLElement;\n}\n\nexport const ButtonSettingsModal: FC<Props> = ({\n  nodeId,\n  settings,\n  type,\n  modalId,\n  activeTab: tab,\n  referenceElement,\n}) => {\n  const modalService = useContext(ModalServiceContext) || {};\n\n  const containerEl = usePanelContainerElement();\n\n  const nodeType: typeof PmNodeType.LINK_BUTTON | typeof PmNodeType.ACTION_BUTTON =\n    type === LINK_BUTTON_TYPE ? 'LINK_BUTTON' : 'ACTION_BUTTON';\n\n  const logBi = useBiNext({\n    modalId: buttonsModals.settings[type],\n    pluginId: nodeType === 'LINK_BUTTON' ? 'linkButton' : 'actionButton',\n    nodeId,\n  });\n\n  const { patchPmNodeAttrs, pmNodeAttrs } = useNodeAttrs(nodeId, nodeType);\n\n  const [activeTab, setActiveTab] = useState<SettingsTab>(tab ?? SETTINGS_TAB.SETTINGS);\n\n  const handleOnChange = (data: Partial<(PmLinkButtonNode | PmActionButtonNode)['attrs']>) =>\n    patchPmNodeAttrs?.(data);\n\n  const isColorPickerModalOpen = () => modalService.isModalOpen(buttonsModals.colorPicker);\n\n  const closeModal = () => modalService.closeModal(modalId);\n\n  useClickOutside({\n    containerRef: { current: containerEl },\n    onClickOutside: (e: MouseEvent | TouchEvent) => {\n      const target = e.target as HTMLElement | null;\n\n      if (referenceElement?.contains(target as Node)) {\n        return;\n      }\n\n      closeModal();\n    },\n    disable: isColorPickerModalOpen(),\n  });\n\n  return pmNodeAttrs ? (\n    <SettingsModalContent\n      buttonData={pmNodeAttrs}\n      config={settings}\n      onClose={closeModal}\n      onChange={handleOnChange}\n      nodeId={nodeId}\n      nodeType={nodeType}\n      activeTab={activeTab}\n      onTabChange={setActiveTab}\n      logBi={logBi}\n    />\n  ) : null;\n};\n"],
-  "mappings": "AACA,OAAO,SAAS,YAAY,gBAAgB;AAE5C,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,cAAc,qBAAqB;AAE5C,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAW9B,MAAM,sBAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,eAAe,WAAW,mBAAmB,KAAK,CAAC;AAEzD,QAAM,cAAc,yBAAyB;AAE7C,QAAM,WACJ,SAAS,mBAAmB,gBAAgB;AAE9C,QAAM,QAAQ,UAAU;AAAA,IACtB,SAAS,cAAc,SAAS,IAAI;AAAA,IACpC,UAAU,aAAa,gBAAgB,eAAe;AAAA,IACtD;AAAA,EACF,CAAC;AAED,QAAM,EAAE,kBAAkB,YAAY,IAAI,aAAa,QAAQ,QAAQ;AAEvE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAsB,OAAO,aAAa,QAAQ;AAEpF,QAAM,iBAAiB,CAAC,SACtB,mBAAmB,IAAI;AAEzB,QAAM,yBAAyB,MAAM,aAAa,YAAY,cAAc,WAAW;AAEvF,QAAM,aAAa,MAAM,aAAa,WAAW,OAAO;AAExD,kBAAgB;AAAA,IACd,cAAc,EAAE,SAAS,YAAY;AAAA,IACrC,gBAAgB,CAAC,MAA+B;AAC9C,YAAM,SAAS,EAAE;AAEjB,UAAI,kBAAkB,SAAS,MAAc,GAAG;AAC9C;AAAA,MACF;AAEA,iBAAW;AAAA,IACb;AAAA,IACA,SAAS,uBAAuB;AAAA,EAClC,CAAC;AAED,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA;AAAA,EACF,IACE;AACN;",
+  "sourcesContent": ["import type { FC } from 'react';\nimport React, { useContext } from 'react';\n\nimport { ModalServiceContext } from './../../ricos-context/index.js';\nimport { useBiNext } from './../../_shared/bi-context-provider/bi-context-provider.js';\nimport type { PmActionButtonNode, PmLinkButtonNode, PmNodeType } from './../../_shared/pm-node-types.js';\nimport { useNodeAttrs } from './../../_shared/use-node-attrs.js';\nimport {\n  useClickOutside,\n  usePanelContainerElement,\n} from './../../ui-components/index.js';\n\nimport { buttonsModals } from '../constants.js';\nimport type { ACTION_BUTTON_TYPE, ButtonPluginEditorConfigCommon } from '../types.js';\nimport { LINK_BUTTON_TYPE } from '../types.js';\nimport { SettingsModalContent } from './settings-modal-content.js';\n\ninterface Props {\n  nodeId: string;\n  modalId: string;\n  settings: ButtonPluginEditorConfigCommon;\n  type: typeof LINK_BUTTON_TYPE | typeof ACTION_BUTTON_TYPE;\n  referenceElement?: HTMLElement;\n}\n\nexport const ButtonSettingsModal: FC<Props> = ({\n  nodeId,\n  settings,\n  type,\n  modalId,\n  referenceElement,\n}) => {\n  const modalService = useContext(ModalServiceContext) || {};\n\n  const containerEl = usePanelContainerElement();\n\n  const nodeType: typeof PmNodeType.LINK_BUTTON | typeof PmNodeType.ACTION_BUTTON =\n    type === LINK_BUTTON_TYPE ? 'LINK_BUTTON' : 'ACTION_BUTTON';\n\n  const logBi = useBiNext({\n    modalId,\n    pluginId: nodeType === 'LINK_BUTTON' ? 'linkButton' : 'actionButton',\n    nodeId,\n  });\n\n  const { patchPmNodeAttrs, pmNodeAttrs } = useNodeAttrs(nodeId, nodeType);\n\n  const handleOnChange = (data: Partial<(PmLinkButtonNode | PmActionButtonNode)['attrs']>) =>\n    patchPmNodeAttrs?.(data);\n\n  const isColorPickerModalOpen = () => modalService.isModalOpen(buttonsModals.colorPicker);\n\n  const closeModal = () => modalService.closeModal(modalId);\n\n  useClickOutside({\n    containerRef: { current: containerEl },\n    onClickOutside: (e: MouseEvent | TouchEvent) => {\n      const target = e.target as HTMLElement | null;\n\n      if (referenceElement?.contains(target as Node)) {\n        return;\n      }\n\n      closeModal();\n    },\n    disable: isColorPickerModalOpen(),\n  });\n\n  return pmNodeAttrs ? (\n    <SettingsModalContent\n      config={settings}\n      onClose={closeModal}\n      onChange={handleOnChange}\n      nodeId={nodeId}\n      nodeType={nodeType}\n      logBi={logBi}\n    />\n  ) : null;\n};\n"],
+  "mappings": "AACA,OAAO,SAAS,kBAAkB;AAElC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAU9B,MAAM,sBAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,WAAW,mBAAmB,KAAK,CAAC;AAEzD,QAAM,cAAc,yBAAyB;AAE7C,QAAM,WACJ,SAAS,mBAAmB,gBAAgB;AAE9C,QAAM,QAAQ,UAAU;AAAA,IACtB;AAAA,IACA,UAAU,aAAa,gBAAgB,eAAe;AAAA,IACtD;AAAA,EACF,CAAC;AAED,QAAM,EAAE,kBAAkB,YAAY,IAAI,aAAa,QAAQ,QAAQ;AAEvE,QAAM,iBAAiB,CAAC,SACtB,mBAAmB,IAAI;AAEzB,QAAM,yBAAyB,MAAM,aAAa,YAAY,cAAc,WAAW;AAEvF,QAAM,aAAa,MAAM,aAAa,WAAW,OAAO;AAExD,kBAAgB;AAAA,IACd,cAAc,EAAE,SAAS,YAAY;AAAA,IACrC,gBAAgB,CAAC,MAA+B;AAC9C,YAAM,SAAS,EAAE;AAEjB,UAAI,kBAAkB,SAAS,MAAc,GAAG;AAC9C;AAAA,MACF;AAEA,iBAAW;AAAA,IACb;AAAA,IACA,SAAS,uBAAuB;AAAA,EAClC,CAAC;AAED,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,IACE;AACN;",
   "names": []
 }

package/dist/es/plugin-button/statics/styles/button-input-modal-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "f5124b9e";
+var styleDataHash = "cc74562d";
 const injectCss = (() => {
-  var css = `.k8FQ8{max-height:580px;overflow:auto}.VwTTR{min-height:570px}`;
+  var css = `.Ne6vN{max-height:580px;overflow:auto}.itJ-7{min-height:570px}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,8 +21,8 @@ const injectCss = (() => {
 });
 injectCss();
 var button_input_modal_default = {
-  "content": "k8FQ8",
-  "modal": "VwTTR"
+  "content": "Ne6vN",
+  "modal": "itJ-7"
 };
 export {
   button_input_modal_default as default,

package/dist/es/plugin-button/statics/styles/button-input-modal-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-button/statics/styles/button-input-modal.scss"],
-  "sourcesContent": ["var styleDataHash = 'f5124b9e';  \nexport const injectCss = (() => {\n  var css = `.k8FQ8{max-height:580px;overflow:auto}.VwTTR{min-height:570px}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"content\": \"k8FQ8\",\n  \"modal\": \"VwTTR\"\n};"],
+  "sourcesContent": ["var styleDataHash = 'cc74562d';  \nexport const injectCss = (() => {\n  var css = `.Ne6vN{max-height:580px;overflow:auto}.itJ-7{min-height:570px}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"content\": \"Ne6vN\",\n  \"modal\": \"itJ-7\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,6BAAQ;AAAA,EACb,WAAW;AAAA,EACX,SAAS;AACX;",
   "names": []
 }

package/dist/es/plugin-button/statics/styles/{settings-component-scss.js → button-text-field-scss.js}

@@ -1,6 +1,6 @@
-var styleDataHash = "3b120485";
+var styleDataHash = "e4af4b65";
 const injectCss = (() => {
-  var css = `.JPx-u{--wds-form-field-label-gap-small:9px}`;
+  var css = `.LEw77{--wds-form-field-label-gap-small:9px}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -20,11 +20,11 @@ const injectCss = (() => {
   }
 });
 injectCss();
-var settings_component_default = {
-  "formField": "JPx-u"
+var button_text_field_default = {
+  "formField": "LEw77"
 };
 export {
-  settings_component_default as default,
+  button_text_field_default as default,
   injectCss
 };
-//# sourceMappingURL=settings-component-scss.js.map
+//# sourceMappingURL=button-text-field-scss.js.map

package/dist/es/plugin-button/statics/styles/{settings-component-scss.js.map → button-text-field-scss.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/plugin-button/statics/styles/settings-component.scss"],
-  "sourcesContent": ["var styleDataHash = '3b120485';  \nexport const injectCss = (() => {\n  var css = `.JPx-u{--wds-form-field-label-gap-small:9px}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"formField\": \"JPx-u\"\n};"],
-  "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,6BAAQ;AAAA,EACb,aAAa;AACf;",
+  "sources": ["../../../../../src/plugin-button/statics/styles/button-text-field.scss"],
+  "sourcesContent": ["var styleDataHash = 'e4af4b65';  \nexport const injectCss = (() => {\n  var css = `.LEw77{--wds-form-field-label-gap-small:9px}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"formField\": \"LEw77\"\n};"],
+  "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,4BAAQ;AAAA,EACb,aAAa;AACf;",
   "names": []
 }

package/dist/es/plugin-button/statics/styles/default-styles-scss.js

@@ -1,7 +1,9 @@
 var default_styles_default = {
-  "button_container": "CD6mb",
-  "button_text": "xTi2S",
-  "button_size_content": "-hTJW"
+  "button_container": "V5MRH",
+  "button_text": "eQ18X",
+  "button_text_editor": "mOeM7",
+  "button_text_input": "xdYa8",
+  "button_size_content": "VVTet"
 };
 export {
   default_styles_default as default

package/dist/es/plugin-button/statics/styles/default-styles-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-button/statics/styles/default-styles.scss"],
-  "sourcesContent": ["export default {\n  \"button_container\": \"CD6mb\",\n  \"button_text\": \"xTi2S\",\n  \"button_size_content\": \"-hTJW\"\n};"],
-  "mappings": "AAAA,IAAO,yBAAQ;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,uBAAuB;AACzB;",
+  "sourcesContent": ["export default {\n  \"button_container\": \"V5MRH\",\n  \"button_text\": \"eQ18X\",\n  \"button_text_editor\": \"mOeM7\",\n  \"button_text_input\": \"xdYa8\",\n  \"button_size_content\": \"VVTet\"\n};"],
+  "mappings": "AAAA,IAAO,yBAAQ;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,uBAAuB;AACzB;",
   "names": []
 }

package/dist/es/plugin-button/testkit/button-settings.uni.driver.js

@@ -1,4 +1,5 @@
 import { InputUniDriver, TabsUniDriver } from "@wix/design-system/dist/testkit/unidriver.js";
+import { PLUGIN_TOOLBAR_LINK_BUTTON, PLUGIN_TOOLBAR_SETTINGS_BUTTON } from "./../../_shared/data-hooks.js";
 import { createLinkModalUnidriver } from "./../../_shared/link-modal/create-link-modal-unidriver.js";
 import { dataHook } from "./../../wix-rich-content-common/index.js";
 import {
@@ -10,19 +11,45 @@ import {
   DESIGN_SETTINGS_BORDER_COLOR_INPUT,
   DESIGN_SETTINGS_TEXT_COLOR_INPUT,
   GENERAL_SETTINGS_BUTTON_TEXT_INPUT,
+  PLUGIN_TOOLBAR_TEXT_BUTTON,
   SETTINGS_MODAL,
-  SETTINGS_TABS
+  TEXT_MODAL
 } from "../data-hooks.js";
 const createButtonSettingsUniDriver = (getBase) => {
+  const settingsModal = `div${dataHook(SETTINGS_MODAL)}, div${dataHook(TEXT_MODAL)}`;
+  const waitForSettingsModal = async () => {
+    const modal = await getBase().get(settingsModal);
+    await modal.wait();
+  };
+  const textInput = {
+    waitForElement: async () => {
+      await getBase().get(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT));
+    },
+    ...InputUniDriver(getBase().$(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT)), getBase())
+  };
+  const openTextField = async () => {
+    if (await getBase().$(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT)).exists()) {
+      return;
+    }
+    const textButton = getBase().$(dataHook(PLUGIN_TOOLBAR_TEXT_BUTTON));
+    const linkButton = getBase().$(dataHook(PLUGIN_TOOLBAR_LINK_BUTTON));
+    await (await textButton.exists() ? textButton : linkButton).click();
+    await textInput.waitForElement();
+  };
+  const openDesign = async () => {
+    if (await getBase().$(dataHook(DESIGN_SETTINGS_TEXT_COLOR_INPUT)).exists()) {
+      return;
+    }
+    await getBase().$(dataHook(PLUGIN_TOOLBAR_SETTINGS_BUTTON)).click();
+    await getBase().get(dataHook(DESIGN_SETTINGS_TEXT_COLOR_INPUT));
+  };
+  const openTab = [openTextField, openDesign];
   return {
     settingsModal: {
-      waitForElement: async () => {
-        const modal = await getBase().get(`div${dataHook(SETTINGS_MODAL)}`);
-        await modal.wait();
-      },
+      waitForElement: waitForSettingsModal,
       exists: async () => {
         try {
-          const modal = await getBase().get(`div${dataHook(SETTINGS_MODAL)}`);
+          const modal = await getBase().get(settingsModal);
           return modal.exists();
         } catch {
           return false;
@@ -31,17 +58,24 @@ const createButtonSettingsUniDriver = (getBase) => {
       settings: {
         tabs: {
           ...TabsUniDriver(getBase(), getBase()),
-          waitForElement: async () => {
-            const tabs = await getBase().get(dataHook(SETTINGS_TABS));
-            await tabs.wait();
+          waitForElement: waitForSettingsModal,
+          clickTabAt: async (index) => {
+            const open = openTab[index];
+            if (!open) {
+              throw new Error(`The button settings modal had no tab at index ${index}`);
+            }
+            await open();
           }
         },
-        textInput: {
-          waitForElement: async () => {
-            await getBase().get(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT));
-          },
-          ...InputUniDriver(getBase().$(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT)), getBase())
-        }
+        textInput: Object.fromEntries(
+          Object.entries(textInput).map(([key, value]) => [
+            key,
+            typeof value === "function" ? async (...args) => {
+              await openTextField();
+              return value(...args);
+            } : value
+          ])
+        )
       },
       design: {
         textColor: createButtonColorSwatchesUniDriver(
@@ -55,6 +89,7 @@ const createButtonSettingsUniDriver = (getBase) => {
         )
       }
     },
+    textInput,
     linkModal: createLinkModalUnidriver(getBase),
     colorPickerModal: createNewColorPickerUniDriver(getBase)
   };

package/dist/es/plugin-button/testkit/button-settings.uni.driver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-button/testkit/button-settings.uni.driver.ts"],
-  "sourcesContent": ["import { InputUniDriver, TabsUniDriver } from '@wix/design-system/dist/testkit/unidriver.js';\n\nimport type { BaseUniDriver } from './../../ricos-types/testkit.js';\nimport type { LinkModalUnidriver } from './../../_shared/link-modal/create-link-modal-unidriver.js';\nimport { createLinkModalUnidriver } from './../../_shared/link-modal/create-link-modal-unidriver.js';\nimport { dataHook } from './../../wix-rich-content-common/index.js';\nimport type { ButtonColorSwatchesUniDriver } from './../../ui-components/testkit.js';\nimport {\n  createButtonColorSwatchesUniDriver,\n  createNewColorPickerUniDriver,\n} from './../../ui-components/testkit.js';\n\nimport {\n  DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT,\n  DESIGN_SETTINGS_BORDER_COLOR_INPUT,\n  DESIGN_SETTINGS_TEXT_COLOR_INPUT,\n  GENERAL_SETTINGS_BUTTON_TEXT_INPUT,\n  SETTINGS_MODAL,\n  SETTINGS_TABS,\n} from '../data-hooks.js';\n\nexport type ButtonSettingsUniDriver = {\n  settingsModal: {\n    waitForElement: () => Promise<void>;\n    exists: () => Promise<boolean>;\n    settings: {\n      tabs: ReturnType<typeof TabsUniDriver> & { waitForElement: () => Promise<void> };\n      textInput: ReturnType<typeof InputUniDriver> & { waitForElement: () => Promise<void> };\n    };\n    design: {\n      textColor: ButtonColorSwatchesUniDriver;\n      borderColor: ButtonColorSwatchesUniDriver;\n      backgroundColor: ButtonColorSwatchesUniDriver;\n    };\n  };\n  linkModal: LinkModalUnidriver;\n  colorPickerModal: ReturnType<typeof createNewColorPickerUniDriver>;\n};\n\nexport const createButtonSettingsUniDriver: BaseUniDriver<ButtonSettingsUniDriver> = getBase => {\n  return {\n    settingsModal: {\n      waitForElement: async () => {\n        const modal = await getBase().get(`div${dataHook(SETTINGS_MODAL)}`);\n        await modal.wait();\n      },\n      exists: async () => {\n        try {\n          const modal = await getBase().get(`div${dataHook(SETTINGS_MODAL)}`);\n          return modal.exists();\n        } catch {\n          return false;\n        }\n      },\n      settings: {\n        tabs: {\n          ...TabsUniDriver(getBase(), getBase()),\n          waitForElement: async () => {\n            const tabs = await getBase().get(dataHook(SETTINGS_TABS));\n            await tabs.wait();\n          },\n        },\n        textInput: {\n          waitForElement: async () => {\n            await getBase().get(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT));\n          },\n          ...InputUniDriver(getBase().$(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT)), getBase()),\n        },\n      },\n      design: {\n        textColor: createButtonColorSwatchesUniDriver(() =>\n          getBase().$(dataHook(DESIGN_SETTINGS_TEXT_COLOR_INPUT))\n        ),\n        borderColor: createButtonColorSwatchesUniDriver(() =>\n          getBase().$(dataHook(DESIGN_SETTINGS_BORDER_COLOR_INPUT))\n        ),\n        backgroundColor: createButtonColorSwatchesUniDriver(() =>\n          getBase().$(dataHook(DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT))\n        ),\n      },\n    },\n    linkModal: createLinkModalUnidriver(getBase),\n    colorPickerModal: createNewColorPickerUniDriver(getBase),\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgB,qBAAqB;AAI9C,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAEzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAoBA,MAAM,gCAAwE,aAAW;AAC9F,SAAO;AAAA,IACL,eAAe;AAAA,MACb,gBAAgB,YAAY;AAC1B,cAAM,QAAQ,MAAM,QAAQ,EAAE,IAAI,MAAM,SAAS,cAAc,CAAC,EAAE;AAClE,cAAM,MAAM,KAAK;AAAA,MACnB;AAAA,MACA,QAAQ,YAAY;AAClB,YAAI;AACF,gBAAM,QAAQ,MAAM,QAAQ,EAAE,IAAI,MAAM,SAAS,cAAc,CAAC,EAAE;AAClE,iBAAO,MAAM,OAAO;AAAA,QACtB,QAAQ;AACN,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,MAAM;AAAA,UACJ,GAAG,cAAc,QAAQ,GAAG,QAAQ,CAAC;AAAA,UACrC,gBAAgB,YAAY;AAC1B,kBAAM,OAAO,MAAM,QAAQ,EAAE,IAAI,SAAS,aAAa,CAAC;AACxD,kBAAM,KAAK,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT,gBAAgB,YAAY;AAC1B,kBAAM,QAAQ,EAAE,IAAI,SAAS,kCAAkC,CAAC;AAAA,UAClE;AAAA,UACA,GAAG,eAAe,QAAQ,EAAE,EAAE,SAAS,kCAAkC,CAAC,GAAG,QAAQ,CAAC;AAAA,QACxF;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,WAAW;AAAA,UAAmC,MAC5C,QAAQ,EAAE,EAAE,SAAS,gCAAgC,CAAC;AAAA,QACxD;AAAA,QACA,aAAa;AAAA,UAAmC,MAC9C,QAAQ,EAAE,EAAE,SAAS,kCAAkC,CAAC;AAAA,QAC1D;AAAA,QACA,iBAAiB;AAAA,UAAmC,MAClD,QAAQ,EAAE,EAAE,SAAS,sCAAsC,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,IACF;AAAA,IACA,WAAW,yBAAyB,OAAO;AAAA,IAC3C,kBAAkB,8BAA8B,OAAO;AAAA,EACzD;AACF;",
+  "sourcesContent": ["import { InputUniDriver, TabsUniDriver } from '@wix/design-system/dist/testkit/unidriver.js';\n\nimport type { BaseUniDriver } from './../../ricos-types/testkit.js';\nimport { PLUGIN_TOOLBAR_LINK_BUTTON, PLUGIN_TOOLBAR_SETTINGS_BUTTON } from './../../_shared/data-hooks.js';\nimport type { LinkModalUnidriver } from './../../_shared/link-modal/create-link-modal-unidriver.js';\nimport { createLinkModalUnidriver } from './../../_shared/link-modal/create-link-modal-unidriver.js';\nimport { dataHook } from './../../wix-rich-content-common/index.js';\nimport type { ButtonColorSwatchesUniDriver } from './../../ui-components/testkit.js';\nimport {\n  createButtonColorSwatchesUniDriver,\n  createNewColorPickerUniDriver,\n} from './../../ui-components/testkit.js';\n\nimport {\n  DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT,\n  DESIGN_SETTINGS_BORDER_COLOR_INPUT,\n  DESIGN_SETTINGS_TEXT_COLOR_INPUT,\n  GENERAL_SETTINGS_BUTTON_TEXT_INPUT,\n  PLUGIN_TOOLBAR_TEXT_BUTTON,\n  SETTINGS_MODAL,\n  TEXT_MODAL,\n} from '../data-hooks.js';\n\ntype TextInputUniDriver = ReturnType<typeof InputUniDriver> & {\n  waitForElement: () => Promise<void>;\n};\n\nexport type ButtonSettingsUniDriver = {\n  settingsModal: {\n    /** Also matches the action button text modal, which used to be part of this modal. */\n    waitForElement: () => Promise<void>;\n    /** Also matches the action button text modal, which used to be part of this modal. */\n    exists: () => Promise<boolean>;\n    settings: {\n      /**\n       * @deprecated The settings modal has no tabs anymore. `clickTabAt(0)` opens the modal\n       * holding `textInput`, `clickTabAt(1)` the settings modal with `settingsModal.design`.\n       */\n      tabs: ReturnType<typeof TabsUniDriver> & { waitForElement: () => Promise<void> };\n      /**\n       * @deprecated Use `textInput`. The field moved out of the settings modal, so this\n       * opens the modal that holds it now before every call.\n       */\n      textInput: TextInputUniDriver;\n    };\n    design: {\n      textColor: ButtonColorSwatchesUniDriver;\n      borderColor: ButtonColorSwatchesUniDriver;\n      backgroundColor: ButtonColorSwatchesUniDriver;\n    };\n  };\n  /** The button text field — in the link modal for link buttons, the text modal for action buttons. */\n  textInput: TextInputUniDriver;\n  linkModal: LinkModalUnidriver;\n  colorPickerModal: ReturnType<typeof createNewColorPickerUniDriver>;\n};\n\nexport const createButtonSettingsUniDriver: BaseUniDriver<ButtonSettingsUniDriver> = getBase => {\n  // Plugin panels are exclusive, so at most one of the two is open.\n  const settingsModal = `div${dataHook(SETTINGS_MODAL)}, div${dataHook(TEXT_MODAL)}`;\n  const waitForSettingsModal = async () => {\n    const modal = await getBase().get(settingsModal);\n    await modal.wait();\n  };\n  const textInput: TextInputUniDriver = {\n    waitForElement: async () => {\n      await getBase().get(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT));\n    },\n    ...InputUniDriver(getBase().$(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT)), getBase()),\n  };\n  const openTextField = async () => {\n    if (await getBase().$(dataHook(GENERAL_SETTINGS_BUTTON_TEXT_INPUT)).exists()) {\n      return;\n    }\n    // Action buttons have a text modal of their own, link buttons keep the field in the link modal.\n    const textButton = getBase().$(dataHook(PLUGIN_TOOLBAR_TEXT_BUTTON));\n    const linkButton = getBase().$(dataHook(PLUGIN_TOOLBAR_LINK_BUTTON));\n    await ((await textButton.exists()) ? textButton : linkButton).click();\n    await textInput.waitForElement();\n  };\n  const openDesign = async () => {\n    if (await getBase().$(dataHook(DESIGN_SETTINGS_TEXT_COLOR_INPUT)).exists()) {\n      return;\n    }\n    await getBase().$(dataHook(PLUGIN_TOOLBAR_SETTINGS_BUTTON)).click();\n    await getBase().get(dataHook(DESIGN_SETTINGS_TEXT_COLOR_INPUT));\n  };\n  // In the old tab order.\n  const openTab = [openTextField, openDesign];\n\n  return {\n    settingsModal: {\n      waitForElement: waitForSettingsModal,\n      exists: async () => {\n        try {\n          const modal = await getBase().get(settingsModal);\n          return modal.exists();\n        } catch {\n          return false;\n        }\n      },\n      settings: {\n        tabs: {\n          ...TabsUniDriver(getBase(), getBase()),\n          waitForElement: waitForSettingsModal,\n          clickTabAt: async index => {\n            const open = openTab[index];\n            if (!open) {\n              throw new Error(`The button settings modal had no tab at index ${index}`);\n            }\n            await open();\n          },\n        },\n        textInput: Object.fromEntries(\n          Object.entries(textInput).map(([key, value]) => [\n            key,\n            typeof value === 'function'\n              ? async (...args: unknown[]) => {\n                  await openTextField();\n                  return (value as (...args: unknown[]) => unknown)(...args);\n                }\n              : value,\n          ])\n        ) as TextInputUniDriver,\n      },\n      design: {\n        textColor: createButtonColorSwatchesUniDriver(() =>\n          getBase().$(dataHook(DESIGN_SETTINGS_TEXT_COLOR_INPUT))\n        ),\n        borderColor: createButtonColorSwatchesUniDriver(() =>\n          getBase().$(dataHook(DESIGN_SETTINGS_BORDER_COLOR_INPUT))\n        ),\n        backgroundColor: createButtonColorSwatchesUniDriver(() =>\n          getBase().$(dataHook(DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT))\n        ),\n      },\n    },\n    textInput,\n    linkModal: createLinkModalUnidriver(getBase),\n    colorPickerModal: createNewColorPickerUniDriver(getBase),\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,qBAAqB;AAG9C,SAAS,4BAA4B,sCAAsC;AAE3E,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAEzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAoCA,MAAM,gCAAwE,aAAW;AAE9F,QAAM,gBAAgB,MAAM,SAAS,cAAc,CAAC,QAAQ,SAAS,UAAU,CAAC;AAChF,QAAM,uBAAuB,YAAY;AACvC,UAAM,QAAQ,MAAM,QAAQ,EAAE,IAAI,aAAa;AAC/C,UAAM,MAAM,KAAK;AAAA,EACnB;AACA,QAAM,YAAgC;AAAA,IACpC,gBAAgB,YAAY;AAC1B,YAAM,QAAQ,EAAE,IAAI,SAAS,kCAAkC,CAAC;AAAA,IAClE;AAAA,IACA,GAAG,eAAe,QAAQ,EAAE,EAAE,SAAS,kCAAkC,CAAC,GAAG,QAAQ,CAAC;AAAA,EACxF;AACA,QAAM,gBAAgB,YAAY;AAChC,QAAI,MAAM,QAAQ,EAAE,EAAE,SAAS,kCAAkC,CAAC,EAAE,OAAO,GAAG;AAC5E;AAAA,IACF;AAEA,UAAM,aAAa,QAAQ,EAAE,EAAE,SAAS,0BAA0B,CAAC;AACnE,UAAM,aAAa,QAAQ,EAAE,EAAE,SAAS,0BAA0B,CAAC;AACnE,WAAQ,MAAM,WAAW,OAAO,IAAK,aAAa,YAAY,MAAM;AACpE,UAAM,UAAU,eAAe;AAAA,EACjC;AACA,QAAM,aAAa,YAAY;AAC7B,QAAI,MAAM,QAAQ,EAAE,EAAE,SAAS,gCAAgC,CAAC,EAAE,OAAO,GAAG;AAC1E;AAAA,IACF;AACA,UAAM,QAAQ,EAAE,EAAE,SAAS,8BAA8B,CAAC,EAAE,MAAM;AAClE,UAAM,QAAQ,EAAE,IAAI,SAAS,gCAAgC,CAAC;AAAA,EAChE;AAEA,QAAM,UAAU,CAAC,eAAe,UAAU;AAE1C,SAAO;AAAA,IACL,eAAe;AAAA,MACb,gBAAgB;AAAA,MAChB,QAAQ,YAAY;AAClB,YAAI;AACF,gBAAM,QAAQ,MAAM,QAAQ,EAAE,IAAI,aAAa;AAC/C,iBAAO,MAAM,OAAO;AAAA,QACtB,QAAQ;AACN,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,MAAM;AAAA,UACJ,GAAG,cAAc,QAAQ,GAAG,QAAQ,CAAC;AAAA,UACrC,gBAAgB;AAAA,UAChB,YAAY,OAAM,UAAS;AACzB,kBAAM,OAAO,QAAQ,KAAK;AAC1B,gBAAI,CAAC,MAAM;AACT,oBAAM,IAAI,MAAM,iDAAiD,KAAK,EAAE;AAAA,YAC1E;AACA,kBAAM,KAAK;AAAA,UACb;AAAA,QACF;AAAA,QACA,WAAW,OAAO;AAAA,UAChB,OAAO,QAAQ,SAAS,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAAA,YAC9C;AAAA,YACA,OAAO,UAAU,aACb,UAAU,SAAoB;AAC5B,oBAAM,cAAc;AACpB,qBAAQ,MAA0C,GAAG,IAAI;AAAA,YAC3D,IACA;AAAA,UACN,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,WAAW;AAAA,UAAmC,MAC5C,QAAQ,EAAE,EAAE,SAAS,gCAAgC,CAAC;AAAA,QACxD;AAAA,QACA,aAAa;AAAA,UAAmC,MAC9C,QAAQ,EAAE,EAAE,SAAS,kCAAkC,CAAC;AAAA,QAC1D;AAAA,QACA,iBAAiB;AAAA,UAAmC,MAClD,QAAQ,EAAE,EAAE,SAAS,sCAAsC,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW,yBAAyB,OAAO;AAAA,IAC3C,kBAAkB,8BAA8B,OAAO;AAAA,EACzD;AACF;",
   "names": []
 }

package/dist/es/plugin-button/testkit/button.testkit.js

@@ -6,7 +6,12 @@ import {
   PLUGIN_TOOLBAR_SETTINGS_BUTTON
 } from "./../../_shared/data-hooks.js";
 import { dataHook } from "./../../wix-rich-content-common/index.js";
-import { INSERT_BUTTON_BUTTON, ROOT } from "../data-hooks.js";
+import {
+  INLINE_TEXT_INPUT,
+  INSERT_BUTTON_BUTTON,
+  PLUGIN_TOOLBAR_TEXT_BUTTON,
+  ROOT
+} from "../data-hooks.js";
 import { toolbarsToAddIn } from "../get-add-buttons.js";
 import { createButtonSettingsUniDriver } from "./button-settings.uni.driver.js";
 const createButtonTestkit = (buttonType, tag) => (getBase) => {
@@ -27,7 +32,15 @@ const createButtonTestkit = (buttonType, tag) => (getBase) => {
             }
           },
           click: async () => (await getButton(index)).click(),
-          getText: async () => (await getButton(index)).text(),
+          getText: async () => {
+            const button = await getButton(index);
+            const input = button.$(dataHook(INLINE_TEXT_INPUT));
+            return await input.exists() ? input.value() : button.text();
+          },
+          getTextInputElement: async () => {
+            const input = await (await getButton(index)).get(dataHook(INLINE_TEXT_INPUT));
+            return await input.getNative();
+          },
           getLink: async () => (await getButton(index)).attr("href"),
           getStyles: async () => {
             const btn = await getButton(index);
@@ -57,6 +70,12 @@ const createButtonTestkit = (buttonType, tag) => (getBase) => {
           );
           await settings.click();
         },
+        openTextModal: async () => {
+          const text = await getPluginToolbarBase(buttonType).get(
+            dataHook(PLUGIN_TOOLBAR_TEXT_BUTTON)
+          );
+          await text.click();
+        },
         openLinkModal: async () => {
           const link = await getPluginToolbarBase(buttonType).get(
             dataHook(PLUGIN_TOOLBAR_LINK_BUTTON)