@wix/ricos 11.21.3 → 11.23.0

package/dist/cjs/ricos-common-plugins/layout/paywall-toolbar-button.js

@@ -0,0 +1,100 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var paywall_toolbar_button_exports = {};
+__export(paywall_toolbar_button_exports, {
+  PAYWALL_TOOLBAR_PANEL_ID: () => PAYWALL_TOOLBAR_PANEL_ID,
+  createPaywallToolbarButton: () => createPaywallToolbarButton,
+  getPaywallToolbarButton: () => getPaywallToolbarButton
+});
+module.exports = __toCommonJS(paywall_toolbar_button_exports);
+var import_react = __toESM(require("react"));
+var import_ricos_context = require("./../../ricos-context/index.js");
+var import_modal_service_provider = require("./../../ricos-modals/modal-service-provider.js");
+var import_toolbar_button = require("./../../_shared/toolbar-button/toolbar-button.js");
+const PAYWALL_TOOLBAR_PANEL_ID = "paywallToolbarPanel";
+const DATA_HOOK = "paywall-toolbar-button";
+const PaywallToolbarButton = ({
+  button: { icon, label, onClick },
+  toolbarItem
+}) => {
+  const { isMobile } = (0, import_react.useContext)(import_ricos_context.RicosContext);
+  const modalService = (0, import_modal_service_provider.useModalService)();
+  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
+  const isOpen = (0, import_modal_service_provider.useModalState)((0, import_modal_service_provider.getIsModalOpen)(PAYWALL_TOOLBAR_PANEL_ID));
+  const close = () => modalService.closeModal(PAYWALL_TOOLBAR_PANEL_ID);
+  (0, import_react.useEffect)(
+    () => () => {
+      modalService.isModalOpen(PAYWALL_TOOLBAR_PANEL_ID) && close();
+    },
+    [modalService]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_toolbar_button.ToolbarButton,
+    {
+      ref: setReferenceElement,
+      prefix: icon,
+      label,
+      active: isOpen,
+      onClick: () => onClick({
+        referenceElement,
+        isMobile,
+        close,
+        togglePanel: ({ Component, componentProps }) => isOpen ? close() : modalService.openModal({
+          id: PAYWALL_TOOLBAR_PANEL_ID,
+          type: "exclusive",
+          Component,
+          componentProps,
+          layout: isMobile ? "drawer" : "floating",
+          positioning: {
+            referenceElement: referenceElement ?? void 0,
+            placement: "bottom"
+          }
+        })
+      }),
+      dataHook: DATA_HOOK,
+      tabIndex: toolbarItem.presentation.tabIndex
+    }
+  );
+};
+const getPaywallToolbarButton = (services) => services.plugins.getConfig("PAYWALL").toolbarButton;
+const createPaywallToolbarButton = (services, visible) => ({
+  id: "paywallToolbarButton",
+  type: "modal",
+  icon: () => null,
+  tooltip: "",
+  dataHook: DATA_HOOK,
+  attributes: { visible },
+  renderer: (toolbarItem) => {
+    const button = getPaywallToolbarButton(services);
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, button && /* @__PURE__ */ import_react.default.createElement(PaywallToolbarButton, { button, toolbarItem }));
+  },
+  command: () => {
+  }
+});
+//# sourceMappingURL=paywall-toolbar-button.js.map

package/dist/cjs/ricos-common-plugins/layout/paywall-toolbar-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ricos-common-plugins/layout/paywall-toolbar-button.tsx"],
+  "sourcesContent": ["import React, { useContext, useEffect, useState } from 'react';\n\nimport type {\n  PaywallPluginEditorConfig,\n  PaywallToolbarButton as PaywallToolbarButtonConfig,\n} from './../../plugin-paywall/plugin-paywall.js';\nimport { RicosContext } from './../../ricos-context/index.js';\nimport {\n  getIsModalOpen,\n  useModalService,\n  useModalState,\n} from './../../ricos-modals/modal-service-provider.js';\nimport type { IToolbarItem, Resolver, RicosServices, ToolbarButton } from './../../ricos-types/index.js';\nimport { ToolbarButton as ToolbarButtonComponent } from './../../_shared/toolbar-button/toolbar-button.js';\n\nexport const PAYWALL_TOOLBAR_PANEL_ID = 'paywallToolbarPanel';\nconst DATA_HOOK = 'paywall-toolbar-button';\n\nconst PaywallToolbarButton = ({\n  button: { icon, label, onClick },\n  toolbarItem,\n}: {\n  button: PaywallToolbarButtonConfig;\n  toolbarItem: IToolbarItem;\n}) => {\n  const { isMobile } = useContext(RicosContext);\n  const modalService = useModalService();\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const isOpen = useModalState(getIsModalOpen(PAYWALL_TOOLBAR_PANEL_ID));\n  const close = () => modalService.closeModal(PAYWALL_TOOLBAR_PANEL_ID);\n\n  // Floating panels only close on an outside click; when the toolbar goes away for another\n  // reason (undo, a programmatic selection change), the panel must not outlive it.\n  useEffect(\n    () => () => {\n      modalService.isModalOpen(PAYWALL_TOOLBAR_PANEL_ID) && close();\n    },\n    [modalService]\n  );\n\n  return (\n    <ToolbarButtonComponent\n      ref={setReferenceElement}\n      prefix={icon}\n      label={label}\n      active={isOpen}\n      onClick={() =>\n        onClick({\n          referenceElement,\n          isMobile,\n          close,\n          togglePanel: ({ Component, componentProps }) =>\n            isOpen\n              ? close()\n              : modalService.openModal({\n                  id: PAYWALL_TOOLBAR_PANEL_ID,\n                  type: 'exclusive',\n                  Component,\n                  componentProps,\n                  layout: isMobile ? 'drawer' : 'floating',\n                  positioning: {\n                    referenceElement: referenceElement ?? undefined,\n                    placement: 'bottom',\n                  },\n                }),\n        })\n      }\n      dataHook={DATA_HOOK}\n      tabIndex={toolbarItem.presentation.tabIndex}\n    />\n  );\n};\n\n// Layout registers before the opt-in paywall plugin, so its config is read at render time.\nexport const getPaywallToolbarButton = (services: RicosServices) =>\n  (services.plugins.getConfig('PAYWALL') as Partial<PaywallPluginEditorConfig>).toolbarButton;\n\nexport const createPaywallToolbarButton = (\n  services: RicosServices,\n  visible: Resolver<boolean>\n): ToolbarButton => ({\n  id: 'paywallToolbarButton',\n  type: 'modal',\n  icon: () => null,\n  tooltip: '',\n  dataHook: DATA_HOOK,\n  attributes: { visible },\n  renderer: toolbarItem => {\n    const button = getPaywallToolbarButton(services);\n    return <>{button && <PaywallToolbarButton button={button} toolbarItem={toolbarItem} />}</>;\n  },\n  command: () => {},\n});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AAMvD,2BAA6B;AAC7B,oCAIO;AAEP,4BAAwD;AAEjD,MAAM,2BAA2B;AACxC,MAAM,YAAY;AAElB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ,EAAE,MAAM,OAAO,QAAQ;AAAA,EAC/B;AACF,MAGM;AACJ,QAAM,EAAE,SAAS,QAAI,yBAAW,iCAAY;AAC5C,QAAM,mBAAe,+CAAgB;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAmC,IAAI;AACvF,QAAM,aAAS,iDAAc,8CAAe,wBAAwB,CAAC;AACrE,QAAM,QAAQ,MAAM,aAAa,WAAW,wBAAwB;AAIpE;AAAA,IACE,MAAM,MAAM;AACV,mBAAa,YAAY,wBAAwB,KAAK,MAAM;AAAA,IAC9D;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC,sBAAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,MACR,SAAS,MACP,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa,CAAC,EAAE,WAAW,eAAe,MACxC,SACI,MAAM,IACN,aAAa,UAAU;AAAA,UACrB,IAAI;AAAA,UACJ,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ,WAAW,WAAW;AAAA,UAC9B,aAAa;AAAA,YACX,kBAAkB,oBAAoB;AAAA,YACtC,WAAW;AAAA,UACb;AAAA,QACF,CAAC;AAAA,MACT,CAAC;AAAA,MAEH,UAAU;AAAA,MACV,UAAU,YAAY,aAAa;AAAA;AAAA,EACrC;AAEJ;AAGO,MAAM,0BAA0B,CAAC,aACrC,SAAS,QAAQ,UAAU,SAAS,EAAyC;AAEzE,MAAM,6BAA6B,CACxC,UACA,aACmB;AAAA,EACnB,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM,MAAM;AAAA,EACZ,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY,EAAE,QAAQ;AAAA,EACtB,UAAU,iBAAe;AACvB,UAAM,SAAS,wBAAwB,QAAQ;AAC/C,WAAO,6BAAAD,QAAA,2BAAAA,QAAA,gBAAG,UAAU,6BAAAA,QAAA,cAAC,wBAAqB,QAAgB,aAA0B,CAAG;AAAA,EACzF;AAAA,EACA,SAAS,MAAM;AAAA,EAAC;AAClB;",
+  "names": ["React", "ToolbarButtonComponent"]
+}

package/dist/cjs/ricos-common-plugins/layout/plugin-layout.js

@@ -40,6 +40,7 @@ var import_ricos_types = require("./../../ricos-types/index.js");
 var import_create_plugin_toolbar_button = require("./../../_shared/create-plugin-toolbar-button.js");
 var import_data_hooks = require("./../../_shared/data-hooks.js");
 var import_is_edge_banner = require("./../../_shared/is-edge-banner.js");
+var import_paywall_selection = require("./../../_shared/paywall/paywall-selection.js");
 var import_create_animation_button = require("./../../_shared/plugin-toolbar/create-animation-button.js");
 var import_create_delete_button = require("./../../_shared/plugin-toolbar/create-delete-button.js");
 var import_create_settings_button = require("./../../_shared/plugin-toolbar/create-settings-button.js");
@@ -63,6 +64,7 @@ var import_three_columns = require("./modals/icons/three-columns.js");
 var import_two_columns = require("./modals/icons/two-columns.js");
 var import_layout_insert_modal = require("./modals/layout-insert-modal.js");
 var import_create_layout_preset_content = require("./modals/presets/create-layout-preset-content.js");
+var import_paywall_toolbar_button = require("./paywall-toolbar-button.js");
 var import_section_dividers_panel_lazy = require("./section-dividers/section-dividers-panel-lazy.js");
 var import_shared = require("./shared.js");
 const isBannerLayoutNode = (node) => node?.type.name === import_ricos_content.TIPTAP_LAYOUT_TYPE && (0, import_is_edge_banner.isEdgeBanner)(node.attrs?.banner);
@@ -229,186 +231,189 @@ const pluginLayout = (config = {
     names: [import_ricos_types.RicosPluginToolbarNames.LAYOUT],
     isVisible: isToolbarVisible,
     resolveReferenceElement: (tiptapEditor) => (0, import_shared.getToolbarReferenceElement)(tiptapEditor),
-    getButtons: (_, services) => [
-      (0, import_create_settings_button.createSettingsButton)({
-        modalId: import_data_hooks2.LAYOUT_SETTINGS_MODAL_ID,
-        showLabel: true,
-        attributes: {
-          selectedNode: selectedNodeResolver
-        },
-        command: ({ isMobile, referenceElement, attributes: { selectedNode } }) => {
-          toggleLayoutSidePanel(
-            services.modals,
-            {
-              id: import_data_hooks2.LAYOUT_SETTINGS_MODAL_ID,
-              Component: import_settings.Settings,
-              componentProps: {
-                referenceElement,
-                nodeId: selectedNode.attrs.id,
-                config
-              }
-            },
-            referenceElement,
-            isMobile
-          );
-        },
-        buttonId: "layoutSettings"
-      }),
-      (0, import_create_separator.createSeparator)(),
-      {
-        id: "layoutSectionDividers",
-        type: "modal",
-        tooltip: "Layouts_SectionDividers_Tooltip",
-        icon: import_lazy.SectionDividerBottomSmall,
-        dataHook: import_data_hooks2.SECTION_DIVIDERS_BUTTON,
-        attributes: {
-          selectedNode: selectedNodeResolver,
-          active: (_2, { modals }) => Boolean(modals?.getModal(import_data_hooks2.SECTION_DIVIDERS_MODAL_ID))
-        },
-        renderer: (toolbarItem) => /* @__PURE__ */ import_react.default.createElement(SectionDividersButton, { toolbarItem }),
-        command: ({ isMobile, referenceElement, attributes: { selectedNode } }) => {
-          toggleLayoutSidePanel(
-            services.modals,
-            {
-              id: import_data_hooks2.SECTION_DIVIDERS_MODAL_ID,
-              Component: import_section_dividers_panel_lazy.SectionDividersPanelLazy,
-              componentProps: {
-                referenceElement,
-                nodeId: selectedNode.attrs.id
-              }
-            },
-            referenceElement,
-            isMobile
-          );
-        }
-      },
-      ...config.disableBanner ? [] : [setAsBannerButton],
-      ...config.disableFooter ? [] : [setAsFooterButton],
-      (0, import_create_plugin_toolbar_button.createPluginToolbarButton)({
-        id: "layoutVerticalAlignment",
-        type: "dropdown",
-        tooltip: "Layouts_LayoutCellVerticalAlignment_Tooltip",
-        dataHook: import_data_hooks2.LAYOUT_TOOLBAR_VERTICAL_ALIGNMENT_BUTTON,
-        Component: import_toolbars_v3.VerticalAlignmentDropdown,
-        getComponentProps: ({ tiptapEditor, modals, attributes }) => {
-          return {
-            onSelect: (verticalAlignment) => {
-              tiptapEditor.chain().focus().setLayoutCellsVerticalAlignment(
-                attributes.selectedNode.attrs.id,
-                verticalAlignment
-              ).run();
-            },
-            dropdownOptions: Object.values(import_vertical_alignment_dropdown.VERTICAL_ALIGNMENT_BUTTONS).map((item) => ({
-              id: item.commandKey,
-              dataHook: item.dataHook,
-              label: services.t(item.tooltip),
-              icon: item.iconSmall,
-              iconMobile: item.icon
-            })),
-            closeModal: () => modals.closeModal(import_toolbars_v3.VERTICAL_ALIGNMENT_MODAL_ID),
-            selectedId: attributes.selectedNode.attrs.cellVerticalAlignment || import_shared_with_viewer.LAYOUT_DEFAULTS.cellVerticalAlignment
-          };
-        },
-        command: ({
-          tiptapEditor,
-          modals,
-          referenceElement,
-          attributes,
-          getComponentProps,
-          publicCommands
-        }) => {
-          const closeModal = () => modals.closeModal(import_toolbars_v3.VERTICAL_ALIGNMENT_MODAL_ID);
-          const isModalOpen = modals.isModalOpen(import_toolbars_v3.VERTICAL_ALIGNMENT_MODAL_ID);
-          if (isModalOpen) {
-            closeModal();
-            return;
+    getButtons: (_, services) => {
+      const isPaywallButton = (_2, __, editor) => !!(0, import_paywall_toolbar_button.getPaywallToolbarButton)(services) && !!editor && (0, import_paywall_selection.isPaywallSelection)(editor.state.selection);
+      return [
+        (0, import_paywall_toolbar_button.createPaywallToolbarButton)(services, isPaywallButton),
+        (0, import_create_separator.createSeparator)({ visible: isPaywallButton }),
+        (0, import_create_settings_button.createSettingsButton)({
+          modalId: import_data_hooks2.LAYOUT_SETTINGS_MODAL_ID,
+          showLabel: ({ attributes }) => !attributes.isPaywallButton,
+          attributes: { selectedNode: selectedNodeResolver, isPaywallButton },
+          command: ({ isMobile, referenceElement, attributes: { selectedNode } }) => {
+            toggleLayoutSidePanel(
+              services.modals,
+              {
+                id: import_data_hooks2.LAYOUT_SETTINGS_MODAL_ID,
+                Component: import_settings.Settings,
+                componentProps: {
+                  referenceElement,
+                  nodeId: selectedNode.attrs.id,
+                  config
+                }
+              },
+              referenceElement,
+              isMobile
+            );
+          },
+          buttonId: "layoutSettings"
+        }),
+        (0, import_create_separator.createSeparator)({ visible: (...args) => !isPaywallButton(...args) }),
+        {
+          id: "layoutSectionDividers",
+          type: "modal",
+          tooltip: "Layouts_SectionDividers_Tooltip",
+          icon: import_lazy.SectionDividerBottomSmall,
+          dataHook: import_data_hooks2.SECTION_DIVIDERS_BUTTON,
+          attributes: {
+            selectedNode: selectedNodeResolver,
+            active: (_2, { modals }) => Boolean(modals?.getModal(import_data_hooks2.SECTION_DIVIDERS_MODAL_ID))
+          },
+          renderer: (toolbarItem) => /* @__PURE__ */ import_react.default.createElement(SectionDividersButton, { toolbarItem }),
+          command: ({ isMobile, referenceElement, attributes: { selectedNode } }) => {
+            toggleLayoutSidePanel(
+              services.modals,
+              {
+                id: import_data_hooks2.SECTION_DIVIDERS_MODAL_ID,
+                Component: import_section_dividers_panel_lazy.SectionDividersPanelLazy,
+                componentProps: {
+                  referenceElement,
+                  nodeId: selectedNode.attrs.id
+                }
+              },
+              referenceElement,
+              isMobile
+            );
           }
-          const componentProps = getComponentProps?.({
+        },
+        ...config.disableBanner ? [] : [setAsBannerButton],
+        ...config.disableFooter ? [] : [setAsFooterButton],
+        (0, import_create_plugin_toolbar_button.createPluginToolbarButton)({
+          id: "layoutVerticalAlignment",
+          type: "dropdown",
+          tooltip: "Layouts_LayoutCellVerticalAlignment_Tooltip",
+          dataHook: import_data_hooks2.LAYOUT_TOOLBAR_VERTICAL_ALIGNMENT_BUTTON,
+          Component: import_toolbars_v3.VerticalAlignmentDropdown,
+          getComponentProps: ({ tiptapEditor, modals, attributes }) => {
+            return {
+              onSelect: (verticalAlignment) => {
+                tiptapEditor.chain().focus().setLayoutCellsVerticalAlignment(
+                  attributes.selectedNode.attrs.id,
+                  verticalAlignment
+                ).run();
+              },
+              dropdownOptions: Object.values(import_vertical_alignment_dropdown.VERTICAL_ALIGNMENT_BUTTONS).map((item) => ({
+                id: item.commandKey,
+                dataHook: item.dataHook,
+                label: services.t(item.tooltip),
+                icon: item.iconSmall,
+                iconMobile: item.icon
+              })),
+              closeModal: () => modals.closeModal(import_toolbars_v3.VERTICAL_ALIGNMENT_MODAL_ID),
+              selectedId: attributes.selectedNode.attrs.cellVerticalAlignment || import_shared_with_viewer.LAYOUT_DEFAULTS.cellVerticalAlignment
+            };
+          },
+          command: ({
             tiptapEditor,
-            attributes,
-            publicCommands,
-            t: services.t,
             modals,
-            languageDir: services.context.languageDir
-          });
-          if (!componentProps) {
-            return;
-          }
-          modals.openModal({
-            id: import_toolbars_v3.VERTICAL_ALIGNMENT_MODAL_ID,
-            Component: import_toolbars_v3.VerticalAlignmentDropdown,
-            componentProps,
-            layout: services.context.isMobile ? "drawer" : "floating",
-            positioning: { referenceElement, placement: "bottom" }
-          });
-        },
-        attributes: {
-          selectedNode: selectedNodeResolver,
-          verticalAlignment: getVerticalAlignmentResolver
-        },
-        renderer: (toolbarItem) => /* @__PURE__ */ import_react.default.createElement(import_toolbars_v3.VerticalAlignmentButton, { toolbarItem }),
-        getIcon: ({ attributes }) => {
-          const verticalAlignment = attributes.selectedNode.attrs?.cellVerticalAlignment || import_shared_with_viewer.LAYOUT_DEFAULTS.cellVerticalAlignment;
-          return import_toolbars_v3.verticalAlignmentIcons[verticalAlignment];
-        }
-      }),
-      {
-        id: "addCellToTheEnd",
-        type: "toggle",
-        dataHook: import_data_hooks2.LAYOUT_PLUGIN_TOOLBAR_ADD_CELL_BUTTON,
-        tooltip: "Layouts_LayoutAddCell_Tooltip",
-        icon: import_lazy.Add,
-        attributes: {
-          selectedNode: selectedNodeResolver,
-          alwaysVisible: import_is_always_visible.isAlwaysVisible,
-          disabled: (_2, __, editor) => {
-            const selection = editor?.state?.selection;
-            if (!selection) {
-              return true;
+            referenceElement,
+            attributes,
+            getComponentProps,
+            publicCommands
+          }) => {
+            const closeModal = () => modals.closeModal(import_toolbars_v3.VERTICAL_ALIGNMENT_MODAL_ID);
+            const isModalOpen = modals.isModalOpen(import_toolbars_v3.VERTICAL_ALIGNMENT_MODAL_ID);
+            if (isModalOpen) {
+              closeModal();
+              return;
             }
-            const closest = selection instanceof import_state.NodeSelection && selection.node?.type.name === import_ricos_content.TIPTAP_LAYOUT_TYPE ? selection : (0, import_tiptap.findParentNodeClosestToPos)(
-              selection.$from,
-              (node) => node.type.name === import_ricos_content.TIPTAP_LAYOUT_TYPE
-            );
-            return closest?.node.lastChild && editor ? !editor.can().addCellRight(closest.node.lastChild.attrs.id) : true;
+            const componentProps = getComponentProps?.({
+              tiptapEditor,
+              attributes,
+              publicCommands,
+              t: services.t,
+              modals,
+              languageDir: services.context.languageDir
+            });
+            if (!componentProps) {
+              return;
+            }
+            modals.openModal({
+              id: import_toolbars_v3.VERTICAL_ALIGNMENT_MODAL_ID,
+              Component: import_toolbars_v3.VerticalAlignmentDropdown,
+              componentProps,
+              layout: services.context.isMobile ? "drawer" : "floating",
+              positioning: { referenceElement, placement: "bottom" }
+            });
+          },
+          attributes: {
+            selectedNode: selectedNodeResolver,
+            verticalAlignment: getVerticalAlignmentResolver
+          },
+          renderer: (toolbarItem) => /* @__PURE__ */ import_react.default.createElement(import_toolbars_v3.VerticalAlignmentButton, { toolbarItem }),
+          getIcon: ({ attributes }) => {
+            const verticalAlignment = attributes.selectedNode.attrs?.cellVerticalAlignment || import_shared_with_viewer.LAYOUT_DEFAULTS.cellVerticalAlignment;
+            return import_toolbars_v3.verticalAlignmentIcons[verticalAlignment];
           }
+        }),
+        {
+          id: "addCellToTheEnd",
+          type: "toggle",
+          dataHook: import_data_hooks2.LAYOUT_PLUGIN_TOOLBAR_ADD_CELL_BUTTON,
+          tooltip: "Layouts_LayoutAddCell_Tooltip",
+          icon: import_lazy.Add,
+          attributes: {
+            selectedNode: selectedNodeResolver,
+            alwaysVisible: import_is_always_visible.isAlwaysVisible,
+            disabled: (_2, __, editor) => {
+              const selection = editor?.state?.selection;
+              if (!selection) {
+                return true;
+              }
+              const closest = selection instanceof import_state.NodeSelection && selection.node?.type.name === import_ricos_content.TIPTAP_LAYOUT_TYPE ? selection : (0, import_tiptap.findParentNodeClosestToPos)(
+                selection.$from,
+                (node) => node.type.name === import_ricos_content.TIPTAP_LAYOUT_TYPE
+              );
+              return closest?.node.lastChild && editor ? !editor.can().addCellRight(closest.node.lastChild.attrs.id) : true;
+            }
+          },
+          command: ({ tiptapEditor, attributes: { selectedNode } }) => {
+            tiptapEditor.commands.addCellRight(selectedNode.lastChild.attrs.id);
+          },
+          renderer: (toolbarItem) => /* @__PURE__ */ import_react.default.createElement(AddCellButton, { toolbarItem })
         },
-        command: ({ tiptapEditor, attributes: { selectedNode } }) => {
-          tiptapEditor.commands.addCellRight(selectedNode.lastChild.attrs.id);
-        },
-        renderer: (toolbarItem) => /* @__PURE__ */ import_react.default.createElement(AddCellButton, { toolbarItem })
-      },
-      // the layout toolbar also shows for text selections inside the layout —
-      // resolve the layout like the other buttons, not just NodeSelections
-      (0, import_create_animation_button.createAnimationButton)(services, selectedNodeResolver),
-      (0, import_create_separator.createSeparator)(),
-      (0, import_create_delete_button.createDeleteButton)({
-        tooltip: "Layouts_LayoutDelete_Tooltip",
-        attributes: {
-          selectedNode: selectedNodeResolver
-        },
-        command: ({ tiptapEditor, attributes }) => {
-          const layoutId = attributes.selectedNode.attrs.id;
-          const layoutWithPos = (0, import_helpers.findNodeById)(tiptapEditor.state.tr, layoutId)[0];
-          if (!layoutWithPos) {
-            return;
-          }
-          const $layoutPos = tiptapEditor.state.doc.resolve(layoutWithPos.pos);
-          const parentTypeName = $layoutPos.parent.type.name;
-          const isInCardWrapper = parentTypeName === import_ricos_content.TIPTAP_CARD_HEADER_TYPE || parentTypeName === import_ricos_content.TIPTAP_CARD_FOOTER_TYPE;
-          if (isInCardWrapper) {
-            const wrapperFrom = $layoutPos.before($layoutPos.depth);
-            const wrapperTo = $layoutPos.after($layoutPos.depth);
-            tiptapEditor.chain().focus().command(({ tr }) => {
-              tr.delete(wrapperFrom, wrapperTo);
-              return true;
-            }).run();
-            return;
+        // the layout toolbar also shows for text selections inside the layout —
+        // resolve the layout like the other buttons, not just NodeSelections
+        (0, import_create_animation_button.createAnimationButton)(services, selectedNodeResolver),
+        (0, import_create_separator.createSeparator)(),
+        (0, import_create_delete_button.createDeleteButton)({
+          tooltip: "Layouts_LayoutDelete_Tooltip",
+          attributes: {
+            selectedNode: selectedNodeResolver
+          },
+          command: ({ tiptapEditor, attributes }) => {
+            const layoutId = attributes.selectedNode.attrs.id;
+            const layoutWithPos = (0, import_helpers.findNodeById)(tiptapEditor.state.tr, layoutId)[0];
+            if (!layoutWithPos) {
+              return;
+            }
+            const $layoutPos = tiptapEditor.state.doc.resolve(layoutWithPos.pos);
+            const parentTypeName = $layoutPos.parent.type.name;
+            const isInCardWrapper = parentTypeName === import_ricos_content.TIPTAP_CARD_HEADER_TYPE || parentTypeName === import_ricos_content.TIPTAP_CARD_FOOTER_TYPE;
+            if (isInCardWrapper) {
+              const wrapperFrom = $layoutPos.before($layoutPos.depth);
+              const wrapperTo = $layoutPos.after($layoutPos.depth);
+              tiptapEditor.chain().focus().command(({ tr }) => {
+                tr.delete(wrapperFrom, wrapperTo);
+                return true;
+              }).run();
+              return;
+            }
+            tiptapEditor.commands.deleteNode(layoutId);
           }
-          tiptapEditor.commands.deleteNode(layoutId);
-        }
-      })
-    ]
+        })
+      ];
+    }
   },
   getAddButtons: (_config, services) => config.showInToolbars ? [
     {