@wix/ricos 10.110.0 → 10.111.0

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

@@ -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

@@ -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": "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",
+  "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

@@ -1,6 +1,6 @@
-var styleDataHash = "b32cbfe0";
+var styleDataHash = "6d454476";
 const injectCss = () => {
-  var css = `.Th8LX{display:block!important}[dir] .Th8LX{margin:12px 0}`;
+  var css = `.oMnyz{display:block!important}[dir] .oMnyz{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": "oMnyz"
 };
 export {
   figure_default as default,

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

@@ -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 = '6d454476';  \nexport const injectCss = (() => {\n  var css = `.oMnyz{display:block!important}[dir] .oMnyz{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\": \"oMnyz\"\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

@@ -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

@@ -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

@@ -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

@@ -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": []
 }

package/dist/es/plugin-figure/tiptap/use-editor-selection.js

@@ -0,0 +1,22 @@
+import { useContext, useEffect, useState } from "react";
+import { EditorContext } from "./../../ricos-context";
+const useEditorSelection = (editor) => {
+  const { getEditorCommands } = useContext(EditorContext);
+  const [selection, setSelection] = useState(
+    () => getEditorCommands().getSelection()
+  );
+  useEffect(() => {
+    const onSelectionUpdate = () => {
+      setSelection(getEditorCommands().getSelection());
+    };
+    editor.on("selectionUpdate", onSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", onSelectionUpdate);
+    };
+  }, []);
+  return selection;
+};
+export {
+  useEditorSelection
+};
+//# sourceMappingURL=use-editor-selection.js.map

package/dist/es/plugin-figure/tiptap/use-editor-selection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-figure/tiptap/use-editor-selection.tsx"],
+  "sourcesContent": ["import type { Editor } from '@tiptap/core';\nimport { useContext, useEffect, useState } from 'react';\n\nimport { EditorContext } from './../../ricos-context';\nimport type { EditorCommands } from './../../ricos-types';\n\nexport const useEditorSelection = (editor: Editor) => {\n  const { getEditorCommands } = useContext(EditorContext);\n\n  const [selection, setSelection] = useState<ReturnType<EditorCommands['getSelection']>>(() =>\n    getEditorCommands().getSelection()\n  );\n\n  useEffect(() => {\n    const onSelectionUpdate = () => {\n      setSelection(getEditorCommands().getSelection());\n    };\n\n    editor.on('selectionUpdate', onSelectionUpdate);\n\n    return () => {\n      editor.off('selectionUpdate', onSelectionUpdate);\n    };\n  }, []);\n\n  return selection;\n};\n"],
+  "mappings": "AACA,SAAS,YAAY,WAAW,gBAAgB;AAEhD,SAAS,qBAAqB;AAGvB,MAAM,qBAAqB,CAAC,WAAmB;AACpD,QAAM,EAAE,kBAAkB,IAAI,WAAW,aAAa;AAEtD,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAAqD,MACrF,kBAAkB,EAAE,aAAa;AAAA,EACnC;AAEA,YAAU,MAAM;AACd,UAAM,oBAAoB,MAAM;AAC9B,mBAAa,kBAAkB,EAAE,aAAa,CAAC;AAAA,IACjD;AAEA,WAAO,GAAG,mBAAmB,iBAAiB;AAE9C,WAAO,MAAM;AACX,aAAO,IAAI,mBAAmB,iBAAiB;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
+  "names": []
+}

package/dist/es/plugin-figure/viewer/viewer-caption-loadable.js

@@ -26,4 +26,4 @@ export {
 };
 //# sourceMappingURL=viewer-caption.js.map
 
-import "@wix/ricos/css/plugin-image-viewer.global.css";
+import "@wix/ricos/css/plugin-video-viewer.global.css";

package/dist/es/plugin-figure/viewer/viewer-caption.rtlignore-scss.js

@@ -1,6 +1,6 @@
 var viewer_caption_rtlignore_default = {
-  "fontElementMap": "WQKLi",
-  "imageCaption": "R32Qn"
+  "fontElementMap": "XOdNp",
+  "imageCaption": "UXk17"
 };
 export {
   viewer_caption_rtlignore_default as default

package/dist/es/plugin-figure/viewer/viewer-caption.rtlignore-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-figure/viewer/viewer-caption.rtlignore.scss"],
-  "sourcesContent": ["export default {\n  \"fontElementMap\": \"WQKLi\",\n  \"imageCaption\": \"R32Qn\"\n};"],
+  "sourcesContent": ["export default {\n  \"fontElementMap\": \"XOdNp\",\n  \"imageCaption\": \"UXk17\"\n};"],
   "mappings": "AAAA,IAAO,mCAAQ;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAClB;",
   "names": []
 }

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { generateId } from "./../../ricos-content";
+import { Node_Type } from "./../../ricos-types";
+import classes from "./viewer-figure.rtlignore-scss";
+const ViewerFigure = ({
+  node,
+  nodeIndex,
+  NodeViewContainer,
+  RicosNodesRenderer,
+  children
+}) => {
+  const nodes = node.imageData?.caption && !node.nodes?.length ? [
+    {
+      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.figure }, /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(SpoilerWrapper, null, children)), /* @__PURE__ */ React.createElement(RicosNodesRenderer, { nodes })));
+  });
+};
+export {
+  ViewerFigure
+};
+//# sourceMappingURL=viewer-figure.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-figure/viewer/viewer-figure.tsx"],
+  "sourcesContent": ["import type { FC, PropsWithChildren } from 'react';\nimport React from 'react';\n\nimport { generateId } from './../../ricos-content';\nimport type { Node } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport { Node_Type, type NodeViewRendererProps } from './../../ricos-types';\n\nimport classes from './viewer-figure.rtlignore-scss';\n\nexport const ViewerFigure: FC<NodeViewRendererProps & PropsWithChildren> = ({\n  node,\n  nodeIndex,\n  NodeViewContainer,\n  RicosNodesRenderer,\n  children,\n}) => {\n  const nodes: Node[] =\n    node.imageData?.caption && !node.nodes?.length\n      ? [\n          {\n            type: Node_Type.CAPTION,\n            id: generateId(),\n            nodes: [\n              {\n                type: Node_Type.TEXT,\n                id: '',\n                nodes: [],\n                textData: {\n                  text: node.imageData.caption,\n                  decorations: [],\n                },\n              },\n            ],\n          },\n        ]\n      : node.nodes ?? [];\n\n  return (\n    <NodeViewContainer node={node} nodeIndex={nodeIndex}>\n      {({ ContainerElement, SpoilerWrapper, LinkWrapper }) => {\n        return (\n          <ContainerElement>\n            <figure className={classes.figure}>\n              <LinkWrapper>\n                <SpoilerWrapper>{children}</SpoilerWrapper>\n              </LinkWrapper>\n              <RicosNodesRenderer nodes={nodes} />\n            </figure>\n          </ContainerElement>\n        );\n      }}\n    </NodeViewContainer>\n  );\n};\n"],
+  "mappings": "AACA,OAAO,WAAW;AAElB,SAAS,kBAAkB;AAE3B,SAAS,iBAA6C;AAEtD,OAAO,aAAa;AAEb,MAAM,eAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QACJ,KAAK,WAAW,WAAW,CAAC,KAAK,OAAO,SACpC;AAAA,IACE;AAAA,MACE,MAAM,UAAU;AAAA,MAChB,IAAI,WAAW;AAAA,MACf,OAAO;AAAA,QACL;AAAA,UACE,MAAM,UAAU;AAAA,UAChB,IAAI;AAAA,UACJ,OAAO,CAAC;AAAA,UACR,UAAU;AAAA,YACR,MAAM,KAAK,UAAU;AAAA,YACrB,aAAa,CAAC;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,IACA,KAAK,SAAS,CAAC;AAErB,SACE,oCAAC,qBAAkB,MAAY,aAC5B,CAAC,EAAE,kBAAkB,gBAAgB,YAAY,MAAM;AACtD,WACE,oCAAC,wBACC,oCAAC,YAAO,WAAW,QAAQ,UACzB,oCAAC,mBACC,oCAAC,sBAAgB,QAAS,CAC5B,GACA,oCAAC,sBAAmB,OAAc,CACpC,CACF;AAAA,EAEJ,CACF;AAEJ;",
+  "names": []
+}

package/dist/es/plugin-figure/viewer/viewer-figure.rtlignore-scss.js

@@ -0,0 +1,7 @@
+var viewer_figure_rtlignore_default = {
+  "figure": "RwF-6"
+};
+export {
+  viewer_figure_rtlignore_default as default
+};
+//# sourceMappingURL=viewer-figure.rtlignore-scss.js.map

package/dist/es/plugin-figure/viewer/viewer-figure.rtlignore-scss.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-figure/viewer/viewer-figure.rtlignore.scss"],
+  "sourcesContent": ["export default {\n  \"figure\": \"RwF-6\"\n};"],
+  "mappings": "AAAA,IAAO,kCAAQ;AAAA,EACb,UAAU;AACZ;",
+  "names": []
+}

package/dist/es/plugin-file-upload/statics/styles/file-upload-viewer-scss.js

@@ -1,24 +1,24 @@
 var file_upload_viewer_default = {
-  "fontElementMap": "_0JfzL",
-  "file_upload_container": "ACfn3",
-  "file_upload_error_container": "_7FbCD",
-  "file_upload_link": "_0-1Xe",
-  "width_three": "M93Cu",
-  "file_upload_text_container": "SIUJO",
-  "width_two": "B-pqL",
-  "file_upload_state": "dLptD",
-  "mobile_status_icon": "xj6tG",
-  "file_upload_name_container": "JtWzD",
-  "file_upload_name": "yePxP",
-  "file_upload_extension": "cVIwQ",
-  "width_one": "_1iwY-",
-  "file_upload_type_icon": "cBwL6",
-  "file_loader_icon": "sIsN1",
-  "spin": "_0xIt0",
-  "file_upload_type": "mOExg",
-  "file_upload_text_error": "dvYMS",
-  "file_upload_icon_frame": "Qyw26",
-  "file_upload_icon_background": "WgKqB"
+  "fontElementMap": "QLkvM",
+  "file_upload_container": "oGkAj",
+  "file_upload_error_container": "cmpHQ",
+  "file_upload_link": "wdUui",
+  "width_three": "AjNw1",
+  "file_upload_text_container": "bL6rv",
+  "width_two": "QMf3k",
+  "file_upload_state": "E028n",
+  "mobile_status_icon": "_3SL1s",
+  "file_upload_name_container": "lde3t",
+  "file_upload_name": "Bsbi7",
+  "file_upload_extension": "q-xp7",
+  "width_one": "rf2-K",
+  "file_upload_type_icon": "l0o2r",
+  "file_loader_icon": "_9Sel9",
+  "spin": "IN57K",
+  "file_upload_type": "Z9MlB",
+  "file_upload_text_error": "-Zi8H",
+  "file_upload_icon_frame": "Ssmct",
+  "file_upload_icon_background": "g9Kx1"
 };
 export {
   file_upload_viewer_default as default