@wix/ricos 11.20.6 → 11.21.0

package/dist/es/plugin-block-drag-handle/styles-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-block-drag-handle/styles.scss"],
-  "sourcesContent": ["var styleDataHash = 'c305b0a5';  \nexport const injectCss = (() => {\n  var css = `.JzFmq:not(:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol)):not([data-breakout]){border-radius:var(--ricos-native-whitebox-border-radius,0);box-shadow:0 0 0 1.5px #116dff;cursor:default}.JzFmq:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol),.JzFmq[data-breakout]{cursor:default;position:relative}.JzFmq:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol):before,.JzFmq[data-breakout]:before{border-radius:var(--ricos-native-whitebox-border-radius,0);bottom:0;box-shadow:0 0 0 1.5px #116dff;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.JzFmq:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol)[data-breakout=normal]:before,.JzFmq[data-breakout][data-breakout=normal]:before{left:var(--ricos-breakout-normal-padding-start,0);right:var(--ricos-breakout-normal-padding-end,0)}.JzFmq:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol)[data-breakout=fullWidth]:before,.JzFmq[data-breakout][data-breakout=fullWidth]:before{left:var(--ricos-breakout-full-width-padding-start,0);right:var(--ricos-breakout-full-width-padding-end,0)}.ProseMirror .ProseMirror-selectednode ::selection,.ProseMirror .ProseMirror-selectednode::selection{background:transparent}[data-layout-wrapper].JzFmq,[data-layout-wrapper].JzFmq:before,[data-layout-wrapper].JzFmq:hover{box-shadow:none!important;outline-color:transparent}[data-layout-wrapper].JzFmq [data-resize-container]{border-radius:var(--ricos-native-whitebox-border-radius,0);outline:2px solid #116dff;outline-offset:0}.kYmTA{opacity:.4;transform:scale(.97);transform-origin:top left;transition:opacity .15s ease,transform .15s ease}[dir=rtl] .kYmTA{transform-origin:top right}.kKYJp{animation:NhXzW .2s ease-out;transform-origin:top left}[dir=rtl] .kKYJp{transform-origin:top right}@keyframes NhXzW{0%{opacity:.5;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.kYmTA{transform:none;transition:none}.kKYJp{animation:none}}.hQqzM{cursor:grab;display:flex;opacity:0;position:absolute;transition:opacity .15s;z-index:1000000}.hQqzM:after{content:\"\";inline-size:var(--ricos-block-drag-handle-gutter);inset-block:0;inset-inline-start:100%;pointer-events:none;position:absolute}.hQqzM.wXcLz{opacity:1}.hQqzM:active{cursor:grabbing}.lfWgs{align-items:center;background:#fff;border:1px solid #dfe5eb;border-radius:999px;box-shadow:0 2px 4px 0 rgba(23,25,28,.1);color:#000624;cursor:inherit;display:flex;height:24px;justify-content:center;padding:0;transform-origin:left center;transition:scale .12s ease;width:24px}.lfWgs:hover{background:#f0f3f5}.lfWgs:active{background:#e4e8eb}.lfWgs:focus-visible{outline:2px solid #116dff;outline-offset:1px}.hQqzM[dir=rtl] .lfWgs{transform-origin:right center}.hQqzM[data-handle-collision]:not(:hover) .lfWgs{scale:.7}[data-hook=row-handle]{transition:transform .12s ease}[data-hook=row-handle][data-handle-collision]:not(:hover){transform:translate(-50%,-50%) scale(.7)}[data-hook=row-handle][data-handle-collision=yield]:not(:hover){transform:translate(-50%,-50%) scale(.5)}.d6slT{background:rgba(17,109,255,.08);border:1px solid #116dff;border-radius:2px;pointer-events:none;position:fixed;z-index:1000001}`;\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  \"blockSelected\": \"JzFmq\",\n  \"blockDragSource\": \"kYmTA\",\n  \"blockDropSettle\": \"kKYJp\",\n  \"block-drop-settle\": \"NhXzW\",\n  \"blockDragHandle\": \"hQqzM\",\n  \"visible\": \"wXcLz\",\n  \"blockDragHandleButton\": \"lfWgs\",\n  \"blockSelectMarquee\": \"d6slT\"\n};"],
+  "sourcesContent": ["var styleDataHash = '0c630d6f';  \nexport const injectCss = (() => {\n  var css = `.wng5Q:not(:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol)):not([data-breakout]){border-radius:var(--ricos-native-whitebox-border-radius,0);box-shadow:0 0 0 1.5px #116dff;cursor:default}.wng5Q:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol),.wng5Q[data-breakout]{cursor:default;position:relative}.wng5Q:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol):before,.wng5Q[data-breakout]:before{border-radius:var(--ricos-native-whitebox-border-radius,0);bottom:0;box-shadow:0 0 0 1.5px #116dff;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.wng5Q:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol)[data-breakout=normal]:before,.wng5Q[data-breakout][data-breakout=normal]:before{left:var(--ricos-breakout-normal-padding-start,0);right:var(--ricos-breakout-normal-padding-end,0)}.wng5Q:is(p,h1,h2,h3,h4,h5,h6,blockquote,pre,ul,ol)[data-breakout=fullWidth]:before,.wng5Q[data-breakout][data-breakout=fullWidth]:before{left:var(--ricos-breakout-full-width-padding-start,0);right:var(--ricos-breakout-full-width-padding-end,0)}.ProseMirror .ProseMirror-selectednode ::selection,.ProseMirror .ProseMirror-selectednode::selection{background:transparent}[data-layout-wrapper].wng5Q,[data-layout-wrapper].wng5Q:before,[data-layout-wrapper].wng5Q:hover{box-shadow:none!important;outline-color:transparent}[data-layout-wrapper].wng5Q [data-resize-container]{border-radius:var(--ricos-native-whitebox-border-radius,0);outline:2px solid #116dff;outline-offset:0}.wzBJu{opacity:.4;transform:scale(.97);transform-origin:top left;transition:opacity .15s ease,transform .15s ease}[dir=rtl] .wzBJu{transform-origin:top right}.OJYtz{animation:_17sAq .2s ease-out;transform-origin:top left}[dir=rtl] .OJYtz{transform-origin:top right}@keyframes _17sAq{0%{opacity:.5;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.wzBJu{transform:none;transition:none}.OJYtz{animation:none}}.p0x-w{cursor:grab;display:flex;opacity:0;position:absolute;transition:opacity .15s;z-index:1000000}.p0x-w:after{content:\"\";inline-size:var(--ricos-block-drag-handle-gutter);inset-block:0;inset-inline-start:100%;pointer-events:none;position:absolute}.p0x-w.fpK2t{opacity:1}.p0x-w:active{cursor:grabbing}._0zOt9{align-items:center;background:#fff;border:1px solid #dfe5eb;border-radius:999px;box-shadow:0 2px 4px 0 rgba(23,25,28,.1);color:#000624;cursor:inherit;display:flex;height:24px;justify-content:center;padding:0;transform-origin:left center;transition:scale .12s ease;width:24px}._0zOt9:hover{background:#f0f3f5}._0zOt9:active{background:#e4e8eb}._0zOt9:focus-visible{outline:2px solid #116dff;outline-offset:1px}.p0x-w[dir=rtl] ._0zOt9{transform-origin:right center}.p0x-w[data-handle-collision]:not(:hover) ._0zOt9{scale:.7}[data-hook=row-handle]{transition:transform .12s ease}[data-hook=row-handle][data-handle-collision]:not(:hover){transform:translate(-50%,-50%) scale(.7)}[data-hook=row-handle][data-handle-collision=yield]:not(:hover){transform:translate(-50%,-50%) scale(.5)}._8lthT{background:rgba(17,109,255,.08);border:1px solid #116dff;border-radius:2px;pointer-events:none;position:fixed;z-index:1000001}`;\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  \"blockSelected\": \"wng5Q\",\n  \"blockDragSource\": \"wzBJu\",\n  \"blockDropSettle\": \"OJYtz\",\n  \"block-drop-settle\": \"_17sAq\",\n  \"blockDragHandle\": \"p0x-w\",\n  \"visible\": \"fpK2t\",\n  \"blockDragHandleButton\": \"_0zOt9\",\n  \"blockSelectMarquee\": \"_8lthT\"\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,iBAAQ;AAAA,EACb,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,yBAAyB;AAAA,EACzB,sBAAsB;AACxB;",
   "names": []
 }

package/dist/es/plugin-button/components/button-text-field.js

@@ -0,0 +1,40 @@
+import { Box, FieldSet, Input } from "@wix/design-system";
+import React, { useContext } from "react";
+import { RicosContext } from "./../../ricos-context/index.js";
+import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
+import { LINK_MODAL_ID } from "./../../_shared/link-modal/constants.js";
+import { useNodeAttrs } from "./../../_shared/use-node-attrs.js";
+import { GENERAL_SETTINGS_BUTTON_TEXT_INPUT } from "../data-hooks.js";
+import classes from "../statics/styles/button-text-field-scss.js";
+const ButtonTextField = ({
+  buttonData,
+  onChange,
+  logBi
+}) => {
+  const { t } = useContext(RicosContext);
+  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical", width: "100%", className: classes.formField }, /* @__PURE__ */ React.createElement(FieldSet, { legend: t("ButtonModal_Button_Text") }, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      type: "text",
+      onChange: (e) => {
+        onChange({ ...buttonData, text: e.target.value });
+        logBi({ dataHook: GENERAL_SETTINGS_BUTTON_TEXT_INPUT, value: e.target.value });
+      },
+      value: buttonData.text ?? void 0,
+      dataHook: GENERAL_SETTINGS_BUTTON_TEXT_INPUT,
+      placeholder: t("ButtonModal_InputName_Placeholder"),
+      size: "small",
+      textOverflow: "ellipsis"
+    }
+  )));
+};
+const LinkModalButtonTextField = ({ nodeId }) => {
+  const { pmNodeAttrs, patchPmNodeAttrs } = useNodeAttrs(nodeId, "LINK_BUTTON");
+  const logBi = useBiNext({ modalId: LINK_MODAL_ID, pluginId: "linkButton", nodeId });
+  return pmNodeAttrs ? /* @__PURE__ */ React.createElement(ButtonTextField, { buttonData: pmNodeAttrs, onChange: patchPmNodeAttrs, logBi }) : null;
+};
+export {
+  ButtonTextField,
+  LinkModalButtonTextField
+};
+//# sourceMappingURL=button-text-field.js.map

package/dist/es/plugin-button/components/button-text-field.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-button/components/button-text-field.tsx"],
+  "sourcesContent": ["import { Box, FieldSet, Input } from '@wix/design-system';\nimport React, { useContext } from 'react';\n\nimport { RicosContext } from './../../ricos-context/index.js';\nimport type { LogBiFn } from './../../_shared/bi-context-provider/bi-context-provider.js';\nimport { useBiNext } from './../../_shared/bi-context-provider/bi-context-provider.js';\nimport { LINK_MODAL_ID } from './../../_shared/link-modal/constants.js';\nimport type { PmActionButtonNode, PmLinkButtonNode } from './../../_shared/pm-node-types.js';\nimport { useNodeAttrs } from './../../_shared/use-node-attrs.js';\n\nimport { GENERAL_SETTINGS_BUTTON_TEXT_INPUT } from '../data-hooks.js';\nimport classes from '../statics/styles/button-text-field-scss.js';\n\ntype ButtonTextFieldProps = {\n  buttonData: (PmLinkButtonNode | PmActionButtonNode)['attrs'];\n  onChange: (data: Partial<(PmLinkButtonNode | PmActionButtonNode)['attrs']>) => void;\n  logBi: LogBiFn;\n};\n\nexport const ButtonTextField: React.FC<ButtonTextFieldProps> = ({\n  buttonData,\n  onChange,\n  logBi,\n}) => {\n  const { t } = useContext(RicosContext);\n\n  return (\n    <Box direction=\"vertical\" width=\"100%\" className={classes.formField}>\n      <FieldSet legend={t('ButtonModal_Button_Text')}>\n        <Input\n          type=\"text\"\n          onChange={e => {\n            onChange({ ...buttonData, text: e.target.value });\n            logBi({ dataHook: GENERAL_SETTINGS_BUTTON_TEXT_INPUT, value: e.target.value });\n          }}\n          value={buttonData.text ?? undefined}\n          dataHook={GENERAL_SETTINGS_BUTTON_TEXT_INPUT}\n          placeholder={t('ButtonModal_InputName_Placeholder')}\n          size=\"small\"\n          textOverflow=\"ellipsis\"\n        />\n      </FieldSet>\n    </Box>\n  );\n};\n\n/** The link modal doesn't own the button's attrs, so this field applies its changes itself. */\nexport const LinkModalButtonTextField: React.FC<{ nodeId: string }> = ({ nodeId }) => {\n  const { pmNodeAttrs, patchPmNodeAttrs } = useNodeAttrs(nodeId, 'LINK_BUTTON');\n  const logBi = useBiNext({ modalId: LINK_MODAL_ID, pluginId: 'linkButton', nodeId });\n\n  return pmNodeAttrs ? (\n    <ButtonTextField buttonData={pmNodeAttrs} onChange={patchPmNodeAttrs} logBi={logBi} />\n  ) : null;\n};\n"],
+  "mappings": "AAAA,SAAS,KAAK,UAAU,aAAa;AACrC,OAAO,SAAS,kBAAkB;AAElC,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,SAAS,oBAAoB;AAE7B,SAAS,0CAA0C;AACnD,OAAO,aAAa;AAQb,MAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAE,IAAI,WAAW,YAAY;AAErC,SACE,oCAAC,OAAI,WAAU,YAAW,OAAM,QAAO,WAAW,QAAQ,aACxD,oCAAC,YAAS,QAAQ,EAAE,yBAAyB,KAC3C;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU,OAAK;AACb,iBAAS,EAAE,GAAG,YAAY,MAAM,EAAE,OAAO,MAAM,CAAC;AAChD,cAAM,EAAE,UAAU,oCAAoC,OAAO,EAAE,OAAO,MAAM,CAAC;AAAA,MAC/E;AAAA,MACA,OAAO,WAAW,QAAQ;AAAA,MAC1B,UAAU;AAAA,MACV,aAAa,EAAE,mCAAmC;AAAA,MAClD,MAAK;AAAA,MACL,cAAa;AAAA;AAAA,EACf,CACF,CACF;AAEJ;AAGO,MAAM,2BAAyD,CAAC,EAAE,OAAO,MAAM;AACpF,QAAM,EAAE,aAAa,iBAAiB,IAAI,aAAa,QAAQ,aAAa;AAC5E,QAAM,QAAQ,UAAU,EAAE,SAAS,eAAe,UAAU,cAAc,OAAO,CAAC;AAElF,SAAO,cACL,oCAAC,mBAAgB,YAAY,aAAa,UAAU,kBAAkB,OAAc,IAClF;AACN;",
+  "names": []
+}

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

@@ -1,10 +1,6 @@
 import { ButtonData_Type, Node_Type } from "./../ricos-schema/legacy/wix/rich_content/v1/index.js";
 import { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from "./types.js";
 const ALIGN_CENTER = "center";
-const SETTINGS_TAB = {
-  SETTINGS: "SETTINGS",
-  DESIGN: "DESIGN"
-};
 const DEFAULT_CONFIG = {
   alignment: ALIGN_CENTER,
   size: "small",
@@ -15,6 +11,10 @@ const buttonsModals = {
     [ACTION_BUTTON_TYPE]: `${Node_Type.BUTTON}.actionButtonSettings`,
     [LINK_BUTTON_TYPE]: `${Node_Type.BUTTON}.linkButtonSettings`
   },
+  // Link buttons edit their text in the link modal.
+  text: {
+    [ACTION_BUTTON_TYPE]: `${Node_Type.BUTTON}.actionButtonText`
+  },
   alignment: {
     [ACTION_BUTTON_TYPE]: `${Node_Type.BUTTON}.actionButtonAlignment`,
     [LINK_BUTTON_TYPE]: `${Node_Type.BUTTON}.linkButtonAlignment`
@@ -28,7 +28,6 @@ const BUTTONS_TYPE_TO_TIPTAP_ATTR = {
 export {
   BUTTONS_TYPE_TO_TIPTAP_ATTR,
   DEFAULT_CONFIG,
-  SETTINGS_TAB,
   buttonsModals
 };
 //# sourceMappingURL=constants.js.map

package/dist/es/plugin-button/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-button/constants.ts"],
-  "sourcesContent": ["import { ButtonData_Type, Node_Type } from './../ricos-schema/legacy/wix/rich_content/v1/index.js';\n\nimport { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from './types.js';\n\n/* oxlint-disable camelcase */\nconst ALIGN_CENTER = 'center';\n\nexport const SETTINGS_TAB = {\n  SETTINGS: 'SETTINGS',\n  DESIGN: 'DESIGN',\n} as const;\nexport type SettingsTab = (typeof SETTINGS_TAB)[keyof typeof SETTINGS_TAB];\n\nexport const DEFAULT_CONFIG = {\n  alignment: ALIGN_CENTER,\n  size: 'small',\n  width: 'fit-content',\n};\n\nexport const buttonsModals = {\n  settings: {\n    [ACTION_BUTTON_TYPE]: `${Node_Type.BUTTON}.actionButtonSettings`,\n    [LINK_BUTTON_TYPE]: `${Node_Type.BUTTON}.linkButtonSettings`,\n  },\n  alignment: {\n    [ACTION_BUTTON_TYPE]: `${Node_Type.BUTTON}.actionButtonAlignment`,\n    [LINK_BUTTON_TYPE]: `${Node_Type.BUTTON}.linkButtonAlignment`,\n  },\n  colorPicker: `${Node_Type.BUTTON}.colorPicker`,\n} as const;\n\nexport const BUTTONS_TYPE_TO_TIPTAP_ATTR = {\n  [ACTION_BUTTON_TYPE]: ButtonData_Type.ACTION,\n  [LINK_BUTTON_TYPE]: ButtonData_Type.LINK,\n};\n"],
-  "mappings": "AAAA,SAAS,iBAAiB,iBAAiB;AAE3C,SAAS,oBAAoB,wBAAwB;AAGrD,MAAM,eAAe;AAEd,MAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,QAAQ;AACV;AAGO,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU;AAAA,IACR,CAAC,kBAAkB,GAAG,GAAG,UAAU,MAAM;AAAA,IACzC,CAAC,gBAAgB,GAAG,GAAG,UAAU,MAAM;AAAA,EACzC;AAAA,EACA,WAAW;AAAA,IACT,CAAC,kBAAkB,GAAG,GAAG,UAAU,MAAM;AAAA,IACzC,CAAC,gBAAgB,GAAG,GAAG,UAAU,MAAM;AAAA,EACzC;AAAA,EACA,aAAa,GAAG,UAAU,MAAM;AAClC;AAEO,MAAM,8BAA8B;AAAA,EACzC,CAAC,kBAAkB,GAAG,gBAAgB;AAAA,EACtC,CAAC,gBAAgB,GAAG,gBAAgB;AACtC;",
+  "sourcesContent": ["import { ButtonData_Type, Node_Type } from './../ricos-schema/legacy/wix/rich_content/v1/index.js';\n\nimport { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from './types.js';\n\n/* oxlint-disable camelcase */\nconst ALIGN_CENTER = 'center';\n\nexport const DEFAULT_CONFIG = {\n  alignment: ALIGN_CENTER,\n  size: 'small',\n  width: 'fit-content',\n};\n\nexport const buttonsModals = {\n  settings: {\n    [ACTION_BUTTON_TYPE]: `${Node_Type.BUTTON}.actionButtonSettings`,\n    [LINK_BUTTON_TYPE]: `${Node_Type.BUTTON}.linkButtonSettings`,\n  },\n  // Link buttons edit their text in the link modal.\n  text: {\n    [ACTION_BUTTON_TYPE]: `${Node_Type.BUTTON}.actionButtonText`,\n  },\n  alignment: {\n    [ACTION_BUTTON_TYPE]: `${Node_Type.BUTTON}.actionButtonAlignment`,\n    [LINK_BUTTON_TYPE]: `${Node_Type.BUTTON}.linkButtonAlignment`,\n  },\n  colorPicker: `${Node_Type.BUTTON}.colorPicker`,\n} as const;\n\nexport const BUTTONS_TYPE_TO_TIPTAP_ATTR = {\n  [ACTION_BUTTON_TYPE]: ButtonData_Type.ACTION,\n  [LINK_BUTTON_TYPE]: ButtonData_Type.LINK,\n};\n"],
+  "mappings": "AAAA,SAAS,iBAAiB,iBAAiB;AAE3C,SAAS,oBAAoB,wBAAwB;AAGrD,MAAM,eAAe;AAEd,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU;AAAA,IACR,CAAC,kBAAkB,GAAG,GAAG,UAAU,MAAM;AAAA,IACzC,CAAC,gBAAgB,GAAG,GAAG,UAAU,MAAM;AAAA,EACzC;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,CAAC,kBAAkB,GAAG,GAAG,UAAU,MAAM;AAAA,EAC3C;AAAA,EACA,WAAW;AAAA,IACT,CAAC,kBAAkB,GAAG,GAAG,UAAU,MAAM;AAAA,IACzC,CAAC,gBAAgB,GAAG,GAAG,UAAU,MAAM;AAAA,EACzC;AAAA,EACA,aAAa,GAAG,UAAU,MAAM;AAClC;AAEO,MAAM,8BAA8B;AAAA,EACzC,CAAC,kBAAkB,GAAG,gBAAgB;AAAA,EACtC,CAAC,gBAAgB,GAAG,gBAAgB;AACtC;",
   "names": []
 }

package/dist/es/plugin-button/data-hooks.js

@@ -1,9 +1,9 @@
 const INSERT_BUTTON_BUTTON = "insert-button-button";
 const ROOT = "button-viewer";
+const INLINE_TEXT_INPUT = "button-inline-text-input";
 const SETTINGS_MODAL = "button-settings-modal";
-const SETTINGS_TABS = "settings-tabs";
-const SETTINGS_GENERAL_TAB = "settings-general-tab";
-const SETTINGS_DESIGN_TAB = "settings-design-tab";
+const TEXT_MODAL = "button-text-modal";
+const PLUGIN_TOOLBAR_TEXT_BUTTON = "plugin-toolbar-text-button";
 const DESIGN_SETTINGS_BORDER_WIDTH_INPUT = "design-settings-border-width-input";
 const DESIGN_SETTINGS_CORNER_RADIUS_INPUT = "design-settings-corner-radius-input";
 const DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT = "design-settings-background-color-input";
@@ -17,11 +17,11 @@ export {
   DESIGN_SETTINGS_CORNER_RADIUS_INPUT,
   DESIGN_SETTINGS_TEXT_COLOR_INPUT,
   GENERAL_SETTINGS_BUTTON_TEXT_INPUT,
+  INLINE_TEXT_INPUT,
   INSERT_BUTTON_BUTTON,
+  PLUGIN_TOOLBAR_TEXT_BUTTON,
   ROOT,
-  SETTINGS_DESIGN_TAB,
-  SETTINGS_GENERAL_TAB,
   SETTINGS_MODAL,
-  SETTINGS_TABS
+  TEXT_MODAL
 };
 //# sourceMappingURL=data-hooks.js.map

package/dist/es/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": "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": "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/es/plugin-button/get-toolbar-buttons.js

@@ -1,3 +1,4 @@
+import { TextSmall } from "@wix/wix-ui-icons-common/lazy";
 import { PAYWALL_EXTENSION_NAME } from "./../_shared/paywall/paywall-extension-name.js";
 import { isPaywallSelection } from "./../_shared/paywall/paywall-selection.js";
 import { createAnimationButton } from "./../_shared/plugin-toolbar/create-animation-button.js";
@@ -5,11 +6,15 @@ import { createDeleteButton } from "./../_shared/plugin-toolbar/create-delete-bu
 import { createLinkButton } from "./../_shared/plugin-toolbar/create-link-button.js";
 import { createNodeAlignmentButton } from "./../_shared/plugin-toolbar/create-node-alignment-button.js";
 import { createSettingsButton } from "./../_shared/plugin-toolbar/create-settings-button.js";
+import { PLUGIN_TOOLBAR_BUTTON_ID } from "./../_shared/plugin-toolbar/plugin-toolbar-buttons-ids.js";
 import { createSeparator } from "./../_shared/plugin-toolbar/separator/create-separator.js";
+import { LinkModalButtonTextField } from "./components/button-text-field.js";
 import { buttonsModals } from "./constants.js";
+import { PLUGIN_TOOLBAR_TEXT_BUTTON } from "./data-hooks.js";
 import { isLastPaywallButton } from "./is-last-paywall-button.js";
+import { ActionButtonTextModal } from "./modals/action-button-text-modal.js";
 import { ButtonSettingsModal } from "./modals/settings-modal.js";
-import { LINK_BUTTON_TYPE } from "./types.js";
+import { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from "./types.js";
 const hasPaywallPlugin = (editor) => editor.extensionManager.extensions.some((extension) => extension.name === PAYWALL_EXTENSION_NAME);
 const getToolbarButtons = ({
   config,
@@ -19,40 +24,55 @@ const getToolbarButtons = ({
   const alignmentModalId = buttonsModals.alignment[type];
   const settingsModalId = buttonsModals.settings[type];
   const alignmentButton = createNodeAlignmentButton({ services, modalId: alignmentModalId });
-  const linkButton = createLinkButton(services);
+  const linkButton = createLinkButton(
+    services,
+    type === LINK_BUTTON_TYPE ? { ExtraField: 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 === LINK_BUTTON_TYPE || !editor?.state || !hasPaywallPlugin(editor) || !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 = createSettingsButton({
     modalId: settingsModalId,
-    command: ({ modals, referenceElement, attributes }) => {
-      modals.togglePluginPanel({
-        id: settingsModalId,
-        isMobile: services.context.isMobile,
-        Component: 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, ButtonSettingsModal)
   });
+  const textModalId = buttonsModals.text[ACTION_BUTTON_TYPE];
+  const textButtons = type === ACTION_BUTTON_TYPE ? [
+    createSettingsButton({
+      modalId: textModalId,
+      command: togglePanel(textModalId, ActionButtonTextModal),
+      buttonId: PLUGIN_TOOLBAR_BUTTON_ID.TEXT,
+      dataHook: PLUGIN_TOOLBAR_TEXT_BUTTON,
+      icon: TextSmall,
+      tooltip: "ButtonPlugin_EditText_Tooltip"
+    })
+  ] : [];
   const separator = createSeparator();
   const animation = createAnimationButton(services);
   const deleteButton = createDeleteButton({
@@ -62,7 +82,15 @@ const getToolbarButtons = ({
       visible: (_content, _resolverServices, editor) => !editor || !hasPaywallPlugin(editor) || !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
+  ];
 };
 export {
   getToolbarButtons

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 = "3271c90e";
 const injectCss = (() => {
-  var css = `.k8FQ8{max-height:580px;overflow:auto}.VwTTR{min-height:570px}`;
+  var css = `.ZRLsd{max-height:580px;overflow:auto}.Xlx4P{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": "ZRLsd",
+  "modal": "Xlx4P"
 };
 export {
   button_input_modal_default as default,