@wix/ricos 11.20.5 → 11.21.0

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

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

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

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

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

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

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

@@ -1,7 +1,9 @@
 var default_styles_default = {
-  "button_container": "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"
 };
 export {
   default_styles_default as default

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-button/statics/styles/default-styles.scss"],
-  "sourcesContent": ["export default {\n  \"button_container\": \"EgC0x\",\n  \"button_text\": \"_8aUap\",\n  \"button_size_content\": \"qTD40\"\n};"],
-  "mappings": "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,IAAO,yBAAQ;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,uBAAuB;AACzB;",
   "names": []
 }

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-button/testkit/button.testkit.ts"],
-  "sourcesContent": ["import type { RicosPluginToolbarNames } from './../../ricos-types/index.js';\nimport type { GetOptions, Testkit, UniDriver } from './../../ricos-types/testkit.js';\nimport {\n  ALIGNMENT_DROPDOWN_OPTION_LEFT,\n  PLUGIN_TOOLBAR_ALIGNMENT_BUTTON,\n  PLUGIN_TOOLBAR_DELETE_BUTTON,\n  PLUGIN_TOOLBAR_LINK_BUTTON,\n  PLUGIN_TOOLBAR_SETTINGS_BUTTON,\n} from './../../_shared/data-hooks.js';\nimport { dataHook } from './../../wix-rich-content-common/index.js';\n\nimport { INSERT_BUTTON_BUTTON, ROOT } from '../data-hooks.js';\nimport { toolbarsToAddIn } from '../get-add-buttons.js';\nimport type { ButtonSettingsUniDriver } from './button-settings.uni.driver.js';\nimport { createButtonSettingsUniDriver } from './button-settings.uni.driver.js';\n\ntype ButtonTestkit = (\n  buttonType:\n    | typeof RicosPluginToolbarNames.LINK_BUTTON\n    | typeof RicosPluginToolbarNames.ACTION_BUTTON,\n  tag: 'button' | 'a'\n) => Testkit<\n  {\n    content: {\n      atIndex: (index: number) => {\n        exists: (options?: GetOptions) => Promise<boolean>;\n        click: () => Promise<void>;\n        getText: () => Promise<string>;\n        getLink: () => Promise<string | null>;\n        getStyles: () => Promise<string | null>;\n        getNativeElement: () => Promise<Element>;\n      };\n    };\n    toolbars: {\n      createAddButtonToolbars: (getAddButtonToolbarBase: () => UniDriver<Element>) => {\n        click: () => Promise<void>;\n        toolbarsToAddIn: typeof toolbarsToAddIn;\n      };\n      createPluginToolbar: (\n        getPluginToolbarBase: (pluginType: typeof buttonType) => UniDriver<Element>\n      ) => {\n        openSettingsModal: () => Promise<void>;\n        openLinkModal: () => Promise<void>;\n        clickDelete: () => Promise<void>;\n        clickAlignmentDropdown: () => Promise<void>;\n        alignment: {\n          clickLeft: () => Promise<void>;\n          toggleTextWrap: () => Promise<void>;\n          isToggleTextWrapDisabled: () => Promise<boolean>;\n        };\n        exists: () => Promise<boolean>;\n      };\n    };\n  } & ButtonSettingsUniDriver\n>;\n\nexport const createButtonTestkit: ButtonTestkit = (buttonType, tag) => getBase => {\n  const getButton = async (index: number, options?: GetOptions) => {\n    const button = await getBase().getAll(`${tag}${dataHook(ROOT)}`, options);\n    return button.at(index);\n  };\n\n  return {\n    content: {\n      atIndex: index => {\n        return {\n          exists: async options => {\n            try {\n              const button = await getButton(index, options);\n              return button.exists();\n            } catch {\n              return false;\n            }\n          },\n          click: async () => (await getButton(index)).click(),\n          getText: async () => (await getButton(index)).text(),\n          getLink: async () => (await getButton(index)).attr('href'),\n          getStyles: async () => {\n            const btn = await getButton(index);\n            return await btn.attr('style');\n          },\n          getNativeElement: async () => {\n            const file = await getButton(index);\n            return file.getNative();\n          },\n        };\n      },\n    },\n    toolbars: {\n      createAddButtonToolbars: getAddButtonToolbarBase => ({\n        click: async () => {\n          const buttonPluginButton = await getAddButtonToolbarBase().get(\n            dataHook(INSERT_BUTTON_BUTTON)\n          );\n          await buttonPluginButton.click();\n        },\n        toolbarsToAddIn,\n      }),\n      createPluginToolbar: getPluginToolbarBase => ({\n        openSettingsModal: async () => {\n          const settings = await getPluginToolbarBase(buttonType).get(\n            dataHook(PLUGIN_TOOLBAR_SETTINGS_BUTTON)\n          );\n          await settings.click();\n        },\n        openLinkModal: async () => {\n          const link = await getPluginToolbarBase(buttonType).get(\n            dataHook(PLUGIN_TOOLBAR_LINK_BUTTON)\n          );\n          await link.click();\n        },\n        clickDelete: async () => {\n          await (\n            await getPluginToolbarBase(buttonType).get(dataHook(PLUGIN_TOOLBAR_DELETE_BUTTON))\n          ).click();\n        },\n        clickAlignmentDropdown: async () => {\n          await (\n            await getPluginToolbarBase(buttonType).get(dataHook(PLUGIN_TOOLBAR_ALIGNMENT_BUTTON))\n          ).click();\n        },\n        alignment: {\n          clickLeft: async () => {\n            await (\n              await getBase().get(dataHook(ALIGNMENT_DROPDOWN_OPTION_LEFT), {\n                timeout: 5000,\n              })\n            ).click();\n          },\n          toggleTextWrap: async () => {\n            await (\n              await getBase().get(dataHook('toggle-switch-input'), {\n                timeout: 5000,\n              })\n            ).click();\n          },\n          isToggleTextWrapDisabled: async () => {\n            return (\n              (await (\n                await getBase().get(dataHook('toggle-switch-input'), {\n                  timeout: 5000,\n                })\n              ).attr('readonly')) !== null\n            );\n          },\n        },\n        exists: async () => {\n          try {\n            return getPluginToolbarBase(buttonType).exists();\n          } catch {\n            return false;\n          }\n        },\n      }),\n    },\n    ...createButtonSettingsUniDriver(getBase),\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { RicosPluginToolbarNames } from './../../ricos-types/index.js';\nimport type { GetOptions, Testkit, UniDriver } from './../../ricos-types/testkit.js';\nimport {\n  ALIGNMENT_DROPDOWN_OPTION_LEFT,\n  PLUGIN_TOOLBAR_ALIGNMENT_BUTTON,\n  PLUGIN_TOOLBAR_DELETE_BUTTON,\n  PLUGIN_TOOLBAR_LINK_BUTTON,\n  PLUGIN_TOOLBAR_SETTINGS_BUTTON,\n} from './../../_shared/data-hooks.js';\nimport { dataHook } from './../../wix-rich-content-common/index.js';\n\nimport {\n  INLINE_TEXT_INPUT,\n  INSERT_BUTTON_BUTTON,\n  PLUGIN_TOOLBAR_TEXT_BUTTON,\n  ROOT,\n} from '../data-hooks.js';\nimport { toolbarsToAddIn } from '../get-add-buttons.js';\nimport type { ButtonSettingsUniDriver } from './button-settings.uni.driver.js';\nimport { createButtonSettingsUniDriver } from './button-settings.uni.driver.js';\n\ntype ButtonTestkit = (\n  buttonType:\n    | typeof RicosPluginToolbarNames.LINK_BUTTON\n    | typeof RicosPluginToolbarNames.ACTION_BUTTON,\n  tag: 'button' | 'a'\n) => Testkit<\n  {\n    content: {\n      atIndex: (index: number) => {\n        exists: (options?: GetOptions) => Promise<boolean>;\n        click: () => Promise<void>;\n        getText: () => Promise<string>;\n        /** Editor only. */\n        getTextInputElement: () => Promise<HTMLInputElement>;\n        getLink: () => Promise<string | null>;\n        getStyles: () => Promise<string | null>;\n        getNativeElement: () => Promise<Element>;\n      };\n    };\n    toolbars: {\n      createAddButtonToolbars: (getAddButtonToolbarBase: () => UniDriver<Element>) => {\n        click: () => Promise<void>;\n        toolbarsToAddIn: typeof toolbarsToAddIn;\n      };\n      createPluginToolbar: (\n        getPluginToolbarBase: (pluginType: typeof buttonType) => UniDriver<Element>\n      ) => {\n        openSettingsModal: () => Promise<void>;\n        /** Action buttons only. */\n        openTextModal: () => Promise<void>;\n        openLinkModal: () => Promise<void>;\n        clickDelete: () => Promise<void>;\n        clickAlignmentDropdown: () => Promise<void>;\n        alignment: {\n          clickLeft: () => Promise<void>;\n          toggleTextWrap: () => Promise<void>;\n          isToggleTextWrapDisabled: () => Promise<boolean>;\n        };\n        exists: () => Promise<boolean>;\n      };\n    };\n  } & ButtonSettingsUniDriver\n>;\n\nexport const createButtonTestkit: ButtonTestkit = (buttonType, tag) => getBase => {\n  const getButton = async (index: number, options?: GetOptions) => {\n    const button = await getBase().getAll(`${tag}${dataHook(ROOT)}`, options);\n    return button.at(index);\n  };\n\n  return {\n    content: {\n      atIndex: index => {\n        return {\n          exists: async options => {\n            try {\n              const button = await getButton(index, options);\n              return button.exists();\n            } catch {\n              return false;\n            }\n          },\n          click: async () => (await getButton(index)).click(),\n          getText: async () => {\n            const button = await getButton(index);\n            // The editor renders the text in an inline input.\n            const input = button.$(dataHook(INLINE_TEXT_INPUT));\n            return (await input.exists()) ? input.value() : button.text();\n          },\n          getTextInputElement: async () => {\n            const input = await (await getButton(index)).get(dataHook(INLINE_TEXT_INPUT));\n            return (await input.getNative()) as HTMLInputElement;\n          },\n          getLink: async () => (await getButton(index)).attr('href'),\n          getStyles: async () => {\n            const btn = await getButton(index);\n            return await btn.attr('style');\n          },\n          getNativeElement: async () => {\n            const file = await getButton(index);\n            return file.getNative();\n          },\n        };\n      },\n    },\n    toolbars: {\n      createAddButtonToolbars: getAddButtonToolbarBase => ({\n        click: async () => {\n          const buttonPluginButton = await getAddButtonToolbarBase().get(\n            dataHook(INSERT_BUTTON_BUTTON)\n          );\n          await buttonPluginButton.click();\n        },\n        toolbarsToAddIn,\n      }),\n      createPluginToolbar: getPluginToolbarBase => ({\n        openSettingsModal: async () => {\n          const settings = await getPluginToolbarBase(buttonType).get(\n            dataHook(PLUGIN_TOOLBAR_SETTINGS_BUTTON)\n          );\n          await settings.click();\n        },\n        openTextModal: async () => {\n          const text = await getPluginToolbarBase(buttonType).get(\n            dataHook(PLUGIN_TOOLBAR_TEXT_BUTTON)\n          );\n          await text.click();\n        },\n        openLinkModal: async () => {\n          const link = await getPluginToolbarBase(buttonType).get(\n            dataHook(PLUGIN_TOOLBAR_LINK_BUTTON)\n          );\n          await link.click();\n        },\n        clickDelete: async () => {\n          await (\n            await getPluginToolbarBase(buttonType).get(dataHook(PLUGIN_TOOLBAR_DELETE_BUTTON))\n          ).click();\n        },\n        clickAlignmentDropdown: async () => {\n          await (\n            await getPluginToolbarBase(buttonType).get(dataHook(PLUGIN_TOOLBAR_ALIGNMENT_BUTTON))\n          ).click();\n        },\n        alignment: {\n          clickLeft: async () => {\n            await (\n              await getBase().get(dataHook(ALIGNMENT_DROPDOWN_OPTION_LEFT), {\n                timeout: 5000,\n              })\n            ).click();\n          },\n          toggleTextWrap: async () => {\n            await (\n              await getBase().get(dataHook('toggle-switch-input'), {\n                timeout: 5000,\n              })\n            ).click();\n          },\n          isToggleTextWrapDisabled: async () => {\n            return (\n              (await (\n                await getBase().get(dataHook('toggle-switch-input'), {\n                  timeout: 5000,\n                })\n              ).attr('readonly')) !== null\n            );\n          },\n        },\n        exists: async () => {\n          try {\n            return getPluginToolbarBase(buttonType).exists();\n          } catch {\n            return false;\n          }\n        },\n      }),\n    },\n    ...createButtonSettingsUniDriver(getBase),\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-button/tiptap/component.js

@@ -12,6 +12,9 @@ import {
   getPluginPlacementClassNames
 } from "./../../_shared/node-styles.js";
 import { OverlayHoc } from "./../../_shared/overlay-hoc/overlay-hoc.js";
+import { Selection } from "./../../tiptap/pm/state.js";
+import { INLINE_TEXT_INPUT } from "../data-hooks.js";
+import styles from "../statics/styles/default-styles-scss.js";
 import { ButtonViewer } from "../viewer/button-viewer.js";
 const createStylesHOC = (extraClassName) => (Component) => {
   return (props) => {
@@ -50,6 +53,50 @@ const SelectionHOC = (Component) => {
     return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(Component, { ...props }));
   };
 };
+const ButtonTextInput = ({
+  componentData,
+  editor,
+  node,
+  getPos,
+  updateAttributes
+}) => {
+  const { t, tabIndex } = useContext(RicosContext);
+  const text = componentData.text ?? "";
+  const label = t("ButtonPlugin_InlineText_Placeholder");
+  const onKeyDown = (event) => {
+    const { view } = editor;
+    const dir = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+    if (dir) {
+      const { state } = view;
+      const $edge = state.doc.resolve(dir > 0 ? getPos() + node.nodeSize : getPos());
+      const next = Selection.findFrom($edge, dir);
+      if (!next) {
+        return;
+      }
+      view.dispatch(state.tr.setSelection(next));
+    } else if (!["Escape", "Enter"].includes(event.key)) {
+      return;
+    }
+    event.preventDefault();
+    view.focus();
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: classNames(styles.button_text, styles.button_text_editor) }, text || label, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      "data-hook": INLINE_TEXT_INPUT,
+      className: styles.button_text_input,
+      value: text,
+      onChange: (e) => updateAttributes({ text: e.target.value }),
+      onKeyDown,
+      onClick: (e) => e.preventDefault(),
+      placeholder: label,
+      "aria-label": label,
+      tabIndex,
+      readOnly: !editor.isEditable,
+      dir: "auto"
+    }
+  ));
+};
 const Button = (
   // We lift button margin to the plugin container so that resizer and selection are not affected
   createStylesHOC()(
@@ -58,14 +105,15 @@ const Button = (
       // boundaries (previously erased by flowRight).
       DraggableHOC(
         SelectionHOC(
-          OverlayHoc(({ componentData, settings, node }) => {
+          OverlayHoc((props) => {
             return /* @__PURE__ */ React.createElement(
               ButtonViewer,
               {
-                nodeId: node.attrs.id,
-                buttonData: componentData,
-                settings
-              }
+                nodeId: props.node.attrs.id,
+                buttonData: props.componentData,
+                settings: props.settings
+              },
+              /* @__PURE__ */ React.createElement(ButtonTextInput, { ...props })
             );
           })
         )

package/dist/es/plugin-button/tiptap/component.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-button/tiptap/component.tsx"],
-  "sourcesContent": ["import classNames from 'classnames';\nimport React, { useContext } from 'react';\n\nimport { ResizerHOC } from './../../ricos-common-plugins/resizable/react-resizer.js';\nimport { RicosContext } from './../../ricos-context/ricos-context.js';\nimport type { ButtonData } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { PluginProps } from './../../ricos-types/index.js';\nimport { DraggableHOC } from './../../_shared/draggable-hoc.js';\nimport { isNodeSelected } from './../../_shared/is-node-selected.js';\nimport {\n  getNodeWidth,\n  getPluginAlignmentAttribute,\n  getPluginContainerClassNames,\n  getPluginFocusClassNames,\n  getPluginPlacementClassNames,\n} from './../../_shared/node-styles.js';\nimport { OverlayHoc } from './../../_shared/overlay-hoc/overlay-hoc.js';\n\nimport { ButtonViewer } from '../viewer/button-viewer.js';\n\nconst createStylesHOC = (extraClassName?: string) => (Component: React.FC<PluginProps>) => {\n  return (props: PluginProps) => {\n    const { isMobile } = useContext(RicosContext);\n    const isTextWrapEnabled = props.extension.config.isTextWrap ?? true;\n\n    const className = classNames(\n      getPluginContainerClassNames(isMobile),\n      getPluginPlacementClassNames(props.node, isTextWrapEnabled),\n      extraClassName\n    );\n\n    const width = getNodeWidth(props.node, isMobile);\n\n    const style: React.CSSProperties = {\n      width: width ? `min(100%, ${width}px)` : undefined,\n    };\n\n    return (\n      <div\n        className={className}\n        style={style}\n        data-plugin-alignment={getPluginAlignmentAttribute(props.node.attrs?.containerData)}\n      >\n        <Component {...props} />\n      </div>\n    );\n  };\n};\n\nconst ButtonResizerHOC = (Component: React.FC<PluginProps>) => {\n  const ResizableComponent = ResizerHOC(Component);\n\n  return (props: PluginProps) => {\n    return props.extension.config.disableResize ? (\n      <Component {...props} />\n    ) : (\n      <ResizableComponent {...props} />\n    );\n  };\n};\n\nconst SelectionHOC = (Component: React.FC<PluginProps>) => {\n  return (props: PluginProps) => {\n    const isFocused = isNodeSelected(props.editor.state, props.node.attrs.id);\n    const className = getPluginFocusClassNames(isFocused);\n\n    return (\n      <div className={className}>\n        <Component {...props} />\n      </div>\n    );\n  };\n};\n\nexport const Button: React.FC<PluginProps> =\n  // We lift button margin to the plugin container so that resizer and selection are not affected\n  createStylesHOC()(\n    ButtonResizerHOC(\n      // Each HOC adds its own props, so the chain composes through loosely-typed\n      // boundaries (previously erased by flowRight).\n      DraggableHOC(\n        SelectionHOC(\n          OverlayHoc(({ componentData, settings, node }: PluginProps) => {\n            return (\n              <ButtonViewer\n                nodeId={node.attrs.id}\n                buttonData={componentData as ButtonData}\n                settings={settings}\n              />\n            );\n          }) as unknown as React.FC<PluginProps>\n        ) as unknown as React.FC<PluginProps>\n      ) as unknown as React.FC<PluginProps>\n    ) as unknown as React.FC<PluginProps>\n  );\n"],
-  "mappings": "AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS,kBAAkB;AAElC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAG7B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAE7B,MAAM,kBAAkB,CAAC,mBAA4B,CAAC,cAAqC;AACzF,SAAO,CAAC,UAAuB;AAC7B,UAAM,EAAE,SAAS,IAAI,WAAW,YAAY;AAC5C,UAAM,oBAAoB,MAAM,UAAU,OAAO,cAAc;AAE/D,UAAM,YAAY;AAAA,MAChB,6BAA6B,QAAQ;AAAA,MACrC,6BAA6B,MAAM,MAAM,iBAAiB;AAAA,MAC1D;AAAA,IACF;AAEA,UAAM,QAAQ,aAAa,MAAM,MAAM,QAAQ;AAE/C,UAAM,QAA6B;AAAA,MACjC,OAAO,QAAQ,aAAa,KAAK,QAAQ;AAAA,IAC3C;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,yBAAuB,4BAA4B,MAAM,KAAK,OAAO,aAAa;AAAA;AAAA,MAElF,oCAAC,aAAW,GAAG,OAAO;AAAA,IACxB;AAAA,EAEJ;AACF;AAEA,MAAM,mBAAmB,CAAC,cAAqC;AAC7D,QAAM,qBAAqB,WAAW,SAAS;AAE/C,SAAO,CAAC,UAAuB;AAC7B,WAAO,MAAM,UAAU,OAAO,gBAC5B,oCAAC,aAAW,GAAG,OAAO,IAEtB,oCAAC,sBAAoB,GAAG,OAAO;AAAA,EAEnC;AACF;AAEA,MAAM,eAAe,CAAC,cAAqC;AACzD,SAAO,CAAC,UAAuB;AAC7B,UAAM,YAAY,eAAe,MAAM,OAAO,OAAO,MAAM,KAAK,MAAM,EAAE;AACxE,UAAM,YAAY,yBAAyB,SAAS;AAEpD,WACE,oCAAC,SAAI,aACH,oCAAC,aAAW,GAAG,OAAO,CACxB;AAAA,EAEJ;AACF;AAEO,MAAM;AAAA;AAAA,EAEX,gBAAgB;AAAA,IACd;AAAA;AAAA;AAAA,MAGE;AAAA,QACE;AAAA,UACE,WAAW,CAAC,EAAE,eAAe,UAAU,KAAK,MAAmB;AAC7D,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ,KAAK,MAAM;AAAA,gBACnB,YAAY;AAAA,gBACZ;AAAA;AAAA,YACF;AAAA,UAEJ,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;",
+  "sourcesContent": ["import classNames from 'classnames';\nimport React, { useContext } from 'react';\n\nimport { ResizerHOC } from './../../ricos-common-plugins/resizable/react-resizer.js';\nimport { RicosContext } from './../../ricos-context/ricos-context.js';\nimport type { ButtonData } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { PluginProps } from './../../ricos-types/index.js';\nimport { DraggableHOC } from './../../_shared/draggable-hoc.js';\nimport { isNodeSelected } from './../../_shared/is-node-selected.js';\nimport {\n  getNodeWidth,\n  getPluginAlignmentAttribute,\n  getPluginContainerClassNames,\n  getPluginFocusClassNames,\n  getPluginPlacementClassNames,\n} from './../../_shared/node-styles.js';\nimport { OverlayHoc } from './../../_shared/overlay-hoc/overlay-hoc.js';\nimport { Selection } from './../../tiptap/pm/state.js';\n\nimport { INLINE_TEXT_INPUT } from '../data-hooks.js';\nimport styles from '../statics/styles/default-styles-scss.js';\nimport { ButtonViewer } from '../viewer/button-viewer.js';\n\nconst createStylesHOC = (extraClassName?: string) => (Component: React.FC<PluginProps>) => {\n  return (props: PluginProps) => {\n    const { isMobile } = useContext(RicosContext);\n    const isTextWrapEnabled = props.extension.config.isTextWrap ?? true;\n\n    const className = classNames(\n      getPluginContainerClassNames(isMobile),\n      getPluginPlacementClassNames(props.node, isTextWrapEnabled),\n      extraClassName\n    );\n\n    const width = getNodeWidth(props.node, isMobile);\n\n    const style: React.CSSProperties = {\n      width: width ? `min(100%, ${width}px)` : undefined,\n    };\n\n    return (\n      <div\n        className={className}\n        style={style}\n        data-plugin-alignment={getPluginAlignmentAttribute(props.node.attrs?.containerData)}\n      >\n        <Component {...props} />\n      </div>\n    );\n  };\n};\n\nconst ButtonResizerHOC = (Component: React.FC<PluginProps>) => {\n  const ResizableComponent = ResizerHOC(Component);\n\n  return (props: PluginProps) => {\n    return props.extension.config.disableResize ? (\n      <Component {...props} />\n    ) : (\n      <ResizableComponent {...props} />\n    );\n  };\n};\n\nconst SelectionHOC = (Component: React.FC<PluginProps>) => {\n  return (props: PluginProps) => {\n    const isFocused = isNodeSelected(props.editor.state, props.node.attrs.id);\n    const className = getPluginFocusClassNames(isFocused);\n\n    return (\n      <div className={className}>\n        <Component {...props} />\n      </div>\n    );\n  };\n};\n\n/**\n * Clicks reach it through `OverlayHoc` (which also node-selects the button); ArrowUp/ArrowDown on\n * a selected button focus it (see `tiptap.ts`). Escape/Enter return to the selected button,\n * ArrowUp/ArrowDown leave above/below it.\n */\nconst ButtonTextInput = ({\n  componentData,\n  editor,\n  node,\n  getPos,\n  updateAttributes,\n}: PluginProps) => {\n  const { t, tabIndex } = useContext(RicosContext);\n  const text = (componentData as ButtonData).text ?? '';\n  // Also the input's accessible name: the placeholder disappears once there's text.\n  const label = t('ButtonPlugin_InlineText_Placeholder');\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    const { view } = editor;\n    const dir = event.key === 'ArrowUp' ? -1 : event.key === 'ArrowDown' ? 1 : 0;\n\n    if (dir) {\n      const { state } = view;\n      const $edge = state.doc.resolve(dir > 0 ? getPos() + node.nodeSize : getPos());\n      const next = Selection.findFrom($edge, dir);\n      // Nothing there (e.g. a first-node button): the caret moves within the input instead.\n      if (!next) {\n        return;\n      }\n      view.dispatch(state.tr.setSelection(next));\n    } else if (!['Escape', 'Enter'].includes(event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n    view.focus();\n  };\n\n  // An input's width ignores its value, so the (hidden) text sizes the button like the viewer\n  // does and the input is laid over it.\n  return (\n    <div className={classNames(styles.button_text, styles.button_text_editor)}>\n      {text || label}\n      <input\n        data-hook={INLINE_TEXT_INPUT}\n        className={styles.button_text_input}\n        value={text}\n        onChange={e => updateAttributes({ text: e.target.value })}\n        onKeyDown={onKeyDown}\n        // A link button is an `<a href>` — clicking its text would navigate.\n        onClick={e => e.preventDefault()}\n        placeholder={label}\n        aria-label={label}\n        tabIndex={tabIndex}\n        readOnly={!editor.isEditable}\n        dir=\"auto\"\n      />\n    </div>\n  );\n};\n\nexport const Button: React.FC<PluginProps> =\n  // We lift button margin to the plugin container so that resizer and selection are not affected\n  createStylesHOC()(\n    ButtonResizerHOC(\n      // Each HOC adds its own props, so the chain composes through loosely-typed\n      // boundaries (previously erased by flowRight).\n      DraggableHOC(\n        SelectionHOC(\n          OverlayHoc((props: PluginProps) => {\n            return (\n              <ButtonViewer\n                nodeId={props.node.attrs.id}\n                buttonData={props.componentData as ButtonData}\n                settings={props.settings}\n              >\n                <ButtonTextInput {...props} />\n              </ButtonViewer>\n            );\n          }) as unknown as React.FC<PluginProps>\n        ) as unknown as React.FC<PluginProps>\n      ) as unknown as React.FC<PluginProps>\n    ) as unknown as React.FC<PluginProps>\n  );\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,12 +1,12 @@
 import { TIPTAP_ACTION_BUTTON_TYPE, TIPTAP_LINK_BUTTON_TYPE } from "./../../ricos-content/index.js";
-import { Plugin, PluginKey } from "./../../tiptap/pm/state.js";
+import { NodeSelection, Plugin, PluginKey } from "./../../tiptap/pm/state.js";
 import { Decoration, DecorationSet } from "./../../tiptap/pm/view.js";
 import { createRicosNodeExtension } from "./../../plugin-commons/index.js";
 import { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from "../types.js";
 import { Button as Component } from "./component.js";
 const getButtonExtension = (name, disableResize) => [
   createRicosNodeExtension({
-    groups: ["custom-styles", "not-overtypable"],
+    groups: ["custom-styles", "not-overtypable", "shortcuts-enabled"],
     type: "react-node",
     reconfigure: (config, _extensions, props, settings) => {
       return {
@@ -22,6 +22,8 @@ const getButtonExtension = (name, disableResize) => [
       const HOVER_PREVIEW_PLUGIN_KEY = new PluginKey(this.name + "hoverPreview");
       return {
         name: this.name,
+        // Above ricos-keymap and gap-spacer (100) so the arrows reach the button first.
+        priority: 105,
         group: "block smartBlockCellContent layoutCellContent collapsibleListItemBodyContent tableCellContent",
         selectable: true,
         draggable: true,
@@ -32,6 +34,22 @@ const getButtonExtension = (name, disableResize) => [
           text: null,
           link: null
         }),
+        addKeyboardShortcuts() {
+          const focusText = () => {
+            const { selection } = this.editor.state;
+            if (!(selection instanceof NodeSelection) || selection.node.type.name !== this.name) {
+              return false;
+            }
+            const input = this.editor.view.nodeDOM(selection.from)?.querySelector("input");
+            if (!input) {
+              return false;
+            }
+            input.focus();
+            input.setSelectionRange(input.value.length, input.value.length);
+            return true;
+          };
+          return { ArrowDown: focusText, ArrowUp: focusText };
+        },
         addCommands() {
           return {
             setHoverPreview: (applyPreview) => ({ tr, dispatch }) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-button/tiptap/tiptap.ts"],
-  "sourcesContent": ["import { TIPTAP_ACTION_BUTTON_TYPE, TIPTAP_LINK_BUTTON_TYPE } from './../../ricos-content/index.js';\nimport type { CommandProps } from './../../tiptap/core/index.js';\nimport { Plugin, PluginKey } from './../../tiptap/pm/state.js';\nimport { Decoration, DecorationSet } from './../../tiptap/pm/view.js';\nimport { createRicosNodeExtension } from './../../plugin-commons/index.js';\n\nimport { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from '../types.js';\nimport { Button as Component } from './component.js';\n\ndeclare module './../../tiptap/core' {\n  interface Commands<ReturnType> {\n    button: {\n      /**\n       * Sets value of temporary hover preview in Button settings.\n       */\n      setHoverPreview: (applyPreview: boolean) => ReturnType;\n    };\n  }\n}\n\nconst getButtonExtension = (name: string, disableResize: boolean) => [\n  createRicosNodeExtension({\n    groups: ['custom-styles', 'not-overtypable'],\n    type: 'react-node',\n    reconfigure: (config, _extensions, props, settings) => {\n      return {\n        ...config,\n        disableResize,\n        isTextWrap: props.isTextWrap ?? true,\n        addOptions: () => settings,\n      };\n    },\n    Component,\n    name,\n    createExtensionConfig() {\n      const HOVER_PREVIEW_PLUGIN_KEY = new PluginKey(this.name + 'hoverPreview');\n\n      return {\n        name: this.name,\n        group:\n          'block smartBlockCellContent layoutCellContent collapsibleListItemBodyContent tableCellContent',\n        selectable: true,\n        draggable: true,\n        addAttributes: () => ({\n          type: null,\n          containerData: null,\n          styles: null,\n          text: null,\n          link: null,\n        }),\n        addCommands() {\n          return {\n            setHoverPreview:\n              applyPreview =>\n              ({ tr, dispatch }: CommandProps) => {\n                dispatch?.(tr.setMeta(HOVER_PREVIEW_PLUGIN_KEY, applyPreview));\n\n                return true;\n              },\n          };\n        },\n        addProseMirrorPlugins() {\n          return [\n            new Plugin({\n              key: HOVER_PREVIEW_PLUGIN_KEY,\n\n              state: {\n                init() {\n                  return { applyPreview: false };\n                },\n                apply(tr, value) {\n                  const applyPreview = tr.getMeta(HOVER_PREVIEW_PLUGIN_KEY);\n\n                  if (applyPreview === undefined) {\n                    return value;\n                  }\n\n                  return { applyPreview };\n                },\n              },\n\n              props: {\n                decorations(state) {\n                  const { applyPreview } = HOVER_PREVIEW_PLUGIN_KEY.getState(state);\n                  const { from, to } = state.selection;\n\n                  if (!applyPreview) {\n                    return null;\n                  }\n\n                  return DecorationSet.create(state.doc, [\n                    Decoration.node(from, to, {\n                      class: 'forced-hover',\n                    }),\n                  ]);\n                },\n              },\n            }),\n          ];\n        },\n      };\n    },\n  }),\n];\n\nexport const tiptapExtensionsMap = ({ disableResize }: { disableResize: boolean }) => ({\n  [LINK_BUTTON_TYPE]: getButtonExtension(TIPTAP_LINK_BUTTON_TYPE, disableResize),\n  [ACTION_BUTTON_TYPE]: getButtonExtension(TIPTAP_ACTION_BUTTON_TYPE, disableResize),\n});\n"],
-  "mappings": "AAAA,SAAS,2BAA2B,+BAA+B;AAEnE,SAAS,QAAQ,iBAAiB;AAClC,SAAS,YAAY,qBAAqB;AAC1C,SAAS,gCAAgC;AAEzC,SAAS,oBAAoB,wBAAwB;AACrD,SAAS,UAAU,iBAAiB;AAapC,MAAM,qBAAqB,CAAC,MAAc,kBAA2B;AAAA,EACnE,yBAAyB;AAAA,IACvB,QAAQ,CAAC,iBAAiB,iBAAiB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa,CAAC,QAAQ,aAAa,OAAO,aAAa;AACrD,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA,YAAY,MAAM,cAAc;AAAA,QAChC,YAAY,MAAM;AAAA,MACpB;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AACtB,YAAM,2BAA2B,IAAI,UAAU,KAAK,OAAO,cAAc;AAEzE,aAAO;AAAA,QACL,MAAM,KAAK;AAAA,QACX,OACE;AAAA,QACF,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,eAAe,OAAO;AAAA,UACpB,MAAM;AAAA,UACN,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,MAAM;AAAA,QACR;AAAA,QACA,cAAc;AACZ,iBAAO;AAAA,YACL,iBACE,kBACA,CAAC,EAAE,IAAI,SAAS,MAAoB;AAClC,yBAAW,GAAG,QAAQ,0BAA0B,YAAY,CAAC;AAE7D,qBAAO;AAAA,YACT;AAAA,UACJ;AAAA,QACF;AAAA,QACA,wBAAwB;AACtB,iBAAO;AAAA,YACL,IAAI,OAAO;AAAA,cACT,KAAK;AAAA,cAEL,OAAO;AAAA,gBACL,OAAO;AACL,yBAAO,EAAE,cAAc,MAAM;AAAA,gBAC/B;AAAA,gBACA,MAAM,IAAI,OAAO;AACf,wBAAM,eAAe,GAAG,QAAQ,wBAAwB;AAExD,sBAAI,iBAAiB,QAAW;AAC9B,2BAAO;AAAA,kBACT;AAEA,yBAAO,EAAE,aAAa;AAAA,gBACxB;AAAA,cACF;AAAA,cAEA,OAAO;AAAA,gBACL,YAAY,OAAO;AACjB,wBAAM,EAAE,aAAa,IAAI,yBAAyB,SAAS,KAAK;AAChE,wBAAM,EAAE,MAAM,GAAG,IAAI,MAAM;AAE3B,sBAAI,CAAC,cAAc;AACjB,2BAAO;AAAA,kBACT;AAEA,yBAAO,cAAc,OAAO,MAAM,KAAK;AAAA,oBACrC,WAAW,KAAK,MAAM,IAAI;AAAA,sBACxB,OAAO;AAAA,oBACT,CAAC;AAAA,kBACH,CAAC;AAAA,gBACH;AAAA,cACF;AAAA,YACF,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEO,MAAM,sBAAsB,CAAC,EAAE,cAAc,OAAmC;AAAA,EACrF,CAAC,gBAAgB,GAAG,mBAAmB,yBAAyB,aAAa;AAAA,EAC7E,CAAC,kBAAkB,GAAG,mBAAmB,2BAA2B,aAAa;AACnF;",
+  "sourcesContent": ["import { TIPTAP_ACTION_BUTTON_TYPE, TIPTAP_LINK_BUTTON_TYPE } from './../../ricos-content/index.js';\nimport type { CommandProps } from './../../tiptap/core/index.js';\nimport { NodeSelection, Plugin, PluginKey } from './../../tiptap/pm/state.js';\nimport { Decoration, DecorationSet } from './../../tiptap/pm/view.js';\nimport { createRicosNodeExtension } from './../../plugin-commons/index.js';\n\nimport { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from '../types.js';\nimport { Button as Component } from './component.js';\n\ndeclare module './../../tiptap/core' {\n  interface Commands<ReturnType> {\n    button: {\n      /**\n       * Sets value of temporary hover preview in Button settings.\n       */\n      setHoverPreview: (applyPreview: boolean) => ReturnType;\n    };\n  }\n}\n\nconst getButtonExtension = (name: string, disableResize: boolean) => [\n  createRicosNodeExtension({\n    groups: ['custom-styles', 'not-overtypable', 'shortcuts-enabled'],\n    type: 'react-node',\n    reconfigure: (config, _extensions, props, settings) => {\n      return {\n        ...config,\n        disableResize,\n        isTextWrap: props.isTextWrap ?? true,\n        addOptions: () => settings,\n      };\n    },\n    Component,\n    name,\n    createExtensionConfig() {\n      const HOVER_PREVIEW_PLUGIN_KEY = new PluginKey(this.name + 'hoverPreview');\n\n      return {\n        name: this.name,\n        // Above ricos-keymap and gap-spacer (100) so the arrows reach the button first.\n        priority: 105,\n        group:\n          'block smartBlockCellContent layoutCellContent collapsibleListItemBodyContent tableCellContent',\n        selectable: true,\n        draggable: true,\n        addAttributes: () => ({\n          type: null,\n          containerData: null,\n          styles: null,\n          text: null,\n          link: null,\n        }),\n        addKeyboardShortcuts() {\n          // Like ArrowDown from a selected image into its caption — ArrowUp too, so the text is\n          // reachable coming from below.\n          const focusText = () => {\n            const { selection } = this.editor.state;\n            if (!(selection instanceof NodeSelection) || selection.node.type.name !== this.name) {\n              return false;\n            }\n            const input = (\n              this.editor.view.nodeDOM(selection.from) as HTMLElement | null\n            )?.querySelector('input');\n            if (!input) {\n              return false;\n            }\n            input.focus();\n            input.setSelectionRange(input.value.length, input.value.length);\n            return true;\n          };\n          return { ArrowDown: focusText, ArrowUp: focusText };\n        },\n        addCommands() {\n          return {\n            setHoverPreview:\n              applyPreview =>\n              ({ tr, dispatch }: CommandProps) => {\n                dispatch?.(tr.setMeta(HOVER_PREVIEW_PLUGIN_KEY, applyPreview));\n\n                return true;\n              },\n          };\n        },\n        addProseMirrorPlugins() {\n          return [\n            new Plugin({\n              key: HOVER_PREVIEW_PLUGIN_KEY,\n\n              state: {\n                init() {\n                  return { applyPreview: false };\n                },\n                apply(tr, value) {\n                  const applyPreview = tr.getMeta(HOVER_PREVIEW_PLUGIN_KEY);\n\n                  if (applyPreview === undefined) {\n                    return value;\n                  }\n\n                  return { applyPreview };\n                },\n              },\n\n              props: {\n                decorations(state) {\n                  const { applyPreview } = HOVER_PREVIEW_PLUGIN_KEY.getState(state);\n                  const { from, to } = state.selection;\n\n                  if (!applyPreview) {\n                    return null;\n                  }\n\n                  return DecorationSet.create(state.doc, [\n                    Decoration.node(from, to, {\n                      class: 'forced-hover',\n                    }),\n                  ]);\n                },\n              },\n            }),\n          ];\n        },\n      };\n    },\n  }),\n];\n\nexport const tiptapExtensionsMap = ({ disableResize }: { disableResize: boolean }) => ({\n  [LINK_BUTTON_TYPE]: getButtonExtension(TIPTAP_LINK_BUTTON_TYPE, disableResize),\n  [ACTION_BUTTON_TYPE]: getButtonExtension(TIPTAP_ACTION_BUTTON_TYPE, disableResize),\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -17,7 +17,8 @@ const ButtonViewer = ({
   settings = {},
   buttonData,
   nodeId,
-  baseUrl
+  baseUrl,
+  children
 }) => {
   const { tabIndex, theme } = useContext(RicosContext);
   const isActionButton = buttonData.type === ButtonData_Type.ACTION;
@@ -85,11 +86,12 @@ const ButtonViewer = ({
       href: link ? getLinkHrefUrl(link, baseUrl) : void 0,
       target: link?.target && `_${link.target.toLowerCase()}`,
       rel: link?.rel?.nofollow ? getRelValue("nofollow") : void 0
-    }
+    },
+    children
   );
 };
 const LinkButton = (props) => {
-  const { buttonData, ...rest } = props;
+  const { buttonData, children, ...rest } = props;
   return /* @__PURE__ */ React.createElement(
     "a",
     {
@@ -100,11 +102,11 @@ const LinkButton = (props) => {
         }
       }
     },
-    /* @__PURE__ */ React.createElement("div", { className: styles.button_text }, buttonData.text)
+    children ?? /* @__PURE__ */ React.createElement("div", { className: styles.button_text }, buttonData.text)
   );
 };
 const ActionButton = (props) => {
-  const { buttonData, ...rest } = props;
+  const { buttonData, children, ...rest } = props;
   return /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -116,7 +118,7 @@ const ActionButton = (props) => {
         }
       }
     },
-    /* @__PURE__ */ React.createElement("div", { className: styles.button_text }, buttonData.text)
+    children ?? /* @__PURE__ */ React.createElement("div", { className: styles.button_text }, buttonData.text)
   );
 };
 export {