@wix/ricos 10.110.0 → 10.111.0

package/dist/es/plugin-image/statics/styles/image-settings-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-image/statics/styles/image-settings.scss"],
-  "sourcesContent": ["var styleDataHash = '564bc9fe';  \nexport const injectCss = (() => {\n  var css = `._02rMl{color:var(--ricos-settings-text-color,#333);display:flex;flex:1 1 auto;flex-direction:column;position:unset;z-index:5}[dir] ._02rMl{background:#fff}[dir=ltr] ._02rMl{left:0;right:0;text-align:left}[dir=rtl] ._02rMl{left:0;right:0;text-align:right}.X8O-W{font-size:20px;position:absolute}[dir=ltr] .X8O-W{margin:24px 0 24px 24px}[dir=rtl] .X8O-W{margin:24px 24px 24px 0}[dir] .Ek2VC{padding:0 24px}@supports not (contain:inline-size){@media only screen and (max-width:640px){[dir] .Ek2VC{padding:20px 20px 0}}}@container (width < 640px){[dir] .Ek2VC{padding:20px 20px 0}}.A8x1J{display:flex;height:240px;justify-content:center;width:100%}[dir] .A8x1J{background-color:rgba(51,51,51,.1)}._7yU0U{font-size:14px;position:relative}[dir] ._7yU0U{padding:20px 0 0}[dir] .iv5OM{margin-bottom:5px}.PqeeT{height:calc(100% - 170px);overflow:scroll;position:absolute;top:70px;width:100%}[dir] .PqeeT{margin:0;padding-bottom:30px}@supports not (contain:inline-size){@media only screen and (max-width:640px){.PqeeT{height:calc(100% - 50px);top:50px}}}@container (width < 640px){.PqeeT{height:calc(100% - 50px);top:50px}}[dir] .UPiXq{padding:0 24px}@supports not (contain:inline-size){@media only screen and (max-width:640px){[dir] .UPiXq{padding:0 20px}}}@container (width < 640px){[dir] .UPiXq{padding:0 20px}}[dir] .J2PAc{margin:0 auto}.O4Ghq{z-index:6}.qc1gl{visibility:hidden}`;\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  \"imageSettings\": \"_02rMl\",\n  \"imageSettingsTitle\": \"X8O-W\",\n  \"imageSettingsImageSection\": \"Ek2VC\",\n  \"imageSettingsImage\": \"A8x1J\",\n  \"imageSettingsSection\": \"_7yU0U\",\n  \"imageSettingsLabel\": \"iv5OM\",\n  \"imageSettings_scrollContainer\": \"PqeeT\",\n  \"imageSettings_inputsWrapper\": \"UPiXq\",\n  \"imageSettings_mobile\": \"J2PAc\",\n  \"imageSettings_footer\": \"O4Ghq\",\n  \"imageSettings_hidden\": \"qc1gl\"\n};"],
+  "sourcesContent": ["var styleDataHash = '98139ec1';  \nexport const injectCss = (() => {\n  var css = `.YDbzX{color:var(--ricos-settings-text-color,#333);display:flex;flex:1 1 auto;flex-direction:column;position:unset;z-index:5}[dir] .YDbzX{background:#fff}[dir=ltr] .YDbzX{left:0;right:0;text-align:left}[dir=rtl] .YDbzX{left:0;right:0;text-align:right}.-IgEi{font-size:20px;position:absolute}[dir=ltr] .-IgEi{margin:24px 0 24px 24px}[dir=rtl] .-IgEi{margin:24px 24px 24px 0}[dir] .NSZwe{padding:0 24px}@supports not (contain:inline-size){@media only screen and (max-width:640px){[dir] .NSZwe{padding:20px 20px 0}}}@container (width < 640px){[dir] .NSZwe{padding:20px 20px 0}}.Geulr{display:flex;height:240px;justify-content:center;width:100%}[dir] .Geulr{background-color:rgba(51,51,51,.1)}.qfFI-{font-size:14px;position:relative}[dir] .qfFI-{padding:20px 0 0}[dir] .fYc1n{margin-bottom:5px}.-dfIl{height:calc(100% - 170px);overflow:scroll;position:absolute;top:70px;width:100%}[dir] .-dfIl{margin:0;padding-bottom:30px}@supports not (contain:inline-size){@media only screen and (max-width:640px){.-dfIl{height:calc(100% - 50px);top:50px}}}@container (width < 640px){.-dfIl{height:calc(100% - 50px);top:50px}}[dir] .FQsw9{padding:0 24px}@supports not (contain:inline-size){@media only screen and (max-width:640px){[dir] .FQsw9{padding:0 20px}}}@container (width < 640px){[dir] .FQsw9{padding:0 20px}}[dir] .LgAwR{margin:0 auto}.-IMC4{z-index:6}.lVXg4{visibility:hidden}`;\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  \"imageSettings\": \"YDbzX\",\n  \"imageSettingsTitle\": \"-IgEi\",\n  \"imageSettingsImageSection\": \"NSZwe\",\n  \"imageSettingsImage\": \"Geulr\",\n  \"imageSettingsSection\": \"qfFI-\",\n  \"imageSettingsLabel\": \"fYc1n\",\n  \"imageSettings_scrollContainer\": \"-dfIl\",\n  \"imageSettings_inputsWrapper\": \"FQsw9\",\n  \"imageSettings_mobile\": \"LgAwR\",\n  \"imageSettings_footer\": \"-IMC4\",\n  \"imageSettings_hidden\": \"lVXg4\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,YAAa,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,yBAAQ;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,6BAA6B;AAAA,EAC7B,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,+BAA+B;AAAA,EAC/B,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAC1B;",
   "names": []
 }

package/dist/es/plugin-image/statics/styles/image-viewer.rtlignore-scss.js

@@ -1,18 +1,18 @@
 var image_viewer_rtlignore_default = {
-  "fontElementMap": "De-F5",
-  "imageFigure": "Cp7qz",
-  "imageContainer": "hlGHG",
-  "expandContainer": "hkDxm",
-  "expandIcon": "cghlv",
-  "pointer": "SLc47",
-  "imageWrapper": "HZ7Ax",
-  "imageRatio": "Qp-EL",
-  "image": "F-jUg",
-  "imageOverlay": "qxQo1",
-  "imagePreload": "_29Dnv",
-  "imageHighres": "_76Z1l",
-  "onlyHighRes": "tSQre",
-  "image_loading": "ac9pa"
+  "fontElementMap": "hsAPH",
+  "imageFigure": "qK26Y",
+  "imageContainer": "xyVjO",
+  "expandContainer": "Gb4Pq",
+  "expandIcon": "R-zhL",
+  "pointer": "q-T4y",
+  "imageWrapper": "ghlRt",
+  "imageRatio": "H-Rgv",
+  "image": "_8n2Kn",
+  "imageOverlay": "ywc-A",
+  "imagePreload": "hVy9U",
+  "imageHighres": "Ca-wf",
+  "onlyHighRes": "GiCUb",
+  "image_loading": "eLk5L"
 };
 export {
   image_viewer_rtlignore_default as default

package/dist/es/plugin-image/statics/styles/image-viewer.rtlignore-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-image/statics/styles/image-viewer.rtlignore.scss"],
-  "sourcesContent": ["export default {\n  \"fontElementMap\": \"De-F5\",\n  \"imageFigure\": \"Cp7qz\",\n  \"imageContainer\": \"hlGHG\",\n  \"expandContainer\": \"hkDxm\",\n  \"expandIcon\": \"cghlv\",\n  \"pointer\": \"SLc47\",\n  \"imageWrapper\": \"HZ7Ax\",\n  \"imageRatio\": \"Qp-EL\",\n  \"image\": \"F-jUg\",\n  \"imageOverlay\": \"qxQo1\",\n  \"imagePreload\": \"_29Dnv\",\n  \"imageHighres\": \"_76Z1l\",\n  \"onlyHighRes\": \"tSQre\",\n  \"image_loading\": \"ac9pa\"\n};"],
+  "sourcesContent": ["export default {\n  \"fontElementMap\": \"hsAPH\",\n  \"imageFigure\": \"qK26Y\",\n  \"imageContainer\": \"xyVjO\",\n  \"expandContainer\": \"Gb4Pq\",\n  \"expandIcon\": \"R-zhL\",\n  \"pointer\": \"q-T4y\",\n  \"imageWrapper\": \"ghlRt\",\n  \"imageRatio\": \"H-Rgv\",\n  \"image\": \"_8n2Kn\",\n  \"imageOverlay\": \"ywc-A\",\n  \"imagePreload\": \"hVy9U\",\n  \"imageHighres\": \"Ca-wf\",\n  \"onlyHighRes\": \"GiCUb\",\n  \"image_loading\": \"eLk5L\"\n};"],
   "mappings": "AAAA,IAAO,iCAAQ;AAAA,EACb,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,iBAAiB;AACnB;",
   "names": []
 }

package/dist/es/plugin-image/statics/styles/in-plugin-input-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "73835115";
+var styleDataHash = "92071c41";
 const injectCss = () => {
-  var css = `.glob_fontElementMap,.teHZ4{font-family:var(--ricos-font-family,unset)}.wKJRm{color:var(--ricos-custom-p-color,unset);color:var(--ricos-custom-p-color,var(--ricos-text-color,#212121));line-height:21px;font:inherit;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);font-size:14px;font-style:var(--ricos-custom-p-font-style,unset);font-weight:var(--ricos-custom-p-font-weight,unset);line-height:var(--ricos-custom-p-line-height,unset);min-height:var(--ricos-custom-p-min-height,unset);position:inherit;resize:none;text-decoration:var(--ricos-custom-p-text-decoration,unset);width:100%;z-index:1}[dir] .wKJRm{border:none}[dir] .wKJRm>span>a,[dir] .wKJRm>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){.wKJRm{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){.wKJRm{font-size:var(--ricos-custom-p-font-size,unset)}}[dir] .wKJRm[readonly]{cursor:pointer}`;
+  var css = `.Cmfsg,.glob_fontElementMap{font-family:var(--ricos-font-family,unset)}._9-H0Y{color:var(--ricos-custom-p-color,unset);color:var(--ricos-custom-p-color,var(--ricos-text-color,#212121));line-height:21px;font:inherit;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);font-size:14px;font-style:var(--ricos-custom-p-font-style,unset);font-weight:var(--ricos-custom-p-font-weight,unset);line-height:var(--ricos-custom-p-line-height,unset);min-height:var(--ricos-custom-p-min-height,unset);position:inherit;resize:none;text-decoration:var(--ricos-custom-p-text-decoration,unset);width:100%;z-index:1}[dir] ._9-H0Y{border:none}[dir] ._9-H0Y>span>a,[dir] ._9-H0Y>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){._9-H0Y{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){._9-H0Y{font-size:var(--ricos-custom-p-font-size,unset)}}[dir] ._9-H0Y[readonly]{cursor:pointer}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,8 +21,8 @@ const injectCss = () => {
 };
 injectCss();
 var in_plugin_input_default = {
-  "fontElementMap": "teHZ4",
-  "inPluginInput": "wKJRm"
+  "fontElementMap": "Cmfsg",
+  "inPluginInput": "_9-H0Y"
 };
 export {
   in_plugin_input_default as default,

package/dist/es/plugin-image/statics/styles/in-plugin-input-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-image/statics/styles/in-plugin-input.scss"],
-  "sourcesContent": ["var styleDataHash = '73835115';  \nexport const injectCss = (() => {\n  var css = `.glob_fontElementMap,.teHZ4{font-family:var(--ricos-font-family,unset)}.wKJRm{color:var(--ricos-custom-p-color,unset);color:var(--ricos-custom-p-color,var(--ricos-text-color,#212121));line-height:21px;font:inherit;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);font-size:14px;font-style:var(--ricos-custom-p-font-style,unset);font-weight:var(--ricos-custom-p-font-weight,unset);line-height:var(--ricos-custom-p-line-height,unset);min-height:var(--ricos-custom-p-min-height,unset);position:inherit;resize:none;text-decoration:var(--ricos-custom-p-text-decoration,unset);width:100%;z-index:1}[dir] .wKJRm{border:none}[dir] .wKJRm>span>a,[dir] .wKJRm>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){.wKJRm{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){.wKJRm{font-size:var(--ricos-custom-p-font-size,unset)}}[dir] .wKJRm[readonly]{cursor:pointer}`;\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  \"fontElementMap\": \"teHZ4\",\n  \"inPluginInput\": \"wKJRm\"\n};"],
+  "sourcesContent": ["var styleDataHash = '92071c41';  \nexport const injectCss = (() => {\n  var css = `.Cmfsg,.glob_fontElementMap{font-family:var(--ricos-font-family,unset)}._9-H0Y{color:var(--ricos-custom-p-color,unset);color:var(--ricos-custom-p-color,var(--ricos-text-color,#212121));line-height:21px;font:inherit;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);font-size:14px;font-style:var(--ricos-custom-p-font-style,unset);font-weight:var(--ricos-custom-p-font-weight,unset);line-height:var(--ricos-custom-p-line-height,unset);min-height:var(--ricos-custom-p-min-height,unset);position:inherit;resize:none;text-decoration:var(--ricos-custom-p-text-decoration,unset);width:100%;z-index:1}[dir] ._9-H0Y{border:none}[dir] ._9-H0Y>span>a,[dir] ._9-H0Y>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){._9-H0Y{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){._9-H0Y{font-size:var(--ricos-custom-p-font-size,unset)}}[dir] ._9-H0Y[readonly]{cursor:pointer}`;\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  \"fontElementMap\": \"Cmfsg\",\n  \"inPluginInput\": \"_9-H0Y\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,YAAa,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,0BAAQ;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AACnB;",
   "names": []
 }

package/dist/es/plugin-image/tiptap/image-tiptap-extension.js

@@ -1,6 +1,4 @@
 import { findParentNodeClosestToPos } from "@tiptap/core";
-import { Fragment, Slice } from "@tiptap/pm/model";
-import { NodeSelection } from "@tiptap/pm/state";
 import {
   generateId,
   TIPTAP_CAPTION_TYPE,
@@ -25,91 +23,6 @@ const imageTiptapExtension = createRicosNodeExtension({
     })
   }),
   Component: Image,
-  renderingOptions: {
-    onDragStart({ editor, dragHandle, event }) {
-      const target = event.target;
-      if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
-        return;
-      }
-      if (this.dom === dragHandle) {
-        event.dataTransfer?.setDragImage(this.dom, 0, 0);
-      } else {
-        const domBox = this.dom.getBoundingClientRect();
-        const handleBox = dragHandle.getBoundingClientRect();
-        const nativeEvent = "nativeEvent" in event ? event.nativeEvent : event;
-        const x = handleBox.x - domBox.x + nativeEvent.offsetX;
-        const y = handleBox.y - domBox.y + nativeEvent.offsetY;
-        event.dataTransfer?.setDragImage(this.dom, x, y);
-      }
-      const selection = NodeSelection.create(editor.view.state.doc, this.getPos() - 1);
-      const transaction = editor.view.state.tr.setSelection(selection);
-      editor.view.dispatch(transaction);
-    },
-    stopEvent({ event }) {
-      const target = event.target;
-      const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target);
-      if (!isInElement) {
-        return false;
-      }
-      const isDragEvent = event.type.startsWith("drag");
-      const isDropEvent = event.type === "drop";
-      const isInput = ["INPUT", "BUTTON", "SELECT", "TEXTAREA"].includes(target.tagName) || target.isContentEditable;
-      if (isInput && !isDropEvent && !isDragEvent) {
-        return true;
-      }
-      const { isEditable } = this.editor;
-      const { isDragging } = this;
-      const isDraggable = true;
-      const isSelectable = NodeSelection.isSelectable(this.node);
-      const isCopyEvent = event.type === "copy";
-      const isPasteEvent = event.type === "paste";
-      const isCutEvent = event.type === "cut";
-      const isClickEvent = event.type === "mousedown";
-      if (!isDraggable && isSelectable && isDragEvent) {
-        event.preventDefault();
-      }
-      if (isDraggable && isDragEvent && !isDragging) {
-        event.preventDefault();
-        return false;
-      }
-      if (isDraggable && isEditable && !isDragging && isClickEvent) {
-        const dragHandle = target.closest("[data-drag-handle]");
-        const isValidDragHandle = this.dom.closest(".node-IMAGE")?.contains(dragHandle);
-        if (isValidDragHandle) {
-          this.isDragging = true;
-          const selection = NodeSelection.create(this.editor.view.state.doc, this.getPos());
-          const transaction = this.editor.view.state.tr.setSelection(selection);
-          this.editor.view.dispatch(transaction);
-          this.editor.view.focus();
-          document.addEventListener(
-            "dragend",
-            () => {
-              this.isDragging = false;
-            },
-            { once: true }
-          );
-          document.addEventListener(
-            "drop",
-            () => {
-              this.isDragging = false;
-            },
-            { once: true }
-          );
-          document.addEventListener(
-            "mouseup",
-            () => {
-              this.isDragging = false;
-            },
-            { once: true }
-          );
-        }
-      }
-      if (isDragging || isDropEvent || isCopyEvent || isPasteEvent || isCutEvent || isClickEvent && isSelectable) {
-        return false;
-      }
-      return true;
-    }
-  },
   createExtensionConfig({ Plugin, PluginKey }) {
     const insertAndUploadImage = ({
       commands,
@@ -154,7 +67,7 @@ const imageTiptapExtension = createRicosNodeExtension({
        * to shortcuts to work
        */
       priority: 102,
-      group: "block",
+      group: "block figure",
       selectable: true,
       draggable: true,
       addAttributes: () => tiptapImageAttributeDefaults,
@@ -163,20 +76,6 @@ const imageTiptapExtension = createRicosNodeExtension({
           new Plugin({
             key: new PluginKey("handlePasteImage"),
             props: {
-              transformCopied: (slice, { state }) => {
-                const node = slice.content.firstChild;
-                if (slice.content.size === 1 && node?.type.name === TIPTAP_IMAGE_TYPE) {
-                  const imagePos = findNodeById(state.tr, node.attrs.id)[0]?.pos;
-                  const figureNode = state.doc.resolve(imagePos).parent;
-                  const newSlice = new Slice(
-                    Fragment.from(figureNode),
-                    slice.openStart,
-                    slice.openEnd
-                  );
-                  return newSlice;
-                }
-                return slice;
-              },
               handlePaste: (editor, event) => {
                 const { state } = editor;
                 const { selection } = state;

package/dist/es/plugin-image/tiptap/image-tiptap-extension.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-image/tiptap/image-tiptap-extension.ts"],
-  "sourcesContent": ["import type { Editor, SingleCommands } from '@tiptap/core';\nimport { findParentNodeClosestToPos } from '@tiptap/core';\nimport { Fragment, Slice } from '@tiptap/pm/model';\nimport { NodeSelection } from '@tiptap/pm/state';\n\nimport type { UploadService } from './../../ricos-common';\nimport {\n  type FileComponentData,\n  generateId,\n  type ImageComponentData,\n  TIPTAP_CAPTION_TYPE,\n  TIPTAP_FIGURE_TYPE,\n  TIPTAP_IMAGE_TYPE,\n  type UpdateEntityFunc,\n  type VideoComponentData,\n} from './../../ricos-content';\nimport type { ExtensionProps, NodeConfig, RicosExtension, RicosServices } from './../../ricos-types';\nimport { createRicosNodeExtension, Uploader } from './../../plugin-commons';\nimport { findNodeById } from './../../tiptap-editor/helpers';\n\nimport { RICOS_DEFAULTS, tiptapImageAttributeDefaults } from '../consts';\nimport { ImagePluginService } from '../toolbar/imagePluginService';\nimport { Image } from './image';\n\nexport type FileUploadHandlerFn = (\n  file: File,\n  updateEntity: UpdateEntityFunc<ImageComponentData | VideoComponentData | FileComponentData>\n) => void;\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    image: {\n      /**\n       * Toggle a paragraph\n       */\n      setImageUrl: (url: string) => ReturnType;\n      /**\n       * Update Image's loading state\n       */\n      setImageLoading: (isLoading: boolean) => ReturnType;\n      /**\n       * Save image from file\n       */\n      insertImageFromFile: (file: File, position: 'above' | 'below') => ReturnType;\n    };\n  }\n}\n\nexport const imageTiptapExtension = createRicosNodeExtension({\n  type: 'react-node',\n  name: TIPTAP_IMAGE_TYPE,\n  groups: ['not-overtypable', 'spoilerable', 'resizable', 'custom-styles', 'shortcuts-enabled'],\n  reconfigure: (\n    config: NodeConfig,\n    _extensions: RicosExtension[],\n    _props: ExtensionProps,\n    settings: Record<string, unknown>,\n    services: RicosServices\n  ) => ({\n    ...config,\n    addOptions: () => ({\n      services,\n      imagePluginService: new ImagePluginService(),\n      ...settings,\n    }),\n  }),\n  Component: Image,\n  renderingOptions: {\n    onDragStart({ editor, dragHandle, event }) {\n      const target = event.target as HTMLElement;\n      if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {\n        return;\n      }\n\n      if (this.dom === dragHandle) {\n        event.dataTransfer?.setDragImage(this.dom, 0, 0);\n      } else {\n        const domBox = this.dom.getBoundingClientRect();\n        const handleBox = dragHandle.getBoundingClientRect();\n        const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;\n\n        const x = handleBox.x - domBox.x + nativeEvent.offsetX;\n        const y = handleBox.y - domBox.y + nativeEvent.offsetY;\n        event.dataTransfer?.setDragImage(this.dom, x, y);\n      }\n\n      const selection = NodeSelection.create(editor.view.state.doc, this.getPos() - 1); // minus one to select whole figure\n      const transaction = editor.view.state.tr.setSelection(selection);\n      editor.view.dispatch(transaction);\n    },\n    stopEvent({ event }) {\n      const target = event.target as HTMLElement;\n      const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target);\n      // any event from child nodes should be handled by ProseMirror\n      if (!isInElement) {\n        return false;\n      }\n      const isDragEvent = event.type.startsWith('drag');\n      const isDropEvent = event.type === 'drop';\n      const isInput =\n        ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(target.tagName) ||\n        target.isContentEditable;\n      // any input event within node views should be ignored by ProseMirror\n      if (isInput && !isDropEvent && !isDragEvent) {\n        return true;\n      }\n      const { isEditable } = this.editor;\n      const { isDragging } = this;\n      const isDraggable = true;\n      const isSelectable = NodeSelection.isSelectable(this.node);\n      const isCopyEvent = event.type === 'copy';\n      const isPasteEvent = event.type === 'paste';\n      const isCutEvent = event.type === 'cut';\n      const isClickEvent = event.type === 'mousedown';\n      // ProseMirror tries to drag selectable nodes\n      // even if `draggable` is set to `false`\n      // this fix prevents that\n      if (!isDraggable && isSelectable && isDragEvent) {\n        event.preventDefault();\n      }\n      if (isDraggable && isDragEvent && !isDragging) {\n        event.preventDefault();\n        return false;\n      }\n      // we have to store that dragging started\n      if (isDraggable && isEditable && !isDragging && isClickEvent) {\n        const dragHandle = target.closest('[data-drag-handle]');\n        const isValidDragHandle = this.dom.closest('.node-IMAGE')?.contains(dragHandle);\n        if (isValidDragHandle) {\n          this.isDragging = true;\n\n          // we want to set correct selection when dragging starts when image is not selected\n          const selection = NodeSelection.create(this.editor.view.state.doc, this.getPos());\n          const transaction = this.editor.view.state.tr.setSelection(selection);\n          this.editor.view.dispatch(transaction);\n          this.editor.view.focus();\n\n          document.addEventListener(\n            'dragend',\n            () => {\n              this.isDragging = false;\n            },\n            { once: true }\n          );\n\n          document.addEventListener(\n            'drop',\n            () => {\n              this.isDragging = false;\n            },\n            { once: true }\n          );\n\n          document.addEventListener(\n            'mouseup',\n            () => {\n              this.isDragging = false;\n            },\n            { once: true }\n          );\n        }\n      }\n      // these events are handled by prosemirror\n      if (\n        isDragging ||\n        isDropEvent ||\n        isCopyEvent ||\n        isPasteEvent ||\n        isCutEvent ||\n        (isClickEvent && isSelectable)\n      ) {\n        return false;\n      }\n\n      return true;\n    },\n  },\n  createExtensionConfig({ Plugin, PluginKey }) {\n    const insertAndUploadImage = ({\n      commands,\n      pos,\n      file,\n      uploadService,\n      handleFileUpload,\n      imagePluginService,\n    }: {\n      commands: SingleCommands;\n      pos: number;\n      file: File;\n      uploadService: UploadService;\n      handleFileUpload: FileUploadHandlerFn;\n      imagePluginService: ImagePluginService;\n    }): string => {\n      const imageNodeId = generateId();\n      commands.insertContentAt(pos, {\n        type: TIPTAP_FIGURE_TYPE,\n        attrs: {\n          id: generateId(),\n        },\n        content: [\n          {\n            type: TIPTAP_IMAGE_TYPE,\n            attrs: {\n              id: imageNodeId,\n              containerData: RICOS_DEFAULTS.containerData,\n            },\n          },\n          {\n            type: TIPTAP_CAPTION_TYPE,\n          },\n        ],\n      });\n      uploadService?.uploadFile(\n        file,\n        imageNodeId,\n        new Uploader(handleFileUpload),\n        TIPTAP_FIGURE_TYPE,\n        imagePluginService\n      );\n\n      return imageNodeId;\n    };\n\n    return {\n      name: this.name,\n      /*\n       * Priority should be higher than ricos-common-plugin list-item extension in order\n       * to shortcuts to work\n       */\n      priority: 102,\n      group: 'block',\n      selectable: true,\n      draggable: true,\n      addAttributes: () => tiptapImageAttributeDefaults,\n      addProseMirrorPlugins() {\n        return [\n          new Plugin({\n            key: new PluginKey('handlePasteImage'),\n            props: {\n              transformCopied: (slice, { state }) => {\n                const node = slice.content.firstChild;\n                if (slice.content.size === 1 && node?.type.name === TIPTAP_IMAGE_TYPE) {\n                  const imagePos = findNodeById(state.tr, node.attrs.id)[0]?.pos;\n                  const figureNode = state.doc.resolve(imagePos).parent;\n                  const newSlice = new Slice(\n                    Fragment.from(figureNode),\n                    slice.openStart,\n                    slice.openEnd\n                  );\n\n                  return newSlice;\n                }\n\n                return slice;\n              },\n              handlePaste: (editor, event) => {\n                const { state } = editor;\n                const { selection } = state;\n\n                let hasFiles = false;\n\n                // Prefer text to images.\n                // This check solves issue with MacOS + MS Word, where copied text\n                // will also have `image/png` inside clipboardData, resulting in pasting\n                // image instead of text\n                if (event?.clipboardData?.types.includes('text/plain')) {\n                  return false;\n                }\n\n                this.editor\n                  .chain()\n                  .command(({ tr, commands }) => {\n                    const ids = Array.from(event?.clipboardData?.files || [])\n                      .filter((file: File) => file.type.startsWith('image'))\n                      .map(file => {\n                        return insertAndUploadImage({\n                          commands,\n                          pos: selection.$to.pos,\n                          file,\n                          uploadService: this.options.services?.uploadService,\n                          handleFileUpload: this.options.handleFileUpload,\n                          imagePluginService: this.options.imagePluginService,\n                        });\n                      });\n\n                    const last = ids[ids.length - 1];\n\n                    hasFiles = ids.length > 0;\n\n                    if (last) {\n                      const nodeWithPos = findNodeById(tr, last)[0];\n                      if (nodeWithPos) {\n                        return commands.setNodeSelection(nodeWithPos.pos as number);\n                      }\n                    }\n\n                    return true;\n                  })\n                  .run();\n\n                if (hasFiles) {\n                  event.preventDefault();\n                  return true;\n                }\n                return false;\n              },\n            },\n          }),\n        ];\n      },\n      addCommands() {\n        return {\n          setImageUrl:\n            url =>\n            ({ commands }) => {\n              return commands.updateAttributes(this.name, { image: { src: { custom: url } } });\n            },\n          setImageLoading:\n            loading =>\n            ({ commands }) => {\n              return commands.updateAttributes(this.name, { loading });\n            },\n          insertImageFromFile:\n            (file, insertPosition) =>\n            ({ commands, tr }) => {\n              let position: number;\n\n              const from = tr.selection.from;\n              const to = tr.selection.to;\n              const blockRange = tr.selection.$from.blockRange(tr.selection.$to);\n\n              if (insertPosition === 'above') {\n                const depth = tr.selection.$from.depth;\n                const adjustedPos = blockRange?.start ?? tr.doc.resolve(from).start(depth);\n                position = Math.max(adjustedPos, 0);\n              } else {\n                const depth = tr.selection.$to.depth;\n                const pos = blockRange?.end ?? tr.doc.resolve(to).end(depth);\n                position = pos + (blockRange ? 0 : 1);\n              }\n\n              const id = insertAndUploadImage({\n                commands,\n                pos: position,\n                file,\n                uploadService: this.options.services?.uploadService,\n                handleFileUpload: this.options.handleFileUpload,\n                imagePluginService: this.options.imagePluginService,\n              });\n\n              const nodeWithPos = findNodeById(tr, id)[0];\n              if (nodeWithPos) {\n                return commands.setNodeSelection(nodeWithPos.pos as number);\n              }\n\n              return true;\n            },\n        };\n      },\n      addKeyboardShortcuts() {\n        const newLine = ({ editor }: { editor: Editor }) => {\n          const imageFigure = getImageFigure(editor);\n          if (!imageFigure) {\n            return false;\n          }\n          editor\n            .chain()\n            .setTextSelection(imageFigure.start + imageFigure.node.nodeSize - 1)\n            .createParagraphNear()\n            .focus()\n            .run();\n          return true;\n        };\n\n        const tiptapKeyboardShortcuts = {\n          Enter: newLine,\n        };\n\n        const newLineShortcuts: any = [];\n        this.options.services.shortcuts.shortcuts.forEach(shortcut => {\n          if (shortcut.shortcut.name === 'NewLine') {\n            newLineShortcuts.push(shortcut);\n          }\n        });\n\n        newLineShortcuts.forEach(newLineShortcut => {\n          const modifier = newLineShortcut.keys.macOs.modifiers[0];\n          const key = newLineShortcut.keys.macOs.key;\n          const shortcutKey = modifier ? `${modifier}-${key}` : key;\n          tiptapKeyboardShortcuts[shortcutKey] = newLine;\n        });\n\n        return tiptapKeyboardShortcuts;\n      },\n    };\n  },\n});\n\nconst getImageFigure = (editor: Editor) =>\n  findParentNodeClosestToPos(\n    editor.state.selection.$from,\n    node => node.type.name === TIPTAP_FIGURE_TYPE\n  );\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Editor, SingleCommands } from '@tiptap/core';\nimport { findParentNodeClosestToPos } from '@tiptap/core';\n\nimport type { UploadService } from './../../ricos-common';\nimport {\n  type FileComponentData,\n  generateId,\n  type ImageComponentData,\n  TIPTAP_CAPTION_TYPE,\n  TIPTAP_FIGURE_TYPE,\n  TIPTAP_IMAGE_TYPE,\n  type UpdateEntityFunc,\n  type VideoComponentData,\n} from './../../ricos-content';\nimport type { ExtensionProps, NodeConfig, RicosExtension, RicosServices } from './../../ricos-types';\nimport { createRicosNodeExtension, Uploader } from './../../plugin-commons';\nimport { findNodeById } from './../../tiptap-editor/helpers';\n\nimport { RICOS_DEFAULTS, tiptapImageAttributeDefaults } from '../consts';\nimport { ImagePluginService } from '../toolbar/imagePluginService';\nimport { Image } from './image';\n\nexport type FileUploadHandlerFn = (\n  file: File,\n  updateEntity: UpdateEntityFunc<ImageComponentData | VideoComponentData | FileComponentData>\n) => void;\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    image: {\n      /**\n       * Toggle a paragraph\n       */\n      setImageUrl: (url: string) => ReturnType;\n      /**\n       * Update Image's loading state\n       */\n      setImageLoading: (isLoading: boolean) => ReturnType;\n      /**\n       * Save image from file\n       */\n      insertImageFromFile: (file: File, position: 'above' | 'below') => ReturnType;\n    };\n  }\n}\n\nexport const imageTiptapExtension = createRicosNodeExtension({\n  type: 'react-node',\n  name: TIPTAP_IMAGE_TYPE,\n  groups: ['not-overtypable', 'spoilerable', 'resizable', 'custom-styles', 'shortcuts-enabled'],\n  reconfigure: (\n    config: NodeConfig,\n    _extensions: RicosExtension[],\n    _props: ExtensionProps,\n    settings: Record<string, unknown>,\n    services: RicosServices\n  ) => ({\n    ...config,\n    addOptions: () => ({\n      services,\n      imagePluginService: new ImagePluginService(),\n      ...settings,\n    }),\n  }),\n  Component: Image,\n  createExtensionConfig({ Plugin, PluginKey }) {\n    const insertAndUploadImage = ({\n      commands,\n      pos,\n      file,\n      uploadService,\n      handleFileUpload,\n      imagePluginService,\n    }: {\n      commands: SingleCommands;\n      pos: number;\n      file: File;\n      uploadService: UploadService;\n      handleFileUpload: FileUploadHandlerFn;\n      imagePluginService: ImagePluginService;\n    }): string => {\n      const imageNodeId = generateId();\n      commands.insertContentAt(pos, {\n        type: TIPTAP_FIGURE_TYPE,\n        attrs: {\n          id: generateId(),\n        },\n        content: [\n          {\n            type: TIPTAP_IMAGE_TYPE,\n            attrs: {\n              id: imageNodeId,\n              containerData: RICOS_DEFAULTS.containerData,\n            },\n          },\n          {\n            type: TIPTAP_CAPTION_TYPE,\n          },\n        ],\n      });\n      uploadService?.uploadFile(\n        file,\n        imageNodeId,\n        new Uploader(handleFileUpload),\n        TIPTAP_FIGURE_TYPE,\n        imagePluginService\n      );\n\n      return imageNodeId;\n    };\n\n    return {\n      name: this.name,\n      /*\n       * Priority should be higher than ricos-common-plugin list-item extension in order\n       * to shortcuts to work\n       */\n      priority: 102,\n      group: 'block figure',\n      selectable: true,\n      draggable: true,\n      addAttributes: () => tiptapImageAttributeDefaults,\n      addProseMirrorPlugins() {\n        return [\n          new Plugin({\n            key: new PluginKey('handlePasteImage'),\n            props: {\n              handlePaste: (editor, event) => {\n                const { state } = editor;\n                const { selection } = state;\n\n                let hasFiles = false;\n\n                // Prefer text to images.\n                // This check solves issue with MacOS + MS Word, where copied text\n                // will also have `image/png` inside clipboardData, resulting in pasting\n                // image instead of text\n                if (event?.clipboardData?.types.includes('text/plain')) {\n                  return false;\n                }\n\n                this.editor\n                  .chain()\n                  .command(({ tr, commands }) => {\n                    const ids = Array.from(event?.clipboardData?.files || [])\n                      .filter((file: File) => file.type.startsWith('image'))\n                      .map(file => {\n                        return insertAndUploadImage({\n                          commands,\n                          pos: selection.$to.pos,\n                          file,\n                          uploadService: this.options.services?.uploadService,\n                          handleFileUpload: this.options.handleFileUpload,\n                          imagePluginService: this.options.imagePluginService,\n                        });\n                      });\n\n                    const last = ids[ids.length - 1];\n\n                    hasFiles = ids.length > 0;\n\n                    if (last) {\n                      const nodeWithPos = findNodeById(tr, last)[0];\n                      if (nodeWithPos) {\n                        return commands.setNodeSelection(nodeWithPos.pos as number);\n                      }\n                    }\n\n                    return true;\n                  })\n                  .run();\n\n                if (hasFiles) {\n                  event.preventDefault();\n                  return true;\n                }\n                return false;\n              },\n            },\n          }),\n        ];\n      },\n      addCommands() {\n        return {\n          setImageUrl:\n            url =>\n            ({ commands }) => {\n              return commands.updateAttributes(this.name, { image: { src: { custom: url } } });\n            },\n          setImageLoading:\n            loading =>\n            ({ commands }) => {\n              return commands.updateAttributes(this.name, { loading });\n            },\n          insertImageFromFile:\n            (file, insertPosition) =>\n            ({ commands, tr }) => {\n              let position: number;\n\n              const from = tr.selection.from;\n              const to = tr.selection.to;\n              const blockRange = tr.selection.$from.blockRange(tr.selection.$to);\n\n              if (insertPosition === 'above') {\n                const depth = tr.selection.$from.depth;\n                const adjustedPos = blockRange?.start ?? tr.doc.resolve(from).start(depth);\n                position = Math.max(adjustedPos, 0);\n              } else {\n                const depth = tr.selection.$to.depth;\n                const pos = blockRange?.end ?? tr.doc.resolve(to).end(depth);\n                position = pos + (blockRange ? 0 : 1);\n              }\n\n              const id = insertAndUploadImage({\n                commands,\n                pos: position,\n                file,\n                uploadService: this.options.services?.uploadService,\n                handleFileUpload: this.options.handleFileUpload,\n                imagePluginService: this.options.imagePluginService,\n              });\n\n              const nodeWithPos = findNodeById(tr, id)[0];\n              if (nodeWithPos) {\n                return commands.setNodeSelection(nodeWithPos.pos as number);\n              }\n\n              return true;\n            },\n        };\n      },\n      addKeyboardShortcuts() {\n        const newLine = ({ editor }: { editor: Editor }) => {\n          const imageFigure = getImageFigure(editor);\n          if (!imageFigure) {\n            return false;\n          }\n          editor\n            .chain()\n            .setTextSelection(imageFigure.start + imageFigure.node.nodeSize - 1)\n            .createParagraphNear()\n            .focus()\n            .run();\n          return true;\n        };\n\n        const tiptapKeyboardShortcuts = {\n          Enter: newLine,\n        };\n\n        const newLineShortcuts: any = [];\n        this.options.services.shortcuts.shortcuts.forEach(shortcut => {\n          if (shortcut.shortcut.name === 'NewLine') {\n            newLineShortcuts.push(shortcut);\n          }\n        });\n\n        newLineShortcuts.forEach(newLineShortcut => {\n          const modifier = newLineShortcut.keys.macOs.modifiers[0];\n          const key = newLineShortcut.keys.macOs.key;\n          const shortcutKey = modifier ? `${modifier}-${key}` : key;\n          tiptapKeyboardShortcuts[shortcutKey] = newLine;\n        });\n\n        return tiptapKeyboardShortcuts;\n      },\n    };\n  },\n});\n\nconst getImageFigure = (editor: Editor) =>\n  findParentNodeClosestToPos(\n    editor.state.selection.$from,\n    node => node.type.name === TIPTAP_FIGURE_TYPE\n  );\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-image/viewer/common-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=common-types.js.map

package/dist/es/plugin-image/viewer/common-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/es/plugin-image/viewer/image-container.js

@@ -2,7 +2,8 @@ import React from "react";
 import { ROOT } from "../dataHooks";
 import styles from "../statics/styles/image-viewer.rtlignore-scss";
 const ImageContainer = (props) => {
-  const { type, disableDownload, children } = props;
+  const { type, children } = props;
+  const handleOnContextMenu = props.disableDownload === true ? (e) => e.preventDefault() : void 0;
   const hasOnClick = "onClick" in props;
   const onClick = hasOnClick ? props.onClick : void 0;
   const onKeyDown = onClick ? (e) => {
@@ -13,9 +14,9 @@ const ImageContainer = (props) => {
   const interactions = {
     onClick,
     onKeyDown,
-    onContextMenu: disableDownload
+    onContextMenu: handleOnContextMenu
   };
-  const role = hasOnClick || type === "regular" && !!disableDownload ? "button" : void 0;
+  const role = hasOnClick || type === "regular" && !!handleOnContextMenu ? "button" : void 0;
   const tabIndex = role === "button" ? 0 : void 0;
   return /* @__PURE__ */ React.createElement(
     "div",

package/dist/es/plugin-image/viewer/image-container.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-image/viewer/image-container.tsx"],
-  "sourcesContent": ["import type { ReactNode } from 'react';\nimport React from 'react';\n\nimport { ROOT } from '../dataHooks';\nimport styles from '../statics/styles/image-viewer.rtlignore-scss';\nimport type {\n  ImageClickActionConfig,\n  ImageClickActionHandle,\n} from './get-image-click-action-config';\n\ntype ImageContainerProps = ImageClickActionConfig & {\n  disableDownload?: ImageClickActionHandle;\n  children: ReactNode;\n};\n\nexport const ImageContainer = (props: ImageContainerProps) => {\n  const { type, disableDownload, children } = props;\n\n  const hasOnClick = 'onClick' in props;\n\n  const onClick = hasOnClick ? props.onClick : undefined;\n\n  const onKeyDown = onClick\n    ? (e: React.KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          onClick(e);\n        }\n      }\n    : undefined;\n\n  const interactions = {\n    onClick,\n    onKeyDown,\n    onContextMenu: disableDownload,\n  };\n\n  const role = hasOnClick || (type === 'regular' && !!disableDownload) ? 'button' : undefined;\n  const tabIndex = role === 'button' ? 0 : undefined;\n\n  return (\n    <div\n      {...(role === 'button' ? interactions : {})}\n      role={role}\n      data-hook={ROOT}\n      tabIndex={tabIndex}\n      className={styles.imageContainer}\n      aria-haspopup={role === 'button' ? true : undefined}\n    >\n      {children}\n    </div>\n  );\n};\n"],
-  "mappings": "AACA,OAAO,WAAW;AAElB,SAAS,YAAY;AACrB,OAAO,YAAY;AAWZ,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,QAAM,EAAE,MAAM,iBAAiB,SAAS,IAAI;AAE5C,QAAM,aAAa,aAAa;AAEhC,QAAM,UAAU,aAAa,MAAM,UAAU;AAE7C,QAAM,YAAY,UACd,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAQ,CAAC;AAAA,IACX;AAAA,EACF,IACA;AAEJ,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,QAAM,OAAO,cAAe,SAAS,aAAa,CAAC,CAAC,kBAAmB,WAAW;AAClF,QAAM,WAAW,SAAS,WAAW,IAAI;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,SAAS,WAAW,eAAe,CAAC;AAAA,MACzC;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,iBAAe,SAAS,WAAW,OAAO;AAAA;AAAA,IAEzC;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import type { ReactNode } from 'react';\nimport React from 'react';\n\nimport { ROOT } from '../dataHooks';\nimport styles from '../statics/styles/image-viewer.rtlignore-scss';\nimport type { ImageClickActionConfig } from './common-types';\n\ntype ImageContainerProps = ImageClickActionConfig & {\n  disableDownload: boolean | undefined;\n  children: ReactNode;\n};\n\nexport const ImageContainer = (props: ImageContainerProps) => {\n  const { type, children } = props;\n\n  const handleOnContextMenu =\n    props.disableDownload === true ? (e: React.MouseEvent) => e.preventDefault() : undefined;\n\n  const hasOnClick = 'onClick' in props;\n\n  const onClick = hasOnClick ? props.onClick : undefined;\n\n  const onKeyDown = onClick\n    ? (e: React.KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          onClick(e);\n        }\n      }\n    : undefined;\n\n  const interactions = {\n    onClick,\n    onKeyDown,\n    onContextMenu: handleOnContextMenu,\n  };\n\n  const role = hasOnClick || (type === 'regular' && !!handleOnContextMenu) ? 'button' : undefined;\n  const tabIndex = role === 'button' ? 0 : undefined;\n\n  return (\n    <div\n      {...(role === 'button' ? interactions : {})}\n      role={role}\n      data-hook={ROOT}\n      tabIndex={tabIndex}\n      className={styles.imageContainer}\n      aria-haspopup={role === 'button' ? true : undefined}\n    >\n      {children}\n    </div>\n  );\n};\n"],
+  "mappings": "AACA,OAAO,WAAW;AAElB,SAAS,YAAY;AACrB,OAAO,YAAY;AAQZ,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,QAAM,EAAE,MAAM,SAAS,IAAI;AAE3B,QAAM,sBACJ,MAAM,oBAAoB,OAAO,CAAC,MAAwB,EAAE,eAAe,IAAI;AAEjF,QAAM,aAAa,aAAa;AAEhC,QAAM,UAAU,aAAa,MAAM,UAAU;AAE7C,QAAM,YAAY,UACd,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAQ,CAAC;AAAA,IACX;AAAA,EACF,IACA;AAEJ,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,QAAM,OAAO,cAAe,SAAS,aAAa,CAAC,CAAC,sBAAuB,WAAW;AACtF,QAAM,WAAW,SAAS,WAAW,IAAI;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,SAAS,WAAW,eAAe,CAAC;AAAA,MACzC;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,iBAAe,SAAS,WAAW,OAAO;AAAA;AAAA,IAEzC;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -25,7 +25,6 @@ const Image = ({
   const containerData = node.imageData?.containerData || RICOS_DEFAULTS.containerData;
   const { image, altText } = node.imageData || {};
   const { src } = image || {};
-  const disableDownload = node.imageData?.disableDownload === true ? (e) => e.preventDefault() : void 0;
   const imageSource = useMemo(() => {
     if (dataUrl) {
       return dataUrl;
@@ -59,7 +58,7 @@ const Image = ({
     height: image?.height
   });
   const doDimensionsExist = width !== void 0 && height !== void 0;
-  return /* @__PURE__ */ React.createElement(ImageContainer, { ...imageClickActionConfig, disableDownload }, doDimensionsExist && imageSource && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ImageContainer, { ...imageClickActionConfig, disableDownload: node.imageData?.disableDownload }, doDimensionsExist && imageSource && /* @__PURE__ */ React.createElement(
     ImageComp,
     {
       id: node.imageData?.image?.src?.id ?? imageSource,

package/dist/es/plugin-image/viewer/image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-image/viewer/image.tsx"],
-  "sourcesContent": ["import classNames from 'classnames';\nimport React, { useMemo } from 'react';\n\nimport type { Node } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { Helpers, SEOSettings } from './../../ricos-types';\nimport { Image as ImageComp } from './../../ui-components';\n\nimport { RICOS_DEFAULTS } from '../consts';\nimport { EXPAND_BUTTON } from '../dataHooks';\nimport ExpandIcon from '../icons/expand';\nimport styles from '../statics/styles/image-viewer.rtlignore-scss';\nimport type { ImagePluginViewerConfig } from '../types';\nimport type {\n  ImageClickActionConfig,\n  ImageClickActionHandle,\n} from './get-image-click-action-config';\nimport { ImageContainer } from './image-container';\nimport { useCustomWidthStyle } from './use-custom-width-style';\nimport { useFallbackWidthStyle } from './use-fallback-width-style';\nimport { useImageDimensions } from './use-image-dimensions';\nimport { useImageSocialAttributes } from './use-image-social-attributes';\n\ntype ImageViewerProps = {\n  node: Node;\n  isMobile: boolean;\n  imageClickActionConfig: ImageClickActionConfig;\n  shouldLazyLoadImages: boolean;\n  helpers?: Helpers;\n  config?: ImagePluginViewerConfig;\n  expand?: ImageClickActionHandle;\n  className?: string;\n  dataUrl?: string;\n  seoMode?: SEOSettings;\n};\n\nexport const Image = ({\n  dataUrl,\n  node,\n  className,\n  config,\n  helpers,\n  isMobile,\n  seoMode,\n  imageClickActionConfig,\n  expand,\n  shouldLazyLoadImages,\n}: ImageViewerProps) => {\n  const containerData = node.imageData?.containerData || RICOS_DEFAULTS.containerData;\n  const { image, altText } = node.imageData || {};\n  const { src } = image || {};\n\n  const disableDownload =\n    node.imageData?.disableDownload === true\n      ? (e: React.MouseEvent) => e.preventDefault()\n      : undefined;\n\n  const imageSource = useMemo(() => {\n    if (dataUrl) {\n      return dataUrl;\n    }\n\n    const { url, id } = src || {};\n    if (url) {\n      return url;\n    }\n    const { getImageUrl } = helpers ?? {};\n\n    if (getImageUrl && id) {\n      return getImageUrl({ file_name: id });\n    }\n\n    return id;\n  }, [\n    dataUrl,\n    node.imageData?.image?.src?.url,\n    node.imageData?.image?.src?.id,\n    helpers?.getImageUrl,\n  ]);\n\n  const { width, height } = useImageDimensions({\n    src: imageSource,\n    containerData,\n    image,\n  });\n  const fallbackWidthStyle = useFallbackWidthStyle({ containerData, isMobile });\n  const customWidthStyle = useCustomWidthStyle({ containerData, isMobile, width });\n  const socialAttributes = useImageSocialAttributes({\n    config,\n    src,\n    width: image?.width,\n    height: image?.height,\n  });\n\n  const doDimensionsExist = width !== undefined && height !== undefined;\n\n  return (\n    <ImageContainer {...imageClickActionConfig} disableDownload={disableDownload}>\n      {doDimensionsExist && imageSource && (\n        <ImageComp\n          id={node.imageData?.image?.src?.id ?? imageSource}\n          containerId={node.id}\n          displayMode=\"fill\"\n          width={width}\n          height={height}\n          uri={node.imageData?.image?.src?.id ?? imageSource}\n          alt={altText || ''}\n          containerProps={{\n            className: classNames(styles.imageWrapper, styles.imageRatio, className, {\n              [styles.pointer]: !!expand,\n            }),\n            containerId: node.id,\n            style: {\n              ['--dim-height' as string]: height,\n              ['--dim-width' as string]: width,\n              ...fallbackWidthStyle,\n              ...customWidthStyle,\n            },\n          }}\n          imageStyles={{\n            maxWidth: '100%',\n          }}\n          /* @ts-expect-error - draggable are not supported, nonetheless is spreaded to the element */\n          socialAttrs={{ ...socialAttributes, draggable: false }}\n          isSEOBot={!!seoMode}\n          {...(shouldLazyLoadImages\n            ? {\n                placeholderTransition: seoMode ? undefined : 'blur',\n                shouldUseLQIP: config?.disableTransition !== false,\n              }\n            : {})}\n        />\n      )}\n      {!!expand && (\n        <div\n          className={styles.expandContainer}\n          onClick={expand}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              expand(e);\n            }\n          }}\n          role=\"button\"\n          tabIndex={0}\n          data-hook={EXPAND_BUTTON}\n        >\n          <ExpandIcon className={styles.expandIcon} />\n        </div>\n      )}\n    </ImageContainer>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import classNames from 'classnames';\nimport React, { useMemo } from 'react';\n\nimport type { Node } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { Helpers, SEOSettings } from './../../ricos-types';\nimport { Image as ImageComp } from './../../ui-components';\n\nimport { RICOS_DEFAULTS } from '../consts';\nimport { EXPAND_BUTTON } from '../dataHooks';\nimport ExpandIcon from '../icons/expand';\nimport styles from '../statics/styles/image-viewer.rtlignore-scss';\nimport type { ImagePluginViewerConfig } from '../types';\nimport type { ImageClickActionConfig, ImageClickActionHandle } from './common-types';\nimport { ImageContainer } from './image-container';\nimport { useCustomWidthStyle } from './use-custom-width-style';\nimport { useFallbackWidthStyle } from './use-fallback-width-style';\nimport { useImageDimensions } from './use-image-dimensions';\nimport { useImageSocialAttributes } from './use-image-social-attributes';\n\ntype ImageViewerProps = {\n  node: Node;\n  isMobile: boolean;\n  imageClickActionConfig: ImageClickActionConfig;\n  shouldLazyLoadImages: boolean;\n  helpers?: Helpers;\n  config?: ImagePluginViewerConfig;\n  expand?: ImageClickActionHandle;\n  className?: string;\n  dataUrl?: string;\n  seoMode?: SEOSettings;\n};\n\nexport const Image = ({\n  dataUrl,\n  node,\n  className,\n  config,\n  helpers,\n  isMobile,\n  seoMode,\n  imageClickActionConfig,\n  expand,\n  shouldLazyLoadImages,\n}: ImageViewerProps) => {\n  const containerData = node.imageData?.containerData || RICOS_DEFAULTS.containerData;\n  const { image, altText } = node.imageData || {};\n  const { src } = image || {};\n\n  const imageSource = useMemo(() => {\n    if (dataUrl) {\n      return dataUrl;\n    }\n\n    const { url, id } = src || {};\n    if (url) {\n      return url;\n    }\n    const { getImageUrl } = helpers ?? {};\n\n    if (getImageUrl && id) {\n      return getImageUrl({ file_name: id });\n    }\n\n    return id;\n  }, [\n    dataUrl,\n    node.imageData?.image?.src?.url,\n    node.imageData?.image?.src?.id,\n    helpers?.getImageUrl,\n  ]);\n\n  const { width, height } = useImageDimensions({\n    src: imageSource,\n    containerData,\n    image,\n  });\n  const fallbackWidthStyle = useFallbackWidthStyle({ containerData, isMobile });\n  const customWidthStyle = useCustomWidthStyle({ containerData, isMobile, width });\n  const socialAttributes = useImageSocialAttributes({\n    config,\n    src,\n    width: image?.width,\n    height: image?.height,\n  });\n\n  const doDimensionsExist = width !== undefined && height !== undefined;\n\n  return (\n    <ImageContainer {...imageClickActionConfig} disableDownload={node.imageData?.disableDownload}>\n      {doDimensionsExist && imageSource && (\n        <ImageComp\n          id={node.imageData?.image?.src?.id ?? imageSource}\n          containerId={node.id}\n          displayMode=\"fill\"\n          width={width}\n          height={height}\n          uri={node.imageData?.image?.src?.id ?? imageSource}\n          alt={altText || ''}\n          containerProps={{\n            className: classNames(styles.imageWrapper, styles.imageRatio, className, {\n              [styles.pointer]: !!expand,\n            }),\n            containerId: node.id,\n            style: {\n              ['--dim-height' as string]: height,\n              ['--dim-width' as string]: width,\n              ...fallbackWidthStyle,\n              ...customWidthStyle,\n            },\n          }}\n          imageStyles={{\n            maxWidth: '100%',\n          }}\n          /* @ts-expect-error - draggable are not supported, nonetheless is spreaded to the element */\n          socialAttrs={{ ...socialAttributes, draggable: false }}\n          isSEOBot={!!seoMode}\n          {...(shouldLazyLoadImages\n            ? {\n                placeholderTransition: seoMode ? undefined : 'blur',\n                shouldUseLQIP: config?.disableTransition !== false,\n              }\n            : {})}\n        />\n      )}\n      {!!expand && (\n        <div\n          className={styles.expandContainer}\n          onClick={expand}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              expand(e);\n            }\n          }}\n          role=\"button\"\n          tabIndex={0}\n          data-hook={EXPAND_BUTTON}\n        >\n          <ExpandIcon className={styles.expandIcon} />\n        </div>\n      )}\n    </ImageContainer>\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS,eAAe;AAI/B,SAAS,SAAS,iBAAiB;AAEnC,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,OAAO,gBAAgB;AACvB,OAAO,YAAY;AAGnB,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AAelC,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,QAAM,gBAAgB,KAAK,WAAW,iBAAiB,eAAe;AACtE,QAAM,EAAE,OAAO,QAAQ,IAAI,KAAK,aAAa,CAAC;AAC9C,QAAM,EAAE,IAAI,IAAI,SAAS,CAAC;AAE1B,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,SAAS;AACX,aAAO;AAAA,IACT;AAEA,UAAM,EAAE,KAAK,GAAG,IAAI,OAAO,CAAC;AAC5B,QAAI,KAAK;AACP,aAAO;AAAA,IACT;AACA,UAAM,EAAE,YAAY,IAAI,WAAW,CAAC;AAEpC,QAAI,eAAe,IAAI;AACrB,aAAO,YAAY,EAAE,WAAW,GAAG,CAAC;AAAA,IACtC;AAEA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA,KAAK,WAAW,OAAO,KAAK;AAAA,IAC5B,KAAK,WAAW,OAAO,KAAK;AAAA,IAC5B,SAAS;AAAA,EACX,CAAC;AAED,QAAM,EAAE,OAAO,OAAO,IAAI,mBAAmB;AAAA,IAC3C,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,qBAAqB,sBAAsB,EAAE,eAAe,SAAS,CAAC;AAC5E,QAAM,mBAAmB,oBAAoB,EAAE,eAAe,UAAU,MAAM,CAAC;AAC/E,QAAM,mBAAmB,yBAAyB;AAAA,IAChD;AAAA,IACA;AAAA,IACA,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,EACjB,CAAC;AAED,QAAM,oBAAoB,UAAU,UAAa,WAAW;AAE5D,SACE,oCAAC,kBAAgB,GAAG,wBAAwB,iBAAiB,KAAK,WAAW,mBAC1E,qBAAqB,eACpB;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,KAAK,WAAW,OAAO,KAAK,MAAM;AAAA,MACtC,aAAa,KAAK;AAAA,MAClB,aAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,KAAK,KAAK,WAAW,OAAO,KAAK,MAAM;AAAA,MACvC,KAAK,WAAW;AAAA,MAChB,gBAAgB;AAAA,QACd,WAAW,WAAW,OAAO,cAAc,OAAO,YAAY,WAAW;AAAA,UACvE,CAAC,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA,QACtB,CAAC;AAAA,QACD,aAAa,KAAK;AAAA,QAClB,OAAO;AAAA,UACL,CAAC,cAAwB,GAAG;AAAA,UAC5B,CAAC,aAAuB,GAAG;AAAA,UAC3B,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MAEA,aAAa,EAAE,GAAG,kBAAkB,WAAW,MAAM;AAAA,MACrD,UAAU,CAAC,CAAC;AAAA,MACX,GAAI,uBACD;AAAA,QACE,uBAAuB,UAAU,SAAY;AAAA,QAC7C,eAAe,QAAQ,sBAAsB;AAAA,MAC/C,IACA,CAAC;AAAA;AAAA,EACP,GAED,CAAC,CAAC,UACD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,SAAS;AAAA,MACT,WAAW,OAAK;AACd,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,iBAAO,CAAC;AAAA,QACV;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,aAAW;AAAA;AAAA,IAEX,oCAAC,cAAW,WAAW,OAAO,YAAY;AAAA,EAC5C,CAEJ;AAEJ;",
   "names": []
 }

package/dist/es/plugin-image/viewer/viewer-image-loadable.js

@@ -1,10 +1,7 @@
 import React, { useContext } from "react";
-import { generateId, IMAGE_TYPE } from "./../../ricos-content";
+import { IMAGE_TYPE } from "./../../ricos-content";
 import { RicosContext, RicosViewerContext } from "./../../ricos-context";
-import { Node_Type } from "./../../ricos-schema/legacy/wix/rich_content/v1";
-import classes from "../statics/styles/image-viewer.rtlignore-scss";
-import { getExpandFunction } from "./get-expand-function";
-import { getImageClickActionConfig } from "./get-image-click-action-config";
+import { ViewerFigure } from "../../plugin-figure/viewer/viewer-figure";
 import { Image } from "./image";
 const ViewerImage = ({
   node,
@@ -26,25 +23,15 @@ const ViewerImage = ({
     config,
     expand
   });
-  const nodes = node.imageData?.caption && !node.nodes?.length ? [
+  return /* @__PURE__ */ React.createElement(
+    ViewerFigure,
     {
-      type: Node_Type.CAPTION,
-      id: generateId(),
-      nodes: [
-        {
-          type: Node_Type.TEXT,
-          id: "",
-          nodes: [],
-          textData: {
-            text: node.imageData.caption,
-            decorations: []
-          }
-        }
-      ]
-    }
-  ] : node.nodes ?? [];
-  return /* @__PURE__ */ React.createElement(NodeViewContainer, { node, nodeIndex }, ({ ContainerElement, SpoilerWrapper, LinkWrapper }) => {
-    return /* @__PURE__ */ React.createElement(ContainerElement, null, /* @__PURE__ */ React.createElement("figure", { className: classes.imageFigure }, /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(SpoilerWrapper, null, /* @__PURE__ */ React.createElement(
+      node,
+      nodeIndex,
+      NodeViewContainer,
+      RicosNodesRenderer
+    },
+    /* @__PURE__ */ React.createElement(
       Image,
       {
         node,
@@ -56,13 +43,46 @@ const ViewerImage = ({
         isMobile,
         shouldLazyLoadImages: true
       }
-    ))), /* @__PURE__ */ React.createElement(RicosNodesRenderer, { nodes })));
-  });
+    )
+  );
 };
 const ImageRenderer = ({ node, ...props }) => {
   return /* @__PURE__ */ React.createElement(ViewerImage, { key: node.id, node, ...props });
 };
 var viewer_image_default = ImageRenderer;
+const getImageClickActionConfig = ({
+  imageData,
+  config,
+  expand
+}) => {
+  if (imageData?.link?.url && config) {
+    return { type: "link" };
+  }
+  if (imageData?.link?.anchor) {
+    return { type: "anchor" };
+  }
+  if (expand) {
+    return { type: "expand", onClick: expand };
+  }
+  return { type: "regular" };
+};
+const getExpandFunction = ({
+  helpers,
+  config,
+  nodeId,
+  imageData
+}) => {
+  const { onExpand, disableExpand } = config;
+  if (imageData?.disableExpand === true || disableExpand === true || !onExpand) {
+    return;
+  }
+  return (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    helpers.onViewerAction?.(IMAGE_TYPE, "Click", "expand_image");
+    onExpand(nodeId);
+  };
+};
 export {
   ViewerImage,
   viewer_image_default as default

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

@@ -1,10 +1,7 @@
 import React, { useContext } from "react";
-import { generateId, IMAGE_TYPE } from "./../../ricos-content";
+import { IMAGE_TYPE } from "./../../ricos-content";
 import { RicosContext, RicosViewerContext } from "./../../ricos-context";
-import { Node_Type } from "./../../ricos-schema/legacy/wix/rich_content/v1";
-import classes from "../statics/styles/image-viewer.rtlignore-scss";
-import { getExpandFunction } from "./get-expand-function";
-import { getImageClickActionConfig } from "./get-image-click-action-config";
+import { ViewerFigure } from "../../plugin-figure/viewer/viewer-figure";
 import { Image } from "./image";
 const ViewerImage = ({
   node,
@@ -26,25 +23,15 @@ const ViewerImage = ({
     config,
     expand
   });
-  const nodes = node.imageData?.caption && !node.nodes?.length ? [
+  return /* @__PURE__ */ React.createElement(
+    ViewerFigure,
     {
-      type: Node_Type.CAPTION,
-      id: generateId(),
-      nodes: [
-        {
-          type: Node_Type.TEXT,
-          id: "",
-          nodes: [],
-          textData: {
-            text: node.imageData.caption,
-            decorations: []
-          }
-        }
-      ]
-    }
-  ] : node.nodes ?? [];
-  return /* @__PURE__ */ React.createElement(NodeViewContainer, { node, nodeIndex }, ({ ContainerElement, SpoilerWrapper, LinkWrapper }) => {
-    return /* @__PURE__ */ React.createElement(ContainerElement, null, /* @__PURE__ */ React.createElement("figure", { className: classes.imageFigure }, /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(SpoilerWrapper, null, /* @__PURE__ */ React.createElement(
+      node,
+      nodeIndex,
+      NodeViewContainer,
+      RicosNodesRenderer
+    },
+    /* @__PURE__ */ React.createElement(
       Image,
       {
         node,
@@ -56,13 +43,46 @@ const ViewerImage = ({
         isMobile,
         shouldLazyLoadImages: true
       }
-    ))), /* @__PURE__ */ React.createElement(RicosNodesRenderer, { nodes })));
-  });
+    )
+  );
 };
 const ImageRenderer = ({ node, ...props }) => {
   return /* @__PURE__ */ React.createElement(ViewerImage, { key: node.id, node, ...props });
 };
 var viewer_image_default = ImageRenderer;
+const getImageClickActionConfig = ({
+  imageData,
+  config,
+  expand
+}) => {
+  if (imageData?.link?.url && config) {
+    return { type: "link" };
+  }
+  if (imageData?.link?.anchor) {
+    return { type: "anchor" };
+  }
+  if (expand) {
+    return { type: "expand", onClick: expand };
+  }
+  return { type: "regular" };
+};
+const getExpandFunction = ({
+  helpers,
+  config,
+  nodeId,
+  imageData
+}) => {
+  const { onExpand, disableExpand } = config;
+  if (imageData?.disableExpand === true || disableExpand === true || !onExpand) {
+    return;
+  }
+  return (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    helpers.onViewerAction?.(IMAGE_TYPE, "Click", "expand_image");
+    onExpand(nodeId);
+  };
+};
 export {
   ViewerImage,
   viewer_image_default as default