@wix/ricos 11.22.0 → 11.23.0

package/dist/es/plugin-card/card-node-view.js

@@ -117,7 +117,13 @@ const updateCardView = (cardElement, contentElement, boundaryLineWrapper, bounda
   }
 };
 const createCardNodeView = (options) => {
-  const { renderCardHeader, isMobile, getBoundaryWarningPortal } = options;
+  const {
+    renderCardHeader,
+    renderAddPageButton,
+    isMobile,
+    getBoundaryWarningPortal,
+    showPageControls = true
+  } = options;
   return ({ node, editor, getPos }) => {
     let currentNode = node;
     const cardWrapper = document.createElement("div");
@@ -125,31 +131,17 @@ const createCardNodeView = (options) => {
     let headerContainer = null;
     let headerRenderer = null;
     const getCardIndex = () => {
-      const doc = editor.state.doc;
       const cardPos = getPos();
       if (typeof cardPos !== "number") {
         return 0;
       }
-      let currentIndex = 0;
-      let found = false;
-      doc.forEach((docNode, pos) => {
-        if (found) {
-          return;
-        }
-        if (docNode.type.name === "CARD") {
-          currentIndex++;
-          if (pos === cardPos) {
-            found = true;
-          }
-        }
-      });
-      const pendingInsertions = getCardStorage(editor).pendingCardInsertions;
-      for (const insertion of pendingInsertions) {
-        if (insertion.afterCardIndex < currentIndex) {
-          currentIndex += insertion.count;
+      let index = editor.state.doc.resolve(cardPos).index(0);
+      for (const insertion of getCardStorage(editor).pendingCardInsertions) {
+        if (insertion.afterCardIndex <= index) {
+          index += insertion.count;
         }
       }
-      return currentIndex;
+      return index;
     };
     const getIsLastCard = () => {
       const doc = editor.state.doc;
@@ -180,7 +172,8 @@ const createCardNodeView = (options) => {
         editor,
         props: {
           cardNode: currentNode,
-          index: getCardIndex()
+          // CardHeaderProps.index is the 1-based page number
+          index: getCardIndex() + 1
         }
       });
       headerContainer.appendChild(headerRenderer.element);
@@ -221,7 +214,7 @@ const createCardNodeView = (options) => {
     selectionSvg.appendChild(selectionRect);
     cardElement.append(contentElement, boundaryLineWrapper, selectionSvg);
     const cardGap = document.createElement("div");
-    cardGap.className = styles.cardGap;
+    cardGap.className = showPageControls ? styles.cardGap : `${styles.cardGap} ${styles.noControls}`;
     cardGap.setAttribute("contenteditable", "false");
     const updateLastCardClass = () => {
       const isLast = getIsLastCard();
@@ -266,16 +259,31 @@ const createCardNodeView = (options) => {
     const handleMergeHoverChange = (isHovered) => {
       cardGap.classList.toggle(styles.mergeHover, isHovered);
     };
-    const pageGapRenderer = new ReactRenderer(PageGap, {
+    let pageGapState = { isLastCard: getIsLastCard(), index: getCardIndex() };
+    const pageGapRenderer = showPageControls ? new ReactRenderer(PageGap, {
       editor,
       props: {
         onAddPage: handleAddPage,
         onMergePages: handleMergePages,
         onMergeHoverChange: handleMergeHoverChange,
-        isLastCard: getIsLastCard()
+        ...pageGapState,
+        renderAddPageButton
       }
-    });
-    cardGap.appendChild(pageGapRenderer.element);
+    }) : null;
+    const updatePageGap = () => {
+      if (!pageGapRenderer) {
+        return;
+      }
+      const isLastCard = getIsLastCard();
+      const index = getCardIndex();
+      if (isLastCard !== pageGapState.isLastCard || index !== pageGapState.index) {
+        pageGapState = { isLastCard, index };
+        pageGapRenderer.updateProps(pageGapState);
+      }
+    };
+    if (pageGapRenderer) {
+      cardGap.appendChild(pageGapRenderer.element);
+    }
     cardWrapper.append(cardElement, cardGap);
     const resizeObserver = new ResizeObserver(() => {
       updateCardView(
@@ -300,12 +308,10 @@ const createCardNodeView = (options) => {
       if (headerRenderer) {
         headerRenderer.updateProps({
           cardNode: currentNode,
-          index: getCardIndex()
+          index: getCardIndex() + 1
         });
       }
-      pageGapRenderer.updateProps({
-        isLastCard: getIsLastCard()
-      });
+      updatePageGap();
       updateLastCardClass();
     };
     editor.on("update", updateHeaderIndex);
@@ -361,12 +367,10 @@ const createCardNodeView = (options) => {
         if (headerRenderer) {
           headerRenderer.updateProps({
             cardNode: currentNode,
-            index: getCardIndex()
+            index: getCardIndex() + 1
           });
         }
-        pageGapRenderer.updateProps({
-          isLastCard: getIsLastCard()
-        });
+        updatePageGap();
         updateLastCardClass();
         return true;
       },
@@ -392,7 +396,7 @@ const createCardNodeView = (options) => {
         getCardStorage(editor).onPageFormatChange.delete(handlePageFormatChange);
         getCardStorage(editor).onPendingCardInsertionsChange.delete(updateHeaderIndex);
         boundaryLineRenderer.destroy();
-        pageGapRenderer.destroy();
+        pageGapRenderer?.destroy();
         if (headerRenderer) {
           headerRenderer.destroy();
         }

package/dist/es/plugin-card/card-node-view.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-card/card-node-view.ts"],
-  "sourcesContent": ["import type { FC } from 'react';\n\nimport { TIPTAP_CARD_CONTENT_TYPE, TIPTAP_CARD_TYPE } from './../ricos-content/index.js';\nimport type { BackgroundImage, Background } from './../ricos-schema/next-schema/index.js';\nimport { resolveBackwardCompatOverlay } from './../_shared/resolve-backward-compat-overlay.js';\nimport type { Editor, NodeViewRenderer } from './../tiptap/core/index.js';\nimport type { Node as PmNode } from './../tiptap/pm/model.js';\nimport { ReactRenderer } from './../tiptap/react/index.js';\nimport { getImageSrc } from './../wix-rich-content-common/lib/image-utils.js';\n\nimport { gradientToCss } from '../_shared/gradient-to-css.js';\nimport { hexToRgba } from '../theme-utils/color-utils.js';\nimport type { BoundaryLineProps } from './boundary-warning.js';\nimport { BoundaryLine } from './boundary-warning.js';\nimport styles from './card-scss.js';\nimport { PageGap } from './page-gap.js';\nimport {\n  CARD_DEFAULTS,\n  getCardBackgroundColorCssVar,\n  isTransparentCardBackgroundColor,\n} from './shared-with-viewer.js';\nimport type { CardHeaderProps, CardFormat, CardExtensionStorage } from './types.js';\n\n// Helper to check if selection intersects with a card node\nconst isSelectionInCard = (\n  editor: Editor,\n  getPos: () => number | undefined,\n  nodeSize: number\n): boolean => {\n  const pos = getPos();\n  if (typeof pos !== 'number') {\n    return false;\n  }\n\n  const { from, to } = editor.state.selection;\n  const cardStart = pos;\n  const cardEnd = pos + nodeSize;\n\n  // Check if selection intersects with the card range\n  return from < cardEnd && to > cardStart;\n};\n\nconst isFluidPageFormat = (pageFormat: CardFormat | undefined): boolean =>\n  pageFormat !== undefined && pageFormat.height === undefined;\n\nconst getCardStorage = (editor: Editor): CardExtensionStorage =>\n  editor.storage[TIPTAP_CARD_TYPE] as CardExtensionStorage;\n\nconst getActivePageFormat = (editor: Editor): CardFormat | undefined =>\n  getCardStorage(editor)?.activePageFormat;\n\nconst setOrRemove = (el: HTMLElement, prop: string, value: string | undefined): void => {\n  if (value !== undefined) {\n    el.style.setProperty(prop, value);\n  } else {\n    el.style.removeProperty(prop);\n  }\n};\n\nconst updateCardBackgroundStyles = (cardElement: HTMLDivElement, node: PmNode): void => {\n  const background: Background | undefined = node.attrs.background;\n  const backgroundImage: BackgroundImage | undefined = node.attrs.backgroundImage;\n\n  // When any explicit background is set, block theme inheritance for all layers.\n  // Zero-alpha color is the \"cleared\" state — it should inherit from theme.\n  const isTransparentColor =\n    background?.type === 'COLOR' && isTransparentCardBackgroundColor(background.color);\n  const hasExplicitBackground = (!!background && !isTransparentColor) || !!backgroundImage;\n\n  // When an image is set, `background` plays the role of the *overlay* (on top\n  // of the image). Otherwise it's the card fill (color or gradient).\n  if (backgroundImage) {\n    const imageUrl =\n      backgroundImage.media?.src.url ??\n      (backgroundImage.media?.src.id &&\n        getImageSrc({ file_name: backgroundImage.media.src.id }, undefined, {\n          requiredQuality: 100,\n          requiredWidth: Math.min(backgroundImage.media?.width ?? 4000, 4000),\n          requiredHeight: Math.min(backgroundImage.media?.height ?? 4000, 4000),\n        }));\n\n    setOrRemove(\n      cardElement,\n      '--ricos-internal-card-background-image',\n      imageUrl ? `url(${imageUrl})` : undefined\n    );\n    setOrRemove(\n      cardElement,\n      '--ricos-internal-card-background-size',\n      backgroundImage.scaling?.toLowerCase()\n    );\n    setOrRemove(\n      cardElement,\n      '--ricos-internal-card-background-position',\n      backgroundImage.position?.toLowerCase().split('_').join(' ')\n    );\n\n    // `backgroundImage.overlay` (new model) is authoritative when present; otherwise the legacy\n    // `background` fill doubles as the overlay through the opacity shim.\n    let overlay: string | undefined;\n    if (backgroundImage.overlay?.type === 'GRADIENT') {\n      overlay = gradientToCss(backgroundImage.overlay.gradient) || undefined;\n    } else if (backgroundImage.overlay?.type === 'COLOR') {\n      overlay = hexToRgba(backgroundImage.overlay.color);\n    } else if (background?.type === 'GRADIENT') {\n      overlay = gradientToCss(background.gradient) || undefined;\n    } else if (background?.type === 'COLOR' && !isTransparentColor) {\n      const resolved = resolveBackwardCompatOverlay(\n        background.color,\n        backgroundImage.opacity ?? 100,\n        100\n      );\n      overlay = hexToRgba(resolved);\n    }\n    setOrRemove(cardElement, '--ricos-internal-card-background-image-overlay', overlay);\n\n    // Color/gradient base layer is unused when an image is shown — clear stale vars\n    cardElement.style.removeProperty('--ricos-internal-card-background-color');\n    cardElement.style.removeProperty('--ricos-internal-card-background-gradient');\n    cardElement.style.removeProperty('--ricos-internal-card-background-image-opacity');\n  } else {\n    const gradientCss =\n      background?.type === 'GRADIENT' ? gradientToCss(background.gradient) : undefined;\n    // Color/gradient layer (container fill)\n    // Use 'transparent' to block theme color when card has explicit background but no color\n    setOrRemove(\n      cardElement,\n      '--ricos-internal-card-background-color',\n      getCardBackgroundColorCssVar(background, hasExplicitBackground)\n    );\n    setOrRemove(cardElement, '--ricos-internal-card-background-gradient', gradientCss || undefined);\n    cardElement.style.removeProperty('--ricos-internal-card-background-image-overlay');\n\n    if (hasExplicitBackground) {\n      // Card has explicit color/gradient but no image — block theme image with 'none'\n      cardElement.style.setProperty('--ricos-internal-card-background-image', 'none');\n    } else {\n      // No explicit background — remove internal var so theme applies\n      cardElement.style.removeProperty('--ricos-internal-card-background-image');\n    }\n    cardElement.style.removeProperty('--ricos-internal-card-background-size');\n    cardElement.style.removeProperty('--ricos-internal-card-background-position');\n    cardElement.style.removeProperty('--ricos-internal-card-background-image-opacity');\n  }\n};\n\nconst updateCardView = (\n  cardElement: HTMLDivElement,\n  contentElement: HTMLDivElement,\n  boundaryLineWrapper: HTMLDivElement,\n  boundaryLineRenderer: ReactRenderer<unknown, BoundaryLineProps>,\n  pageFormat: CardFormat | undefined,\n  hideBoundaryLine?: boolean,\n  onSplit?: () => void\n): void => {\n  const width = pageFormat?.width ?? CARD_DEFAULTS.width;\n  const isFluid = isFluidPageFormat(pageFormat);\n\n  cardElement.style.setProperty('--ricos-internal-card-width', `${width}px`);\n\n  if (isFluid) {\n    cardElement.style.removeProperty('--ricos-internal-card-height');\n    cardElement.classList.add(styles.fluid);\n    contentElement.classList.add(styles.fluidContent);\n    boundaryLineWrapper.classList.remove(styles.visible);\n    boundaryLineRenderer.updateProps({ visible: false, onSplit });\n  } else {\n    const height = pageFormat?.height ?? CARD_DEFAULTS.height;\n    cardElement.style.setProperty('--ricos-internal-card-height', `${height}px`);\n    cardElement.classList.remove(styles.fluid);\n    contentElement.classList.remove(styles.fluidContent);\n\n    // Check if content overflows the defined height\n    // scrollHeight includes the element's padding, so compare directly to card height\n    const isOverflowing = !hideBoundaryLine && contentElement.scrollHeight > height;\n    boundaryLineWrapper.classList.toggle(styles.visible, isOverflowing);\n    boundaryLineRenderer.updateProps({ visible: isOverflowing, onSplit });\n  }\n};\n\ntype CreateCardNodeViewOptions = {\n  renderCardHeader?: FC<CardHeaderProps>;\n  isMobile?: boolean;\n  getBoundaryWarningPortal?: () => HTMLElement | null;\n};\n\nexport const createCardNodeView = (options: CreateCardNodeViewOptions): NodeViewRenderer => {\n  const { renderCardHeader, isMobile, getBoundaryWarningPortal } = options;\n\n  return ({ node, editor, getPos }) => {\n    let currentNode = node;\n\n    // Create wrapper to hold header + card + gap\n    const cardWrapper = document.createElement('div');\n    cardWrapper.className = styles.cardWrapper;\n\n    // Header container for React component\n    let headerContainer: HTMLDivElement | null = null;\n    let headerRenderer: ReactRenderer<CardHeaderProps> | null = null;\n\n    // Helper to calculate current card index, accounting for pending AI insertions\n    const getCardIndex = (): number => {\n      const doc = editor.state.doc;\n      const cardPos = getPos();\n      if (typeof cardPos !== 'number') {\n        return 0;\n      }\n\n      let currentIndex = 0;\n      let found = false;\n      doc.forEach((docNode, pos) => {\n        if (found) {\n          return;\n        }\n        if (docNode.type.name === 'CARD') {\n          currentIndex++;\n          if (pos === cardPos) {\n            found = true;\n          }\n        }\n      });\n\n      // Shift index for any pending AI-inserted cards that precede this card\n      const pendingInsertions = getCardStorage(editor).pendingCardInsertions;\n      for (const insertion of pendingInsertions) {\n        // insertion.afterCardIndex is 0-based; currentIndex is 1-based\n        if (insertion.afterCardIndex < currentIndex) {\n          currentIndex += insertion.count;\n        }\n      }\n\n      return currentIndex;\n    };\n\n    const getIsLastCard = (): boolean => {\n      const doc = editor.state.doc;\n      const cardPos = getPos();\n      if (typeof cardPos !== 'number') {\n        return true;\n      }\n\n      let isLast = true;\n      let foundCurrent = false;\n      doc.forEach((docNode, pos) => {\n        if (docNode.type.name === 'CARD') {\n          if (foundCurrent) {\n            isLast = false;\n            return;\n          }\n          if (pos === cardPos) {\n            foundCurrent = true;\n          }\n        }\n      });\n\n      return isLast;\n    };\n\n    // Setup header renderer if renderCardHeader is provided\n    if (renderCardHeader) {\n      headerContainer = document.createElement('div');\n      headerContainer.setAttribute('contenteditable', 'false');\n      headerContainer.className = styles.cardHeaderContainer;\n\n      headerRenderer = new ReactRenderer(renderCardHeader, {\n        editor,\n        props: {\n          cardNode: currentNode,\n          index: getCardIndex(),\n        },\n      });\n\n      headerContainer.appendChild(headerRenderer.element);\n      cardWrapper.appendChild(headerContainer);\n    }\n\n    const cardElement = document.createElement('div');\n    cardElement.setAttribute('data-card-container', 'true');\n    cardElement.setAttribute('data-card-id', currentNode.attrs.id);\n    cardElement.className = styles.cardContainer;\n\n    // CARD's contentDOM — PM mounts CARD_CONTENT and (optionally) CARD_FOOTER child NodeViews here.\n    const contentElement = document.createElement('div');\n    contentElement.className = styles.cardContent;\n\n    // Boundary line element - positioned at the card height\n    const boundaryLineWrapper = document.createElement('div');\n    boundaryLineWrapper.setAttribute('contenteditable', 'false');\n    boundaryLineWrapper.className = styles.cardBoundaryLineWrapper;\n\n    const handleSplitAtBoundary = (): void => {\n      const lineRect = boundaryLineWrapper.getBoundingClientRect();\n      const posResult = editor.view.posAtCoords({\n        left: lineRect.left + lineRect.width,\n        top: lineRect.top - 30,\n      });\n      if (posResult) {\n        editor.commands.splitCardAtPos(posResult.pos);\n      }\n    };\n\n    const boundaryLineRenderer = new ReactRenderer(BoundaryLine, {\n      editor,\n      props: { visible: false, onSplit: handleSplitAtBoundary, getBoundaryWarningPortal },\n    });\n    boundaryLineWrapper.appendChild(boundaryLineRenderer.element);\n\n    // Selection SVG overlay\n    const selectionSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n    selectionSvg.setAttribute('width', '100%');\n    selectionSvg.setAttribute('height', '100%');\n    selectionSvg.setAttribute('class', styles.selectionSvg);\n\n    const selectionRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n    selectionRect.setAttribute('width', '100%');\n    selectionRect.setAttribute('height', '100%');\n    selectionRect.setAttribute('class', styles.selectionRect);\n    selectionSvg.appendChild(selectionRect);\n\n    cardElement.append(contentElement, boundaryLineWrapper, selectionSvg);\n\n    // Gap element with add button\n    const cardGap = document.createElement('div');\n    cardGap.className = styles.cardGap;\n    cardGap.setAttribute('contenteditable', 'false');\n\n    const updateLastCardClass = (): void => {\n      const isLast = getIsLastCard();\n      cardElement.classList.toggle(styles.last, isLast);\n      cardGap.classList.toggle(styles.last, isLast);\n    };\n    updateLastCardClass();\n\n    const handleAddPage = (): void => {\n      const pos = getPos();\n      if (typeof pos === 'number') {\n        const insertPos = pos + currentNode.nodeSize;\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(insertPos, {\n            type: 'CARD',\n            content: [\n              {\n                type: TIPTAP_CARD_CONTENT_TYPE,\n                content: [{ type: 'PARAGRAPH' }],\n              },\n            ],\n          })\n          .run();\n      }\n    };\n\n    const handleMergePages = (): void => {\n      cardGap.classList.remove(styles.mergeHover);\n      const cardPos = getPos();\n      if (typeof cardPos === 'number') {\n        let cardIdx = -1;\n        let current = 0;\n        editor.state.doc.forEach((docNode, offset) => {\n          if (docNode.type.name === 'CARD') {\n            if (offset === cardPos) {\n              cardIdx = current;\n            }\n            current++;\n          }\n        });\n        if (cardIdx >= 0) {\n          editor.chain().focus().mergeCardWithNext(cardIdx).run();\n        }\n      }\n    };\n\n    const handleMergeHoverChange = (isHovered: boolean): void => {\n      cardGap.classList.toggle(styles.mergeHover, isHovered);\n    };\n\n    const pageGapRenderer = new ReactRenderer(PageGap, {\n      editor,\n      props: {\n        onAddPage: handleAddPage,\n        onMergePages: handleMergePages,\n        onMergeHoverChange: handleMergeHoverChange,\n        isLastCard: getIsLastCard(),\n      },\n    });\n\n    cardGap.appendChild(pageGapRenderer.element);\n    cardWrapper.append(cardElement, cardGap);\n\n    // ResizeObserver to detect content changes and check overflow\n    const resizeObserver = new ResizeObserver(() => {\n      updateCardView(\n        cardElement,\n        contentElement,\n        boundaryLineWrapper,\n        boundaryLineRenderer,\n        getActivePageFormat(editor),\n        isMobile,\n        handleSplitAtBoundary\n      );\n    });\n\n    // Selection tracking - update selected class when selection changes and editor is focused\n    const updateSelectionState = (): void => {\n      const isSelected =\n        editor.isFocused && isSelectionInCard(editor, getPos, currentNode.nodeSize);\n      const className = isSelected\n        ? `${styles.selectionRect} ${styles.selectionRectActive}`\n        : styles.selectionRect;\n      selectionRect.setAttribute('class', className);\n    };\n\n    // Listen for selection updates and focus changes\n    editor.on('selectionUpdate', updateSelectionState);\n    editor.on('focus', updateSelectionState);\n    editor.on('blur', updateSelectionState);\n\n    // Update header, page gap, and last-card class when cards are added/removed\n    const updateHeaderIndex = (): void => {\n      if (headerRenderer) {\n        headerRenderer.updateProps({\n          cardNode: currentNode,\n          index: getCardIndex(),\n        });\n      }\n      pageGapRenderer.updateProps({\n        isLastCard: getIsLastCard(),\n      });\n      updateLastCardClass();\n    };\n\n    // Listen for document updates to re-render header when card count changes\n    editor.on('update', updateHeaderIndex);\n\n    // Register for page format changes to re-render card dimensions\n    const handlePageFormatChange = (): void => {\n      updateCardView(\n        cardElement,\n        contentElement,\n        boundaryLineWrapper,\n        boundaryLineRenderer,\n        getActivePageFormat(editor),\n        isMobile,\n        handleSplitAtBoundary\n      );\n    };\n    getCardStorage(editor).onPageFormatChange.add(handlePageFormatChange);\n\n    // Re-render header when pending AI card insertions change\n    getCardStorage(editor).onPendingCardInsertionsChange.add(updateHeaderIndex);\n\n    // Initial update\n    updateCardView(\n      cardElement,\n      contentElement,\n      boundaryLineWrapper,\n      boundaryLineRenderer,\n      getActivePageFormat(editor),\n      undefined,\n      handleSplitAtBoundary\n    );\n    updateCardBackgroundStyles(cardElement, currentNode);\n    updateSelectionState();\n\n    let destroyed = false;\n\n    // Start observing after a frame to ensure content is rendered\n    requestAnimationFrame(() => {\n      if (!destroyed) {\n        resizeObserver.observe(contentElement);\n      }\n    });\n\n    return {\n      dom: cardWrapper,\n      contentDOM: contentElement,\n      update: (newNode: PmNode) => {\n        if (newNode.type !== currentNode.type) {\n          return false;\n        }\n\n        currentNode = newNode;\n\n        cardElement.setAttribute('data-card-id', newNode.attrs.id);\n\n        updateCardView(\n          cardElement,\n          contentElement,\n          boundaryLineWrapper,\n          boundaryLineRenderer,\n          getActivePageFormat(editor),\n          undefined,\n          handleSplitAtBoundary\n        );\n        updateCardBackgroundStyles(cardElement, currentNode);\n\n        // Update header renderer props\n        if (headerRenderer) {\n          headerRenderer.updateProps({\n            cardNode: currentNode,\n            index: getCardIndex(),\n          });\n        }\n\n        // Update page gap visibility of merge button and last-card class\n        pageGapRenderer.updateProps({\n          isLastCard: getIsLastCard(),\n        });\n        updateLastCardClass();\n\n        return true;\n      },\n      ignoreMutation: (mutation: MutationRecord | { type: 'selection'; target: Node }) => {\n        // Ignore mutations on the wrapper\n        const isMutatingWrapper = mutation.target === cardWrapper;\n\n        // Ignore mutations on the header container\n        const isMutatingHeader =\n          headerContainer &&\n          (mutation.target === headerContainer ||\n            headerContainer.contains(mutation.target as Node));\n\n        // Ignore mutations on the card container's attributes (data-*, style, class)\n        const isMutatingCardAttributes =\n          mutation.target === cardElement && mutation.type === 'attributes';\n\n        // Ignore mutations on the boundary line (class toggling for visibility)\n        const isMutatingBoundaryLine =\n          mutation.target === boundaryLineWrapper ||\n          boundaryLineWrapper.contains(mutation.target as Node);\n\n        // Ignore mutations on the gap and add button\n        const isMutatingGap =\n          mutation.target === cardGap || cardGap.contains(mutation.target as Node);\n\n        // Ignore mutations on the selection SVG (class toggling for selection state)\n        const isMutatingSelectionSvg =\n          mutation.target === selectionSvg || mutation.target === selectionRect;\n\n        // Ignore data attribute mutations\n        const isMutatingDataAttribute =\n          mutation.type === 'attributes' && mutation.attributeName?.startsWith('data-');\n\n        // Ignore style attribute mutations\n        const isMutatingStyle =\n          mutation.type === 'attributes' && mutation.attributeName === 'style';\n\n        // Ignore class attribute mutations\n        const isMutatingClass =\n          mutation.type === 'attributes' && mutation.attributeName === 'class';\n\n        return (\n          isMutatingWrapper ||\n          isMutatingHeader ||\n          isMutatingCardAttributes ||\n          isMutatingBoundaryLine ||\n          isMutatingGap ||\n          isMutatingSelectionSvg ||\n          isMutatingDataAttribute ||\n          isMutatingStyle ||\n          isMutatingClass\n        );\n      },\n      destroy: () => {\n        destroyed = true;\n        resizeObserver.disconnect();\n        editor.off('selectionUpdate', updateSelectionState);\n        editor.off('focus', updateSelectionState);\n        editor.off('blur', updateSelectionState);\n        editor.off('update', updateHeaderIndex);\n        getCardStorage(editor).onPageFormatChange.delete(handlePageFormatChange);\n        getCardStorage(editor).onPendingCardInsertionsChange.delete(updateHeaderIndex);\n        boundaryLineRenderer.destroy();\n        pageGapRenderer.destroy();\n        if (headerRenderer) {\n          headerRenderer.destroy();\n        }\n      },\n    };\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { FC } from 'react';\n\nimport { TIPTAP_CARD_CONTENT_TYPE, TIPTAP_CARD_TYPE } from './../ricos-content/index.js';\nimport type { BackgroundImage, Background } from './../ricos-schema/next-schema/index.js';\nimport { resolveBackwardCompatOverlay } from './../_shared/resolve-backward-compat-overlay.js';\nimport type { Editor, NodeViewRenderer } from './../tiptap/core/index.js';\nimport type { Node as PmNode } from './../tiptap/pm/model.js';\nimport { ReactRenderer } from './../tiptap/react/index.js';\nimport { getImageSrc } from './../wix-rich-content-common/lib/image-utils.js';\n\nimport { gradientToCss } from '../_shared/gradient-to-css.js';\nimport { hexToRgba } from '../theme-utils/color-utils.js';\nimport type { BoundaryLineProps } from './boundary-warning.js';\nimport { BoundaryLine } from './boundary-warning.js';\nimport styles from './card-scss.js';\nimport { PageGap } from './page-gap.js';\nimport {\n  CARD_DEFAULTS,\n  getCardBackgroundColorCssVar,\n  isTransparentCardBackgroundColor,\n} from './shared-with-viewer.js';\nimport type {\n  AddPageButtonProps,\n  CardHeaderProps,\n  CardFormat,\n  CardExtensionStorage,\n} from './types.js';\n\n// Helper to check if selection intersects with a card node\nconst isSelectionInCard = (\n  editor: Editor,\n  getPos: () => number | undefined,\n  nodeSize: number\n): boolean => {\n  const pos = getPos();\n  if (typeof pos !== 'number') {\n    return false;\n  }\n\n  const { from, to } = editor.state.selection;\n  const cardStart = pos;\n  const cardEnd = pos + nodeSize;\n\n  // Check if selection intersects with the card range\n  return from < cardEnd && to > cardStart;\n};\n\nconst isFluidPageFormat = (pageFormat: CardFormat | undefined): boolean =>\n  pageFormat !== undefined && pageFormat.height === undefined;\n\nconst getCardStorage = (editor: Editor): CardExtensionStorage =>\n  editor.storage[TIPTAP_CARD_TYPE] as CardExtensionStorage;\n\nconst getActivePageFormat = (editor: Editor): CardFormat | undefined =>\n  getCardStorage(editor)?.activePageFormat;\n\nconst setOrRemove = (el: HTMLElement, prop: string, value: string | undefined): void => {\n  if (value !== undefined) {\n    el.style.setProperty(prop, value);\n  } else {\n    el.style.removeProperty(prop);\n  }\n};\n\nconst updateCardBackgroundStyles = (cardElement: HTMLDivElement, node: PmNode): void => {\n  const background: Background | undefined = node.attrs.background;\n  const backgroundImage: BackgroundImage | undefined = node.attrs.backgroundImage;\n\n  // When any explicit background is set, block theme inheritance for all layers.\n  // Zero-alpha color is the \"cleared\" state — it should inherit from theme.\n  const isTransparentColor =\n    background?.type === 'COLOR' && isTransparentCardBackgroundColor(background.color);\n  const hasExplicitBackground = (!!background && !isTransparentColor) || !!backgroundImage;\n\n  // When an image is set, `background` plays the role of the *overlay* (on top\n  // of the image). Otherwise it's the card fill (color or gradient).\n  if (backgroundImage) {\n    const imageUrl =\n      backgroundImage.media?.src.url ??\n      (backgroundImage.media?.src.id &&\n        getImageSrc({ file_name: backgroundImage.media.src.id }, undefined, {\n          requiredQuality: 100,\n          requiredWidth: Math.min(backgroundImage.media?.width ?? 4000, 4000),\n          requiredHeight: Math.min(backgroundImage.media?.height ?? 4000, 4000),\n        }));\n\n    setOrRemove(\n      cardElement,\n      '--ricos-internal-card-background-image',\n      imageUrl ? `url(${imageUrl})` : undefined\n    );\n    setOrRemove(\n      cardElement,\n      '--ricos-internal-card-background-size',\n      backgroundImage.scaling?.toLowerCase()\n    );\n    setOrRemove(\n      cardElement,\n      '--ricos-internal-card-background-position',\n      backgroundImage.position?.toLowerCase().split('_').join(' ')\n    );\n\n    // `backgroundImage.overlay` (new model) is authoritative when present; otherwise the legacy\n    // `background` fill doubles as the overlay through the opacity shim.\n    let overlay: string | undefined;\n    if (backgroundImage.overlay?.type === 'GRADIENT') {\n      overlay = gradientToCss(backgroundImage.overlay.gradient) || undefined;\n    } else if (backgroundImage.overlay?.type === 'COLOR') {\n      overlay = hexToRgba(backgroundImage.overlay.color);\n    } else if (background?.type === 'GRADIENT') {\n      overlay = gradientToCss(background.gradient) || undefined;\n    } else if (background?.type === 'COLOR' && !isTransparentColor) {\n      const resolved = resolveBackwardCompatOverlay(\n        background.color,\n        backgroundImage.opacity ?? 100,\n        100\n      );\n      overlay = hexToRgba(resolved);\n    }\n    setOrRemove(cardElement, '--ricos-internal-card-background-image-overlay', overlay);\n\n    // Color/gradient base layer is unused when an image is shown — clear stale vars\n    cardElement.style.removeProperty('--ricos-internal-card-background-color');\n    cardElement.style.removeProperty('--ricos-internal-card-background-gradient');\n    cardElement.style.removeProperty('--ricos-internal-card-background-image-opacity');\n  } else {\n    const gradientCss =\n      background?.type === 'GRADIENT' ? gradientToCss(background.gradient) : undefined;\n    // Color/gradient layer (container fill)\n    // Use 'transparent' to block theme color when card has explicit background but no color\n    setOrRemove(\n      cardElement,\n      '--ricos-internal-card-background-color',\n      getCardBackgroundColorCssVar(background, hasExplicitBackground)\n    );\n    setOrRemove(cardElement, '--ricos-internal-card-background-gradient', gradientCss || undefined);\n    cardElement.style.removeProperty('--ricos-internal-card-background-image-overlay');\n\n    if (hasExplicitBackground) {\n      // Card has explicit color/gradient but no image — block theme image with 'none'\n      cardElement.style.setProperty('--ricos-internal-card-background-image', 'none');\n    } else {\n      // No explicit background — remove internal var so theme applies\n      cardElement.style.removeProperty('--ricos-internal-card-background-image');\n    }\n    cardElement.style.removeProperty('--ricos-internal-card-background-size');\n    cardElement.style.removeProperty('--ricos-internal-card-background-position');\n    cardElement.style.removeProperty('--ricos-internal-card-background-image-opacity');\n  }\n};\n\nconst updateCardView = (\n  cardElement: HTMLDivElement,\n  contentElement: HTMLDivElement,\n  boundaryLineWrapper: HTMLDivElement,\n  boundaryLineRenderer: ReactRenderer<unknown, BoundaryLineProps>,\n  pageFormat: CardFormat | undefined,\n  hideBoundaryLine?: boolean,\n  onSplit?: () => void\n): void => {\n  const width = pageFormat?.width ?? CARD_DEFAULTS.width;\n  const isFluid = isFluidPageFormat(pageFormat);\n\n  cardElement.style.setProperty('--ricos-internal-card-width', `${width}px`);\n\n  if (isFluid) {\n    cardElement.style.removeProperty('--ricos-internal-card-height');\n    cardElement.classList.add(styles.fluid);\n    contentElement.classList.add(styles.fluidContent);\n    boundaryLineWrapper.classList.remove(styles.visible);\n    boundaryLineRenderer.updateProps({ visible: false, onSplit });\n  } else {\n    const height = pageFormat?.height ?? CARD_DEFAULTS.height;\n    cardElement.style.setProperty('--ricos-internal-card-height', `${height}px`);\n    cardElement.classList.remove(styles.fluid);\n    contentElement.classList.remove(styles.fluidContent);\n\n    // Check if content overflows the defined height\n    // scrollHeight includes the element's padding, so compare directly to card height\n    const isOverflowing = !hideBoundaryLine && contentElement.scrollHeight > height;\n    boundaryLineWrapper.classList.toggle(styles.visible, isOverflowing);\n    boundaryLineRenderer.updateProps({ visible: isOverflowing, onSplit });\n  }\n};\n\ntype CreateCardNodeViewOptions = {\n  renderCardHeader?: FC<CardHeaderProps>;\n  renderAddPageButton?: FC<AddPageButtonProps>;\n  isMobile?: boolean;\n  getBoundaryWarningPortal?: () => HTMLElement | null;\n  showPageControls?: boolean;\n};\n\nexport const createCardNodeView = (options: CreateCardNodeViewOptions): NodeViewRenderer => {\n  const {\n    renderCardHeader,\n    renderAddPageButton,\n    isMobile,\n    getBoundaryWarningPortal,\n    showPageControls = true,\n  } = options;\n\n  return ({ node, editor, getPos }) => {\n    let currentNode = node;\n\n    // Create wrapper to hold header + card + gap\n    const cardWrapper = document.createElement('div');\n    cardWrapper.className = styles.cardWrapper;\n\n    // Header container for React component\n    let headerContainer: HTMLDivElement | null = null;\n    let headerRenderer: ReactRenderer<CardHeaderProps> | null = null;\n\n    // 0-based card index, accounting for pending AI insertions\n    const getCardIndex = (): number => {\n      const cardPos = getPos();\n      if (typeof cardPos !== 'number') {\n        return 0;\n      }\n\n      // Every top-level node is a card (see card-normalizing.ts), so the child index is the card index\n      let index = editor.state.doc.resolve(cardPos).index(0);\n\n      // afterCardIndex counts the cards before the inserted ones, so cards at or past it move down\n      for (const insertion of getCardStorage(editor).pendingCardInsertions) {\n        if (insertion.afterCardIndex <= index) {\n          index += insertion.count;\n        }\n      }\n\n      return index;\n    };\n\n    const getIsLastCard = (): boolean => {\n      const doc = editor.state.doc;\n      const cardPos = getPos();\n      if (typeof cardPos !== 'number') {\n        return true;\n      }\n\n      let isLast = true;\n      let foundCurrent = false;\n      doc.forEach((docNode, pos) => {\n        if (docNode.type.name === 'CARD') {\n          if (foundCurrent) {\n            isLast = false;\n            return;\n          }\n          if (pos === cardPos) {\n            foundCurrent = true;\n          }\n        }\n      });\n\n      return isLast;\n    };\n\n    // Setup header renderer if renderCardHeader is provided\n    if (renderCardHeader) {\n      headerContainer = document.createElement('div');\n      headerContainer.setAttribute('contenteditable', 'false');\n      headerContainer.className = styles.cardHeaderContainer;\n\n      headerRenderer = new ReactRenderer(renderCardHeader, {\n        editor,\n        props: {\n          cardNode: currentNode,\n          // CardHeaderProps.index is the 1-based page number\n          index: getCardIndex() + 1,\n        },\n      });\n\n      headerContainer.appendChild(headerRenderer.element);\n      cardWrapper.appendChild(headerContainer);\n    }\n\n    const cardElement = document.createElement('div');\n    cardElement.setAttribute('data-card-container', 'true');\n    cardElement.setAttribute('data-card-id', currentNode.attrs.id);\n    cardElement.className = styles.cardContainer;\n\n    // CARD's contentDOM — PM mounts CARD_CONTENT and (optionally) CARD_FOOTER child NodeViews here.\n    const contentElement = document.createElement('div');\n    contentElement.className = styles.cardContent;\n\n    // Boundary line element - positioned at the card height\n    const boundaryLineWrapper = document.createElement('div');\n    boundaryLineWrapper.setAttribute('contenteditable', 'false');\n    boundaryLineWrapper.className = styles.cardBoundaryLineWrapper;\n\n    const handleSplitAtBoundary = (): void => {\n      const lineRect = boundaryLineWrapper.getBoundingClientRect();\n      const posResult = editor.view.posAtCoords({\n        left: lineRect.left + lineRect.width,\n        top: lineRect.top - 30,\n      });\n      if (posResult) {\n        editor.commands.splitCardAtPos(posResult.pos);\n      }\n    };\n\n    const boundaryLineRenderer = new ReactRenderer(BoundaryLine, {\n      editor,\n      props: { visible: false, onSplit: handleSplitAtBoundary, getBoundaryWarningPortal },\n    });\n    boundaryLineWrapper.appendChild(boundaryLineRenderer.element);\n\n    // Selection SVG overlay\n    const selectionSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n    selectionSvg.setAttribute('width', '100%');\n    selectionSvg.setAttribute('height', '100%');\n    selectionSvg.setAttribute('class', styles.selectionSvg);\n\n    const selectionRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n    selectionRect.setAttribute('width', '100%');\n    selectionRect.setAttribute('height', '100%');\n    selectionRect.setAttribute('class', styles.selectionRect);\n    selectionSvg.appendChild(selectionRect);\n\n    cardElement.append(contentElement, boundaryLineWrapper, selectionSvg);\n\n    // Gap element with add button. Without page controls it only spaces the pages apart, and\n    // the last page's gap is collapsed so the document ends at the bottom of its last page.\n    const cardGap = document.createElement('div');\n    cardGap.className = showPageControls\n      ? styles.cardGap\n      : `${styles.cardGap} ${styles.noControls}`;\n    cardGap.setAttribute('contenteditable', 'false');\n\n    const updateLastCardClass = (): void => {\n      const isLast = getIsLastCard();\n      cardElement.classList.toggle(styles.last, isLast);\n      cardGap.classList.toggle(styles.last, isLast);\n    };\n    updateLastCardClass();\n\n    const handleAddPage = (): void => {\n      const pos = getPos();\n      if (typeof pos === 'number') {\n        const insertPos = pos + currentNode.nodeSize;\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(insertPos, {\n            type: 'CARD',\n            content: [\n              {\n                type: TIPTAP_CARD_CONTENT_TYPE,\n                content: [{ type: 'PARAGRAPH' }],\n              },\n            ],\n          })\n          .run();\n      }\n    };\n\n    const handleMergePages = (): void => {\n      cardGap.classList.remove(styles.mergeHover);\n      const cardPos = getPos();\n      if (typeof cardPos === 'number') {\n        let cardIdx = -1;\n        let current = 0;\n        editor.state.doc.forEach((docNode, offset) => {\n          if (docNode.type.name === 'CARD') {\n            if (offset === cardPos) {\n              cardIdx = current;\n            }\n            current++;\n          }\n        });\n        if (cardIdx >= 0) {\n          editor.chain().focus().mergeCardWithNext(cardIdx).run();\n        }\n      }\n    };\n\n    const handleMergeHoverChange = (isHovered: boolean): void => {\n      cardGap.classList.toggle(styles.mergeHover, isHovered);\n    };\n\n    let pageGapState = { isLastCard: getIsLastCard(), index: getCardIndex() };\n\n    const pageGapRenderer = showPageControls\n      ? new ReactRenderer(PageGap, {\n          editor,\n          props: {\n            onAddPage: handleAddPage,\n            onMergePages: handleMergePages,\n            onMergeHoverChange: handleMergeHoverChange,\n            ...pageGapState,\n            renderAddPageButton,\n          },\n        })\n      : null;\n\n    // Called on every transaction. Re-render only when the props change:\n    // the gap renders the host's add page button.\n    const updatePageGap = (): void => {\n      if (!pageGapRenderer) {\n        return;\n      }\n      const isLastCard = getIsLastCard();\n      const index = getCardIndex();\n      if (isLastCard !== pageGapState.isLastCard || index !== pageGapState.index) {\n        pageGapState = { isLastCard, index };\n        pageGapRenderer.updateProps(pageGapState);\n      }\n    };\n\n    if (pageGapRenderer) {\n      cardGap.appendChild(pageGapRenderer.element);\n    }\n    cardWrapper.append(cardElement, cardGap);\n\n    // ResizeObserver to detect content changes and check overflow\n    const resizeObserver = new ResizeObserver(() => {\n      updateCardView(\n        cardElement,\n        contentElement,\n        boundaryLineWrapper,\n        boundaryLineRenderer,\n        getActivePageFormat(editor),\n        isMobile,\n        handleSplitAtBoundary\n      );\n    });\n\n    // Selection tracking - update selected class when selection changes and editor is focused\n    const updateSelectionState = (): void => {\n      const isSelected =\n        editor.isFocused && isSelectionInCard(editor, getPos, currentNode.nodeSize);\n      const className = isSelected\n        ? `${styles.selectionRect} ${styles.selectionRectActive}`\n        : styles.selectionRect;\n      selectionRect.setAttribute('class', className);\n    };\n\n    // Listen for selection updates and focus changes\n    editor.on('selectionUpdate', updateSelectionState);\n    editor.on('focus', updateSelectionState);\n    editor.on('blur', updateSelectionState);\n\n    // Update header, page gap, and last-card class when cards are added/removed\n    const updateHeaderIndex = (): void => {\n      if (headerRenderer) {\n        headerRenderer.updateProps({\n          cardNode: currentNode,\n          index: getCardIndex() + 1,\n        });\n      }\n      updatePageGap();\n      updateLastCardClass();\n    };\n\n    // Listen for document updates to re-render header when card count changes\n    editor.on('update', updateHeaderIndex);\n\n    // Register for page format changes to re-render card dimensions\n    const handlePageFormatChange = (): void => {\n      updateCardView(\n        cardElement,\n        contentElement,\n        boundaryLineWrapper,\n        boundaryLineRenderer,\n        getActivePageFormat(editor),\n        isMobile,\n        handleSplitAtBoundary\n      );\n    };\n    getCardStorage(editor).onPageFormatChange.add(handlePageFormatChange);\n\n    // Re-render header when pending AI card insertions change\n    getCardStorage(editor).onPendingCardInsertionsChange.add(updateHeaderIndex);\n\n    // Initial update\n    updateCardView(\n      cardElement,\n      contentElement,\n      boundaryLineWrapper,\n      boundaryLineRenderer,\n      getActivePageFormat(editor),\n      undefined,\n      handleSplitAtBoundary\n    );\n    updateCardBackgroundStyles(cardElement, currentNode);\n    updateSelectionState();\n\n    let destroyed = false;\n\n    // Start observing after a frame to ensure content is rendered\n    requestAnimationFrame(() => {\n      if (!destroyed) {\n        resizeObserver.observe(contentElement);\n      }\n    });\n\n    return {\n      dom: cardWrapper,\n      contentDOM: contentElement,\n      update: (newNode: PmNode) => {\n        if (newNode.type !== currentNode.type) {\n          return false;\n        }\n\n        currentNode = newNode;\n\n        cardElement.setAttribute('data-card-id', newNode.attrs.id);\n\n        updateCardView(\n          cardElement,\n          contentElement,\n          boundaryLineWrapper,\n          boundaryLineRenderer,\n          getActivePageFormat(editor),\n          undefined,\n          handleSplitAtBoundary\n        );\n        updateCardBackgroundStyles(cardElement, currentNode);\n\n        // Update header renderer props\n        if (headerRenderer) {\n          headerRenderer.updateProps({\n            cardNode: currentNode,\n            index: getCardIndex() + 1,\n          });\n        }\n\n        // Update page gap visibility of merge button and last-card class\n        updatePageGap();\n        updateLastCardClass();\n\n        return true;\n      },\n      ignoreMutation: (mutation: MutationRecord | { type: 'selection'; target: Node }) => {\n        // Ignore mutations on the wrapper\n        const isMutatingWrapper = mutation.target === cardWrapper;\n\n        // Ignore mutations on the header container\n        const isMutatingHeader =\n          headerContainer &&\n          (mutation.target === headerContainer ||\n            headerContainer.contains(mutation.target as Node));\n\n        // Ignore mutations on the card container's attributes (data-*, style, class)\n        const isMutatingCardAttributes =\n          mutation.target === cardElement && mutation.type === 'attributes';\n\n        // Ignore mutations on the boundary line (class toggling for visibility)\n        const isMutatingBoundaryLine =\n          mutation.target === boundaryLineWrapper ||\n          boundaryLineWrapper.contains(mutation.target as Node);\n\n        // Ignore mutations on the gap and add button\n        const isMutatingGap =\n          mutation.target === cardGap || cardGap.contains(mutation.target as Node);\n\n        // Ignore mutations on the selection SVG (class toggling for selection state)\n        const isMutatingSelectionSvg =\n          mutation.target === selectionSvg || mutation.target === selectionRect;\n\n        // Ignore data attribute mutations\n        const isMutatingDataAttribute =\n          mutation.type === 'attributes' && mutation.attributeName?.startsWith('data-');\n\n        // Ignore style attribute mutations\n        const isMutatingStyle =\n          mutation.type === 'attributes' && mutation.attributeName === 'style';\n\n        // Ignore class attribute mutations\n        const isMutatingClass =\n          mutation.type === 'attributes' && mutation.attributeName === 'class';\n\n        return (\n          isMutatingWrapper ||\n          isMutatingHeader ||\n          isMutatingCardAttributes ||\n          isMutatingBoundaryLine ||\n          isMutatingGap ||\n          isMutatingSelectionSvg ||\n          isMutatingDataAttribute ||\n          isMutatingStyle ||\n          isMutatingClass\n        );\n      },\n      destroy: () => {\n        destroyed = true;\n        resizeObserver.disconnect();\n        editor.off('selectionUpdate', updateSelectionState);\n        editor.off('focus', updateSelectionState);\n        editor.off('blur', updateSelectionState);\n        editor.off('update', updateHeaderIndex);\n        getCardStorage(editor).onPageFormatChange.delete(handlePageFormatChange);\n        getCardStorage(editor).onPendingCardInsertionsChange.delete(updateHeaderIndex);\n        boundaryLineRenderer.destroy();\n        pageGapRenderer?.destroy();\n        if (headerRenderer) {\n          headerRenderer.destroy();\n        }\n      },\n    };\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-card/card-scss.js

@@ -1,23 +1,24 @@
 var card_default = {
-  "cardWrapper": "bh5Rx",
-  "cardGap": "SZG9T",
-  "cardHeaderContainer": "BCOdF",
-  "cardContainer": "id5Z2",
-  "fluid": "_5gRte",
-  "selectionSvg": "AOist",
-  "selectionRect": "yUESe",
-  "selectionRectActive": "_18tPy",
-  "last": "dgih7",
-  "cardGapAddButtonWrapper": "Jowy0",
-  "mergeHover": "QQXc5",
-  "cardContent": "X-DuU",
-  "fluidContent": "yR7bZ",
-  "cardBoundaryLineWrapper": "gPfu-",
-  "visible": "-qmF0",
-  "cardBoundaryLineContent": "ISA-G",
-  "hovered": "ywTaA",
-  "cardBoundaryLine": "jJZJ0",
-  "cardBoundaryWarning": "TDIE1"
+  "cardWrapper": "_3ogaE",
+  "cardGap": "a-liW",
+  "cardHeaderContainer": "AYSNJ",
+  "cardContainer": "fu1Ai",
+  "fluid": "fE825",
+  "selectionSvg": "vJipu",
+  "selectionRect": "TNezl",
+  "selectionRectActive": "Buhs-",
+  "last": "Zj6qk",
+  "noControls": "ZYJ-g",
+  "cardGapAddButtonWrapper": "oVUzN",
+  "mergeHover": "PCrze",
+  "cardContent": "YDwa8",
+  "fluidContent": "to012",
+  "cardBoundaryLineWrapper": "_9HkoH",
+  "visible": "c-7rv",
+  "cardBoundaryLineContent": "Ja0uf",
+  "hovered": "UlpDh",
+  "cardBoundaryLine": "_4qo-X",
+  "cardBoundaryWarning": "bed9j"
 };
 export {
   card_default as default

package/dist/es/plugin-card/card-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-card/card.scss"],
-  "sourcesContent": ["export default {\n  \"cardWrapper\": \"bh5Rx\",\n  \"cardGap\": \"SZG9T\",\n  \"cardHeaderContainer\": \"BCOdF\",\n  \"cardContainer\": \"id5Z2\",\n  \"fluid\": \"_5gRte\",\n  \"selectionSvg\": \"AOist\",\n  \"selectionRect\": \"yUESe\",\n  \"selectionRectActive\": \"_18tPy\",\n  \"last\": \"dgih7\",\n  \"cardGapAddButtonWrapper\": \"Jowy0\",\n  \"mergeHover\": \"QQXc5\",\n  \"cardContent\": \"X-DuU\",\n  \"fluidContent\": \"yR7bZ\",\n  \"cardBoundaryLineWrapper\": \"gPfu-\",\n  \"visible\": \"-qmF0\",\n  \"cardBoundaryLineContent\": \"ISA-G\",\n  \"hovered\": \"ywTaA\",\n  \"cardBoundaryLine\": \"jJZJ0\",\n  \"cardBoundaryWarning\": \"TDIE1\"\n};"],
-  "mappings": "AAAA,IAAO,eAAQ;AAAA,EACb,eAAe;AAAA,EACf,WAAW;AAAA,EACX,uBAAuB;AAAA,EACvB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,2BAA2B;AAAA,EAC3B,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,uBAAuB;AACzB;",
+  "sourcesContent": ["export default {\n  \"cardWrapper\": \"_3ogaE\",\n  \"cardGap\": \"a-liW\",\n  \"cardHeaderContainer\": \"AYSNJ\",\n  \"cardContainer\": \"fu1Ai\",\n  \"fluid\": \"fE825\",\n  \"selectionSvg\": \"vJipu\",\n  \"selectionRect\": \"TNezl\",\n  \"selectionRectActive\": \"Buhs-\",\n  \"last\": \"Zj6qk\",\n  \"noControls\": \"ZYJ-g\",\n  \"cardGapAddButtonWrapper\": \"oVUzN\",\n  \"mergeHover\": \"PCrze\",\n  \"cardContent\": \"YDwa8\",\n  \"fluidContent\": \"to012\",\n  \"cardBoundaryLineWrapper\": \"_9HkoH\",\n  \"visible\": \"c-7rv\",\n  \"cardBoundaryLineContent\": \"Ja0uf\",\n  \"hovered\": \"UlpDh\",\n  \"cardBoundaryLine\": \"_4qo-X\",\n  \"cardBoundaryWarning\": \"bed9j\"\n};"],
+  "mappings": "AAAA,IAAO,eAAQ;AAAA,EACb,eAAe;AAAA,EACf,WAAW;AAAA,EACX,uBAAuB;AAAA,EACvB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,2BAA2B;AAAA,EAC3B,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,uBAAuB;AACzB;",
   "names": []
 }

package/dist/es/plugin-card/card-viewer-scss.js

@@ -1,10 +1,10 @@
 var card_viewer_default = {
-  "cardWrapper": "_6z1m2",
-  "cardContainer": "r-Wlt",
-  "cardContent": "xUgON",
-  "pageSeparator": "U3vsd",
-  "fluid": "wnK2H",
-  "print": "_1BH9b"
+  "cardWrapper": "b9Ehg",
+  "cardContainer": "h6f5p",
+  "cardContent": "ODVzI",
+  "pageSeparator": "tsuXi",
+  "fluid": "vnZ7J",
+  "print": "VvCBD"
 };
 export {
   card_viewer_default as default

package/dist/es/plugin-card/card-viewer-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-card/card-viewer.scss"],
-  "sourcesContent": ["export default {\n  \"cardWrapper\": \"_6z1m2\",\n  \"cardContainer\": \"r-Wlt\",\n  \"cardContent\": \"xUgON\",\n  \"pageSeparator\": \"U3vsd\",\n  \"fluid\": \"wnK2H\",\n  \"print\": \"_1BH9b\"\n};"],
+  "sourcesContent": ["export default {\n  \"cardWrapper\": \"b9Ehg\",\n  \"cardContainer\": \"h6f5p\",\n  \"cardContent\": \"ODVzI\",\n  \"pageSeparator\": \"tsuXi\",\n  \"fluid\": \"vnZ7J\",\n  \"print\": \"VvCBD\"\n};"],
   "mappings": "AAAA,IAAO,sBAAQ;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,SAAS;AACX;",
   "names": []
 }

package/dist/es/plugin-card/extension.js

@@ -55,8 +55,10 @@ const cardExtension = createRicosNodeExtension({
         const services = this.options._services;
         return createCardNodeView({
           renderCardHeader: this.options.renderCardHeader,
+          renderAddPageButton: this.options.renderAddPageButton,
           isMobile: services?.context.isMobile,
-          getBoundaryWarningPortal: this.options.getBoundaryWarningPortal
+          getBoundaryWarningPortal: this.options.getBoundaryWarningPortal,
+          showPageControls: this.options.showPageControls
         });
       },
       addAttributes: () => ({