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

@wix/ricos 10.110.0 → 10.111.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 (1493) hide show

package/dist/es/plugin-video/testkit.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/plugin-video/testkit.ts"],
-  "sourcesContent": ["import {\n  ButtonUniDriver,\n  InputUniDriver,\n  TabsUniDriver,\n  ToggleSwitchUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport type { GetOptions, Testkit, UniDriver } from './../ricos-types/testkit';\nimport { dataHook, RicosPluginToolbarNames } from './../wix-rich-content-common';\nimport { INSERT_PLUGIN_BUTTONS } from './../editor-common';\nimport type { FooterActionsUnidrver } from './../ui-components/testkit';\nimport { createFooterActionsUnidriver } from './../ui-components/testkit';\n\nimport {\n  EMBED_TAB_SUBMIT_BUTTON,\n  EMBED_TAB_URL_INPUT,\n  INSERT_PLUGIN_MODAL,\n  INSERT_PLUGIN_MODAL_TABS,\n  ROOT,\n  SETTINGS_ALLOW_DOWNALOD_TOGGLE,\n  SETTINGS_SPOILER_TOGGLE,\n  UPLOAD_TAB_UPLOAD_BUTTON,\n} from './dataHooks';\nimport { toolbarsToAddIn } from './getAddButtons';\n\nexport type VideoTestkit = Testkit<{\n  content: {\n    atIndex: (index: number) => {\n      exists: (options?: GetOptions) => Promise<boolean>;\n      click: () => Promise<void>;\n      hasSpoiler: () => Promise<boolean>;\n      waitForPlayer: () => Promise<void>;\n      hasVideo: () => Promise<boolean>;\n      hasPreview: () => Promise<boolean>;\n    };\n  };\n  toolbars: {\n    createAddButtonToolbars: (getAddButtonToolbarBase: () => UniDriver<Element>) => {\n      click: () => Promise<void>;\n      toolbarsToAddIn: typeof toolbarsToAddIn;\n    };\n    createPluginToolbar: (\n      getPluginToolbarBase: (pluginType: typeof RicosPluginToolbarNames.VIDEO) => UniDriver<Element>\n    ) => {\n      openReplaceModal: () => Promise<void>;\n      openSettingsModal: () => Promise<void>;\n      settingsButtonExists: () => Promise<boolean>;\n      clickDelete: () => Promise<void>;\n      exists: () => Promise<boolean>;\n    };\n  };\n  insertModal: {\n    tabs: ReturnType<typeof TabsUniDriver>;\n    embedTab: {\n      urlInput: ReturnType<typeof InputUniDriver>;\n      submitButton: ReturnType<typeof ButtonUniDriver>;\n    };\n    uploadTab: {\n      uploadButton: ReturnType<typeof ButtonUniDriver>;\n    };\n    waitForElement: () => Promise<void>;\n  };\n  settings: {\n    disableDownloadToggle: ReturnType<typeof ToggleSwitchUniDriver>;\n    spoilerToggle: ReturnType<typeof ToggleSwitchUniDriver>;\n  } & FooterActionsUnidrver;\n}>;\n\nexport const createVideoTestkit: VideoTestkit = getBase => {\n  const getVideo = async (index: number, options?: GetOptions) => {\n    const video = await getBase().getAll(dataHook(ROOT), options);\n    return video.at(index);\n  };\n  const getVideoModalBase = async () => {\n    const modal = await getBase().get(dataHook(INSERT_PLUGIN_MODAL));\n    return modal;\n  };\n\n  const getPreview = async (index: number) => {\n    const video = await getVideo(index);\n    return video.get('.react-player__preview');\n  };\n\n  const hasPreview = async (index: number) => {\n    try {\n      await getPreview(index);\n      return true;\n    } catch (error) {\n      return false;\n    }\n  };\n\n  return {\n    content: {\n      atIndex: index => {\n        return {\n          exists: async options => {\n            try {\n              const video = await getVideo(index, options);\n              return video.exists();\n            } catch (error) {\n              return false;\n            }\n          },\n          click: async () => {\n            if (await hasPreview(index)) {\n              const preview = await getPreview(index);\n              await preview.click();\n              return;\n            }\n\n            const video = await getVideo(index);\n            await video.click();\n          },\n          hasSpoiler: async () => {\n            try {\n              const spoiler = await getBase().get(dataHook('spoilerContainer'));\n              return spoiler.exists();\n            } catch (error) {\n              return false;\n            }\n          },\n          waitForPlayer: async () => {\n            const player = await getVideo(index);\n            return player.wait();\n          },\n          hasVideo: async () => {\n            try {\n              const player = await getVideo(index);\n              await player.get('video');\n              return true;\n            } catch (error) {\n              return false;\n            }\n          },\n          hasPreview: () => hasPreview(index),\n        };\n      },\n    },\n    toolbars: {\n      createAddButtonToolbars: getAddButtonToolbarBase => ({\n        click: async () => {\n          const button = await getAddButtonToolbarBase().get(dataHook(INSERT_PLUGIN_BUTTONS.VIDEO));\n          await button.click();\n        },\n        toolbarsToAddIn,\n      }),\n      createPluginToolbar: getPluginToolbarBase => ({\n        openReplaceModal: async () => {\n          await (\n            await getPluginToolbarBase(RicosPluginToolbarNames.VIDEO).get(\n              dataHook('baseToolbarButton_replace')\n            )\n          ).click();\n        },\n        openSettingsModal: async () => {\n          await (\n            await getPluginToolbarBase(RicosPluginToolbarNames.VIDEO).get(\n              dataHook('baseToolbarButton_settings')\n            )\n          ).click();\n        },\n        settingsButtonExists: async () => {\n          return getPluginToolbarBase(RicosPluginToolbarNames.VIDEO)\n            .$(dataHook('baseToolbarButton_settings'))\n            .exists();\n        },\n        clickDelete: async () => {\n          await (\n            await getPluginToolbarBase(RicosPluginToolbarNames.VIDEO).get(\n              dataHook('blockButton_delete')\n            )\n          ).click();\n        },\n        exists: async () => {\n          try {\n            return getPluginToolbarBase(RicosPluginToolbarNames.VIDEO).exists();\n          } catch (error) {\n            return false;\n          }\n        },\n      }),\n    },\n    insertModal: {\n      tabs: TabsUniDriver(getBase().$(dataHook(INSERT_PLUGIN_MODAL_TABS)), getBase()),\n      embedTab: {\n        urlInput: InputUniDriver(getBase().$(dataHook(EMBED_TAB_URL_INPUT)), getBase()),\n        submitButton: ButtonUniDriver(getBase().$(dataHook(EMBED_TAB_SUBMIT_BUTTON)), getBase()),\n      },\n      uploadTab: {\n        uploadButton: ButtonUniDriver(getBase().$(dataHook(UPLOAD_TAB_UPLOAD_BUTTON)), getBase()),\n      },\n      waitForElement: async () => {\n        const element = await getVideoModalBase();\n        await element.wait();\n      },\n    },\n    settings: {\n      disableDownloadToggle: ToggleSwitchUniDriver(\n        getBase().$(dataHook(SETTINGS_ALLOW_DOWNALOD_TOGGLE)),\n        getBase()\n      ),\n      spoilerToggle: ToggleSwitchUniDriver(\n        getBase().$(dataHook(SETTINGS_SPOILER_TOGGLE)),\n        getBase()\n      ),\n      ...createFooterActionsUnidriver(getBase),\n    },\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  ButtonUniDriver,\n  InputUniDriver,\n  TabsUniDriver,\n  ToggleSwitchUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport type { FigureTestkit } from './../plugin-figure/testkit';\nimport { createFigureTestkit } from './../plugin-figure/testkit';\nimport type { GetOptions, Testkit, UniDriver } from './../ricos-types/testkit';\nimport { dataHook, RicosPluginToolbarNames } from './../wix-rich-content-common';\nimport { INSERT_PLUGIN_BUTTONS } from './../editor-common';\nimport type { FooterActionsUnidrver } from './../ui-components/testkit';\nimport { createFooterActionsUnidriver } from './../ui-components/testkit';\n\nimport {\n  EMBED_TAB_SUBMIT_BUTTON,\n  EMBED_TAB_URL_INPUT,\n  INSERT_PLUGIN_MODAL,\n  INSERT_PLUGIN_MODAL_TABS,\n  SETTINGS_ALLOW_DOWNALOD_TOGGLE,\n  SETTINGS_SPOILER_TOGGLE,\n  UPLOAD_TAB_UPLOAD_BUTTON,\n  VIDEO_ROOT,\n} from './dataHooks';\nimport { toolbarsToAddIn } from './getAddButtons';\n\nexport type VideoTestkit = Testkit<{\n  content: {\n    atIndex: (index: number) => FigureTestkit & {\n      exists: (options?: GetOptions) => Promise<boolean>;\n      click: () => Promise<void>;\n      hasSpoiler: () => Promise<boolean>;\n      waitForPlayer: () => Promise<void>;\n      hasVideo: () => Promise<boolean>;\n      hasPreview: () => Promise<boolean>;\n    };\n  };\n  toolbars: {\n    createAddButtonToolbars: (getAddButtonToolbarBase: () => UniDriver<Element>) => {\n      click: () => Promise<void>;\n      toolbarsToAddIn: typeof toolbarsToAddIn;\n    };\n    createPluginToolbar: (\n      getPluginToolbarBase: (pluginType: typeof RicosPluginToolbarNames.VIDEO) => UniDriver<Element>\n    ) => {\n      openReplaceModal: () => Promise<void>;\n      openSettingsModal: () => Promise<void>;\n      settingsButtonExists: () => Promise<boolean>;\n      clickDelete: () => Promise<void>;\n      exists: () => Promise<boolean>;\n    };\n  };\n  insertModal: {\n    tabs: ReturnType<typeof TabsUniDriver>;\n    embedTab: {\n      urlInput: ReturnType<typeof InputUniDriver>;\n      submitButton: ReturnType<typeof ButtonUniDriver>;\n    };\n    uploadTab: {\n      uploadButton: ReturnType<typeof ButtonUniDriver>;\n    };\n    waitForElement: () => Promise<void>;\n  };\n  settings: {\n    disableDownloadToggle: ReturnType<typeof ToggleSwitchUniDriver>;\n    spoilerToggle: ReturnType<typeof ToggleSwitchUniDriver>;\n  } & FooterActionsUnidrver;\n}>;\n\nexport const createVideoTestkit: VideoTestkit = getBase => {\n  const getVideo = async (index: number, options?: GetOptions) => {\n    const video = await getBase().getAll(dataHook(VIDEO_ROOT), options);\n    return video.at(index);\n  };\n  const getVideoModalBase = async () => {\n    const modal = await getBase().get(dataHook(INSERT_PLUGIN_MODAL));\n    return modal;\n  };\n\n  const getPreview = async (index: number) => {\n    const video = await getVideo(index);\n    return video.get('.react-player__preview');\n  };\n\n  const hasPreview = async (index: number) => {\n    try {\n      await getPreview(index);\n      return true;\n    } catch (error) {\n      return false;\n    }\n  };\n\n  return {\n    content: {\n      atIndex: index => {\n        return {\n          exists: async options => {\n            try {\n              const video = await getVideo(index, options);\n              return video.exists();\n            } catch (error) {\n              return false;\n            }\n          },\n          click: async () => {\n            if (await hasPreview(index)) {\n              const preview = await getPreview(index);\n              await preview.click();\n              return;\n            }\n\n            const video = await getVideo(index);\n            await video.click();\n          },\n          hasSpoiler: async () => {\n            try {\n              const spoiler = await getBase().get(dataHook('spoilerContainer'));\n              return spoiler.exists();\n            } catch (error) {\n              return false;\n            }\n          },\n          waitForPlayer: async () => {\n            const player = await getVideo(index);\n            return player.wait();\n          },\n          hasVideo: async () => {\n            try {\n              const player = await getVideo(index);\n              await player.get('video');\n              return true;\n            } catch (error) {\n              return false;\n            }\n          },\n          hasPreview: () => hasPreview(index),\n          ...createFigureTestkit(getBase, index),\n        };\n      },\n    },\n    toolbars: {\n      createAddButtonToolbars: getAddButtonToolbarBase => ({\n        click: async () => {\n          const button = await getAddButtonToolbarBase().get(dataHook(INSERT_PLUGIN_BUTTONS.VIDEO));\n          await button.click();\n        },\n        toolbarsToAddIn,\n      }),\n      createPluginToolbar: getPluginToolbarBase => ({\n        openReplaceModal: async () => {\n          await (\n            await getPluginToolbarBase(RicosPluginToolbarNames.VIDEO).get(\n              dataHook('baseToolbarButton_replace')\n            )\n          ).click();\n        },\n        openSettingsModal: async () => {\n          await (\n            await getPluginToolbarBase(RicosPluginToolbarNames.VIDEO).get(\n              dataHook('baseToolbarButton_settings')\n            )\n          ).click();\n        },\n        settingsButtonExists: async () => {\n          return getPluginToolbarBase(RicosPluginToolbarNames.VIDEO)\n            .$(dataHook('baseToolbarButton_settings'))\n            .exists();\n        },\n        clickDelete: async () => {\n          await (\n            await getPluginToolbarBase(RicosPluginToolbarNames.VIDEO).get(\n              dataHook('blockButton_delete')\n            )\n          ).click();\n        },\n        exists: async () => {\n          try {\n            return getPluginToolbarBase(RicosPluginToolbarNames.VIDEO).exists();\n          } catch (error) {\n            return false;\n          }\n        },\n      }),\n    },\n    insertModal: {\n      tabs: TabsUniDriver(getBase().$(dataHook(INSERT_PLUGIN_MODAL_TABS)), getBase()),\n      embedTab: {\n        urlInput: InputUniDriver(getBase().$(dataHook(EMBED_TAB_URL_INPUT)), getBase()),\n        submitButton: ButtonUniDriver(getBase().$(dataHook(EMBED_TAB_SUBMIT_BUTTON)), getBase()),\n      },\n      uploadTab: {\n        uploadButton: ButtonUniDriver(getBase().$(dataHook(UPLOAD_TAB_UPLOAD_BUTTON)), getBase()),\n      },\n      waitForElement: async () => {\n        const element = await getVideoModalBase();\n        await element.wait();\n      },\n    },\n    settings: {\n      disableDownloadToggle: ToggleSwitchUniDriver(\n        getBase().$(dataHook(SETTINGS_ALLOW_DOWNALOD_TOGGLE)),\n        getBase()\n      ),\n      spoilerToggle: ToggleSwitchUniDriver(\n        getBase().$(dataHook(SETTINGS_SPOILER_TOGGLE)),\n        getBase()\n      ),\n      ...createFooterActionsUnidriver(getBase),\n    },\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-video/tiptap/component.js CHANGED Viewed

@@ -5,7 +5,8 @@ const Video = ({
   settings,
   componentData,
   updateAttributes,
-  node
+  node,
+  editor
 }) => {
   const { t } = useContext(RicosContext);
   const { loading, loadingPercentage, id } = node.attrs;
@@ -18,7 +19,8 @@ const Video = ({
       updateAttributes,
       isLoading: loading,
       loadingPercentage,
-      nodeId: id
+      nodeId: id,
+      editor
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/tiptap/component.tsx"],
-  "sourcesContent": ["import React, { useContext } from 'react';\n\nimport type { MediaUploadError } from './../../ricos-content';\nimport { RicosContext } from './../../ricos-context';\nimport type { VideoData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { PluginProps } from './../../ricos-types';\n\nimport { VideoComponent } from './video-component';\n\nexport const Video: React.FC<PluginProps> = ({\n  settings,\n  componentData,\n  updateAttributes,\n  node,\n}) => {\n  const { t } = useContext(RicosContext);\n  const { loading, loadingPercentage, id } = node.attrs;\n  return (\n    <VideoComponent\n      componentData={componentData as VideoData | { error: MediaUploadError }}\n      t={t}\n      config={settings}\n      updateAttributes={updateAttributes}\n      isLoading={loading}\n      loadingPercentage={loadingPercentage}\n      nodeId={id}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAGlC,SAAS,oBAAoB;AAI7B,SAAS,sBAAsB;AAExB,MAAM,QAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAE,IAAI,WAAW,YAAY;AACrC,QAAM,EAAE,SAAS,mBAAmB,GAAG,IAAI,KAAK;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA;AAAA,EACV;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\n\nimport type { MediaUploadError } from './../../ricos-content';\nimport { RicosContext } from './../../ricos-context';\nimport type { VideoData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { PluginProps } from './../../ricos-types';\n\nimport { VideoComponent } from './video-component';\n\nexport const Video: React.FC<PluginProps> = ({\n  settings,\n  componentData,\n  updateAttributes,\n  node,\n  editor,\n}) => {\n  const { t } = useContext(RicosContext);\n  const { loading, loadingPercentage, id } = node.attrs;\n  return (\n    <VideoComponent\n      componentData={componentData as VideoData | { error: MediaUploadError }}\n      t={t}\n      config={settings}\n      updateAttributes={updateAttributes}\n      isLoading={loading}\n      loadingPercentage={loadingPercentage}\n      nodeId={id}\n      editor={editor}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAGlC,SAAS,oBAAoB;AAI7B,SAAS,sBAAsB;AAExB,MAAM,QAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAE,IAAI,WAAW,YAAY;AACrC,QAAM,EAAE,SAAS,mBAAmB,GAAG,IAAI,KAAK;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,33 +1,85 @@
-import { TIPTAP_VIDEO_TYPE } from "./../../ricos-content";
-import videoDataDefaults from "./../../ricos-schema/legacy/statics/video.defaults.json";
+import { findParentNodeClosestToPos } from "@tiptap/core";
+import { TIPTAP_FIGURE_TYPE, TIPTAP_VIDEO_TYPE } from "./../../ricos-content";
+import { PluginContainerData_Alignment } from "./../../ricos-schema/next-schema";
 import { createRicosNodeExtension } from "./../../plugin-commons";
 import { Video } from "./component";
-const name = TIPTAP_VIDEO_TYPE;
 const tiptapExtensions = [
   createRicosNodeExtension({
-    groups: ["spoilerable", "overlay", "draggable", "not-overtypable"],
+    groups: ["spoilerable", "overlay", "not-overtypable", "resizable", "custom-styles"],
     type: "react-node",
-    name,
-    reconfigure: (config, _extensions, _props, settings) => ({
+    name: TIPTAP_VIDEO_TYPE,
+    reconfigure: (config, _extensions, _props, settings, services) => ({
       ...config,
-      addOptions: () => settings
+      addOptions: () => ({
+        services,
+        ...settings
+      })
     }),
     Component: Video,
     createExtensionConfig() {
       return {
         name: this.name,
-        group: "block",
+        /*
+         * Priority should be higher than ricos-common-plugin list-item extension in order
+         * to shortcuts to work
+         */
+        priority: 102,
+        group: "block figure",
         selectable: true,
         draggable: true,
         addAttributes: () => ({
-          ...videoDataDefaults,
+          containerData: {
+            alignment: PluginContainerData_Alignment.CENTER,
+            width: {
+              size: null,
+              custom: null
+            },
+            spoiler: { enabled: null, description: null, buttonText: null },
+            height: { custom: null },
+            textWrap: true
+          },
+          video: { src: null, width: null, height: null, duration: null },
+          thumbnail: { src: null, width: null, height: null, duration: null },
+          disableDownload: null,
+          disableExpand: null,
+          title: null,
+          options: null,
           loading: {
             default: false
           },
           loadingPercentage: {
             default: null
+          },
+          tempData: {
+            default: null
           }
         }),
+        addKeyboardShortcuts() {
+          const newLine = ({ editor }) => {
+            const videoFigure = getVideoFigure(editor);
+            if (!videoFigure) {
+              return false;
+            }
+            editor.chain().setTextSelection(videoFigure.start + videoFigure.node.nodeSize - 1).createParagraphNear().focus().run();
+            return true;
+          };
+          const tiptapKeyboardShortcuts = {
+            Enter: newLine
+          };
+          const newLineShortcuts = [];
+          this.options.services.shortcuts.shortcuts.forEach((shortcut) => {
+            if (shortcut.shortcut.name === "NewLine") {
+              newLineShortcuts.push(shortcut);
+            }
+          });
+          newLineShortcuts.forEach((newLineShortcut) => {
+            const modifier = newLineShortcut.keys.macOs.modifiers[0];
+            const key = newLineShortcut.keys.macOs.key;
+            const shortcutKey = modifier ? `${modifier}-${key}` : key;
+            tiptapKeyboardShortcuts[shortcutKey] = newLine;
+          });
+          return tiptapKeyboardShortcuts;
+        },
         addCommands() {
           return {};
         }
@@ -35,6 +87,10 @@ const tiptapExtensions = [
     }
   })
 ];
+const getVideoFigure = (editor) => findParentNodeClosestToPos(
+  editor.state.selection.$from,
+  (node) => node.type.name === TIPTAP_FIGURE_TYPE
+);
 export {
   tiptapExtensions
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/tiptap/tiptap.ts"],
-  "sourcesContent": ["import { TIPTAP_VIDEO_TYPE } from './../../ricos-content';\nimport videoDataDefaults from './../../ricos-schema/legacy/statics/video.defaults.json';\nimport type { ExtensionProps, NodeConfig, RicosExtension } from './../../ricos-types';\nimport { createRicosNodeExtension } from './../../plugin-commons';\n\nimport { Video } from './component';\n\nconst name = TIPTAP_VIDEO_TYPE;\n\nexport const tiptapExtensions = [\n  createRicosNodeExtension({\n    groups: ['spoilerable', 'overlay', 'draggable', 'not-overtypable'],\n    type: 'react-node',\n    name,\n    reconfigure: (\n      config: NodeConfig,\n      _extensions: RicosExtension[],\n      _props: ExtensionProps,\n      settings: Record<string, unknown>\n    ) => ({\n      ...config,\n      addOptions: () => settings,\n    }),\n    Component: Video,\n    createExtensionConfig() {\n      return {\n        name: this.name,\n        group: 'block',\n        selectable: true,\n        draggable: true,\n        addAttributes: () => ({\n          ...videoDataDefaults,\n          loading: {\n            default: false,\n          },\n          loadingPercentage: {\n            default: null,\n          },\n        }),\n\n        addCommands() {\n          return {};\n        },\n      };\n    },\n  }),\n];\n"],
-  "mappings": "AAAA,SAAS,yBAAyB;AAClC,OAAO,uBAAuB;AAE9B,SAAS,gCAAgC;AAEzC,SAAS,aAAa;AAEtB,MAAM,OAAO;AAEN,MAAM,mBAAmB;AAAA,EAC9B,yBAAyB;AAAA,IACvB,QAAQ,CAAC,eAAe,WAAW,aAAa,iBAAiB;AAAA,IACjE,MAAM;AAAA,IACN;AAAA,IACA,aAAa,CACX,QACA,aACA,QACA,cACI;AAAA,MACJ,GAAG;AAAA,MACH,YAAY,MAAM;AAAA,IACpB;AAAA,IACA,WAAW;AAAA,IACX,wBAAwB;AACtB,aAAO;AAAA,QACL,MAAM,KAAK;AAAA,QACX,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,eAAe,OAAO;AAAA,UACpB,GAAG;AAAA,UACH,SAAS;AAAA,YACP,SAAS;AAAA,UACX;AAAA,UACA,mBAAmB;AAAA,YACjB,SAAS;AAAA,UACX;AAAA,QACF;AAAA,QAEA,cAAc;AACZ,iBAAO,CAAC;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { type Editor, findParentNodeClosestToPos } from '@tiptap/core';\n\nimport { TIPTAP_FIGURE_TYPE, TIPTAP_VIDEO_TYPE } from './../../ricos-content';\nimport { PluginContainerData_Alignment } from './../../ricos-schema/next-schema';\nimport type { ExtensionProps, NodeConfig, RicosExtension, RicosServices } from './../../ricos-types';\nimport { createRicosNodeExtension } from './../../plugin-commons';\n\nimport { Video } from './component';\n\nexport const tiptapExtensions = [\n  createRicosNodeExtension({\n    groups: ['spoilerable', 'overlay', 'not-overtypable', 'resizable', 'custom-styles'],\n    type: 'react-node',\n    name: TIPTAP_VIDEO_TYPE,\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: Video,\n    createExtensionConfig() {\n      return {\n        name: this.name,\n        /*\n         * Priority should be higher than ricos-common-plugin list-item extension in order\n         * to shortcuts to work\n         */\n        priority: 102,\n        group: 'block figure',\n        selectable: true,\n        draggable: true,\n        addAttributes: () => ({\n          containerData: {\n            alignment: PluginContainerData_Alignment.CENTER,\n            width: {\n              size: null,\n              custom: null,\n            },\n            spoiler: { enabled: null, description: null, buttonText: null },\n            height: { custom: null },\n            textWrap: true,\n          },\n          video: { src: null, width: null, height: null, duration: null },\n          thumbnail: { src: null, width: null, height: null, duration: null },\n          disableDownload: null,\n          disableExpand: null,\n          title: null,\n          options: null,\n\n          loading: {\n            default: false,\n          },\n          loadingPercentage: {\n            default: null,\n          },\n          tempData: {\n            default: null,\n          },\n        }),\n\n        addKeyboardShortcuts() {\n          const newLine = ({ editor }: { editor: Editor }) => {\n            const videoFigure = getVideoFigure(editor);\n            if (!videoFigure) {\n              return false;\n            }\n            editor\n              .chain()\n              .setTextSelection(videoFigure.start + videoFigure.node.nodeSize - 1)\n              .createParagraphNear()\n              .focus()\n              .run();\n            return true;\n          };\n\n          const tiptapKeyboardShortcuts = {\n            Enter: newLine,\n          };\n\n          const newLineShortcuts: any = [];\n          this.options.services.shortcuts.shortcuts.forEach(shortcut => {\n            if (shortcut.shortcut.name === 'NewLine') {\n              newLineShortcuts.push(shortcut);\n            }\n          });\n\n          newLineShortcuts.forEach(newLineShortcut => {\n            const modifier = newLineShortcut.keys.macOs.modifiers[0];\n            const key = newLineShortcut.keys.macOs.key;\n            const shortcutKey = modifier ? `${modifier}-${key}` : key;\n            tiptapKeyboardShortcuts[shortcutKey] = newLine;\n          });\n\n          return tiptapKeyboardShortcuts;\n        },\n\n        addCommands() {\n          return {};\n        },\n      };\n    },\n  }),\n];\n\nconst getVideoFigure = (editor: Editor) =>\n  findParentNodeClosestToPos(\n    editor.state.selection.$from,\n    node => node.type.name === TIPTAP_FIGURE_TYPE\n  );\n"],
+  "mappings": "AAAA,SAAsB,kCAAkC;AAExD,SAAS,oBAAoB,yBAAyB;AACtD,SAAS,qCAAqC;AAE9C,SAAS,gCAAgC;AAEzC,SAAS,aAAa;AAEf,MAAM,mBAAmB;AAAA,EAC9B,yBAAyB;AAAA,IACvB,QAAQ,CAAC,eAAe,WAAW,mBAAmB,aAAa,eAAe;AAAA,IAClF,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa,CACX,QACA,aACA,QACA,UACA,cACI;AAAA,MACJ,GAAG;AAAA,MACH,YAAY,OAAO;AAAA,QACjB;AAAA,QACA,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,wBAAwB;AACtB,aAAO;AAAA,QACL,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,QAKX,UAAU;AAAA,QACV,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,eAAe,OAAO;AAAA,UACpB,eAAe;AAAA,YACb,WAAW,8BAA8B;AAAA,YACzC,OAAO;AAAA,cACL,MAAM;AAAA,cACN,QAAQ;AAAA,YACV;AAAA,YACA,SAAS,EAAE,SAAS,MAAM,aAAa,MAAM,YAAY,KAAK;AAAA,YAC9D,QAAQ,EAAE,QAAQ,KAAK;AAAA,YACvB,UAAU;AAAA,UACZ;AAAA,UACA,OAAO,EAAE,KAAK,MAAM,OAAO,MAAM,QAAQ,MAAM,UAAU,KAAK;AAAA,UAC9D,WAAW,EAAE,KAAK,MAAM,OAAO,MAAM,QAAQ,MAAM,UAAU,KAAK;AAAA,UAClE,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,OAAO;AAAA,UACP,SAAS;AAAA,UAET,SAAS;AAAA,YACP,SAAS;AAAA,UACX;AAAA,UACA,mBAAmB;AAAA,YACjB,SAAS;AAAA,UACX;AAAA,UACA,UAAU;AAAA,YACR,SAAS;AAAA,UACX;AAAA,QACF;AAAA,QAEA,uBAAuB;AACrB,gBAAM,UAAU,CAAC,EAAE,OAAO,MAA0B;AAClD,kBAAM,cAAc,eAAe,MAAM;AACzC,gBAAI,CAAC,aAAa;AAChB,qBAAO;AAAA,YACT;AACA,mBACG,MAAM,EACN,iBAAiB,YAAY,QAAQ,YAAY,KAAK,WAAW,CAAC,EAClE,oBAAoB,EACpB,MAAM,EACN,IAAI;AACP,mBAAO;AAAA,UACT;AAEA,gBAAM,0BAA0B;AAAA,YAC9B,OAAO;AAAA,UACT;AAEA,gBAAM,mBAAwB,CAAC;AAC/B,eAAK,QAAQ,SAAS,UAAU,UAAU,QAAQ,cAAY;AAC5D,gBAAI,SAAS,SAAS,SAAS,WAAW;AACxC,+BAAiB,KAAK,QAAQ;AAAA,YAChC;AAAA,UACF,CAAC;AAED,2BAAiB,QAAQ,qBAAmB;AAC1C,kBAAM,WAAW,gBAAgB,KAAK,MAAM,UAAU,CAAC;AACvD,kBAAM,MAAM,gBAAgB,KAAK,MAAM;AACvC,kBAAM,cAAc,WAAW,GAAG,QAAQ,IAAI,GAAG,KAAK;AACtD,oCAAwB,WAAW,IAAI;AAAA,UACzC,CAAC;AAED,iBAAO;AAAA,QACT;AAAA,QAEA,cAAc;AACZ,iBAAO,CAAC;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEA,MAAM,iBAAiB,CAAC,WACtB;AAAA,EACE,OAAO,MAAM,UAAU;AAAA,EACvB,UAAQ,KAAK,KAAK,SAAS;AAC7B;",
   "names": []
 }

package/dist/es/plugin-video/tiptap/video-component.js CHANGED Viewed

@@ -1,10 +1,14 @@
+import classNames from "classnames";
 import { isFunction } from "lodash";
 import React from "react";
 import { findDOMNode } from "react-dom";
 import { Loader, MediaItemErrorMsg } from "./../../ui-components";
-import { ROOT } from "../dataHooks";
+import generalStyles from "../../editor-common/statics/styles/general-scss";
+import generalRTLIgnoredStyles from "../../wix-rich-content-common/statics/styles/general.rtlignore-scss";
+import { VIDEO_ROOT } from "../dataHooks";
 import styles from "../statics/styles/default-video-styles-scss";
-import { VideoViewer } from "../viewer/video-viewer";
+import { Video } from "../viewer/video";
+const stylesWithRTL = { ...generalStyles, ...generalRTLIgnoredStyles };
 class VideoComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -44,7 +48,7 @@ class VideoComponent extends React.Component {
     this.renderPlayer = () => {
       const { componentData, config, nodeId } = this.props;
       return /* @__PURE__ */ React.createElement(
-        VideoViewer,
+        Video,
         {
           componentData,
           config,
@@ -77,7 +81,7 @@ class VideoComponent extends React.Component {
         }, 1e4);
       };
       return /* @__PURE__ */ React.createElement("div", { className: styles.hide_duration }, /* @__PURE__ */ React.createElement(
-        VideoViewer,
+        Video,
         {
           componentData,
           config,
@@ -121,9 +125,37 @@ class VideoComponent extends React.Component {
     } = this.props;
     const { isLoaded, shouldRenderDurationFix } = this.state;
     const loading = isLoading || !isLoaded;
-    return /* @__PURE__ */ React.createElement("div", { "data-hook": ROOT, className: styles.video_container }, /* @__PURE__ */ React.createElement("div", { className: styles.video_overlay }), this.renderPlayer(), shouldRenderDurationFix ? this.renderPlayerDurationFix() : null, loading && !error && this.renderLoader(), error && /* @__PURE__ */ React.createElement(MediaItemErrorMsg, { error, t }));
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-hook": VIDEO_ROOT,
+        className: classNames(
+          styles.video_container,
+          getContainerClasses(this.props.editor, this.props.nodeId, false)
+        ),
+        draggable: true,
+        "data-drag-handle": true
+      },
+      /* @__PURE__ */ React.createElement("div", { className: styles.video_overlay }),
+      this.renderPlayer(),
+      shouldRenderDurationFix ? this.renderPlayerDurationFix() : null,
+      loading && !error && this.renderLoader(),
+      error && /* @__PURE__ */ React.createElement(MediaItemErrorMsg, { error, t })
+    );
   }
 }
+const getContainerClasses = (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 {
   VideoComponent
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/tiptap/video-component.tsx"],
-  "sourcesContent": ["import { isFunction } from 'lodash';\nimport React from 'react';\nimport { findDOMNode } from 'react-dom';\n\nimport type { MediaUploadError } from './../../ricos-content';\nimport type { VideoData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { ComponentData, LegacyEditorPluginConfig, TFunction } from './../../ricos-types';\nimport type { ReactPlayer } from './../../wix-react-player';\nimport { Loader, MediaItemErrorMsg } from './../../ui-components';\n\nimport { ROOT } from '../dataHooks';\nimport styles from '../statics/styles/default-video-styles-scss';\nimport { VideoViewer } from '../viewer/video-viewer';\n\ninterface Props {\n  componentData: VideoData & { error?: MediaUploadError };\n  isLoading: boolean;\n  loadingPercentage?: number;\n  updateAttributes: (componentData: ComponentData) => void;\n  config: LegacyEditorPluginConfig;\n  nodeId: string;\n  t: TFunction;\n}\n\ninterface State {\n  isLoaded: boolean;\n  iosFixKey: number;\n  shouldRenderDurationFix?: boolean;\n}\n\nexport class VideoComponent extends React.Component<Props, State> {\n  private durationFixTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      isLoaded: false,\n      iosFixKey: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.handlePlayerFocus();\n  }\n\n  componentDidUpdate() {\n    this.handlePlayerFocus();\n  }\n\n  componentWillUnmount(): void {\n    clearTimeout(this.durationFixTimeoutId);\n  }\n\n  handlePlayerFocus() {\n    // eslint-disable-next-line react/no-find-dom-node\n    const element = (findDOMNode(this) as HTMLElement)?.querySelector?.('iframe, video');\n    if (element) {\n      (element as HTMLElement).tabIndex = -1;\n    }\n  }\n\n  handleReady = (player: React.MutableRefObject<ReactPlayer | null>) => {\n    if (!this.state.isLoaded) {\n      this.setState({ isLoaded: true });\n    }\n    this.handleDuration(player);\n  };\n\n  handleDuration = (player: React.MutableRefObject<ReactPlayer | null>) => {\n    setTimeout(() => {\n      const duration = player.current?.getDuration();\n      if (duration) {\n        this.saveDurationToData(duration);\n      } else {\n        this.setState({ shouldRenderDurationFix: true });\n      }\n    }, 3000);\n  };\n\n  renderLoader = () => {\n    const isCustomVideo =\n      'video' in this.props.componentData && !!this.props.componentData.video?.src?.id;\n    return (\n      <div className={styles.videoOverlay}>\n        <Loader\n          type={'medium'}\n          isVerySlowFakeLoader={isCustomVideo}\n          percent={this.props.loadingPercentage}\n          disableProgress={!this.props.isLoading && !this.state.isLoaded}\n        />\n      </div>\n    );\n  };\n\n  saveDurationToData = (duration: number) => {\n    const { componentData, updateAttributes } = this.props;\n    const video = 'video' in componentData ? componentData.video : {};\n    updateAttributes({ ...componentData, video: { ...(video || {}), duration } });\n  };\n\n  renderPlayer = () => {\n    const { componentData, config, nodeId } = this.props;\n    return (\n      <VideoViewer\n        componentData={componentData}\n        config={config}\n        onReady={this.handleReady}\n        isLoaded={this.state.isLoaded}\n        key={this.state.iosFixKey}\n        nodeId={nodeId}\n        isLight={false}\n        disabled\n      />\n    );\n  };\n\n  renderPlayerDurationFix = () => {\n    const { componentData, config, nodeId } = this.props;\n\n    const play = (player: React.MutableRefObject<ReactPlayer | null>): boolean => {\n      const internalPlayer = player.current?.getInternalPlayer();\n      if (internalPlayer && 'play' in internalPlayer && isFunction(internalPlayer.play)) {\n        internalPlayer.play();\n        return true;\n      }\n\n      return false;\n    };\n\n    // In some instances the video doesn't completely load, and we don't get its duration. This is a fix for that. (happens in facebook)\n    const onReady = (player: React.MutableRefObject<ReactPlayer | null>) => {\n      const hasPlayed = play(player);\n      if (hasPlayed) {\n        return;\n      }\n      // try again, sometimes it takes a while\n      this.durationFixTimeoutId = setTimeout(() => {\n        play(player);\n      }, 10000);\n    };\n\n    return (\n      <div className={styles.hide_duration}>\n        <VideoViewer\n          componentData={componentData}\n          config={config}\n          onReady={onReady}\n          isLight={false}\n          onDuration={duration => {\n            this.setState({ shouldRenderDurationFix: false });\n            this.saveDurationToData(duration);\n            clearTimeout(this.durationFixTimeoutId);\n          }}\n          nodeId={nodeId}\n          muted\n        />\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      t,\n      componentData: { error },\n      isLoading,\n    } = this.props;\n    const { isLoaded, shouldRenderDurationFix } = this.state;\n    const loading = isLoading || !isLoaded;\n\n    return (\n      <div data-hook={ROOT} className={styles.video_container}>\n        <div className={styles.video_overlay} />\n        {this.renderPlayer()}\n        {shouldRenderDurationFix ? this.renderPlayerDurationFix() : null}\n        {loading && !error && this.renderLoader()}\n        {error && <MediaItemErrorMsg error={error} t={t} />}\n      </div>\n    );\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Editor } from '@tiptap/core';\nimport classNames from 'classnames';\nimport { isFunction } from 'lodash';\nimport React from 'react';\nimport { findDOMNode } from 'react-dom';\n\nimport type { MediaUploadError } from './../../ricos-content';\nimport type { VideoData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type { ComponentData, LegacyEditorPluginConfig, TFunction } from './../../ricos-types';\nimport type { ReactPlayer } from './../../wix-react-player';\nimport { Loader, MediaItemErrorMsg } from './../../ui-components';\n\nimport generalStyles from '../../editor-common/statics/styles/general-scss';\nimport generalRTLIgnoredStyles from '../../wix-rich-content-common/statics/styles/general.rtlignore-scss';\nimport { VIDEO_ROOT } from '../dataHooks';\nimport styles from '../statics/styles/default-video-styles-scss';\nimport { Video } from '../viewer/video';\n\nconst stylesWithRTL = { ...generalStyles, ...generalRTLIgnoredStyles };\n\ntype Props = {\n  componentData: VideoData & { error?: MediaUploadError };\n  isLoading: boolean;\n  loadingPercentage?: number;\n  updateAttributes: (componentData: ComponentData) => void;\n  config: LegacyEditorPluginConfig;\n  nodeId: string;\n  t: TFunction;\n  editor: Editor;\n};\n\ninterface State {\n  isLoaded: boolean;\n  iosFixKey: number;\n  shouldRenderDurationFix?: boolean;\n}\n\nexport class VideoComponent extends React.Component<Props, State> {\n  private durationFixTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      isLoaded: false,\n      iosFixKey: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.handlePlayerFocus();\n  }\n\n  componentDidUpdate() {\n    this.handlePlayerFocus();\n  }\n\n  componentWillUnmount(): void {\n    clearTimeout(this.durationFixTimeoutId);\n  }\n\n  handlePlayerFocus() {\n    // eslint-disable-next-line react/no-find-dom-node\n    const element = (findDOMNode(this) as HTMLElement)?.querySelector?.('iframe, video');\n    if (element) {\n      (element as HTMLElement).tabIndex = -1;\n    }\n  }\n\n  handleReady = (player: React.MutableRefObject<ReactPlayer | null>) => {\n    if (!this.state.isLoaded) {\n      this.setState({ isLoaded: true });\n    }\n    this.handleDuration(player);\n  };\n\n  handleDuration = (player: React.MutableRefObject<ReactPlayer | null>) => {\n    setTimeout(() => {\n      const duration = player.current?.getDuration();\n      if (duration) {\n        this.saveDurationToData(duration);\n      } else {\n        this.setState({ shouldRenderDurationFix: true });\n      }\n    }, 3000);\n  };\n\n  renderLoader = () => {\n    const isCustomVideo =\n      'video' in this.props.componentData && !!this.props.componentData.video?.src?.id;\n    return (\n      <div className={styles.videoOverlay}>\n        <Loader\n          type={'medium'}\n          isVerySlowFakeLoader={isCustomVideo}\n          percent={this.props.loadingPercentage}\n          disableProgress={!this.props.isLoading && !this.state.isLoaded}\n        />\n      </div>\n    );\n  };\n\n  saveDurationToData = (duration: number) => {\n    const { componentData, updateAttributes } = this.props;\n    const video = 'video' in componentData ? componentData.video : {};\n    updateAttributes({ ...componentData, video: { ...(video || {}), duration } });\n  };\n\n  renderPlayer = () => {\n    const { componentData, config, nodeId } = this.props;\n    return (\n      <Video\n        componentData={componentData}\n        config={config}\n        onReady={this.handleReady}\n        isLoaded={this.state.isLoaded}\n        key={this.state.iosFixKey}\n        nodeId={nodeId}\n        isLight={false}\n        disabled\n      />\n    );\n  };\n\n  renderPlayerDurationFix = () => {\n    const { componentData, config, nodeId } = this.props;\n\n    const play = (player: React.MutableRefObject<ReactPlayer | null>): boolean => {\n      const internalPlayer = player.current?.getInternalPlayer();\n      if (internalPlayer && 'play' in internalPlayer && isFunction(internalPlayer.play)) {\n        internalPlayer.play();\n        return true;\n      }\n\n      return false;\n    };\n\n    // In some instances the video doesn't completely load, and we don't get its duration. This is a fix for that. (happens in facebook)\n    const onReady = (player: React.MutableRefObject<ReactPlayer | null>) => {\n      const hasPlayed = play(player);\n      if (hasPlayed) {\n        return;\n      }\n      // try again, sometimes it takes a while\n      this.durationFixTimeoutId = setTimeout(() => {\n        play(player);\n      }, 10000);\n    };\n\n    return (\n      <div className={styles.hide_duration}>\n        <Video\n          componentData={componentData}\n          config={config}\n          onReady={onReady}\n          isLight={false}\n          onDuration={duration => {\n            this.setState({ shouldRenderDurationFix: false });\n            this.saveDurationToData(duration);\n            clearTimeout(this.durationFixTimeoutId);\n          }}\n          nodeId={nodeId}\n          muted\n        />\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      t,\n      componentData: { error },\n      isLoading,\n    } = this.props;\n    const { isLoaded, shouldRenderDurationFix } = this.state;\n    const loading = isLoading || !isLoaded;\n\n    return (\n      <div\n        data-hook={VIDEO_ROOT}\n        className={classNames(\n          styles.video_container,\n          getContainerClasses(this.props.editor, this.props.nodeId, false)\n        )}\n        draggable\n        data-drag-handle\n      >\n        <div className={styles.video_overlay} />\n        {this.renderPlayer()}\n        {shouldRenderDurationFix ? this.renderPlayerDurationFix() : null}\n        {loading && !error && this.renderLoader()}\n        {error && <MediaItemErrorMsg error={error} t={t} />}\n      </div>\n    );\n  }\n}\n\nconst getContainerClasses = (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-video/toolbar/upload-video.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { Button, FileUpload, Text } from "@wix/design-system";
 import React, { useContext, useMemo } from "react";
 import { EditorContext, RicosContext } from "./../../ricos-context";
-import defaultData from "./../../ricos-schema/legacy/statics/video.defaults.json";
 import { MEDIA_POPOVERS_BUTTONS_NAMES_BI } from "./../../wix-rich-content-common";
 import { Uploader } from "./../../plugin-commons";
+import { RICOS_DEFAULTS } from "../constants";
 import { UPLOAD_TAB_UPLOAD_BUTTON } from "../dataHooks";
 import { VIDEO_TYPE } from "../types";
 import { VideoPluginService } from "./videoPluginService";
@@ -56,14 +56,14 @@ const UploadVideo = ({
   }, accept: FILE_INPUT_ACCEPT }, () => /* @__PURE__ */ React.createElement(Button, { dataHook: UPLOAD_TAB_UPLOAD_BUTTON, onClick: handleUploadClick, fullWidth: true }, t("VideoUploadModal_CustomVideoClickText"))) : null);
 };
 const handleExternalFileChange = (nodeId, editorCommands, updateService, videoPluginService) => ({ data }) => {
-  const id = nodeId || editorCommands.insertBlockWithBlankLines(VIDEO_TYPE, defaultData);
+  const id = nodeId || editorCommands.insertBlockWithBlankLines(VIDEO_TYPE, RICOS_DEFAULTS);
   const file = data instanceof Array ? data[0] : data;
   queueMicrotask(() => {
     updateService?.updatePluginData({ data: file }, id, VIDEO_TYPE, videoPluginService);
   });
 };
 const handleNativeFileChange = (nodeId, editorCommands, uploadService, uploader, videoPluginService) => (files) => {
-  const id = nodeId || editorCommands.insertBlockWithBlankLines(VIDEO_TYPE, defaultData);
+  const id = nodeId || editorCommands.insertBlockWithBlankLines(VIDEO_TYPE, RICOS_DEFAULTS);
   const file = files instanceof Array ? files[0] : files;
   queueMicrotask(() => {
     uploadService.uploadFile(

package/dist/es/plugin-video/toolbar/upload-video.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/toolbar/upload-video.tsx"],
-  "sourcesContent": ["import { Button, FileUpload, Text } from '@wix/design-system';\nimport React, { useContext, useMemo } from 'react';\n\nimport { EditorContext, RicosContext } from './../../ricos-context';\nimport type { VideoData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport defaultData from './../../ricos-schema/legacy/statics/video.defaults.json';\nimport type {\n  EditorCommands,\n  Helpers,\n  IFileUploader,\n  IMediaPluginService,\n  IUpdateService,\n  IUploadService,\n  UpdateEntityFunctionParams,\n} from './../../wix-rich-content-common';\nimport { MEDIA_POPOVERS_BUTTONS_NAMES_BI } from './../../wix-rich-content-common';\nimport { Uploader } from './../../plugin-commons';\n\nimport { UPLOAD_TAB_UPLOAD_BUTTON } from '../dataHooks';\nimport type { VideoPluginEditorConfig } from '../types';\nimport { VIDEO_TYPE } from '../types';\nimport { VideoPluginService } from './videoPluginService';\n\nconst FILE_INPUT_ACCEPT = 'video/*';\n\ntype UploadVideoProps = {\n  nodeId?: string;\n  helpers: Helpers;\n  enableCustomUploadOnMobile?: boolean;\n  uploadService?: IUploadService;\n  updateService?: IUpdateService;\n  closeModal: () => void;\n} & Pick<\n  VideoPluginEditorConfig,\n  'disableDownloadDefault' | 'handleFileSelection' | 'handleFileUpload'\n>;\n\nexport const UploadVideo: React.FC<UploadVideoProps> = ({\n  nodeId,\n  helpers,\n  enableCustomUploadOnMobile,\n  uploadService,\n  updateService,\n  closeModal,\n  disableDownloadDefault,\n  handleFileSelection,\n  handleFileUpload,\n}) => {\n  const { t, isMobile } = useContext(RicosContext);\n  const { getEditorCommands } = useContext(EditorContext);\n\n  const hasCustomFileUpload = Boolean(handleFileUpload || handleFileSelection);\n  const showUploadSection = (!isMobile || enableCustomUploadOnMobile) && hasCustomFileUpload;\n\n  const videoPluginService = useMemo(\n    () => new VideoPluginService({ disableDownloadDefault }),\n    [disableDownloadDefault]\n  );\n\n  const handleUploadClick = () => {\n    helpers?.onPluginsPopOverClick?.({\n      pluginId: VIDEO_TYPE,\n      buttonName: MEDIA_POPOVERS_BUTTONS_NAMES_BI.upload,\n    });\n\n    if (handleFileSelection) {\n      handleFileSelection(\n        handleExternalFileChange(nodeId, getEditorCommands(), updateService, videoPluginService)\n      );\n      closeModal();\n      return;\n    }\n    uploadService?.selectFiles(\n      FILE_INPUT_ACCEPT,\n      false,\n      handleNativeFileChange(\n        nodeId,\n        getEditorCommands(),\n        uploadService,\n        new Uploader(handleFileUpload),\n        videoPluginService\n      )\n    );\n    closeModal();\n  };\n\n  return (\n    <>\n      <Text size=\"small\" weight=\"thin\">\n        {t('VideoCustomUploadModal_Title')}\n      </Text>\n      {showUploadSection ? (\n        <FileUpload onChange={() => {}} accept={FILE_INPUT_ACCEPT}>\n          {() => (\n            <Button dataHook={UPLOAD_TAB_UPLOAD_BUTTON} onClick={handleUploadClick} fullWidth>\n              {t('VideoUploadModal_CustomVideoClickText')}\n            </Button>\n          )}\n        </FileUpload>\n      ) : null}\n    </>\n  );\n};\n\nconst handleExternalFileChange =\n  (\n    nodeId: string | undefined,\n    editorCommands: EditorCommands,\n    updateService: IUpdateService | undefined,\n    videoPluginService: IMediaPluginService\n  ) =>\n  ({ data }: UpdateEntityFunctionParams<VideoData | VideoData[]>) => {\n    const id = nodeId || editorCommands.insertBlockWithBlankLines(VIDEO_TYPE, defaultData);\n    const file = data instanceof Array ? data[0] : data;\n\n    queueMicrotask(() => {\n      updateService?.updatePluginData({ data: file }, id, VIDEO_TYPE, videoPluginService);\n    });\n  };\n\nconst handleNativeFileChange =\n  (\n    nodeId: string | undefined,\n    editorCommands: EditorCommands,\n    uploadService: IUploadService,\n    uploader: IFileUploader,\n    videoPluginService: IMediaPluginService\n  ) =>\n  (files: File[] | File) => {\n    const id = nodeId || editorCommands.insertBlockWithBlankLines(VIDEO_TYPE, defaultData);\n    const file = files instanceof Array ? files[0] : files;\n    queueMicrotask(() => {\n      uploadService.uploadFile(\n        new File([file], file.name, { type: file.type }),\n        id,\n        uploader,\n        VIDEO_TYPE,\n        videoPluginService\n      );\n    });\n  };\n"],
-  "mappings": "AAAA,SAAS,QAAQ,YAAY,YAAY;AACzC,OAAO,SAAS,YAAY,eAAe;AAE3C,SAAS,eAAe,oBAAoB;AAE5C,OAAO,iBAAiB;AAUxB,SAAS,uCAAuC;AAChD,SAAS,gBAAgB;AAEzB,SAAS,gCAAgC;AAEzC,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAEnC,MAAM,oBAAoB;AAcnB,MAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,GAAG,SAAS,IAAI,WAAW,YAAY;AAC/C,QAAM,EAAE,kBAAkB,IAAI,WAAW,aAAa;AAEtD,QAAM,sBAAsB,QAAQ,oBAAoB,mBAAmB;AAC3E,QAAM,qBAAqB,CAAC,YAAY,+BAA+B;AAEvE,QAAM,qBAAqB;AAAA,IACzB,MAAM,IAAI,mBAAmB,EAAE,uBAAuB,CAAC;AAAA,IACvD,CAAC,sBAAsB;AAAA,EACzB;AAEA,QAAM,oBAAoB,MAAM;AAC9B,aAAS,wBAAwB;AAAA,MAC/B,UAAU;AAAA,MACV,YAAY,gCAAgC;AAAA,IAC9C,CAAC;AAED,QAAI,qBAAqB;AACvB;AAAA,QACE,yBAAyB,QAAQ,kBAAkB,GAAG,eAAe,kBAAkB;AAAA,MACzF;AACA,iBAAW;AACX;AAAA,IACF;AACA,mBAAe;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,QACE;AAAA,QACA,kBAAkB;AAAA,QAClB;AAAA,QACA,IAAI,SAAS,gBAAgB;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AACA,eAAW;AAAA,EACb;AAEA,SACE,0DACE,oCAAC,QAAK,MAAK,SAAQ,QAAO,UACvB,EAAE,8BAA8B,CACnC,GACC,oBACC,oCAAC,cAAW,UAAU,MAAM;AAAA,EAAC,GAAG,QAAQ,qBACrC,MACC,oCAAC,UAAO,UAAU,0BAA0B,SAAS,mBAAmB,WAAS,QAC9E,EAAE,uCAAuC,CAC5C,CAEJ,IACE,IACN;AAEJ;AAEA,MAAM,2BACJ,CACE,QACA,gBACA,eACA,uBAEF,CAAC,EAAE,KAAK,MAA2D;AACjE,QAAM,KAAK,UAAU,eAAe,0BAA0B,YAAY,WAAW;AACrF,QAAM,OAAO,gBAAgB,QAAQ,KAAK,CAAC,IAAI;AAE/C,iBAAe,MAAM;AACnB,mBAAe,iBAAiB,EAAE,MAAM,KAAK,GAAG,IAAI,YAAY,kBAAkB;AAAA,EACpF,CAAC;AACH;AAEF,MAAM,yBACJ,CACE,QACA,gBACA,eACA,UACA,uBAEF,CAAC,UAAyB;AACxB,QAAM,KAAK,UAAU,eAAe,0BAA0B,YAAY,WAAW;AACrF,QAAM,OAAO,iBAAiB,QAAQ,MAAM,CAAC,IAAI;AACjD,iBAAe,MAAM;AACnB,kBAAc;AAAA,MACZ,IAAI,KAAK,CAAC,IAAI,GAAG,KAAK,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { Button, FileUpload, Text } from '@wix/design-system';\nimport React, { useContext, useMemo } from 'react';\n\nimport { EditorContext, RicosContext } from './../../ricos-context';\nimport type { VideoData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport type {\n  EditorCommands,\n  Helpers,\n  IFileUploader,\n  IMediaPluginService,\n  IUpdateService,\n  IUploadService,\n  UpdateEntityFunctionParams,\n} from './../../wix-rich-content-common';\nimport { MEDIA_POPOVERS_BUTTONS_NAMES_BI } from './../../wix-rich-content-common';\nimport { Uploader } from './../../plugin-commons';\n\nimport { RICOS_DEFAULTS } from '../constants';\nimport { UPLOAD_TAB_UPLOAD_BUTTON } from '../dataHooks';\nimport type { VideoPluginEditorConfig } from '../types';\nimport { VIDEO_TYPE } from '../types';\nimport { VideoPluginService } from './videoPluginService';\n\nconst FILE_INPUT_ACCEPT = 'video/*';\n\ntype UploadVideoProps = {\n  nodeId?: string;\n  helpers: Helpers;\n  enableCustomUploadOnMobile?: boolean;\n  uploadService?: IUploadService;\n  updateService?: IUpdateService;\n  closeModal: () => void;\n} & Pick<\n  VideoPluginEditorConfig,\n  'disableDownloadDefault' | 'handleFileSelection' | 'handleFileUpload'\n>;\n\nexport const UploadVideo: React.FC<UploadVideoProps> = ({\n  nodeId,\n  helpers,\n  enableCustomUploadOnMobile,\n  uploadService,\n  updateService,\n  closeModal,\n  disableDownloadDefault,\n  handleFileSelection,\n  handleFileUpload,\n}) => {\n  const { t, isMobile } = useContext(RicosContext);\n  const { getEditorCommands } = useContext(EditorContext);\n\n  const hasCustomFileUpload = Boolean(handleFileUpload || handleFileSelection);\n  const showUploadSection = (!isMobile || enableCustomUploadOnMobile) && hasCustomFileUpload;\n\n  const videoPluginService = useMemo(\n    () => new VideoPluginService({ disableDownloadDefault }),\n    [disableDownloadDefault]\n  );\n\n  const handleUploadClick = () => {\n    helpers?.onPluginsPopOverClick?.({\n      pluginId: VIDEO_TYPE,\n      buttonName: MEDIA_POPOVERS_BUTTONS_NAMES_BI.upload,\n    });\n\n    if (handleFileSelection) {\n      handleFileSelection(\n        handleExternalFileChange(nodeId, getEditorCommands(), updateService, videoPluginService)\n      );\n      closeModal();\n      return;\n    }\n    uploadService?.selectFiles(\n      FILE_INPUT_ACCEPT,\n      false,\n      handleNativeFileChange(\n        nodeId,\n        getEditorCommands(),\n        uploadService,\n        new Uploader(handleFileUpload),\n        videoPluginService\n      )\n    );\n    closeModal();\n  };\n\n  return (\n    <>\n      <Text size=\"small\" weight=\"thin\">\n        {t('VideoCustomUploadModal_Title')}\n      </Text>\n      {showUploadSection ? (\n        <FileUpload onChange={() => {}} accept={FILE_INPUT_ACCEPT}>\n          {() => (\n            <Button dataHook={UPLOAD_TAB_UPLOAD_BUTTON} onClick={handleUploadClick} fullWidth>\n              {t('VideoUploadModal_CustomVideoClickText')}\n            </Button>\n          )}\n        </FileUpload>\n      ) : null}\n    </>\n  );\n};\n\nconst handleExternalFileChange =\n  (\n    nodeId: string | undefined,\n    editorCommands: EditorCommands,\n    updateService: IUpdateService | undefined,\n    videoPluginService: IMediaPluginService\n  ) =>\n  ({ data }: UpdateEntityFunctionParams<VideoData | VideoData[]>) => {\n    const id = nodeId || editorCommands.insertBlockWithBlankLines(VIDEO_TYPE, RICOS_DEFAULTS);\n    const file = data instanceof Array ? data[0] : data;\n\n    queueMicrotask(() => {\n      updateService?.updatePluginData({ data: file }, id, VIDEO_TYPE, videoPluginService);\n    });\n  };\n\nconst handleNativeFileChange =\n  (\n    nodeId: string | undefined,\n    editorCommands: EditorCommands,\n    uploadService: IUploadService,\n    uploader: IFileUploader,\n    videoPluginService: IMediaPluginService\n  ) =>\n  (files: File[] | File) => {\n    const id = nodeId || editorCommands.insertBlockWithBlankLines(VIDEO_TYPE, RICOS_DEFAULTS);\n    const file = files instanceof Array ? files[0] : files;\n    queueMicrotask(() => {\n      uploadService.uploadFile(\n        new File([file], file.name, { type: file.type }),\n        id,\n        uploader,\n        VIDEO_TYPE,\n        videoPluginService\n      );\n    });\n  };\n"],
+  "mappings": "AAAA,SAAS,QAAQ,YAAY,YAAY;AACzC,OAAO,SAAS,YAAY,eAAe;AAE3C,SAAS,eAAe,oBAAoB;AAW5C,SAAS,uCAAuC;AAChD,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAEzC,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAEnC,MAAM,oBAAoB;AAcnB,MAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,GAAG,SAAS,IAAI,WAAW,YAAY;AAC/C,QAAM,EAAE,kBAAkB,IAAI,WAAW,aAAa;AAEtD,QAAM,sBAAsB,QAAQ,oBAAoB,mBAAmB;AAC3E,QAAM,qBAAqB,CAAC,YAAY,+BAA+B;AAEvE,QAAM,qBAAqB;AAAA,IACzB,MAAM,IAAI,mBAAmB,EAAE,uBAAuB,CAAC;AAAA,IACvD,CAAC,sBAAsB;AAAA,EACzB;AAEA,QAAM,oBAAoB,MAAM;AAC9B,aAAS,wBAAwB;AAAA,MAC/B,UAAU;AAAA,MACV,YAAY,gCAAgC;AAAA,IAC9C,CAAC;AAED,QAAI,qBAAqB;AACvB;AAAA,QACE,yBAAyB,QAAQ,kBAAkB,GAAG,eAAe,kBAAkB;AAAA,MACzF;AACA,iBAAW;AACX;AAAA,IACF;AACA,mBAAe;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,QACE;AAAA,QACA,kBAAkB;AAAA,QAClB;AAAA,QACA,IAAI,SAAS,gBAAgB;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AACA,eAAW;AAAA,EACb;AAEA,SACE,0DACE,oCAAC,QAAK,MAAK,SAAQ,QAAO,UACvB,EAAE,8BAA8B,CACnC,GACC,oBACC,oCAAC,cAAW,UAAU,MAAM;AAAA,EAAC,GAAG,QAAQ,qBACrC,MACC,oCAAC,UAAO,UAAU,0BAA0B,SAAS,mBAAmB,WAAS,QAC9E,EAAE,uCAAuC,CAC5C,CAEJ,IACE,IACN;AAEJ;AAEA,MAAM,2BACJ,CACE,QACA,gBACA,eACA,uBAEF,CAAC,EAAE,KAAK,MAA2D;AACjE,QAAM,KAAK,UAAU,eAAe,0BAA0B,YAAY,cAAc;AACxF,QAAM,OAAO,gBAAgB,QAAQ,KAAK,CAAC,IAAI;AAE/C,iBAAe,MAAM;AACnB,mBAAe,iBAAiB,EAAE,MAAM,KAAK,GAAG,IAAI,YAAY,kBAAkB;AAAA,EACpF,CAAC;AACH;AAEF,MAAM,yBACJ,CACE,QACA,gBACA,eACA,UACA,uBAEF,CAAC,UAAyB;AACxB,QAAM,KAAK,UAAU,eAAe,0BAA0B,YAAY,cAAc;AACxF,QAAM,OAAO,iBAAiB,QAAQ,MAAM,CAAC,IAAI;AACjD,iBAAe,MAAM;AACnB,kBAAc;AAAA,MACZ,IAAI,KAAK,CAAC,IAAI,GAAG,KAAK,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/dist/es/plugin-video/viewer/nodeViewRenderers-loadable.js CHANGED Viewed

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _nodeViewRenderers;
 var _excluded = ["node", "nodeIndex", "NodeViewContainer"],
-  _excluded2 = ["node"];
+  _excluded2 = ["node"],
+  _excluded3 = ["node", "nodeIndex", "NodeViewContainer"],
+  _excluded4 = ["node"];
 import loadable from "@loadable/component";
 import React, { useMemo } from "react";
 import { Node_Type } from "./../../ricos-types";
@@ -28,7 +30,7 @@ var VideoRenderer = function VideoRenderer(_ref) {
         return false;
       },
       importAsync: function importAsync() {
-        return import(/* webpackChunkName: "ricos_plugin_video" */"./video-loadable");
+        return import(/* webpackChunkName: "ricos_plugin_video" */"./viewer-video-loadable");
       },
       requireAsync: function requireAsync(props) {
         var _this = this;
@@ -48,9 +50,9 @@ var VideoRenderer = function VideoRenderer(_ref) {
       },
       resolve: function resolve() {
         if (require.resolveWeak) {
-          return require.resolveWeak("./video-loadable");
+          return require.resolveWeak("./viewer-video-loadable");
         }
-        return eval('require.resolve')("./video-loadable");
+        return eval('require.resolve')("./viewer-video-loadable");
       }
     });
   }, []);
@@ -68,5 +70,68 @@ var VideoLoadable = function VideoLoadable(_ref2) {
     node: node
   }, props));
 };
-var nodeViewRenderers = (_nodeViewRenderers = {}, _nodeViewRenderers[Node_Type.VIDEO] = VideoLoadable, _nodeViewRenderers);
+var CaptionRenderer = function CaptionRenderer(_ref3) {
+  var node = _ref3.node,
+    nodeIndex = _ref3.nodeIndex,
+    NodeViewContainer = _ref3.NodeViewContainer,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  var ImageCaption = useMemo(function () {
+    return loadable({
+      resolved: {},
+      chunkName: function chunkName() {
+        return "ricos_plugin_image_caption";
+      },
+      isReady: function isReady(props) {
+        var key = this.resolve(props);
+        if (this.resolved[key] !== true) {
+          return false;
+        }
+        if (typeof __webpack_modules__ !== 'undefined') {
+          return !!__webpack_modules__[key];
+        }
+        return false;
+      },
+      importAsync: function importAsync() {
+        return import(/* webpackChunkName: "ricos_plugin_image_caption" */"../../plugin-figure/viewer/viewer-caption-loadable");
+      },
+      requireAsync: function requireAsync(props) {
+        var _this = this;
+        var key = this.resolve(props);
+        this.resolved[key] = false;
+        return this.importAsync(props).then(function (resolved) {
+          _this.resolved[key] = true;
+          return resolved;
+        });
+      },
+      requireSync: function requireSync(props) {
+        var id = this.resolve(props);
+        if (typeof __webpack_require__ !== 'undefined') {
+          return __webpack_require__(id);
+        }
+        return eval('module.require')(id);
+      },
+      resolve: function resolve() {
+        if (require.resolveWeak) {
+          return require.resolveWeak("../../plugin-figure/viewer/viewer-caption-loadable");
+        }
+        return eval('require.resolve')("../../plugin-figure/viewer/viewer-caption-loadable");
+      }
+    });
+  }, []);
+  return /* @__PURE__ */React.createElement(ImageCaption, _extends({
+    key: node.id,
+    node: node,
+    nodeIndex: nodeIndex,
+    NodeViewContainer: NodeViewContainer
+  }, props));
+};
+var CaptionLoadable = function CaptionLoadable(_ref4) {
+  var node = _ref4.node,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return /* @__PURE__ */React.createElement(CaptionRenderer, _extends({
+    key: node.id,
+    node: node
+  }, props));
+};
+var nodeViewRenderers = (_nodeViewRenderers = {}, _nodeViewRenderers[Node_Type.VIDEO] = VideoLoadable, _nodeViewRenderers[Node_Type.CAPTION] = CaptionLoadable, _nodeViewRenderers);
 export { nodeViewRenderers };

package/dist/es/plugin-video/viewer/nodeViewRenderers-loadable.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/viewer/nodeViewRenderers-loadable.tsx"],
-  "sourcesContent": ["import loadable from '@loadable/component';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { NodeViewRendererProps, NodeViewRenderers } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nconst VideoRenderer: FC<NodeViewRendererProps> = ({\n  node,\n  nodeIndex,\n  NodeViewContainer,\n  ...props\n}: NodeViewRendererProps) => {\n  const Video = useMemo(\n    () => loadable(() => import(/* webpackChunkName: \"ricos_plugin_video\" */ './video')),\n    []\n  );\n  return (\n    <Video node={node} nodeIndex={nodeIndex} NodeViewContainer={NodeViewContainer} {...props} />\n  );\n};\n\nconst VideoLoadable = ({ node, ...props }: NodeViewRendererProps) => {\n  return <VideoRenderer key={node.id} node={node} {...props} />;\n};\n\nexport const nodeViewRenderers: NodeViewRenderers = {\n  [Node_Type.VIDEO]: VideoLoadable,\n};\n"],
-  "mappings": "AAAA,OAAO,cAAc;AAErB,OAAO,SAAS,eAAe;AAG/B,SAAS,iBAAiB;AAE1B,MAAM,gBAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA6B;AAC3B,QAAM,QAAQ;AAAA,IACZ,MAAM,SAAS,MAAM;AAAA;AAAA,MAAoD;AAAA,IAAS,CAAC;AAAA,IACnF,CAAC;AAAA,EACH;AACA,SACE,oCAAC,SAAM,MAAY,WAAsB,mBAAuC,GAAG,OAAO;AAE9F;AAEA,MAAM,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,MAA6B;AACnE,SAAO,oCAAC,iBAAc,KAAK,KAAK,IAAI,MAAa,GAAG,OAAO;AAC7D;AAEO,MAAM,oBAAuC;AAAA,EAClD,CAAC,UAAU,KAAK,GAAG;AACrB;",
+  "sourcesContent": ["import loadable from '@loadable/component';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { NodeViewRendererProps, NodeViewRenderers } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nconst VideoRenderer: FC<NodeViewRendererProps> = ({\n  node,\n  nodeIndex,\n  NodeViewContainer,\n  ...props\n}: NodeViewRendererProps) => {\n  const Video = useMemo(\n    () => loadable(() => import(/* webpackChunkName: \"ricos_plugin_video\" */ './viewer-video')),\n    []\n  );\n  return (\n    <Video node={node} nodeIndex={nodeIndex} NodeViewContainer={NodeViewContainer} {...props} />\n  );\n};\n\nconst VideoLoadable = ({ node, ...props }: NodeViewRendererProps) => {\n  return <VideoRenderer key={node.id} node={node} {...props} />;\n};\n\nconst CaptionRenderer: FC<NodeViewRendererProps> = ({\n  node,\n  nodeIndex,\n  NodeViewContainer,\n  ...props\n}) => {\n  const ImageCaption = useMemo(\n    () =>\n      loadable(\n        () =>\n          import(\n            /* webpackChunkName: \"ricos_plugin_image_caption\" */ '../../plugin-figure/viewer/viewer-caption'\n          )\n      ),\n    []\n  );\n  return (\n    <ImageCaption\n      key={node.id}\n      node={node}\n      nodeIndex={nodeIndex}\n      NodeViewContainer={NodeViewContainer}\n      {...props}\n    />\n  );\n};\n\nconst CaptionLoadable = ({ node, ...props }: NodeViewRendererProps) => {\n  return <CaptionRenderer key={node.id} node={node} {...props} />;\n};\n\nexport const nodeViewRenderers: NodeViewRenderers = {\n  [Node_Type.VIDEO]: VideoLoadable,\n  [Node_Type.CAPTION]: CaptionLoadable,\n};\n"],
+  "mappings": "AAAA,OAAO,cAAc;AAErB,OAAO,SAAS,eAAe;AAG/B,SAAS,iBAAiB;AAE1B,MAAM,gBAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA6B;AAC3B,QAAM,QAAQ;AAAA,IACZ,MAAM,SAAS,MAAM;AAAA;AAAA,MAAoD;AAAA,IAAgB,CAAC;AAAA,IAC1F,CAAC;AAAA,EACH;AACA,SACE,oCAAC,SAAM,MAAY,WAAsB,mBAAuC,GAAG,OAAO;AAE9F;AAEA,MAAM,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,MAA6B;AACnE,SAAO,oCAAC,iBAAc,KAAK,KAAK,IAAI,MAAa,GAAG,OAAO;AAC7D;AAEA,MAAM,kBAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAe;AAAA,IACnB,MACE;AAAA,MACE,MACE;AAAA;AAAA,QACuD;AAAA,MACvD;AAAA,IACJ;AAAA,IACF,CAAC;AAAA,EACH;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,MAA6B;AACrE,SAAO,oCAAC,mBAAgB,KAAK,KAAK,IAAI,MAAa,GAAG,OAAO;AAC/D;AAEO,MAAM,oBAAuC;AAAA,EAClD,CAAC,UAAU,KAAK,GAAG;AAAA,EACnB,CAAC,UAAU,OAAO,GAAG;AACvB;",
   "names": []
 }

package/dist/es/plugin-video/viewer/nodeViewRenderers.js CHANGED Viewed

@@ -1,7 +1,9 @@
 import { Node_Type } from "./../../ricos-types";
-import Video from "./video";
+import Caption from "../../plugin-figure/viewer/viewer-caption";
+import Video from "./viewer-video";
 const nodeViewRenderers = {
-  [Node_Type.VIDEO]: Video
+  [Node_Type.VIDEO]: Video,
+  [Node_Type.CAPTION]: Caption
 };
 export {
   nodeViewRenderers

package/dist/es/plugin-video/viewer/nodeViewRenderers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/viewer/nodeViewRenderers.ts"],
-  "sourcesContent": ["import type { NodeViewRenderers } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nimport Video from './video';\n\nexport const nodeViewRenderers: NodeViewRenderers = {\n  [Node_Type.VIDEO]: Video,\n};\n"],
-  "mappings": "AACA,SAAS,iBAAiB;AAE1B,OAAO,WAAW;AAEX,MAAM,oBAAuC;AAAA,EAClD,CAAC,UAAU,KAAK,GAAG;AACrB;",
+  "sourcesContent": ["import type { NodeViewRenderers } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nimport Caption from '../../plugin-figure/viewer/viewer-caption';\nimport Video from './viewer-video';\n\nexport const nodeViewRenderers: NodeViewRenderers = {\n  [Node_Type.VIDEO]: Video,\n  [Node_Type.CAPTION]: Caption,\n};\n"],
+  "mappings": "AACA,SAAS,iBAAiB;AAE1B,OAAO,aAAa;AACpB,OAAO,WAAW;AAEX,MAAM,oBAAuC;AAAA,EAClD,CAAC,UAAU,KAAK,GAAG;AAAA,EACnB,CAAC,UAAU,OAAO,GAAG;AACvB;",
   "names": []
 }