npm - @wix/ricos - Versions diffs - 10.110.0 → 10.112.0 - Mend

@wix/ricos 10.110.0 → 10.112.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1501) hide show

package/dist/es/plugin-emoji/statics/styles/emoji-preview-modal-scss.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-emoji/statics/styles/emoji-preview-modal.scss"],
-  "sourcesContent": ["var styleDataHash = '1463b7f6';  \nexport const injectCss = (() => {\n  var css = `.G9YTF{display:flex;flex-direction:row;justify-content:space-between}[dir] .G9YTF{padding-bottom:10px;padding-top:10px}[dir=ltr] .G9YTF{padding-left:21px;padding-right:23px}[dir=rtl] .G9YTF{padding-left:23px;padding-right:21px}.-US5I{color:#bdbdbd;font-size:16px}[dir] .-US5I{cursor:pointer;padding:0 5px}.pA3a9:hover{opacity:.5}.rE5QG{display:inline-block}.NJeSz{box-sizing:border-box;font-size:20px;height:37px;width:37px}[dir] .NJeSz{cursor:pointer;margin:3px;padding:5px;text-align:center}[dir=ltr] .NJeSz{float:left}[dir=rtl] .NJeSz{float:right}[dir] .NJeSz:hover{background:#efefef}.dLtlR{color:var(--ricos-settings-text-color,#000);display:flex;font-size:14px;font-weight:300;justify-content:space-between}[dir] .dLtlR{margin-bottom:11px}[dir=ltr] .dLtlR,[dir=rtl] .dLtlR{padding-left:17px;padding-right:17px}.O4JAS{font-family:cursive!important;height:265px;min-width:272px;width:calc(100% - 12px)}[dir=ltr] .O4JAS{margin-left:6px}[dir=rtl] .O4JAS{margin-right:6px}.-YT0c{color:rgba(0,0,0,.4);height:14px;width:auto}[dir] .-YT0c{padding-top:3px}.BuPCz{width:4px}[dir] .BuPCz{background:#b2b2b2;border-radius:4px;cursor:pointer}[dir=ltr] .BuPCz{margin-left:1px}[dir=rtl] .BuPCz{margin-right:1px}[dir] .BuPCz:hover{background:#000}`;\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  \"emojiPreviewModal_emoji_icons_container\": \"G9YTF\",\n  \"emojiPreviewModal_nav_icon\": \"-US5I\",\n  \"emojiPreviewModal_emoji_icon\": \"pA3a9\",\n  \"emojiPreviewModal_emoji_group\": \"rE5QG\",\n  \"emojiPreviewModal_emoji\": \"NJeSz\",\n  \"emojiPreviewModal_headerTitle\": \"dLtlR\",\n  \"emojiPreviewModal_emojis_groups_container\": \"O4JAS\",\n  \"emojiPreviewModal_JoyPixelsIcon\": \"-YT0c\",\n  \"emojiPreviewModal_scrollbar_thumb\": \"BuPCz\"\n};"],
+  "sourcesContent": ["var styleDataHash = 'ea7c4ad0';  \nexport const injectCss = (() => {\n  var css = `.SEasx{display:flex;flex-direction:row;justify-content:space-between}[dir] .SEasx{padding-bottom:10px;padding-top:10px}[dir=ltr] .SEasx{padding-left:21px;padding-right:23px}[dir=rtl] .SEasx{padding-left:23px;padding-right:21px}.I9T7U{color:#bdbdbd;font-size:16px}[dir] .I9T7U{cursor:pointer;padding:0 5px}.rq5-X:hover{opacity:.5}.DuLBQ{display:inline-block}._8xlSD{box-sizing:border-box;font-size:20px;height:37px;width:37px}[dir] ._8xlSD{cursor:pointer;margin:3px;padding:5px;text-align:center}[dir=ltr] ._8xlSD{float:left}[dir=rtl] ._8xlSD{float:right}[dir] ._8xlSD:hover{background:#efefef}.ZsdzI{color:var(--ricos-settings-text-color,#000);display:flex;font-size:14px;font-weight:300;justify-content:space-between}[dir] .ZsdzI{margin-bottom:11px}[dir=ltr] .ZsdzI,[dir=rtl] .ZsdzI{padding-left:17px;padding-right:17px}.asOO9{font-family:cursive!important;height:265px;min-width:272px;width:calc(100% - 12px)}[dir=ltr] .asOO9{margin-left:6px}[dir=rtl] .asOO9{margin-right:6px}.FSni3{color:rgba(0,0,0,.4);height:14px;width:auto}[dir] .FSni3{padding-top:3px}._2080K{width:4px}[dir] ._2080K{background:#b2b2b2;border-radius:4px;cursor:pointer}[dir=ltr] ._2080K{margin-left:1px}[dir=rtl] ._2080K{margin-right:1px}[dir] ._2080K:hover{background:#000}`;\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  \"emojiPreviewModal_emoji_icons_container\": \"SEasx\",\n  \"emojiPreviewModal_nav_icon\": \"I9T7U\",\n  \"emojiPreviewModal_emoji_icon\": \"rq5-X\",\n  \"emojiPreviewModal_emoji_group\": \"DuLBQ\",\n  \"emojiPreviewModal_emoji\": \"_8xlSD\",\n  \"emojiPreviewModal_headerTitle\": \"ZsdzI\",\n  \"emojiPreviewModal_emojis_groups_container\": \"asOO9\",\n  \"emojiPreviewModal_JoyPixelsIcon\": \"FSni3\",\n  \"emojiPreviewModal_scrollbar_thumb\": \"_2080K\"\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,8BAAQ;AAAA,EACb,2CAA2C;AAAA,EAC3C,8BAA8B;AAAA,EAC9B,gCAAgC;AAAA,EAChC,iCAAiC;AAAA,EACjC,2BAA2B;AAAA,EAC3B,iCAAiC;AAAA,EACjC,6CAA6C;AAAA,EAC7C,mCAAmC;AAAA,EACnC,qCAAqC;AACvC;",
   "names": []
 }

package/dist/es/plugin-figure/{caption-converter.js → converter/caption-converter.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { generateId } from "./../ricos-content";
-import { Node_Type } from "./../ricos-schema/legacy/wix/rich_content/v1";
-import { captionDefaultAttributes } from "./consts";
+import { generateId } from "./../../ricos-content";
+import { Node_Type } from "./../../ricos-schema/legacy/wix/rich_content/v1";
+import { captionDefaultAttributes } from "../consts";
 const captionConverter = {
   toPm: {
     types: [Node_Type.CAPTION],

package/dist/es/plugin-figure/converter/caption-converter.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-figure/converter/caption-converter.ts"],
+  "sourcesContent": ["import type { PmNodeConverter, PmNodeJson } from './../../pm-converters/types';\nimport { generateId } from './../../ricos-content';\nimport type { Node } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport { Node_Type } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { CaptionNode } from './../../ricos-types';\n\nimport { captionDefaultAttributes } from '../consts';\n\nexport const captionConverter: PmNodeConverter = {\n  toPm: {\n    types: [Node_Type.CAPTION],\n    convert: (node: CaptionNode, visit: (node: CaptionNode) => PmNodeJson[]) => {\n      const { style, captionData } = node || {};\n\n      return {\n        type: Node_Type.CAPTION,\n        attrs: {\n          ...captionData,\n          ...(style ? { style } : {}),\n          id: node.id ?? generateId(),\n        },\n        content: visit(node),\n      };\n    },\n  },\n  fromPm: {\n    types: [Node_Type.CAPTION],\n    convert: (node: PmNodeJson, visit: (node: PmNodeJson) => Node[]) => {\n      const { id, style, dir: _, textStyle } = node.attrs || {};\n\n      const transformedStyle = {\n        paddingBottom: excludeDefaultValue(\n          style?.paddingBottom,\n          captionDefaultAttributes.styleDefaults.paddingBottom\n        ),\n        paddingTop: excludeDefaultValue(\n          style?.paddingTop,\n          captionDefaultAttributes.styleDefaults.paddingTop\n        ),\n      };\n\n      const transformedTextStyle = {\n        textAlignment: excludeDefaultValue(\n          textStyle?.textAlignment,\n          captionDefaultAttributes.textStyle.textAlignment\n        ),\n        lineHeight: excludeDefaultValue(\n          textStyle?.lineHeight,\n          captionDefaultAttributes.textStyle.lineHeight\n        ),\n      };\n\n      return {\n        type: Node_Type.CAPTION,\n        id,\n        nodes: visit(node),\n        ...(Object.values(transformedStyle).some(v => v !== undefined) && {\n          style: transformedStyle,\n        }),\n        ...(Object.values(transformedTextStyle).some(v => v !== undefined) && {\n          captionData: { textStyle: transformedTextStyle },\n        }),\n      };\n    },\n  },\n};\n\nexport const createCaptionTiptapNode = (content?: PmNodeJson[]) => {\n  return {\n    type: Node_Type.CAPTION,\n    attrs: {\n      id: generateId(),\n    },\n    content: content ?? [],\n  };\n};\n\nfunction excludeDefaultValue<T extends string | number>(value: T, defaultValue: T) {\n  return value === defaultValue ? undefined : value;\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAG1B,SAAS,gCAAgC;AAElC,MAAM,mBAAoC;AAAA,EAC/C,MAAM;AAAA,IACJ,OAAO,CAAC,UAAU,OAAO;AAAA,IACzB,SAAS,CAAC,MAAmB,UAA+C;AAC1E,YAAM,EAAE,OAAO,YAAY,IAAI,QAAQ,CAAC;AAExC,aAAO;AAAA,QACL,MAAM,UAAU;AAAA,QAChB,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,QAAQ,EAAE,MAAM,IAAI,CAAC;AAAA,UACzB,IAAI,KAAK,MAAM,WAAW;AAAA,QAC5B;AAAA,QACA,SAAS,MAAM,IAAI;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,OAAO,CAAC,UAAU,OAAO;AAAA,IACzB,SAAS,CAAC,MAAkB,UAAwC;AAClE,YAAM,EAAE,IAAI,OAAO,KAAK,GAAG,UAAU,IAAI,KAAK,SAAS,CAAC;AAExD,YAAM,mBAAmB;AAAA,QACvB,eAAe;AAAA,UACb,OAAO;AAAA,UACP,yBAAyB,cAAc;AAAA,QACzC;AAAA,QACA,YAAY;AAAA,UACV,OAAO;AAAA,UACP,yBAAyB,cAAc;AAAA,QACzC;AAAA,MACF;AAEA,YAAM,uBAAuB;AAAA,QAC3B,eAAe;AAAA,UACb,WAAW;AAAA,UACX,yBAAyB,UAAU;AAAA,QACrC;AAAA,QACA,YAAY;AAAA,UACV,WAAW;AAAA,UACX,yBAAyB,UAAU;AAAA,QACrC;AAAA,MACF;AAEA,aAAO;AAAA,QACL,MAAM,UAAU;AAAA,QAChB;AAAA,QACA,OAAO,MAAM,IAAI;AAAA,QACjB,GAAI,OAAO,OAAO,gBAAgB,EAAE,KAAK,OAAK,MAAM,MAAS,KAAK;AAAA,UAChE,OAAO;AAAA,QACT;AAAA,QACA,GAAI,OAAO,OAAO,oBAAoB,EAAE,KAAK,OAAK,MAAM,MAAS,KAAK;AAAA,UACpE,aAAa,EAAE,WAAW,qBAAqB;AAAA,QACjD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B,CAAC,YAA2B;AACjE,SAAO;AAAA,IACL,MAAM,UAAU;AAAA,IAChB,OAAO;AAAA,MACL,IAAI,WAAW;AAAA,IACjB;AAAA,IACA,SAAS,WAAW,CAAC;AAAA,EACvB;AACF;AAEA,SAAS,oBAA+C,OAAU,cAAiB;AACjF,SAAO,UAAU,eAAe,SAAY;AAC9C;",
+  "names": []
+}

package/dist/es/plugin-figure/editor.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { TIPTAP_CAPTION_TYPE } from "./../ricos-content/consts";
-import { captionConverter } from "./caption-converter";
+import { captionConverter } from "./converter/caption-converter";
 import { captionTiptapExtension } from "./tiptap/caption-tiptap-extension";
 import { figureTiptapExtension } from "./tiptap/figure-tiptap-extension";
 const pluginFigure = {

package/dist/es/plugin-figure/editor.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-figure/editor.ts"],
-  "sourcesContent": ["import { TIPTAP_CAPTION_TYPE } from './../ricos-content/consts';\nimport type { TiptapEditorPlugin } from './../ricos-types';\n\nimport { captionConverter } from './caption-converter';\nimport { captionTiptapExtension } from './tiptap/caption-tiptap-extension';\nimport { figureTiptapExtension } from './tiptap/figure-tiptap-extension';\n\nexport const pluginFigure: TiptapEditorPlugin = {\n  type: TIPTAP_CAPTION_TYPE,\n  config: {},\n  pmMarkConverters: [],\n  pmNodeConverters: [captionConverter],\n  tiptapExtensions: [figureTiptapExtension, captionTiptapExtension],\n};\n"],
+  "sourcesContent": ["import { TIPTAP_CAPTION_TYPE } from './../ricos-content/consts';\nimport type { TiptapEditorPlugin } from './../ricos-types';\n\nimport { captionConverter } from './converter/caption-converter';\nimport { captionTiptapExtension } from './tiptap/caption-tiptap-extension';\nimport { figureTiptapExtension } from './tiptap/figure-tiptap-extension';\n\nexport const pluginFigure: TiptapEditorPlugin = {\n  type: TIPTAP_CAPTION_TYPE,\n  config: {},\n  pmMarkConverters: [],\n  pmNodeConverters: [captionConverter],\n  tiptapExtensions: [figureTiptapExtension, captionTiptapExtension],\n};\n"],
   "mappings": "AAAA,SAAS,2BAA2B;AAGpC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AAE/B,MAAM,eAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ,CAAC;AAAA,EACT,kBAAkB,CAAC;AAAA,EACnB,kBAAkB,CAAC,gBAAgB;AAAA,EACnC,kBAAkB,CAAC,uBAAuB,sBAAsB;AAClE;",
   "names": []
 }

package/dist/es/plugin-figure/tiptap/caption-scss.js CHANGED Viewed

@@ -1,6 +1,6 @@
-var styleDataHash = "9bb51026";
+var styleDataHash = "1b183b97";
 const injectCss = () => {
-  var css = `.glob_fontElementMap,.io1LJ{font-family:var(--ricos-font-family,unset)}.-pAm0{--ricos-custom-p-font-size:14px;align-items:center;color:var(--ricos-custom-p-color,unset);display:flex;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);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);padding-inline:16px;text-decoration:var(--ricos-custom-p-text-decoration,unset)}[dir] .-pAm0{text-align:center}[dir] .-pAm0>span>a,[dir] .-pAm0>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){.-pAm0{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){.-pAm0{font-size:var(--ricos-custom-p-font-size,unset)}}.sD1PE{gap:16px;padding-inline:16px 51px}`;
+  var css = `._5rHy-,.glob_fontElementMap{font-family:var(--ricos-font-family,unset)}.qgMhb{--ricos-custom-p-font-size:14px;align-items:center;color:var(--ricos-custom-p-color,unset);display:flex;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);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);padding-inline:16px;text-decoration:var(--ricos-custom-p-text-decoration,unset)}[dir] .qgMhb{text-align:center}[dir] .qgMhb>span>a,[dir] .qgMhb>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){.qgMhb{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){.qgMhb{font-size:var(--ricos-custom-p-font-size,unset)}}._6jg-U{gap:16px;padding-inline:16px 51px}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,9 +21,9 @@ const injectCss = () => {
 };
 injectCss();
 var caption_default = {
-  "fontElementMap": "io1LJ",
-  "caption": "-pAm0",
-  "withCaptionTrigger": "sD1PE"
+  "fontElementMap": "_5rHy-",
+  "caption": "qgMhb",
+  "withCaptionTrigger": "_6jg-U"
 };
 export {
   caption_default as default,

package/dist/es/plugin-figure/tiptap/caption-scss.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-figure/tiptap/caption.scss"],
-  "sourcesContent": ["var styleDataHash = '9bb51026';  \nexport const injectCss = (() => {\n  var css = `.glob_fontElementMap,.io1LJ{font-family:var(--ricos-font-family,unset)}.-pAm0{--ricos-custom-p-font-size:14px;align-items:center;color:var(--ricos-custom-p-color,unset);display:flex;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);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);padding-inline:16px;text-decoration:var(--ricos-custom-p-text-decoration,unset)}[dir] .-pAm0{text-align:center}[dir] .-pAm0>span>a,[dir] .-pAm0>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){.-pAm0{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){.-pAm0{font-size:var(--ricos-custom-p-font-size,unset)}}.sD1PE{gap:16px;padding-inline:16px 51px}`;\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\": \"io1LJ\",\n  \"caption\": \"-pAm0\",\n  \"withCaptionTrigger\": \"sD1PE\"\n};"],
+  "sourcesContent": ["var styleDataHash = '1b183b97';  \nexport const injectCss = (() => {\n  var css = `._5rHy-,.glob_fontElementMap{font-family:var(--ricos-font-family,unset)}.qgMhb{--ricos-custom-p-font-size:14px;align-items:center;color:var(--ricos-custom-p-color,unset);display:flex;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);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);padding-inline:16px;text-decoration:var(--ricos-custom-p-text-decoration,unset)}[dir] .qgMhb{text-align:center}[dir] .qgMhb>span>a,[dir] .qgMhb>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){.qgMhb{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){.qgMhb{font-size:var(--ricos-custom-p-font-size,unset)}}._6jg-U{gap:16px;padding-inline:16px 51px}`;\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\": \"_5rHy-\",\n  \"caption\": \"qgMhb\",\n  \"withCaptionTrigger\": \"_6jg-U\"\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,kBAAQ;AAAA,EACb,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,sBAAsB;AACxB;",
   "names": []
 }

package/dist/es/plugin-figure/tiptap/caption-tiptap-extension.js CHANGED Viewed

@@ -25,7 +25,7 @@ const captionTiptapExtension = createRicosNodeExtension({
       }
       return parentNode.attrs.id === selectedNode.attrs.id;
     },
-    content: "Image_Caption_Input_Placeholder",
+    content: "Figure_Caption_Input_Placeholder",
     alwaysVisible: true,
     alignCenter: true
   },

package/dist/es/plugin-figure/tiptap/caption-tiptap-extension.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-figure/tiptap/caption-tiptap-extension.ts"],
-  "sourcesContent": ["import type { Node as ProseMirrorNode } from '@tiptap/pm/model';\n\nimport { TIPTAP_CAPTION_TYPE, TIPTAP_FIGURE_TYPE } from './../../ricos-content';\nimport type { DOMOutputSpec } from './../../ricos-types';\nimport { createRicosNodeExtension } from './../../plugin-commons';\n\nimport { Caption } from './caption';\n\nexport const captionTiptapExtension = createRicosNodeExtension({\n  type: 'react-node',\n  groups: ['not-overtypable', 'custom-styles'],\n  name: TIPTAP_CAPTION_TYPE,\n  Component: Caption,\n  placeholder: {\n    predicate: ({ doc, pos, selection }) => {\n      const node = doc.resolve(pos);\n      const parentNode = node.parent;\n\n      if (parentNode.type.name !== TIPTAP_FIGURE_TYPE) {\n        return false;\n      }\n\n      let selectedNode: ProseMirrorNode | undefined;\n      doc.nodesBetween(selection.from, selection.to, node => {\n        if (node.type.name === TIPTAP_FIGURE_TYPE) {\n          selectedNode = node;\n          return false;\n        }\n      });\n\n      if (!selectedNode) {\n        return false;\n      }\n\n      return parentNode.attrs.id === selectedNode.attrs.id;\n    },\n    content: 'Image_Caption_Input_Placeholder',\n    alwaysVisible: true,\n    alignCenter: true,\n  },\n  createExtensionConfig() {\n    return {\n      name: this.name,\n      content: 'text*',\n      isolating: true,\n      draggable: false,\n      selectable: true,\n\n      addAttributes() {\n        return {\n          textStyle: {\n            default: {\n              textAlignment: 'CENTER',\n              lineHeight: 1.5,\n            },\n          },\n          // Using `styleDefaults` instead of a `style` object because\n          // Tiptap requires the default value of `style` to be a string.\n          // For more context, see:\n          // https://github.com/ueberdosis/tiptap/blob/v2.8.0/packages/core/src/utilities/mergeAttributes.ts#L26\n          styleDefaults: {\n            default: {\n              paddingTop: '16px',\n              paddingBottom: '16px',\n            },\n          },\n        };\n      },\n\n      parseHTML() {\n        return [\n          {\n            tag: 'figcaption',\n          },\n        ];\n      },\n\n      renderHTML() {\n        return ['figcaption', {}, 0] as DOMOutputSpec;\n      },\n    };\n  },\n});\n"],
+  "sourcesContent": ["import type { Node as ProseMirrorNode } from '@tiptap/pm/model';\n\nimport { TIPTAP_CAPTION_TYPE, TIPTAP_FIGURE_TYPE } from './../../ricos-content';\nimport type { DOMOutputSpec } from './../../ricos-types';\nimport { createRicosNodeExtension } from './../../plugin-commons';\n\nimport { Caption } from './caption';\n\nexport const captionTiptapExtension = createRicosNodeExtension({\n  type: 'react-node',\n  groups: ['not-overtypable', 'custom-styles'],\n  name: TIPTAP_CAPTION_TYPE,\n  Component: Caption,\n  placeholder: {\n    predicate: ({ doc, pos, selection }) => {\n      const node = doc.resolve(pos);\n      const parentNode = node.parent;\n\n      if (parentNode.type.name !== TIPTAP_FIGURE_TYPE) {\n        return false;\n      }\n\n      let selectedNode: ProseMirrorNode | undefined;\n      doc.nodesBetween(selection.from, selection.to, node => {\n        if (node.type.name === TIPTAP_FIGURE_TYPE) {\n          selectedNode = node;\n          return false;\n        }\n      });\n\n      if (!selectedNode) {\n        return false;\n      }\n\n      return parentNode.attrs.id === selectedNode.attrs.id;\n    },\n    content: 'Figure_Caption_Input_Placeholder',\n    alwaysVisible: true,\n    alignCenter: true,\n  },\n  createExtensionConfig() {\n    return {\n      name: this.name,\n      content: 'text*',\n      isolating: true,\n      draggable: false,\n      selectable: true,\n\n      addAttributes() {\n        return {\n          textStyle: {\n            default: {\n              textAlignment: 'CENTER',\n              lineHeight: 1.5,\n            },\n          },\n          // Using `styleDefaults` instead of a `style` object because\n          // Tiptap requires the default value of `style` to be a string.\n          // For more context, see:\n          // https://github.com/ueberdosis/tiptap/blob/v2.8.0/packages/core/src/utilities/mergeAttributes.ts#L26\n          styleDefaults: {\n            default: {\n              paddingTop: '16px',\n              paddingBottom: '16px',\n            },\n          },\n        };\n      },\n\n      parseHTML() {\n        return [\n          {\n            tag: 'figcaption',\n          },\n        ];\n      },\n\n      renderHTML() {\n        return ['figcaption', {}, 0] as DOMOutputSpec;\n      },\n    };\n  },\n});\n"],
   "mappings": "AAEA,SAAS,qBAAqB,0BAA0B;AAExD,SAAS,gCAAgC;AAEzC,SAAS,eAAe;AAEjB,MAAM,yBAAyB,yBAAyB;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ,CAAC,mBAAmB,eAAe;AAAA,EAC3C,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AAAA,IACX,WAAW,CAAC,EAAE,KAAK,KAAK,UAAU,MAAM;AACtC,YAAM,OAAO,IAAI,QAAQ,GAAG;AAC5B,YAAM,aAAa,KAAK;AAExB,UAAI,WAAW,KAAK,SAAS,oBAAoB;AAC/C,eAAO;AAAA,MACT;AAEA,UAAI;AACJ,UAAI,aAAa,UAAU,MAAM,UAAU,IAAI,CAAAA,UAAQ;AACrD,YAAIA,MAAK,KAAK,SAAS,oBAAoB;AACzC,yBAAeA;AACf,iBAAO;AAAA,QACT;AAAA,MACF,CAAC;AAED,UAAI,CAAC,cAAc;AACjB,eAAO;AAAA,MACT;AAEA,aAAO,WAAW,MAAM,OAAO,aAAa,MAAM;AAAA,IACpD;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,aAAa;AAAA,EACf;AAAA,EACA,wBAAwB;AACtB,WAAO;AAAA,MACL,MAAM,KAAK;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ,gBAAgB;AACd,eAAO;AAAA,UACL,WAAW;AAAA,YACT,SAAS;AAAA,cACP,eAAe;AAAA,cACf,YAAY;AAAA,YACd;AAAA,UACF;AAAA;AAAA;AAAA;AAAA;AAAA,UAKA,eAAe;AAAA,YACb,SAAS;AAAA,cACP,YAAY;AAAA,cACZ,eAAe;AAAA,YACjB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEA,YAAY;AACV,eAAO;AAAA,UACL;AAAA,YACE,KAAK;AAAA,UACP;AAAA,QACF;AAAA,MACF;AAAA,MAEA,aAAa;AACX,eAAO,CAAC,cAAc,CAAC,GAAG,CAAC;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
   "names": ["node"]
 }

package/dist/es/plugin-figure/tiptap/caption.js CHANGED Viewed

@@ -1,29 +1,30 @@
 import classNames from "classnames";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { useConverters } from "./../../pm-converters/context";
 import { TIPTAP_CAPTION_TYPE } from "./../../ricos-content";
-import { EditorContext, PluginsEventsContext, usePluginExportsContext } from "./../../ricos-context";
+import { PluginsEventsContext, RicosContext, usePluginExportsContext } from "./../../ricos-context";
 import { Node_Type } from "./../../ricos-types";
+import generalStyles from "../../editor-common/statics/styles/general-scss";
+import generalRTLIgnoredStyles from "../../wix-rich-content-common/statics/styles/general.rtlignore-scss";
 import { CAPTION } from "../data-hooks";
 import classes from "./caption-scss";
-import { useNodeContainerClasses } from "./class-name-strategies";
+import { useEditorSelection } from "./use-editor-selection";
+const stylesWithRTL = { ...generalStyles, ...generalRTLIgnoredStyles };
 const Caption = ({ NodeViewContent, editor, node }) => {
-  const { getEditorCommands } = useContext(EditorContext);
+  const { isMobile } = useContext(RicosContext);
   const pluginsEvents = useContext(PluginsEventsContext);
   const pluginExports = usePluginExportsContext();
-  const [selectedNodes, setSelectedNodes] = useState(
-    () => getEditorCommands().getSelection().selectedNodes
-  );
+  const selectedNodes = useEditorSelection(editor).selectedNodes;
   const captionNodePos = editor.$doc.querySelector(TIPTAP_CAPTION_TYPE, {
     id: node.attrs.id
   });
   const converters = useConverters();
   if (!captionNodePos?.parent?.node) {
+    console.error("Caption must have a parent.");
     return null;
   }
-  const ricosParentNode = converters.fromPmNode(captionNodePos?.parent?.node.toJSON());
+  const ricosParentNode = converters.fromPmNode(captionNodePos.parent.node.toJSON());
   const AiButton = pluginExports.aiIntegrations?.image?.captionTrigger;
-  const containerClasses = useNodeContainerClasses({ editor, nodeId: node.attrs.id });
   const isCaptionSelected = selectedNodes.find(
     (selectedNode) => selectedNode.attrs.id === node.attrs?.id
   );
@@ -36,31 +37,23 @@ const Caption = ({ NodeViewContent, editor, node }) => {
     }
     pluginsEvents?.publishPluginLayoutShift({ nodeId: node.attrs.id });
   }, [isCaptionSelected, isParentSelected]);
-  useEffect(() => {
-    const onSelectionUpdate = () => {
-      setSelectedNodes(getEditorCommands().getSelection().selectedNodes);
-    };
-    editor.on("selectionUpdate", onSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", onSelectionUpdate);
-    };
-  }, []);
   const hasAiButton = isCaptionSelected && ricosParentNode?.type === Node_Type.IMAGE && AiButton;
-  return isCaptionSelected || isParentSelected || !!node.content.firstChild?.text ? /* @__PURE__ */ React.createElement(
+  return isCaptionSelected || isParentSelected || !!node.content.firstChild ? /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: classNames(classes.caption, containerClasses, {
-        [classes.withCaptionTrigger]: hasAiButton
-      })
+      className: classNames(
+        classes.caption,
+        getNodeContainerClasses(editor, node.attrs.id, isMobile),
+        {
+          [classes.withCaptionTrigger]: hasAiButton
+        }
+      )
     },
     hasAiButton ? /* @__PURE__ */ React.createElement(
       AiButton,
       {
         node: ricosParentNode,
         onCaptionChange: (caption) => {
-          if (!captionNodePos) {
-            return;
-          }
           const { range } = captionNodePos;
           const { tr } = editor.state;
           tr.insertText(caption, range.from, range.to);
@@ -86,6 +79,18 @@ const Caption = ({ NodeViewContent, editor, node }) => {
     )
   ) : null;
 };
+const getNodeContainerClasses = (editor, nodeId, isMobile) => {
+  let isFocused = false;
+  const selection = editor.state.selection;
+  editor.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+    node.attrs.id === nodeId && (isFocused = true);
+  });
+  return classNames(stylesWithRTL.pluginContainer, {
+    [stylesWithRTL.pluginContainerMobile]: isMobile,
+    [stylesWithRTL.hasFocus]: isFocused,
+    [stylesWithRTL.hideTextSelection]: !isFocused
+  });
+};
 export {
   Caption
 };

package/dist/es/plugin-figure/tiptap/caption.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-figure/tiptap/caption.tsx"],
-  "sourcesContent": ["import type { Node as PmNode } from '@tiptap/pm/model';\nimport classNames from 'classnames';\nimport React, { useContext, useEffect, useState } from 'react';\n\nimport { useConverters } from './../../pm-converters/context';\nimport { TIPTAP_CAPTION_TYPE } from './../../ricos-content';\nimport { EditorContext, PluginsEventsContext, usePluginExportsContext } from './../../ricos-context';\nimport type { ImageNode } from './../../ricos-schema/next-schema';\nimport type { PluginProps } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nimport { CAPTION } from '../data-hooks';\nimport classes from './caption-scss';\nimport { useNodeContainerClasses } from './class-name-strategies';\n\nexport const Caption: React.FC<PluginProps> = ({ NodeViewContent, editor, node }) => {\n  const { getEditorCommands } = useContext(EditorContext);\n  const pluginsEvents = useContext(PluginsEventsContext);\n  const pluginExports = usePluginExportsContext();\n  const [selectedNodes, setSelectedNodes] = useState<PmNode[]>(\n    () => getEditorCommands().getSelection().selectedNodes\n  );\n  const captionNodePos = editor.$doc.querySelector(TIPTAP_CAPTION_TYPE, {\n    id: node.attrs.id,\n  });\n  const converters = useConverters();\n  if (!captionNodePos?.parent?.node) {\n    return null;\n  }\n  const ricosParentNode = converters.fromPmNode(captionNodePos?.parent?.node.toJSON());\n\n  const AiButton = pluginExports.aiIntegrations?.image?.captionTrigger;\n  const containerClasses = useNodeContainerClasses({ editor, nodeId: node.attrs.id });\n\n  const isCaptionSelected = selectedNodes.find(\n    selectedNode => selectedNode.attrs.id === node.attrs?.id\n  );\n  const isParentSelected = selectedNodes.find(\n    selectedNode => selectedNode.attrs.id === ricosParentNode?.id\n  );\n\n  useEffect(() => {\n    if (node.content.firstChild?.text || isCaptionSelected || isParentSelected) {\n      return;\n    }\n    pluginsEvents?.publishPluginLayoutShift({ nodeId: node.attrs.id });\n  }, [isCaptionSelected, isParentSelected]);\n\n  useEffect(() => {\n    const onSelectionUpdate = () => {\n      setSelectedNodes(getEditorCommands().getSelection().selectedNodes);\n    };\n\n    editor.on('selectionUpdate', onSelectionUpdate);\n\n    return () => {\n      editor.off('selectionUpdate', onSelectionUpdate);\n    };\n  }, []);\n\n  const hasAiButton = isCaptionSelected && ricosParentNode?.type === Node_Type.IMAGE && AiButton;\n\n  return isCaptionSelected || isParentSelected || !!node.content.firstChild?.text ? (\n    <div\n      className={classNames(classes.caption, containerClasses, {\n        [classes.withCaptionTrigger]: hasAiButton,\n      })}\n    >\n      {hasAiButton ? (\n        <AiButton\n          node={ricosParentNode as ImageNode}\n          onCaptionChange={caption => {\n            if (!captionNodePos) {\n              return;\n            }\n            const { range } = captionNodePos;\n            const { tr } = editor.state;\n\n            tr.insertText(caption, range.from, range.to);\n            editor.view.dispatch(tr);\n          }}\n        />\n      ) : null}\n      <NodeViewContent\n        dir=\"auto\"\n        data-hook={CAPTION}\n        as=\"figcaption\"\n        style={{\n          width: '100%',\n          overflow: 'auto',\n          lineHeight: node.attrs?.textStyle?.lineHeight,\n          textAlign: node.attrs?.textStyle?.textAlignment,\n          paddingTop: node.attrs?.style?.paddingTop ?? node.attrs?.styleDefaults?.paddingTop,\n          paddingBottom:\n            node.attrs?.style?.paddingBottom ?? node.attrs?.styleDefaults?.paddingBottom,\n        }}\n      />\n    </div>\n  ) : null;\n};\n"],
-  "mappings": "AACA,OAAO,gBAAgB;AACvB,OAAO,SAAS,YAAY,WAAW,gBAAgB;AAEvD,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,eAAe,sBAAsB,+BAA+B;AAG7E,SAAS,iBAAiB;AAE1B,SAAS,eAAe;AACxB,OAAO,aAAa;AACpB,SAAS,+BAA+B;AAEjC,MAAM,UAAiC,CAAC,EAAE,iBAAiB,QAAQ,KAAK,MAAM;AACnF,QAAM,EAAE,kBAAkB,IAAI,WAAW,aAAa;AACtD,QAAM,gBAAgB,WAAW,oBAAoB;AACrD,QAAM,gBAAgB,wBAAwB;AAC9C,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,MAAM,kBAAkB,EAAE,aAAa,EAAE;AAAA,EAC3C;AACA,QAAM,iBAAiB,OAAO,KAAK,cAAc,qBAAqB;AAAA,IACpE,IAAI,KAAK,MAAM;AAAA,EACjB,CAAC;AACD,QAAM,aAAa,cAAc;AACjC,MAAI,CAAC,gBAAgB,QAAQ,MAAM;AACjC,WAAO;AAAA,EACT;AACA,QAAM,kBAAkB,WAAW,WAAW,gBAAgB,QAAQ,KAAK,OAAO,CAAC;AAEnF,QAAM,WAAW,cAAc,gBAAgB,OAAO;AACtD,QAAM,mBAAmB,wBAAwB,EAAE,QAAQ,QAAQ,KAAK,MAAM,GAAG,CAAC;AAElF,QAAM,oBAAoB,cAAc;AAAA,IACtC,kBAAgB,aAAa,MAAM,OAAO,KAAK,OAAO;AAAA,EACxD;AACA,QAAM,mBAAmB,cAAc;AAAA,IACrC,kBAAgB,aAAa,MAAM,OAAO,iBAAiB;AAAA,EAC7D;AAEA,YAAU,MAAM;AACd,QAAI,KAAK,QAAQ,YAAY,QAAQ,qBAAqB,kBAAkB;AAC1E;AAAA,IACF;AACA,mBAAe,yBAAyB,EAAE,QAAQ,KAAK,MAAM,GAAG,CAAC;AAAA,EACnE,GAAG,CAAC,mBAAmB,gBAAgB,CAAC;AAExC,YAAU,MAAM;AACd,UAAM,oBAAoB,MAAM;AAC9B,uBAAiB,kBAAkB,EAAE,aAAa,EAAE,aAAa;AAAA,IACnE;AAEA,WAAO,GAAG,mBAAmB,iBAAiB;AAE9C,WAAO,MAAM;AACX,aAAO,IAAI,mBAAmB,iBAAiB;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,qBAAqB,iBAAiB,SAAS,UAAU,SAAS;AAEtF,SAAO,qBAAqB,oBAAoB,CAAC,CAAC,KAAK,QAAQ,YAAY,OACzE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,QAAQ,SAAS,kBAAkB;AAAA,QACvD,CAAC,QAAQ,kBAAkB,GAAG;AAAA,MAChC,CAAC;AAAA;AAAA,IAEA,cACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,iBAAiB,aAAW;AAC1B,cAAI,CAAC,gBAAgB;AACnB;AAAA,UACF;AACA,gBAAM,EAAE,MAAM,IAAI;AAClB,gBAAM,EAAE,GAAG,IAAI,OAAO;AAEtB,aAAG,WAAW,SAAS,MAAM,MAAM,MAAM,EAAE;AAC3C,iBAAO,KAAK,SAAS,EAAE;AAAA,QACzB;AAAA;AAAA,IACF,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,aAAW;AAAA,QACX,IAAG;AAAA,QACH,OAAO;AAAA,UACL,OAAO;AAAA,UACP,UAAU;AAAA,UACV,YAAY,KAAK,OAAO,WAAW;AAAA,UACnC,WAAW,KAAK,OAAO,WAAW;AAAA,UAClC,YAAY,KAAK,OAAO,OAAO,cAAc,KAAK,OAAO,eAAe;AAAA,UACxE,eACE,KAAK,OAAO,OAAO,iBAAiB,KAAK,OAAO,eAAe;AAAA,QACnE;AAAA;AAAA,IACF;AAAA,EACF,IACE;AACN;",
+  "sourcesContent": ["import type { Editor } from '@tiptap/react';\nimport classNames from 'classnames';\nimport React, { useContext, useEffect } from 'react';\n\nimport { useConverters } from './../../pm-converters/context';\nimport { TIPTAP_CAPTION_TYPE } from './../../ricos-content';\nimport { PluginsEventsContext, RicosContext, usePluginExportsContext } from './../../ricos-context';\nimport type { ImageNode } from './../../ricos-schema/next-schema';\nimport type { PluginProps } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nimport generalStyles from '../../editor-common/statics/styles/general-scss';\nimport generalRTLIgnoredStyles from '../../wix-rich-content-common/statics/styles/general.rtlignore-scss';\nimport { CAPTION } from '../data-hooks';\nimport classes from './caption-scss';\nimport { useEditorSelection } from './use-editor-selection';\n\nconst stylesWithRTL = { ...generalStyles, ...generalRTLIgnoredStyles };\n\nexport const Caption: React.FC<PluginProps> = ({ NodeViewContent, editor, node }) => {\n  const { isMobile } = useContext(RicosContext);\n  const pluginsEvents = useContext(PluginsEventsContext);\n  const pluginExports = usePluginExportsContext();\n  const selectedNodes = useEditorSelection(editor).selectedNodes;\n  const captionNodePos = editor.$doc.querySelector(TIPTAP_CAPTION_TYPE, {\n    id: node.attrs.id,\n  });\n  const converters = useConverters();\n  if (!captionNodePos?.parent?.node) {\n    console.error('Caption must have a parent.');\n    return null;\n  }\n  const ricosParentNode = converters.fromPmNode(captionNodePos.parent.node.toJSON());\n\n  const AiButton = pluginExports.aiIntegrations?.image?.captionTrigger;\n\n  const isCaptionSelected = selectedNodes.find(\n    selectedNode => selectedNode.attrs.id === node.attrs?.id\n  );\n  const isParentSelected = selectedNodes.find(\n    selectedNode => selectedNode.attrs.id === ricosParentNode?.id\n  );\n\n  useEffect(() => {\n    if (node.content.firstChild?.text || isCaptionSelected || isParentSelected) {\n      return;\n    }\n    pluginsEvents?.publishPluginLayoutShift({ nodeId: node.attrs.id });\n  }, [isCaptionSelected, isParentSelected]);\n\n  const hasAiButton = isCaptionSelected && ricosParentNode?.type === Node_Type.IMAGE && AiButton;\n\n  return isCaptionSelected || isParentSelected || !!node.content.firstChild ? (\n    <div\n      className={classNames(\n        classes.caption,\n        getNodeContainerClasses(editor, node.attrs.id, isMobile),\n        {\n          [classes.withCaptionTrigger]: hasAiButton,\n        }\n      )}\n    >\n      {hasAiButton ? (\n        <AiButton\n          node={ricosParentNode as ImageNode}\n          onCaptionChange={caption => {\n            const { range } = captionNodePos;\n            const { tr } = editor.state;\n\n            tr.insertText(caption, range.from, range.to);\n            editor.view.dispatch(tr);\n          }}\n        />\n      ) : null}\n      <NodeViewContent\n        dir=\"auto\"\n        data-hook={CAPTION}\n        as=\"figcaption\"\n        style={{\n          width: '100%',\n          overflow: 'auto',\n          lineHeight: node.attrs?.textStyle?.lineHeight,\n          textAlign: node.attrs?.textStyle?.textAlignment,\n          paddingTop: node.attrs?.style?.paddingTop ?? node.attrs?.styleDefaults?.paddingTop,\n          paddingBottom:\n            node.attrs?.style?.paddingBottom ?? node.attrs?.styleDefaults?.paddingBottom,\n        }}\n      />\n    </div>\n  ) : null;\n};\n\nconst getNodeContainerClasses = (editor: Editor, nodeId: string, isMobile: boolean) => {\n  let isFocused = false;\n  const selection = editor.state.selection;\n  editor.state.doc.nodesBetween(selection.from, selection.to, node => {\n    node.attrs.id === nodeId && (isFocused = true);\n  });\n\n  return classNames(stylesWithRTL.pluginContainer, {\n    [stylesWithRTL.pluginContainerMobile]: isMobile,\n    [stylesWithRTL.hasFocus]: isFocused,\n    [stylesWithRTL.hideTextSelection]: !isFocused,\n  });\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-figure/tiptap/figure-scss.js CHANGED Viewed

@@ -1,6 +1,6 @@
-var styleDataHash = "b32cbfe0";
+var styleDataHash = "cc38b873";
 const injectCss = () => {
-  var css = `.Th8LX{display:block!important}[dir] .Th8LX{margin:12px 0}`;
+  var css = `._4m5sV{display:block!important}[dir] ._4m5sV{margin:12px 0}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,7 +21,7 @@ const injectCss = () => {
 };
 injectCss();
 var figure_default = {
-  "figure": "Th8LX"
+  "figure": "_4m5sV"
 };
 export {
   figure_default as default,

package/dist/es/plugin-figure/tiptap/figure-scss.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-figure/tiptap/figure.scss"],
-  "sourcesContent": ["var styleDataHash = 'b32cbfe0';  \nexport const injectCss = (() => {\n  var css = `.Th8LX{display:block!important}[dir] .Th8LX{margin:12px 0}`;\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  \"figure\": \"Th8LX\"\n};"],
+  "sourcesContent": ["var styleDataHash = 'cc38b873';  \nexport const injectCss = (() => {\n  var css = `._4m5sV{display:block!important}[dir] ._4m5sV{margin:12px 0}`;\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  \"figure\": \"_4m5sV\"\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,iBAAQ;AAAA,EACb,UAAU;AACZ;",
   "names": []
 }

package/dist/es/plugin-figure/tiptap/figure-tiptap-extension.js CHANGED Viewed

@@ -1,7 +1,10 @@
 import { findParentNodeClosestToPos, isMacOS } from "@tiptap/core";
+import { Fragment, Slice } from "@tiptap/pm/model";
 import { NodeSelection, TextSelection } from "@tiptap/pm/state";
-import { TIPTAP_CAPTION_TYPE, TIPTAP_FIGURE_TYPE, TIPTAP_IMAGE_TYPE } from "./../../ricos-content";
+import { TIPTAP_CAPTION_TYPE, TIPTAP_FIGURE_TYPE } from "./../../ricos-content";
 import { createRicosNodeExtension } from "./../../plugin-commons";
+import { findNodeById } from "./../../tiptap-editor/helpers";
+import generalStyles from "../../editor-common/statics/styles/general-scss";
 import { Figure } from "./figure";
 const figureTiptapExtension = createRicosNodeExtension({
   type: "react-node",
@@ -17,22 +20,29 @@ const figureTiptapExtension = createRicosNodeExtension({
   Component: Figure,
   renderingOptions: {
     onDragStart({ editor, dragHandle, event }) {
-      const target = event.target;
-      if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
-        event.stopPropagation();
+      if (!this.dom || !dragHandle) {
         return;
       }
       if (this.dom === dragHandle) {
         event.dataTransfer?.setDragImage(this.dom, 0, 0);
       } else {
-        const domBox = this.dom.getBoundingClientRect();
+        const figure = this.dom.querySelector("figure");
+        if (!figure) {
+          console.error("figure element not found");
+          return;
+        }
+        const domBox = figure.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);
+        figure?.classList.add(generalStyles.dragImageView);
+        event.dataTransfer?.setDragImage(figure, x, y);
+        setTimeout(() => {
+          figure?.classList.remove(generalStyles.dragImageView);
+        }, 0);
       }
-      const selection = NodeSelection.create(editor.view.state.doc, this.getPos() - 1);
+      const selection = NodeSelection.create(editor.view.state.tr.doc, this.getPos());
       const transaction = editor.view.state.tr.setSelection(selection);
       editor.view.dispatch(transaction);
     }
@@ -42,8 +52,8 @@ const figureTiptapExtension = createRicosNodeExtension({
       name: this.name,
       group: "block",
       selectable: true,
-      draggable: false,
-      content: `${TIPTAP_IMAGE_TYPE} ${TIPTAP_CAPTION_TYPE}`,
+      draggable: true,
+      content: "figure CAPTION",
       priority: 101,
       parseHTML() {
         return [
@@ -164,6 +174,20 @@ const figureTiptapExtension = createRicosNodeExtension({
           new Plugin({
             key: new PluginKey("figure-handle-paste"),
             props: {
+              transformCopied: (slice, { state }) => {
+                const node = slice.content.firstChild;
+                if (slice.content.size === 1 && node?.type.spec.group?.includes("figure")) {
+                  const childPos = findNodeById(state.tr, node.attrs.id)[0]?.pos;
+                  const figureNode = state.doc.resolve(childPos).parent;
+                  const newSlice = new Slice(
+                    Fragment.from(figureNode),
+                    slice.openStart,
+                    slice.openEnd
+                  );
+                  return newSlice;
+                }
+                return slice;
+              },
               transformPastedHTML(html) {
                 if (!html.includes("<figure")) {
                   return html;
@@ -171,8 +195,8 @@ const figureTiptapExtension = createRicosNodeExtension({
                 const newHtml = document.createElement("div");
                 newHtml.innerHTML = html;
                 newHtml.querySelectorAll("figure").forEach((figure) => {
-                  const img = figure.querySelector("image-component");
-                  if (!img) {
+                  const child = figure.querySelector("image-component, video-component");
+                  if (!child) {
                     figure.remove();
                   }
                 });

package/dist/es/plugin-figure/tiptap/figure-tiptap-extension.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-figure/tiptap/figure-tiptap-extension.ts"],
-  "sourcesContent": ["import { findParentNodeClosestToPos, isMacOS } from '@tiptap/core';\nimport type { Node as PmNode, ResolvedPos } from '@tiptap/pm/model';\nimport { NodeSelection, TextSelection } from '@tiptap/pm/state';\nimport type { EditorView } from '@tiptap/pm/view';\n\nimport { TIPTAP_CAPTION_TYPE, TIPTAP_FIGURE_TYPE, TIPTAP_IMAGE_TYPE } from './../../ricos-content';\nimport type { ExtensionProps, NodeConfig, RicosExtension, RicosServices } from './../../ricos-types';\nimport { createRicosNodeExtension } from './../../plugin-commons';\n\nimport { Figure } from './figure';\n\nexport const figureTiptapExtension = createRicosNodeExtension({\n  type: 'react-node',\n  name: TIPTAP_FIGURE_TYPE,\n  groups: ['custom-styles'],\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      ...settings,\n    }),\n  }),\n  Component: Figure,\n  renderingOptions: {\n    onDragStart({ editor, dragHandle, event }) {\n      const target = event.target as HTMLElement;\n      if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {\n        event.stopPropagation();\n        return;\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        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      const selection = NodeSelection.create(editor.view.state.doc, this.getPos() - 1);\n      const transaction = editor.view.state.tr.setSelection(selection);\n\n      editor.view.dispatch(transaction);\n    },\n  },\n  createExtensionConfig({ Plugin, PluginKey }) {\n    return {\n      name: this.name,\n      group: 'block',\n      selectable: true,\n      draggable: false,\n      content: `${TIPTAP_IMAGE_TYPE} ${TIPTAP_CAPTION_TYPE}`,\n      priority: 101,\n\n      parseHTML() {\n        return [\n          {\n            tag: 'figure',\n          },\n        ];\n      },\n\n      renderHTML({ HTMLAttributes }) {\n        return ['figure', HTMLAttributes, 0];\n      },\n\n      addProseMirrorPlugins() {\n        return [\n          new Plugin({\n            key: new PluginKey('remove-invalid-figures'),\n            appendTransaction(transactions, oldState, newState) {\n              const docChanged =\n                transactions.some(transaction => transaction.docChanged) &&\n                !oldState.doc.eq(newState.doc);\n\n              if (!docChanged) {\n                return;\n              }\n\n              const tr = newState.tr;\n              tr.doc.descendants((node, pos) => {\n                if (\n                  node.type.name === TIPTAP_FIGURE_TYPE &&\n                  node.firstChild?.attrs.id === null &&\n                  !node.firstChild?.attrs.loading\n                ) {\n                  tr.delete(pos, pos + node.nodeSize);\n                  tr.setMeta('remove-invalid-figure', true);\n                }\n              });\n\n              return tr;\n            },\n          }),\n          new Plugin({\n            key: new PluginKey('figure-selection-listener'),\n            // modifies selection to select whole figure when selection includes caption and any other node\n            appendTransaction(_, __, newState) {\n              const { tr, selection } = newState;\n              const { $anchor, $head } = selection;\n\n              if (\n                !(selection instanceof TextSelection) ||\n                selection.$anchor.node().attrs.id === selection.$head.node().attrs.id ||\n                selection.anchor === selection.head\n              ) {\n                return undefined;\n              }\n\n              const isAnchorCaption = $anchor.node().type.name === TIPTAP_CAPTION_TYPE;\n              const isHeadCaption = $head.node().type.name === TIPTAP_CAPTION_TYPE;\n\n              if (isAnchorCaption || isHeadCaption) {\n                const $anchor = selection.$anchor;\n                const $head = selection.$head;\n\n                // Case 1: Text node above -> Caption,  change head to select caption end\n                if (isHeadCaption && !isAnchorCaption && selection.head === selection.to) {\n                  return tr.setSelection(\n                    TextSelection.create(tr.doc, $anchor.pos, $head.end() + 2)\n                  );\n                }\n\n                // Case 2: Text node below -> Caption,  change head to select whole figure\n                if (isHeadCaption && !isAnchorCaption && selection.from === selection.head) {\n                  return tr.setSelection(\n                    TextSelection.create(tr.doc, $anchor.pos, $head.before() - 2)\n                  );\n                }\n\n                // Case 3: Caption -> Text node above, change anchor to select caption end\n                if (isAnchorCaption && !isHeadCaption && $anchor.pos > $head.pos) {\n                  return tr.setSelection(\n                    TextSelection.create(tr.doc, $anchor.end() + 2, $head.pos)\n                  );\n                }\n\n                // Case 4: Caption -> Text node below, change anchor to select whole figure\n                if (isAnchorCaption && !isHeadCaption && $anchor.pos < $head.pos) {\n                  return tr.setSelection(\n                    TextSelection.create(tr.doc, $anchor.start() - 3, $head.pos)\n                  );\n                }\n              }\n\n              return undefined;\n            },\n            props: {\n              handleKeyDown(view, event) {\n                const code = event.keyCode;\n                const mods = getMods(event);\n\n                const backSpace = code === 8;\n                const arrowLeft = code === 37;\n                const arrowUp = code === 38;\n                const ctrlP = isMacOS() && code === 80 && mods === 'c'; // works like ArrowUp\n\n                if (view.state.selection.content().size > 2) {\n                  return;\n                }\n\n                if (backSpace || arrowLeft || arrowUp || ctrlP) {\n                  const checkEndOfTextBlock = backSpace || arrowLeft;\n                  const { node, pos } = findSelectableNodeBackward(view, checkEndOfTextBlock) || {};\n\n                  if (\n                    node?.type.name === TIPTAP_FIGURE_TYPE &&\n                    node?.lastChild?.textContent === '' &&\n                    pos !== undefined\n                  ) {\n                    view.dispatch(\n                      view.state.tr\n                        .setSelection(NodeSelection.create(view.state.doc, pos + 1))\n                        .scrollIntoView()\n                    );\n                    return true;\n                  }\n                }\n\n                if (\n                  (arrowUp || ctrlP) &&\n                  view.state.selection.$anchor.node().type.name === TIPTAP_CAPTION_TYPE\n                ) {\n                  const parent = findParentNodeClosestToPos(\n                    view.state.selection.$anchor,\n                    node => node?.type?.name === TIPTAP_FIGURE_TYPE\n                  );\n\n                  if (!parent) {\n                    return;\n                  }\n\n                  view.dispatch(\n                    view.state.tr\n                      .setSelection(NodeSelection.create(view.state.doc, parent.pos + 1))\n                      .scrollIntoView()\n                  );\n                  return true;\n                }\n\n                if (\n                  backSpace &&\n                  view.state.selection.$anchor.node().type.name === TIPTAP_CAPTION_TYPE &&\n                  view.state.selection.empty &&\n                  view.state.selection.$anchor.pos === view.state.selection.$anchor.start()\n                ) {\n                  const parent = findParentNodeClosestToPos(\n                    view.state.selection.$anchor,\n                    node => node?.type?.name === TIPTAP_FIGURE_TYPE\n                  );\n\n                  if (!parent) {\n                    return;\n                  }\n\n                  view.dispatch(\n                    view.state.tr\n                      .setSelection(NodeSelection.create(view.state.doc, parent.pos + 1))\n                      .scrollIntoView()\n                  );\n                  return true;\n                }\n              },\n            },\n          }),\n          new Plugin({\n            key: new PluginKey('figure-handle-paste'),\n            props: {\n              transformPastedHTML(html) {\n                if (!html.includes('<figure')) {\n                  return html;\n                }\n                const newHtml = document.createElement('div');\n                newHtml.innerHTML = html;\n                newHtml.querySelectorAll('figure').forEach(figure => {\n                  const img = figure.querySelector('image-component');\n                  if (!img) {\n                    figure.remove();\n                  }\n                });\n                return newHtml.innerHTML;\n              },\n            },\n          }),\n          new Plugin({\n            // hack for mobile web\n            key: new PluginKey('figure-mobile-selection-fixer'),\n            props: {\n              createSelectionBetween(view, anchor, head) {\n                try {\n                  const anchorNode = view.state.doc.resolve(anchor.pos).node();\n                  const headNode = view.state.doc.resolve(head.pos).node();\n                  if (\n                    anchor.pos === head.pos - 1 &&\n                    anchorNode.type.name === 'FIGURE' &&\n                    headNode.type.name === 'FIGURE'\n                  ) {\n                    return NodeSelection.create(view.state.doc, anchor.pos);\n                  }\n                } catch (e) {\n                  console.error(e);\n                  return null;\n                }\n                return null;\n              },\n            },\n          }),\n        ];\n      },\n    };\n  },\n});\n\nfunction getMods(event: KeyboardEvent) {\n  let result = '';\n  if (event.ctrlKey) result += 'c';\n  if (event.metaKey) result += 'm';\n  if (event.altKey) result += 'a';\n  if (event.shiftKey) result += 's';\n  return result;\n}\n\nconst findSelectableNodeBackward = (\n  view: EditorView,\n  checkEndOfTextBlock: boolean\n): { node: PmNode; pos: number } | null => {\n  const { $head } = view.state.selection;\n  let $cut: ResolvedPos | null = $head;\n\n  if ($head.parent.isTextblock) {\n    if (checkEndOfTextBlock && !view.endOfTextblock('backward', view.state)) {\n      return null;\n    }\n    $cut = findCutBefore($head);\n  }\n  const node = $cut ? $cut.nodeBefore : null;\n  if (!node || !NodeSelection.isSelectable(node)) {\n    return null;\n  }\n  return { node, pos: $cut!.pos - node.nodeSize };\n};\n\n// copied from https://github.com/ProseMirror/prosemirror-commands/blob/54e2c94f6897c15c6dcb2b873ff18f62bff8a127/src/commands.ts#L153\nconst findCutBefore = ($pos: ResolvedPos): ResolvedPos | null => {\n  if (!$pos.parent.type.spec.isolating)\n    for (let i = $pos.depth - 1; i >= 0; i--) {\n      if ($pos.index(i) > 0) return $pos.doc.resolve($pos.before(i + 1));\n      if ($pos.node(i).type.spec.isolating) break;\n    }\n  return null;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { findParentNodeClosestToPos, isMacOS } from '@tiptap/core';\nimport type { Node as PmNode, ResolvedPos } from '@tiptap/pm/model';\nimport { Fragment, Slice } from '@tiptap/pm/model';\nimport { NodeSelection, TextSelection } from '@tiptap/pm/state';\nimport type { EditorView } from '@tiptap/pm/view';\n\nimport { TIPTAP_CAPTION_TYPE, TIPTAP_FIGURE_TYPE } from './../../ricos-content';\nimport type { ExtensionProps, NodeConfig, RicosExtension, RicosServices } from './../../ricos-types';\nimport { createRicosNodeExtension } from './../../plugin-commons';\nimport { findNodeById } from './../../tiptap-editor/helpers';\n\nimport generalStyles from '../../editor-common/statics/styles/general-scss';\nimport { Figure } from './figure';\n\nexport const figureTiptapExtension = createRicosNodeExtension({\n  type: 'react-node',\n  name: TIPTAP_FIGURE_TYPE,\n  groups: ['custom-styles'],\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      ...settings,\n    }),\n  }),\n  Component: Figure,\n  renderingOptions: {\n    onDragStart({ editor, dragHandle, event }) {\n      if (!this.dom || !dragHandle) {\n        return;\n      }\n      if (this.dom === dragHandle) {\n        event.dataTransfer?.setDragImage(this.dom, 0, 0);\n      } else {\n        const figure = this.dom.querySelector('figure');\n        if (!figure) {\n          console.error('figure element not found');\n          return;\n        }\n        const domBox = figure.getBoundingClientRect();\n        const handleBox = dragHandle.getBoundingClientRect();\n        const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;\n        const x = handleBox.x - domBox.x + nativeEvent.offsetX;\n        const y = handleBox.y - domBox.y + nativeEvent.offsetY;\n        figure?.classList.add(generalStyles.dragImageView);\n        event.dataTransfer?.setDragImage(figure, x, y);\n        setTimeout(() => {\n          figure?.classList.remove(generalStyles.dragImageView);\n        }, 0);\n      }\n      const selection = NodeSelection.create(editor.view.state.tr.doc, this.getPos());\n      const transaction = editor.view.state.tr.setSelection(selection);\n\n      editor.view.dispatch(transaction);\n    },\n  },\n  createExtensionConfig({ Plugin, PluginKey }) {\n    return {\n      name: this.name,\n      group: 'block',\n      selectable: true,\n      draggable: true,\n      content: 'figure CAPTION',\n      priority: 101,\n\n      parseHTML() {\n        return [\n          {\n            tag: 'figure',\n          },\n        ];\n      },\n\n      renderHTML({ HTMLAttributes }) {\n        return ['figure', HTMLAttributes, 0];\n      },\n\n      addProseMirrorPlugins() {\n        return [\n          new Plugin({\n            key: new PluginKey('remove-invalid-figures'),\n            appendTransaction(transactions, oldState, newState) {\n              const docChanged =\n                transactions.some(transaction => transaction.docChanged) &&\n                !oldState.doc.eq(newState.doc);\n\n              if (!docChanged) {\n                return;\n              }\n\n              const tr = newState.tr;\n              tr.doc.descendants((node, pos) => {\n                if (\n                  node.type.name === TIPTAP_FIGURE_TYPE &&\n                  node.firstChild?.attrs.id === null &&\n                  !node.firstChild?.attrs.loading\n                ) {\n                  tr.delete(pos, pos + node.nodeSize);\n                  tr.setMeta('remove-invalid-figure', true);\n                }\n              });\n\n              return tr;\n            },\n          }),\n          new Plugin({\n            key: new PluginKey('figure-selection-listener'),\n            // modifies selection to select whole figure when selection includes caption and any other node\n            appendTransaction(_, __, newState) {\n              const { tr, selection } = newState;\n              const { $anchor, $head } = selection;\n\n              if (\n                !(selection instanceof TextSelection) ||\n                selection.$anchor.node().attrs.id === selection.$head.node().attrs.id ||\n                selection.anchor === selection.head\n              ) {\n                return undefined;\n              }\n\n              const isAnchorCaption = $anchor.node().type.name === TIPTAP_CAPTION_TYPE;\n              const isHeadCaption = $head.node().type.name === TIPTAP_CAPTION_TYPE;\n\n              if (isAnchorCaption || isHeadCaption) {\n                const $anchor = selection.$anchor;\n                const $head = selection.$head;\n\n                // Case 1: Text node above -> Caption,  change head to select caption end\n                if (isHeadCaption && !isAnchorCaption && selection.head === selection.to) {\n                  return tr.setSelection(\n                    TextSelection.create(tr.doc, $anchor.pos, $head.end() + 2)\n                  );\n                }\n\n                // Case 2: Text node below -> Caption,  change head to select whole figure\n                if (isHeadCaption && !isAnchorCaption && selection.from === selection.head) {\n                  return tr.setSelection(\n                    TextSelection.create(tr.doc, $anchor.pos, $head.before() - 2)\n                  );\n                }\n\n                // Case 3: Caption -> Text node above, change anchor to select caption end\n                if (isAnchorCaption && !isHeadCaption && $anchor.pos > $head.pos) {\n                  return tr.setSelection(\n                    TextSelection.create(tr.doc, $anchor.end() + 2, $head.pos)\n                  );\n                }\n\n                // Case 4: Caption -> Text node below, change anchor to select whole figure\n                if (isAnchorCaption && !isHeadCaption && $anchor.pos < $head.pos) {\n                  return tr.setSelection(\n                    TextSelection.create(tr.doc, $anchor.start() - 3, $head.pos)\n                  );\n                }\n              }\n\n              return undefined;\n            },\n            props: {\n              handleKeyDown(view, event) {\n                const code = event.keyCode;\n                const mods = getMods(event);\n\n                const backSpace = code === 8;\n                const arrowLeft = code === 37;\n                const arrowUp = code === 38;\n                const ctrlP = isMacOS() && code === 80 && mods === 'c'; // works like ArrowUp\n\n                if (view.state.selection.content().size > 2) {\n                  return;\n                }\n\n                if (backSpace || arrowLeft || arrowUp || ctrlP) {\n                  const checkEndOfTextBlock = backSpace || arrowLeft;\n                  const { node, pos } = findSelectableNodeBackward(view, checkEndOfTextBlock) || {};\n\n                  if (\n                    node?.type.name === TIPTAP_FIGURE_TYPE &&\n                    node?.lastChild?.textContent === '' &&\n                    pos !== undefined\n                  ) {\n                    view.dispatch(\n                      view.state.tr\n                        .setSelection(NodeSelection.create(view.state.doc, pos + 1))\n                        .scrollIntoView()\n                    );\n                    return true;\n                  }\n                }\n\n                if (\n                  (arrowUp || ctrlP) &&\n                  view.state.selection.$anchor.node().type.name === TIPTAP_CAPTION_TYPE\n                ) {\n                  const parent = findParentNodeClosestToPos(\n                    view.state.selection.$anchor,\n                    node => node?.type?.name === TIPTAP_FIGURE_TYPE\n                  );\n\n                  if (!parent) {\n                    return;\n                  }\n\n                  view.dispatch(\n                    view.state.tr\n                      .setSelection(NodeSelection.create(view.state.doc, parent.pos + 1))\n                      .scrollIntoView()\n                  );\n                  return true;\n                }\n\n                if (\n                  backSpace &&\n                  view.state.selection.$anchor.node().type.name === TIPTAP_CAPTION_TYPE &&\n                  view.state.selection.empty &&\n                  view.state.selection.$anchor.pos === view.state.selection.$anchor.start()\n                ) {\n                  const parent = findParentNodeClosestToPos(\n                    view.state.selection.$anchor,\n                    node => node?.type?.name === TIPTAP_FIGURE_TYPE\n                  );\n\n                  if (!parent) {\n                    return;\n                  }\n\n                  view.dispatch(\n                    view.state.tr\n                      .setSelection(NodeSelection.create(view.state.doc, parent.pos + 1))\n                      .scrollIntoView()\n                  );\n                  return true;\n                }\n              },\n            },\n          }),\n          new Plugin({\n            key: new PluginKey('figure-handle-paste'),\n            props: {\n              transformCopied: (slice, { state }) => {\n                const node = slice.content.firstChild;\n                if (slice.content.size === 1 && node?.type.spec.group?.includes('figure')) {\n                  const childPos = findNodeById(state.tr, node.attrs.id)[0]?.pos;\n                  const figureNode = state.doc.resolve(childPos).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              transformPastedHTML(html) {\n                // this is a quick fix for pasting images which are copied from editor\n                if (!html.includes('<figure')) {\n                  return html;\n                }\n                const newHtml = document.createElement('div');\n                newHtml.innerHTML = html;\n                newHtml.querySelectorAll('figure').forEach(figure => {\n                  const child = figure.querySelector('image-component, video-component');\n                  if (!child) {\n                    figure.remove();\n                  }\n                });\n                return newHtml.innerHTML;\n              },\n            },\n          }),\n          new Plugin({\n            // hack for mobile web\n            key: new PluginKey('figure-mobile-selection-fixer'),\n            props: {\n              createSelectionBetween(view, anchor, head) {\n                try {\n                  const anchorNode = view.state.doc.resolve(anchor.pos).node();\n                  const headNode = view.state.doc.resolve(head.pos).node();\n                  if (\n                    anchor.pos === head.pos - 1 &&\n                    anchorNode.type.name === 'FIGURE' &&\n                    headNode.type.name === 'FIGURE'\n                  ) {\n                    return NodeSelection.create(view.state.doc, anchor.pos);\n                  }\n                } catch (e) {\n                  console.error(e);\n                  return null;\n                }\n                return null;\n              },\n            },\n          }),\n        ];\n      },\n    };\n  },\n});\n\nfunction getMods(event: KeyboardEvent) {\n  let result = '';\n  if (event.ctrlKey) result += 'c';\n  if (event.metaKey) result += 'm';\n  if (event.altKey) result += 'a';\n  if (event.shiftKey) result += 's';\n  return result;\n}\n\nconst findSelectableNodeBackward = (\n  view: EditorView,\n  checkEndOfTextBlock: boolean\n): { node: PmNode; pos: number } | null => {\n  const { $head } = view.state.selection;\n  let $cut: ResolvedPos | null = $head;\n\n  if ($head.parent.isTextblock) {\n    if (checkEndOfTextBlock && !view.endOfTextblock('backward', view.state)) {\n      return null;\n    }\n    $cut = findCutBefore($head);\n  }\n  const node = $cut ? $cut.nodeBefore : null;\n  if (!node || !NodeSelection.isSelectable(node)) {\n    return null;\n  }\n  return { node, pos: $cut!.pos - node.nodeSize };\n};\n\n// copied from https://github.com/ProseMirror/prosemirror-commands/blob/54e2c94f6897c15c6dcb2b873ff18f62bff8a127/src/commands.ts#L153\nconst findCutBefore = ($pos: ResolvedPos): ResolvedPos | null => {\n  if (!$pos.parent.type.spec.isolating)\n    for (let i = $pos.depth - 1; i >= 0; i--) {\n      if ($pos.index(i) > 0) return $pos.doc.resolve($pos.before(i + 1));\n      if ($pos.node(i).type.spec.isolating) break;\n    }\n  return null;\n};\n"],
+  "mappings": "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",
   "names": ["$anchor", "$head"]
 }

package/dist/es/plugin-figure/tiptap/figure.js CHANGED Viewed

@@ -1,31 +1,48 @@
+import { camelCase, upperFirst } from "lodash";
 import React, { useContext } from "react";
 import { useConverters } from "./../../pm-converters/context";
 import { RicosContext } from "./../../ricos-context";
-import { useRootNodeContainerClasses } from "./class-name-strategies";
+import generalStyles from "../../editor-common/statics/styles/general-scss";
+import generalRTLIgnoredStyles from "../../wix-rich-content-common/statics/styles/general.rtlignore-scss";
+const stylesWithRTL = { ...generalStyles, ...generalRTLIgnoredStyles };
+import classNames from "classnames";
 import classes from "./figure-scss";
 const Figure = ({ NodeViewContent, ...props }) => {
   const { isMobile } = useContext(RicosContext);
   const converters = useConverters();
   const ricosNode = converters.fromPmNode(props.node.toJSON());
-  const width = getContainerWidth(ricosNode.imageData, isMobile);
-  const containerClasses = useRootNodeContainerClasses(ricosNode.imageData?.containerData);
+  if (!ricosNode) {
+    return null;
+  }
+  const dataProperty = `${camelCase(ricosNode.type)}Data`;
+  const componentData = ricosNode[dataProperty] || {};
+  const width = getContainerWidth(componentData, isMobile);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       style: { width: width ? `min(100%, ${width}px)` : void 0 },
-      className: containerClasses
+      className: getContainerClasses(componentData.containerData)
     },
     /* @__PURE__ */ React.createElement(NodeViewContent, { as: "figure", className: classes.figure })
   );
 };
-const getContainerWidth = (imageData, isMobile) => {
-  const disableCustomWidthMapper = imageData?.image?.width && isMobile && (Number(imageData?.containerData?.width?.custom) || 0) > 150;
+const getContainerWidth = (nodeData, isMobile) => {
+  const disableCustomWidthMapper = nodeData?.image?.width && isMobile && (Number(nodeData?.containerData?.width?.custom) || 0) > 150;
   const disableCustomWidth = disableCustomWidthMapper ?? false;
-  const customWidth = !disableCustomWidth ? imageData?.containerData?.width?.custom : void 0;
-  const originalWidth = imageData?.containerData?.width?.size === "ORIGINAL" || disableCustomWidth ? imageData?.image?.width : void 0;
+  const customWidth = !disableCustomWidth ? nodeData?.containerData?.width?.custom : void 0;
+  const originalWidth = nodeData?.containerData?.width?.size === "ORIGINAL" || disableCustomWidth ? nodeData?.image?.width : void 0;
   const width = customWidth || originalWidth;
   return width;
 };
+const getContainerClasses = (containerData) => {
+  const alignment = containerData?.alignment;
+  const alignmentClassName = alignment ? stylesWithRTL[`align${upperFirst(alignment.toLowerCase())}`] : void 0;
+  const size = containerData?.width?.size;
+  const sizeClassName = size && size !== "FULL_WIDTH" ? stylesWithRTL[`size${upperFirst(size.toLowerCase())}`] : void 0;
+  const textWrap = containerData?.textWrap;
+  const textWrapClassName = textWrap ? void 0 : stylesWithRTL.textWrapNowrap;
+  return classNames(alignmentClassName, sizeClassName, textWrapClassName);
+};
 export {
   Figure
 };

package/dist/es/plugin-figure/tiptap/figure.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-figure/tiptap/figure.tsx"],
-  "sourcesContent": ["import React, { useContext } from 'react';\n\nimport { useConverters } from './../../pm-converters/context';\nimport { RicosContext } from './../../ricos-context';\nimport type { ImageData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { ImageNode, PluginProps } from './../../ricos-types';\n\nimport { useRootNodeContainerClasses } from './class-name-strategies';\nimport classes from './figure-scss';\n\nexport const Figure: React.FC<PluginProps> = ({ NodeViewContent, ...props }) => {\n  const { isMobile } = useContext(RicosContext);\n  const converters = useConverters();\n\n  const ricosNode = converters.fromPmNode(props.node.toJSON()) as ImageNode;\n  const width = getContainerWidth(ricosNode.imageData, isMobile);\n  const containerClasses = useRootNodeContainerClasses(ricosNode.imageData?.containerData);\n\n  return (\n    <div\n      style={{ width: width ? `min(100%, ${width}px)` : undefined }}\n      className={containerClasses}\n    >\n      <NodeViewContent as=\"figure\" className={classes.figure} />\n    </div>\n  );\n};\n\nconst getContainerWidth = (imageData: ImageData | undefined, isMobile: boolean) => {\n  const disableCustomWidthMapper =\n    imageData?.image?.width &&\n    isMobile &&\n    (Number(imageData?.containerData?.width?.custom) || 0) > 150;\n\n  const disableCustomWidth = disableCustomWidthMapper ?? false;\n\n  const customWidth = !disableCustomWidth ? imageData?.containerData?.width?.custom : undefined;\n  const originalWidth =\n    imageData?.containerData?.width?.size === 'ORIGINAL' || disableCustomWidth\n      ? imageData?.image?.width\n      : undefined;\n  const width = customWidth || originalWidth;\n  return width;\n};\n"],
-  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAElC,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAI7B,SAAS,mCAAmC;AAC5C,OAAO,aAAa;AAEb,MAAM,SAAgC,CAAC,EAAE,iBAAiB,GAAG,MAAM,MAAM;AAC9E,QAAM,EAAE,SAAS,IAAI,WAAW,YAAY;AAC5C,QAAM,aAAa,cAAc;AAEjC,QAAM,YAAY,WAAW,WAAW,MAAM,KAAK,OAAO,CAAC;AAC3D,QAAM,QAAQ,kBAAkB,UAAU,WAAW,QAAQ;AAC7D,QAAM,mBAAmB,4BAA4B,UAAU,WAAW,aAAa;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,OAAO,QAAQ,aAAa,KAAK,QAAQ,OAAU;AAAA,MAC5D,WAAW;AAAA;AAAA,IAEX,oCAAC,mBAAgB,IAAG,UAAS,WAAW,QAAQ,QAAQ;AAAA,EAC1D;AAEJ;AAEA,MAAM,oBAAoB,CAAC,WAAkC,aAAsB;AACjF,QAAM,2BACJ,WAAW,OAAO,SAClB,aACC,OAAO,WAAW,eAAe,OAAO,MAAM,KAAK,KAAK;AAE3D,QAAM,qBAAqB,4BAA4B;AAEvD,QAAM,cAAc,CAAC,qBAAqB,WAAW,eAAe,OAAO,SAAS;AACpF,QAAM,gBACJ,WAAW,eAAe,OAAO,SAAS,cAAc,qBACpD,WAAW,OAAO,QAClB;AACN,QAAM,QAAQ,eAAe;AAC7B,SAAO;AACT;",
+  "sourcesContent": ["import { camelCase, upperFirst } from 'lodash';\nimport React, { useContext } from 'react';\n\nimport { useConverters } from './../../pm-converters/context';\nimport { RicosContext } from './../../ricos-context';\nimport type { ImageData, PluginContainerData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { PluginProps } from './../../ricos-types';\n\nimport generalStyles from '../../editor-common/statics/styles/general-scss';\nimport generalRTLIgnoredStyles from '../../wix-rich-content-common/statics/styles/general.rtlignore-scss';\n\nconst stylesWithRTL = { ...generalStyles, ...generalRTLIgnoredStyles };\n\nimport classNames from 'classnames';\n\nimport classes from './figure-scss';\n\ntype NodeData = { containerData: PluginContainerData; image: ImageData['image'] };\n\nexport const Figure: React.FC<PluginProps> = ({ NodeViewContent, ...props }) => {\n  const { isMobile } = useContext(RicosContext);\n  const converters = useConverters();\n  const ricosNode = converters.fromPmNode(props.node.toJSON());\n  if (!ricosNode) {\n    return null;\n  }\n  const dataProperty = `${camelCase(ricosNode.type)}Data`;\n  const componentData = (ricosNode[dataProperty] || {}) as NodeData;\n\n  const width = getContainerWidth(componentData, isMobile);\n\n  return (\n    <div\n      style={{ width: width ? `min(100%, ${width}px)` : undefined }}\n      className={getContainerClasses(componentData.containerData)}\n    >\n      <NodeViewContent as=\"figure\" className={classes.figure} />\n    </div>\n  );\n};\n\nconst getContainerWidth = (nodeData: NodeData, isMobile: boolean) => {\n  const disableCustomWidthMapper =\n    nodeData?.image?.width &&\n    isMobile &&\n    (Number(nodeData?.containerData?.width?.custom) || 0) > 150;\n\n  const disableCustomWidth = disableCustomWidthMapper ?? false;\n\n  const customWidth = !disableCustomWidth ? nodeData?.containerData?.width?.custom : undefined;\n  const originalWidth =\n    nodeData?.containerData?.width?.size === 'ORIGINAL' || disableCustomWidth\n      ? nodeData?.image?.width\n      : undefined;\n  const width = customWidth || originalWidth;\n  return width;\n};\n\nconst getContainerClasses = (containerData?: PluginContainerData) => {\n  const alignment = containerData?.alignment;\n  const alignmentClassName = alignment\n    ? stylesWithRTL[`align${upperFirst(alignment.toLowerCase())}`]\n    : undefined;\n\n  const size = containerData?.width?.size;\n  const sizeClassName =\n    size && size !== 'FULL_WIDTH'\n      ? stylesWithRTL[`size${upperFirst(size.toLowerCase())}`]\n      : undefined;\n\n  const textWrap = containerData?.textWrap;\n  const textWrapClassName = textWrap ? undefined : stylesWithRTL.textWrapNowrap;\n\n  return classNames(alignmentClassName, sizeClassName, textWrapClassName);\n};\n"],
+  "mappings": "AAAA,SAAS,WAAW,kBAAkB;AACtC,OAAO,SAAS,kBAAkB;AAElC,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAI7B,OAAO,mBAAmB;AAC1B,OAAO,6BAA6B;AAEpC,MAAM,gBAAgB,EAAE,GAAG,eAAe,GAAG,wBAAwB;AAErE,OAAO,gBAAgB;AAEvB,OAAO,aAAa;AAIb,MAAM,SAAgC,CAAC,EAAE,iBAAiB,GAAG,MAAM,MAAM;AAC9E,QAAM,EAAE,SAAS,IAAI,WAAW,YAAY;AAC5C,QAAM,aAAa,cAAc;AACjC,QAAM,YAAY,WAAW,WAAW,MAAM,KAAK,OAAO,CAAC;AAC3D,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,QAAM,eAAe,GAAG,UAAU,UAAU,IAAI,CAAC;AACjD,QAAM,gBAAiB,UAAU,YAAY,KAAK,CAAC;AAEnD,QAAM,QAAQ,kBAAkB,eAAe,QAAQ;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,OAAO,QAAQ,aAAa,KAAK,QAAQ,OAAU;AAAA,MAC5D,WAAW,oBAAoB,cAAc,aAAa;AAAA;AAAA,IAE1D,oCAAC,mBAAgB,IAAG,UAAS,WAAW,QAAQ,QAAQ;AAAA,EAC1D;AAEJ;AAEA,MAAM,oBAAoB,CAAC,UAAoB,aAAsB;AACnE,QAAM,2BACJ,UAAU,OAAO,SACjB,aACC,OAAO,UAAU,eAAe,OAAO,MAAM,KAAK,KAAK;AAE1D,QAAM,qBAAqB,4BAA4B;AAEvD,QAAM,cAAc,CAAC,qBAAqB,UAAU,eAAe,OAAO,SAAS;AACnF,QAAM,gBACJ,UAAU,eAAe,OAAO,SAAS,cAAc,qBACnD,UAAU,OAAO,QACjB;AACN,QAAM,QAAQ,eAAe;AAC7B,SAAO;AACT;AAEA,MAAM,sBAAsB,CAAC,kBAAwC;AACnE,QAAM,YAAY,eAAe;AACjC,QAAM,qBAAqB,YACvB,cAAc,QAAQ,WAAW,UAAU,YAAY,CAAC,CAAC,EAAE,IAC3D;AAEJ,QAAM,OAAO,eAAe,OAAO;AACnC,QAAM,gBACJ,QAAQ,SAAS,eACb,cAAc,OAAO,WAAW,KAAK,YAAY,CAAC,CAAC,EAAE,IACrD;AAEN,QAAM,WAAW,eAAe;AAChC,QAAM,oBAAoB,WAAW,SAAY,cAAc;AAE/D,SAAO,WAAW,oBAAoB,eAAe,iBAAiB;AACxE;",
   "names": []
 }