@wix/ricos 11.20.5 → 11.21.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-button/data-hooks.ts"],
-  "sourcesContent": ["export const INSERT_BUTTON_BUTTON = 'insert-button-button';\n\nexport const ROOT = 'button-viewer';\n\nexport const SETTINGS_MODAL = 'button-settings-modal';\nexport const SETTINGS_TABS = 'settings-tabs';\nexport const SETTINGS_GENERAL_TAB = 'settings-general-tab';\nexport const SETTINGS_DESIGN_TAB = 'settings-design-tab';\n\nexport const DESIGN_SETTINGS_BORDER_WIDTH_INPUT = 'design-settings-border-width-input';\nexport const DESIGN_SETTINGS_CORNER_RADIUS_INPUT = 'design-settings-corner-radius-input';\nexport const DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT = 'design-settings-background-color-input';\nexport const DESIGN_SETTINGS_TEXT_COLOR_INPUT = 'design-settings-text-color-input';\nexport const DESIGN_SETTINGS_BORDER_COLOR_INPUT = 'design-settings-border-color-input';\n\nexport const GENERAL_SETTINGS_BUTTON_TEXT_INPUT = 'general-settings-button-text-input';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,uBAAuB;AAE7B,MAAM,OAAO;AAEb,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAE5B,MAAM,qCAAqC;AAC3C,MAAM,sCAAsC;AAC5C,MAAM,yCAAyC;AAC/C,MAAM,mCAAmC;AACzC,MAAM,qCAAqC;AAE3C,MAAM,qCAAqC;",
+  "sourcesContent": ["export const INSERT_BUTTON_BUTTON = 'insert-button-button';\n\nexport const ROOT = 'button-viewer';\nexport const INLINE_TEXT_INPUT = 'button-inline-text-input';\n\nexport const SETTINGS_MODAL = 'button-settings-modal';\nexport const TEXT_MODAL = 'button-text-modal';\nexport const PLUGIN_TOOLBAR_TEXT_BUTTON = 'plugin-toolbar-text-button';\n\nexport const DESIGN_SETTINGS_BORDER_WIDTH_INPUT = 'design-settings-border-width-input';\nexport const DESIGN_SETTINGS_CORNER_RADIUS_INPUT = 'design-settings-corner-radius-input';\nexport const DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT = 'design-settings-background-color-input';\nexport const DESIGN_SETTINGS_TEXT_COLOR_INPUT = 'design-settings-text-color-input';\nexport const DESIGN_SETTINGS_BORDER_COLOR_INPUT = 'design-settings-border-color-input';\n\nexport const GENERAL_SETTINGS_BUTTON_TEXT_INPUT = 'general-settings-button-text-input';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,uBAAuB;AAE7B,MAAM,OAAO;AACb,MAAM,oBAAoB;AAE1B,MAAM,iBAAiB;AACvB,MAAM,aAAa;AACnB,MAAM,6BAA6B;AAEnC,MAAM,qCAAqC;AAC3C,MAAM,sCAAsC;AAC5C,MAAM,yCAAyC;AAC/C,MAAM,mCAAmC;AACzC,MAAM,qCAAqC;AAE3C,MAAM,qCAAqC;",
   "names": []
 }

package/dist/cjs/plugin-button/get-toolbar-buttons.js

@@ -21,6 +21,7 @@ __export(get_toolbar_buttons_exports, {
   getToolbarButtons: () => getToolbarButtons
 });
 module.exports = __toCommonJS(get_toolbar_buttons_exports);
+var import_lazy = require("@wix/wix-ui-icons-common/lazy");
 var import_paywall_extension_name = require("./../_shared/paywall/paywall-extension-name.js");
 var import_paywall_selection = require("./../_shared/paywall/paywall-selection.js");
 var import_create_animation_button = require("./../_shared/plugin-toolbar/create-animation-button.js");
@@ -28,9 +29,13 @@ var import_create_delete_button = require("./../_shared/plugin-toolbar/create-de
 var import_create_link_button = require("./../_shared/plugin-toolbar/create-link-button.js");
 var import_create_node_alignment_button = require("./../_shared/plugin-toolbar/create-node-alignment-button.js");
 var import_create_settings_button = require("./../_shared/plugin-toolbar/create-settings-button.js");
+var import_plugin_toolbar_buttons_ids = require("./../_shared/plugin-toolbar/plugin-toolbar-buttons-ids.js");
 var import_create_separator = require("./../_shared/plugin-toolbar/separator/create-separator.js");
+var import_button_text_field = require("./components/button-text-field.js");
 var import_constants = require("./constants.js");
+var import_data_hooks = require("./data-hooks.js");
 var import_is_last_paywall_button = require("./is-last-paywall-button.js");
+var import_action_button_text_modal = require("./modals/action-button-text-modal.js");
 var import_settings_modal = require("./modals/settings-modal.js");
 var import_types = require("./types.js");
 const hasPaywallPlugin = (editor) => editor.extensionManager.extensions.some((extension) => extension.name === import_paywall_extension_name.PAYWALL_EXTENSION_NAME);
@@ -42,40 +47,55 @@ const getToolbarButtons = ({
   const alignmentModalId = import_constants.buttonsModals.alignment[type];
   const settingsModalId = import_constants.buttonsModals.settings[type];
   const alignmentButton = (0, import_create_node_alignment_button.createNodeAlignmentButton)({ services, modalId: alignmentModalId });
-  const linkButton = (0, import_create_link_button.createLinkButton)(services);
+  const linkButton = (0, import_create_link_button.createLinkButton)(
+    services,
+    type === import_types.LINK_BUTTON_TYPE ? { ExtraField: import_button_text_field.LinkModalButtonTextField } : {}
+  );
   linkButton.attributes = {
     ...linkButton.attributes,
     // A subscribe button's target is the paywall's viewer config rather than an authored
     // link, so inside a paywall a link editor writes a value nothing reads.
     visible: (_content, _resolverServices, editor) => type === import_types.LINK_BUTTON_TYPE || !editor?.state || !hasPaywallPlugin(editor) || !(0, import_paywall_selection.isPaywallSelection)(editor.state.selection)
   };
+  const togglePanel = (modalId, Component) => ({ modals, referenceElement, attributes }) => {
+    modals.togglePluginPanel({
+      id: modalId,
+      isMobile: services.context.isMobile,
+      Component,
+      componentProps: {
+        nodeId: attributes.selectedNode?.attrs.id,
+        settings: config,
+        type,
+        modalId,
+        referenceElement
+      },
+      positioning: {
+        referenceElement: referenceElement?.closest("[data-hook~=floating-plugin-toolbar]") ?? referenceElement,
+        placement: "right-start"
+      },
+      onClickOutside: {
+        on: "pointerup",
+        handler: () => {
+        }
+      },
+      focusReturnElement: referenceElement
+    });
+  };
   const settingsButton = (0, import_create_settings_button.createSettingsButton)({
     modalId: settingsModalId,
-    command: ({ modals, referenceElement, attributes }) => {
-      modals.togglePluginPanel({
-        id: settingsModalId,
-        isMobile: services.context.isMobile,
-        Component: import_settings_modal.ButtonSettingsModal,
-        componentProps: {
-          nodeId: attributes.selectedNode?.attrs.id,
-          settings: config,
-          type,
-          modalId: settingsModalId,
-          referenceElement
-        },
-        positioning: {
-          referenceElement: referenceElement?.closest("[data-hook~=floating-plugin-toolbar]") ?? referenceElement,
-          placement: "right-start"
-        },
-        onClickOutside: {
-          on: "pointerup",
-          handler: () => {
-          }
-        },
-        focusReturnElement: referenceElement
-      });
-    }
+    command: togglePanel(settingsModalId, import_settings_modal.ButtonSettingsModal)
   });
+  const textModalId = import_constants.buttonsModals.text[import_types.ACTION_BUTTON_TYPE];
+  const textButtons = type === import_types.ACTION_BUTTON_TYPE ? [
+    (0, import_create_settings_button.createSettingsButton)({
+      modalId: textModalId,
+      command: togglePanel(textModalId, import_action_button_text_modal.ActionButtonTextModal),
+      buttonId: import_plugin_toolbar_buttons_ids.PLUGIN_TOOLBAR_BUTTON_ID.TEXT,
+      dataHook: import_data_hooks.PLUGIN_TOOLBAR_TEXT_BUTTON,
+      icon: import_lazy.TextSmall,
+      tooltip: "ButtonPlugin_EditText_Tooltip"
+    })
+  ] : [];
   const separator = (0, import_create_separator.createSeparator)();
   const animation = (0, import_create_animation_button.createAnimationButton)(services);
   const deleteButton = (0, import_create_delete_button.createDeleteButton)({
@@ -85,6 +105,14 @@ const getToolbarButtons = ({
       visible: (_content, _resolverServices, editor) => !editor || !hasPaywallPlugin(editor) || !(0, import_is_last_paywall_button.isLastPaywallButton)(editor)
     }
   });
-  return services.context.environment === "wixel" ? [settingsButton, linkButton, alignmentButton, animation, deleteButton] : [alignmentButton, linkButton, settingsButton, animation, separator, deleteButton];
+  return services.context.environment === "wixel" ? [...textButtons, settingsButton, linkButton, alignmentButton, animation, deleteButton] : [
+    alignmentButton,
+    linkButton,
+    ...textButtons,
+    settingsButton,
+    animation,
+    separator,
+    deleteButton
+  ];
 };
 //# sourceMappingURL=get-toolbar-buttons.js.map

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oCAAuC;AACvC,+BAAmC;AACnC,qCAAsC;AACtC,kCAAmC;AACnC,gCAAiC;AACjC,0CAA0C;AAC1C,oCAAqC;AACrC,8BAAgC;AAEhC,uBAA8B;AAC9B,oCAAoC;AACpC,4BAAoC;AACpC,mBAAiC;AAcjC,MAAM,mBAAmB,CAAC,WACxB,OAAO,iBAAiB,WAAW,KAAK,eAAa,UAAU,SAAS,oDAAsB;AAEzF,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAU2B;AACzB,QAAM,mBAAmB,+BAAc,UAAU,IAAI;AACrD,QAAM,kBAAkB,+BAAc,SAAS,IAAI;AAEnD,QAAM,sBAAkB,+DAA0B,EAAE,UAAU,SAAS,iBAAiB,CAAC;AAEzF,QAAM,iBAAa,4CAAiB,QAAQ;AAC5C,aAAW,aAAa;AAAA,IACtB,GAAG,WAAW;AAAA;AAAA;AAAA,IAGd,SAAS,CAAC,UAAU,mBAAmB,WACrC,SAAS,iCACT,CAAC,QAAQ,SACT,CAAC,iBAAiB,MAAM,KACxB,KAAC,6CAAmB,OAAO,MAAM,SAAS;AAAA,EAC9C;AACA,QAAM,qBAAiB,oDAAqB;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,gBAAY,yCAAgB;AAClC,QAAM,gBAAY,sDAAsB,QAAQ;AAChD,QAAM,mBAAe,gDAAmB;AAAA,IACtC,YAAY;AAAA;AAAA;AAAA,MAGV,SAAS,CAAC,UAAU,mBAAmB,WACrC,CAAC,UAAU,CAAC,iBAAiB,MAAM,KAAK,KAAC,mDAAoB,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;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAI1B,oCAAuC;AACvC,+BAAmC;AACnC,qCAAsC;AACtC,kCAAmC;AACnC,gCAAiC;AACjC,0CAA0C;AAC1C,oCAAqC;AACrC,wCAAyC;AACzC,8BAAgC;AAEhC,+BAAyC;AACzC,uBAA8B;AAC9B,wBAA2C;AAC3C,oCAAoC;AACpC,sCAAsC;AACtC,4BAAoC;AACpC,mBAAqD;AAUrD,MAAM,mBAAmB,CAAC,WACxB,OAAO,iBAAiB,WAAW,KAAK,eAAa,UAAU,SAAS,oDAAsB;AAEzF,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAU2B;AACzB,QAAM,mBAAmB,+BAAc,UAAU,IAAI;AACrD,QAAM,kBAAkB,+BAAc,SAAS,IAAI;AAEnD,QAAM,sBAAkB,+DAA0B,EAAE,UAAU,SAAS,iBAAiB,CAAC;AAGzF,QAAM,iBAAa;AAAA,IACjB;AAAA,IACA,SAAS,gCAAmB,EAAE,YAAY,kDAAyB,IAAI,CAAC;AAAA,EAC1E;AACA,aAAW,aAAa;AAAA,IACtB,GAAG,WAAW;AAAA;AAAA;AAAA,IAGd,SAAS,CAAC,UAAU,mBAAmB,WACrC,SAAS,iCACT,CAAC,QAAQ,SACT,CAAC,iBAAiB,MAAM,KACxB,KAAC,6CAAmB,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,qBAAiB,oDAAqB;AAAA,IAC1C,SAAS;AAAA,IACT,SAAS,YAAY,iBAAiB,yCAAmB;AAAA,EAC3D,CAAC;AACD,QAAM,cAAc,+BAAc,KAAK,+BAAkB;AACzD,QAAM,cACJ,SAAS,kCACL;AAAA,QACE,oDAAqB;AAAA,MACnB,SAAS;AAAA,MACT,SAAS,YAAY,aAAa,qDAAqB;AAAA,MACvD,UAAU,2DAAyB;AAAA,MACnC,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACX,CAAC;AAAA,EACH,IACA,CAAC;AACP,QAAM,gBAAY,yCAAgB;AAClC,QAAM,gBAAY,sDAAsB,QAAQ;AAChD,QAAM,mBAAe,gDAAmB;AAAA,IACtC,YAAY;AAAA;AAAA;AAAA,MAGV,SAAS,CAAC,UAAU,mBAAmB,WACrC,CAAC,UAAU,CAAC,iBAAiB,MAAM,KAAK,KAAC,mDAAoB,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/cjs/plugin-button/modals/action-button-text-modal.js

@@ -0,0 +1,59 @@
+"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 action_button_text_modal_exports = {};
+__export(action_button_text_modal_exports, {
+  ActionButtonTextModal: () => ActionButtonTextModal
+});
+module.exports = __toCommonJS(action_button_text_modal_exports);
+var import_design_system = require("@wix/design-system");
+var import_react = __toESM(require("react"));
+var import_ricos_context = require("./../../ricos-context/index.js");
+var import_bi_context_provider = require("./../../_shared/bi-context-provider/bi-context-provider.js");
+var import_use_node_attrs = require("./../../_shared/use-node-attrs.js");
+var import_ui_components = require("./../../ui-components/index.js");
+var import_button_text_field = require("../components/button-text-field.js");
+var import_data_hooks = require("../data-hooks.js");
+const ActionButtonTextModal = ({ nodeId, modalId, referenceElement }) => {
+  const { t } = (0, import_react.useContext)(import_ricos_context.RicosContext);
+  const modalService = (0, import_react.useContext)(import_ricos_context.ModalServiceContext) || {};
+  const containerEl = (0, import_ui_components.usePanelContainerElement)();
+  const logBi = (0, import_bi_context_provider.useBiNext)({ modalId, pluginId: "actionButton", nodeId });
+  const { patchPmNodeAttrs, pmNodeAttrs } = (0, import_use_node_attrs.useNodeAttrs)(nodeId, "ACTION_BUTTON");
+  const closeModal = () => modalService.closeModal(modalId);
+  (0, import_ui_components.useClickOutside)({
+    containerRef: { current: containerEl },
+    onClickOutside: (e) => {
+      if (!referenceElement?.contains(e.target)) {
+        closeModal();
+      }
+    }
+  });
+  return pmNodeAttrs ? /* @__PURE__ */ import_react.default.createElement(import_ui_components.Panel, { closeButtonProps: { onClick: closeModal }, dataHook: import_data_hooks.TEXT_MODAL }, /* @__PURE__ */ import_react.default.createElement(import_ui_components.PanelHeader, { title: t("ButtonModal_Header") }), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { padding: "SP3", paddingTop: "SP4", width: "100%" }, /* @__PURE__ */ import_react.default.createElement(import_button_text_field.ButtonTextField, { buttonData: pmNodeAttrs, onChange: patchPmNodeAttrs, logBi }))) : null;
+};
+//# sourceMappingURL=action-button-text-modal.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoB;AAEpB,mBAAkC;AAElC,2BAAkD;AAClD,iCAA0B;AAC1B,4BAA6B;AAC7B,2BAKO;AAEP,+BAAgC;AAChC,wBAA2B;AASpB,MAAM,wBAAmC,CAAC,EAAE,QAAQ,SAAS,iBAAiB,MAAM;AACzF,QAAM,EAAE,EAAE,QAAI,yBAAW,iCAAY;AACrC,QAAM,mBAAe,yBAAW,wCAAmB,KAAK,CAAC;AAEzD,QAAM,kBAAc,+CAAyB;AAE7C,QAAM,YAAQ,sCAAU,EAAE,SAAS,UAAU,gBAAgB,OAAO,CAAC;AAErE,QAAM,EAAE,kBAAkB,YAAY,QAAI,oCAAa,QAAQ,eAAe;AAE9E,QAAM,aAAa,MAAM,aAAa,WAAW,OAAO;AAExD,4CAAgB;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,6BAAAA,QAAA,cAAC,8BAAM,kBAAkB,EAAE,SAAS,WAAW,GAAG,UAAU,gCAC1D,6BAAAA,QAAA,cAAC,oCAAY,OAAO,EAAE,oBAAoB,GAAG,GAC7C,6BAAAA,QAAA,cAAC,4BAAI,SAAQ,OAAM,YAAW,OAAM,OAAM,UACxC,6BAAAA,QAAA,cAAC,4CAAgB,YAAY,aAAa,UAAU,kBAAkB,OAAc,CACtF,CACF,IACE;AACN;",
+  "names": ["React"]
+}

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

@@ -35,22 +35,16 @@ var import_design_system = require("@wix/design-system");
 var import_react = __toESM(require("react"));
 var import_ricos_context = require("./../../ricos-context/index.js");
 var import_theme_constants = require("./../../ricos-styles/theme-constants.js");
-var import_uncreachable = require("./../../_shared/uncreachable.js");
 var import_wix_rich_content_common = require("./../../wix-rich-content-common/index.js");
 var import_ui_components = require("./../../ui-components/index.js");
 var import_design_component = require("../components/design-component.js");
-var import_settings_component = require("../components/settings-component.js");
-var import_constants = require("../constants.js");
 var import_data_hooks = require("../data-hooks.js");
 var import_button_input_modal_scss = __toESM(require("../statics/styles/button-input-modal-scss.js"));
 const SettingsModalContent = ({
-  buttonData,
   onChange,
   config,
   nodeId,
   nodeType,
-  activeTab,
-  onTabChange,
   onClose,
   logBi
 }) => {
@@ -62,50 +56,17 @@ 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__ */ import_react.default.createElement("div", { className: import_button_input_modal_scss.default.modal }, /* @__PURE__ */ import_react.default.createElement(import_ui_components.Panel, { closeButtonProps: { onClick: onClose }, dataHook: import_data_hooks.SETTINGS_MODAL }, /* @__PURE__ */ import_react.default.createElement(import_ui_components.PanelHeader, { title: t("ButtonModal_Header") }), /* @__PURE__ */ import_react.default.createElement(
-    import_design_system.Tabs,
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: import_button_input_modal_scss.default.modal }, /* @__PURE__ */ import_react.default.createElement(import_ui_components.Panel, { closeButtonProps: { onClick: onClose }, dataHook: import_data_hooks.SETTINGS_MODAL }, /* @__PURE__ */ import_react.default.createElement(import_ui_components.PanelHeader, { title: t("ButtonModal_Header") }), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { className: isMobile ? void 0 : import_button_input_modal_scss.default.content }, /* @__PURE__ */ import_react.default.createElement(
+    import_design_component.DesignComponent,
     {
-      dataHook: import_data_hooks.SETTINGS_TABS,
-      onClick: (tab) => onTabChange(tab.id),
-      activeId: activeTab,
-      size: "small",
-      alignment: "center",
-      type: "uniformFull",
-      minWidth: 0,
-      items: [
-        {
-          id: import_constants.SETTINGS_TAB.SETTINGS,
-          title: t("ButtonModal_Settings_Tab"),
-          dataHook: import_data_hooks.SETTINGS_GENERAL_TAB
-        },
-        {
-          id: import_constants.SETTINGS_TAB.DESIGN,
-          title: t("ButtonModal_Design_Tab"),
-          dataHook: import_data_hooks.SETTINGS_DESIGN_TAB
-        }
-      ]
+      onChange,
+      config,
+      defaultBackgroundColor,
+      defaultTextColor,
+      nodeId,
+      nodeType,
+      logBi
     }
-  ), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { className: isMobile ? void 0 : import_button_input_modal_scss.default.content }, (() => {
-    switch (activeTab) {
-      case import_constants.SETTINGS_TAB.SETTINGS:
-        return /* @__PURE__ */ import_react.default.createElement(import_settings_component.SettingsComponent, { buttonData, onChange, logBi });
-      case import_constants.SETTINGS_TAB.DESIGN:
-        return /* @__PURE__ */ import_react.default.createElement(
-          import_design_component.DesignComponent,
-          {
-            onChange,
-            config,
-            defaultBackgroundColor,
-            defaultTextColor,
-            nodeId,
-            nodeType,
-            logBi
-          }
-        );
-      default:
-        (0, import_uncreachable.unreachable)(activeTab);
-        return null;
-    }
-  })())));
+  ))));
 };
 //# sourceMappingURL=settings-modal-content.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA0B;AAC1B,mBAA2C;AAE3C,2BAA6B;AAC7B,6BAAqC;AAGrC,0BAA4B;AAC5B,qCAAyB;AACzB,2BAAmC;AAEnC,8BAAgC;AAChC,gCAAkC;AAElC,uBAA6B;AAC7B,wBAMO;AACP,qCAAoB;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,QAAI,yBAAW,iCAAY;AAE/C,QAAM,EAAE,wBAAwB,iBAAiB,QAAI,sBAAQ,MAAM;AACjE,UAAM,SAAS,SAAS,kBAAc,yCAAS,UAAU,MAAM,IAAI,sBAAI,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,6BAAAC,QAAA,cAAC,SAAI,WAAW,+BAAAC,QAAQ,SACtB,6BAAAD,QAAA,cAAC,8BAAM,kBAAkB,EAAE,SAAS,QAAQ,GAAG,UAAU,oCACvD,6BAAAA,QAAA,cAAC,oCAAY,OAAO,EAAE,oBAAoB,GAAG,GAC7C,6BAAAA,QAAA;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,8BAAa;AAAA,UACjB,OAAO,EAAE,0BAA0B;AAAA,UACnC,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,UACE,IAAI,8BAAa;AAAA,UACjB,OAAO,EAAE,wBAAwB;AAAA,UACjC,UAAU;AAAA,QACZ;AAAA,MACF;AAAA;AAAA,EACF,GACA,6BAAAA,QAAA,cAAC,4BAAI,WAAW,WAAW,SAAY,+BAAAC,QAAQ,YAC3C,MAAM;AACN,YAAQ,WAAW;AAAA,MACjB,KAAK,8BAAa;AAChB,eACE,6BAAAD,QAAA,cAAC,+CAAkB,YAAwB,UAAoB,OAAc;AAAA,MAEjF,KAAK,8BAAa;AAChB,eACE,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,MAEJ;AACE,6CAAY,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;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoB;AACpB,mBAA2C;AAE3C,2BAA6B;AAC7B,6BAAqC;AAGrC,qCAAyB;AACzB,2BAAmC;AAEnC,8BAAgC;AAChC,wBAAqC;AACrC,qCAAoB;AAYb,MAAM,uBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,GAAG,SAAS,QAAI,yBAAW,iCAAY;AAE/C,QAAM,EAAE,wBAAwB,iBAAiB,QAAI,sBAAQ,MAAM;AACjE,UAAM,SAAS,SAAS,kBAAc,yCAAS,UAAU,MAAM,IAAI,sBAAI,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,6BAAAC,QAAA,cAAC,SAAI,WAAW,+BAAAC,QAAQ,SACtB,6BAAAD,QAAA,cAAC,8BAAM,kBAAkB,EAAE,SAAS,QAAQ,GAAG,UAAU,oCACvD,6BAAAA,QAAA,cAAC,oCAAY,OAAO,EAAE,oBAAoB,GAAG,GAC7C,6BAAAA,QAAA,cAAC,4BAAI,WAAW,WAAW,SAAY,+BAAAC,QAAQ,WAC7C,6BAAAD,QAAA;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", "React", "classes"]
 }

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

@@ -44,19 +44,17 @@ const ButtonSettingsModal = ({
   settings,
   type,
   modalId,
-  activeTab: tab,
   referenceElement
 }) => {
   const modalService = (0, import_react.useContext)(import_ricos_context.ModalServiceContext) || {};
   const containerEl = (0, import_ui_components.usePanelContainerElement)();
   const nodeType = type === import_types.LINK_BUTTON_TYPE ? "LINK_BUTTON" : "ACTION_BUTTON";
   const logBi = (0, import_bi_context_provider.useBiNext)({
-    modalId: import_constants.buttonsModals.settings[type],
+    modalId,
     pluginId: nodeType === "LINK_BUTTON" ? "linkButton" : "actionButton",
     nodeId
   });
   const { patchPmNodeAttrs, pmNodeAttrs } = (0, import_use_node_attrs.useNodeAttrs)(nodeId, nodeType);
-  const [activeTab, setActiveTab] = (0, import_react.useState)(tab ?? import_constants.SETTINGS_TAB.SETTINGS);
   const handleOnChange = (data) => patchPmNodeAttrs?.(data);
   const isColorPickerModalOpen = () => modalService.isModalOpen(import_constants.buttonsModals.colorPicker);
   const closeModal = () => modalService.closeModal(modalId);
@@ -74,14 +72,11 @@ const ButtonSettingsModal = ({
   return pmNodeAttrs ? /* @__PURE__ */ import_react.default.createElement(
     import_settings_modal_content.SettingsModalContent,
     {
-      buttonData: pmNodeAttrs,
       config: settings,
       onClose: closeModal,
       onChange: handleOnChange,
       nodeId,
       nodeType,
-      activeTab,
-      onTabChange: setActiveTab,
       logBi
     }
   ) : null;

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA4C;AAE5C,2BAAoC;AACpC,iCAA0B;AAE1B,4BAA6B;AAC7B,2BAGO;AAGP,uBAA4C;AAE5C,mBAAiC;AACjC,oCAAqC;AAW9B,MAAM,sBAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,mBAAe,yBAAW,wCAAmB,KAAK,CAAC;AAEzD,QAAM,kBAAc,+CAAyB;AAE7C,QAAM,WACJ,SAAS,gCAAmB,gBAAgB;AAE9C,QAAM,YAAQ,sCAAU;AAAA,IACtB,SAAS,+BAAc,SAAS,IAAI;AAAA,IACpC,UAAU,aAAa,gBAAgB,eAAe;AAAA,IACtD;AAAA,EACF,CAAC;AAED,QAAM,EAAE,kBAAkB,YAAY,QAAI,oCAAa,QAAQ,QAAQ;AAEvE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAsB,OAAO,8BAAa,QAAQ;AAEpF,QAAM,iBAAiB,CAAC,SACtB,mBAAmB,IAAI;AAEzB,QAAM,yBAAyB,MAAM,aAAa,YAAY,+BAAc,WAAW;AAEvF,QAAM,aAAa,MAAM,aAAa,WAAW,OAAO;AAExD,4CAAgB;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,6BAAAA,QAAA;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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAElC,2BAAoC;AACpC,iCAA0B;AAE1B,4BAA6B;AAC7B,2BAGO;AAEP,uBAA8B;AAE9B,mBAAiC;AACjC,oCAAqC;AAU9B,MAAM,sBAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAe,yBAAW,wCAAmB,KAAK,CAAC;AAEzD,QAAM,kBAAc,+CAAyB;AAE7C,QAAM,WACJ,SAAS,gCAAmB,gBAAgB;AAE9C,QAAM,YAAQ,sCAAU;AAAA,IACtB;AAAA,IACA,UAAU,aAAa,gBAAgB,eAAe;AAAA,IACtD;AAAA,EACF,CAAC;AAED,QAAM,EAAE,kBAAkB,YAAY,QAAI,oCAAa,QAAQ,QAAQ;AAEvE,QAAM,iBAAiB,CAAC,SACtB,mBAAmB,IAAI;AAEzB,QAAM,yBAAyB,MAAM,aAAa,YAAY,+BAAc,WAAW;AAEvF,QAAM,aAAa,MAAM,aAAa,WAAW,OAAO;AAExD,4CAAgB;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,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,IACE;AACN;",
   "names": ["React"]
 }

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

@@ -22,7 +22,7 @@ __export(button_input_modal_exports, {
 });
 module.exports = __toCommonJS(button_input_modal_exports);
 var button_input_modal_default = {
-  "content": "UwirK",
-  "modal": "BXntc"
+  "content": "ZRLsd",
+  "modal": "Xlx4P"
 };
 //# sourceMappingURL=button-input-modal-scss.js.map

package/dist/cjs/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": ["export default {\n  \"content\": \"UwirK\",\n  \"modal\": \"BXntc\"\n};"],
+  "sourcesContent": ["export default {\n  \"content\": \"ZRLsd\",\n  \"modal\": \"Xlx4P\"\n};"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAO,6BAAQ;AAAA,EACb,WAAW;AAAA,EACX,SAAS;AACX;",
   "names": []
 }

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

@@ -16,12 +16,12 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var settings_component_exports = {};
-__export(settings_component_exports, {
-  default: () => settings_component_default
+var button_text_field_exports = {};
+__export(button_text_field_exports, {
+  default: () => button_text_field_default
 });
-module.exports = __toCommonJS(settings_component_exports);
-var settings_component_default = {
-  "formField": "_4dxgR"
+module.exports = __toCommonJS(button_text_field_exports);
+var button_text_field_default = {
+  "formField": "sztLp"
 };
-//# sourceMappingURL=settings-component-scss.js.map
+//# sourceMappingURL=button-text-field-scss.js.map

package/dist/cjs/plugin-button/statics/styles/button-text-field-scss.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/plugin-button/statics/styles/button-text-field.scss"],
+  "sourcesContent": ["export default {\n  \"formField\": \"sztLp\"\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAO,4BAAQ;AAAA,EACb,aAAa;AACf;",
+  "names": []
+}

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

@@ -22,8 +22,10 @@ __export(default_styles_exports, {
 });
 module.exports = __toCommonJS(default_styles_exports);
 var default_styles_default = {
-  "button_container": "EgC0x",
-  "button_text": "_8aUap",
-  "button_size_content": "qTD40"
+  "button_container": "_2NcpI",
+  "button_text": "uDK6t",
+  "button_text_editor": "T6MAT",
+  "button_text_input": "AhtiD",
+  "button_size_content": "WDNmV"
 };
 //# sourceMappingURL=default-styles-scss.js.map

package/dist/cjs/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\": \"EgC0x\",\n  \"button_text\": \"_8aUap\",\n  \"button_size_content\": \"qTD40\"\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAO,yBAAQ;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,uBAAuB;AACzB;",
+  "sourcesContent": ["export default {\n  \"button_container\": \"_2NcpI\",\n  \"button_text\": \"uDK6t\",\n  \"button_text_editor\": \"T6MAT\",\n  \"button_text_input\": \"AhtiD\",\n  \"button_size_content\": \"WDNmV\"\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAO,yBAAQ;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,uBAAuB;AACzB;",
   "names": []
 }

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

@@ -22,20 +22,46 @@ __export(button_settings_uni_driver_exports, {
 });
 module.exports = __toCommonJS(button_settings_uni_driver_exports);
 var import_unidriver = require("@wix/design-system/dist/testkit/unidriver.js");
+var import_data_hooks = require("./../../_shared/data-hooks.js");
 var import_create_link_modal_unidriver = require("./../../_shared/link-modal/create-link-modal-unidriver.js");
 var import_wix_rich_content_common = require("./../../wix-rich-content-common/index.js");
 var import_testkit = require("./../../ui-components/testkit.js");
-var import_data_hooks = require("../data-hooks.js");
+var import_data_hooks2 = require("../data-hooks.js");
 const createButtonSettingsUniDriver = (getBase) => {
+  const settingsModal = `div${(0, import_wix_rich_content_common.dataHook)(import_data_hooks2.SETTINGS_MODAL)}, div${(0, import_wix_rich_content_common.dataHook)(import_data_hooks2.TEXT_MODAL)}`;
+  const waitForSettingsModal = async () => {
+    const modal = await getBase().get(settingsModal);
+    await modal.wait();
+  };
+  const textInput = {
+    waitForElement: async () => {
+      await getBase().get((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.GENERAL_SETTINGS_BUTTON_TEXT_INPUT));
+    },
+    ...(0, import_unidriver.InputUniDriver)(getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.GENERAL_SETTINGS_BUTTON_TEXT_INPUT)), getBase())
+  };
+  const openTextField = async () => {
+    if (await getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.GENERAL_SETTINGS_BUTTON_TEXT_INPUT)).exists()) {
+      return;
+    }
+    const textButton = getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.PLUGIN_TOOLBAR_TEXT_BUTTON));
+    const linkButton = getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks.PLUGIN_TOOLBAR_LINK_BUTTON));
+    await (await textButton.exists() ? textButton : linkButton).click();
+    await textInput.waitForElement();
+  };
+  const openDesign = async () => {
+    if (await getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.DESIGN_SETTINGS_TEXT_COLOR_INPUT)).exists()) {
+      return;
+    }
+    await getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks.PLUGIN_TOOLBAR_SETTINGS_BUTTON)).click();
+    await getBase().get((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.DESIGN_SETTINGS_TEXT_COLOR_INPUT));
+  };
+  const openTab = [openTextField, openDesign];
   return {
     settingsModal: {
-      waitForElement: async () => {
-        const modal = await getBase().get(`div${(0, import_wix_rich_content_common.dataHook)(import_data_hooks.SETTINGS_MODAL)}`);
-        await modal.wait();
-      },
+      waitForElement: waitForSettingsModal,
       exists: async () => {
         try {
-          const modal = await getBase().get(`div${(0, import_wix_rich_content_common.dataHook)(import_data_hooks.SETTINGS_MODAL)}`);
+          const modal = await getBase().get(settingsModal);
           return modal.exists();
         } catch {
           return false;
@@ -44,30 +70,38 @@ const createButtonSettingsUniDriver = (getBase) => {
       settings: {
         tabs: {
           ...(0, import_unidriver.TabsUniDriver)(getBase(), getBase()),
-          waitForElement: async () => {
-            const tabs = await getBase().get((0, import_wix_rich_content_common.dataHook)(import_data_hooks.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((0, import_wix_rich_content_common.dataHook)(import_data_hooks.GENERAL_SETTINGS_BUTTON_TEXT_INPUT));
-          },
-          ...(0, import_unidriver.InputUniDriver)(getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks.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: (0, import_testkit.createButtonColorSwatchesUniDriver)(
-          () => getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks.DESIGN_SETTINGS_TEXT_COLOR_INPUT))
+          () => getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.DESIGN_SETTINGS_TEXT_COLOR_INPUT))
         ),
         borderColor: (0, import_testkit.createButtonColorSwatchesUniDriver)(
-          () => getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks.DESIGN_SETTINGS_BORDER_COLOR_INPUT))
+          () => getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.DESIGN_SETTINGS_BORDER_COLOR_INPUT))
         ),
         backgroundColor: (0, import_testkit.createButtonColorSwatchesUniDriver)(
-          () => getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks.DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT))
+          () => getBase().$((0, import_wix_rich_content_common.dataHook)(import_data_hooks2.DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT))
         )
       }
     },
+    textInput,
     linkModal: (0, import_create_link_modal_unidriver.createLinkModalUnidriver)(getBase),
     colorPickerModal: (0, import_testkit.createNewColorPickerUniDriver)(getBase)
   };