@edifice.io/react 2.3.0-develop-pedago.20250910143701 → 2.3.0-develop-pedago.20250910164231

package/dist/editor.js

@@ -10,14 +10,15 @@ import { default as default9 } from "./modules/editor/components/NodeView/ImageN
 import { default as default10 } from "./modules/editor/components/NodeView/LinkerNodeView.js";
 import { default as default11 } from "./modules/editor/components/NodeView/VideoNodeView.js";
 import { default as default12 } from "./modules/editor/components/NodeView/InformationPaneNodeView.js";
-import { default as default13 } from "./modules/editor/components/Renderer/AttachmentRenderer.js";
-import { default as default14 } from "./modules/editor/components/Renderer/AudioRenderer.js";
-import { default as default15 } from "./modules/editor/components/Renderer/ConversationHistoryRenderer.js";
-import { default as default16 } from "./modules/editor/components/Renderer/LinkerRenderer.js";
-import { default as default17 } from "./modules/editor/components/Renderer/MediaRenderer.js";
-import { default as default18 } from "./modules/editor/components/Renderer/InformationPaneRenderer.js";
-import { default as default19 } from "./modules/editor/components/Toolbar/TableToolbar.js";
-import { default as default20 } from "./modules/editor/components/Toolbar/LinkToolbar.js";
+import { default as default13 } from "./modules/editor/components/NodeView/IframeNodeView.js";
+import { default as default14 } from "./modules/editor/components/Renderer/AttachmentRenderer.js";
+import { default as default15 } from "./modules/editor/components/Renderer/AudioRenderer.js";
+import { default as default16 } from "./modules/editor/components/Renderer/ConversationHistoryRenderer.js";
+import { default as default17 } from "./modules/editor/components/Renderer/LinkerRenderer.js";
+import { default as default18 } from "./modules/editor/components/Renderer/MediaRenderer.js";
+import { default as default19 } from "./modules/editor/components/Renderer/InformationPaneRenderer.js";
+import { default as default20 } from "./modules/editor/components/Toolbar/TableToolbar.js";
+import { default as default21 } from "./modules/editor/components/Toolbar/LinkToolbar.js";
 import { EditorToolbar } from "./modules/editor/components/EditorToolbar/EditorToolbar.js";
 import { useActionOptions } from "./modules/editor/hooks/useActionOptions.js";
 import { useCommentEditor } from "./modules/editor/hooks/useCommentEditor.js";
@@ -34,27 +35,28 @@ import { useTipTapEditor } from "./modules/editor/hooks/useTipTapEditor.js";
 import { useCantooEditor } from "./modules/editor/hooks/useCantooEditor.js";
 export {
   default6 as AttachmentNodeView,
-  default13 as AttachmentRenderer,
+  default14 as AttachmentRenderer,
   default7 as AudioNodeView,
-  default14 as AudioRenderer,
+  default15 as AudioRenderer,
   default5 as BubbleMenuEditImage,
   default8 as ConversationHistoryNodeView,
-  default15 as ConversationHistoryRenderer,
+  default16 as ConversationHistoryRenderer,
   default3 as Editor,
   EditorContent,
   EditorContext,
   Editor as EditorInstance,
   default4 as EditorSkeleton,
   EditorToolbar,
+  default13 as IframeNodeView,
   default9 as ImageNodeView,
   default12 as InformationPaneNodeView,
-  default18 as InformationPaneRenderer,
-  default20 as LinkToolbar,
+  default19 as InformationPaneRenderer,
+  default21 as LinkToolbar,
   default10 as LinkerNodeView,
-  default16 as LinkerRenderer,
-  default17 as MediaRenderer,
+  default17 as LinkerRenderer,
+  default18 as MediaRenderer,
   default2 as StarterKit,
-  default19 as TableToolbar,
+  default20 as TableToolbar,
   default11 as VideoNodeView,
   useActionOptions,
   useCantooEditor,

package/dist/modules/editor/components/NodeView/IframeNodeView.d.ts

@@ -0,0 +1,2 @@
+declare const IframeNodeView: (Component: any) => import('@tiptap/core').Node<import('@edifice.io/tiptap-extensions/iframe').IframeOptions, any>;
+export default IframeNodeView;

package/dist/modules/editor/components/NodeView/IframeNodeView.js

@@ -0,0 +1,10 @@
+import { Iframe } from "@edifice.io/tiptap-extensions/iframe";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+const IframeNodeView = (Component) => Iframe.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(Component);
+  }
+});
+export {
+  IframeNodeView as default
+};

package/dist/modules/editor/components/NodeView/index.d.ts

@@ -5,3 +5,4 @@ export { default as ImageNodeView } from './ImageNodeView';
 export { default as LinkerNodeView } from './LinkerNodeView';
 export { default as VideoNodeView } from './VideoNodeView';
 export { default as InformationPaneNodeView } from './InformationPaneNodeView';
+export { default as IframeNodeView } from './IframeNodeView';

package/dist/modules/editor/components/Renderer/MediaRenderer.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import { odeServices } from "@edifice.io/client";
 import { NodeViewWrapper } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -18,7 +18,7 @@ const MediaRenderer = (props) => {
     startVerticalResize,
     stopVerticalResize,
     isVerticalResizeActive
-  } = useResizeMedia(props, resizableMedia), alignContent = (textalign) => {
+  } = useResizeMedia(props, resizableMedia), [showOverlay, setShowOverlay] = useState(!1), width = node.attrs.width || 560, height = node.attrs.height || Math.round(width * 9 / 16), alignContent = (textalign) => {
     switch (textalign) {
       case "center":
       case "justify":
@@ -53,15 +53,34 @@ const MediaRenderer = (props) => {
       element.removeEventListener("play", onVideoPlay);
     };
   }, []), /* @__PURE__ */ jsx(NodeViewWrapper, { style: alignContent(node.attrs.textAlign), children: /* @__PURE__ */ jsxs("div", { className: "media-node-view", children: [
-    /* @__PURE__ */ jsx("div", { "data-drag-handle": !0, children: node.type.name === "custom-image" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Image, { src: node.attrs.src, alt: node.attrs.alt, title: node.attrs.title, width: node.attrs.width, style: node.attrs.style, height: node.attrs.height, className: "custom-image", ref: resizableMedia }),
-      node.attrs.title && // Display legend (set in title attribute) if it exists
-      /* @__PURE__ */ jsx("em", { className: "custom-image-legend caption text-align-left", children: node.attrs.title })
-    ] }) : /* @__PURE__ */ jsx("video", { ref: resizableMedia, controls: node.attrs.controls === "true", src: node.attrs.src, width: node.attrs.width, height: node.attrs.height, "data-video-resolution": `${node.attrs.width}x${node.attrs.height}`, "data-document-id": node.attrs.documentId, "data-document-is-captation": node.attrs.isCaptation, children: /* @__PURE__ */ jsx("source", { src: node.attrs.src }) }) }),
+    /* @__PURE__ */ jsx("div", { "data-drag-handle": !0, children: (() => {
+      switch (node.type.name) {
+        case "custom-image":
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Image, { src: node.attrs.src, alt: node.attrs.alt, title: node.attrs.title, width: node.attrs.width, style: node.attrs.style, height: node.attrs.height, className: "custom-image", ref: resizableMedia }),
+            node.attrs.title && // Display legend (set in title attribute) if it exists
+            /* @__PURE__ */ jsx("em", { className: "custom-image-legend caption text-align-left", children: node.attrs.title })
+          ] });
+        case "video":
+          return /* @__PURE__ */ jsx("video", { ref: resizableMedia, controls: node.attrs.controls === "true", src: node.attrs.src, width: node.attrs.width, height: node.attrs.height, "data-video-resolution": `${node.attrs.width}x${node.attrs.height}`, "data-document-id": node.attrs.documentId, "data-document-is-captation": node.attrs.isCaptation, children: /* @__PURE__ */ jsx("source", { src: node.attrs.src }) });
+        case "iframe":
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            showOverlay && /* @__PURE__ */ jsx("div", { style: {
+              position: "absolute",
+              inset: 0,
+              cursor: "ew-resize",
+              zIndex: 2
+            } }),
+            /* @__PURE__ */ jsx("iframe", { ref: resizableMedia, src: node.attrs.src, width, height, allowFullScreen: node.attrs.allowfullscreen ?? !0, style: node.attrs.style })
+          ] });
+        default:
+          return null;
+      }
+    })() }),
     /* @__PURE__ */ jsx("div", { className: `vertical-resize-handle ${isVerticalResizeActive ? "vertical-resize-active" : ""}`, title: t("tiptap.media.resize"), onMouseDown: (e) => {
-      e.stopPropagation(), startVerticalResize(e);
+      e.stopPropagation(), setShowOverlay(!0), startVerticalResize(e);
     }, onMouseUp: (e) => {
-      e.stopPropagation(), stopVerticalResize();
+      e.stopPropagation(), setShowOverlay(!1), stopVerticalResize();
     } })
   ] }) });
 };

package/dist/modules/editor/hooks/useResizeMedia.d.ts

@@ -1,10 +1,13 @@
 import { Editor } from '@tiptap/react';
 export interface MediaResizeProps {
     editor: Editor;
+    updateAttributes: (attrs: Record<string, any>) => void;
     [x: string]: any;
 }
-export declare const useResizeMedia: (props: MediaResizeProps, refResizable: React.RefObject<HTMLImageElement | HTMLVideoElement>) => {
+type ResizableElt = HTMLImageElement | HTMLVideoElement | HTMLIFrameElement;
+export declare const useResizeMedia: (props: MediaResizeProps, refResizable: React.RefObject<ResizableElt>, forcedAspectRatio?: number) => {
     startVerticalResize: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     stopVerticalResize: () => void;
     isVerticalResizeActive: import('react').MutableRefObject<boolean>;
 };
+export {};

package/dist/modules/editor/hooks/useResizeMedia.js

@@ -1,27 +1,39 @@
 import { useRef, useEffect } from "react";
-const MIN_WIDTH = 80, useResizeMedia = (props, refResizable) => {
-  const aspectRatio = useRef(0), lastCursorX = useRef(-1), isVerticalResizeActive = useRef(!1), proseMirrorContainerWidth = useRef(0), limitWidthOrHeight = (width) => width < MIN_WIDTH;
+const MIN_WIDTH = 80, useResizeMedia = (props, refResizable, forcedAspectRatio) => {
+  const aspectRatio = useRef(0), lastCursorX = useRef(-1), isVerticalResizeActive = useRef(!1), proseMirrorContainerWidth = useRef(0), limitWidth = (width) => width < MIN_WIDTH, readCurrentPixelWidth = () => {
+    const el = refResizable.current;
+    if (!el) return 0;
+    const rect = el.getBoundingClientRect();
+    return Math.round(rect.width || el.width || 0);
+  }, readCurrentPixelHeight = () => {
+    const el = refResizable.current;
+    if (!el) return 0;
+    const rect = el.getBoundingClientRect();
+    return Math.round(rect.height || el.height || 0);
+  };
   useEffect(() => {
     const proseMirrorContainerDiv = document.querySelector(".ProseMirror");
-    proseMirrorContainerDiv && (proseMirrorContainerWidth.current = proseMirrorContainerDiv == null ? void 0 : proseMirrorContainerDiv.clientWidth), refResizable && (aspectRatio.current = 1.5);
+    if (proseMirrorContainerDiv && (proseMirrorContainerWidth.current = proseMirrorContainerDiv.clientWidth), forcedAspectRatio && forcedAspectRatio > 0)
+      aspectRatio.current = forcedAspectRatio;
+    else {
+      const w = readCurrentPixelWidth(), h = readCurrentPixelHeight();
+      w > 0 && h > 0 ? aspectRatio.current = w / h : aspectRatio.current = 16 / 9;
+    }
   }, []);
-  const onVerticalResize = (directionOfMouseMove, diff) => {
-    var _a, _b;
-    if (!refResizable) {
-      console.error("Media ref is undefined|null", {
-        refResizable
+  const clampWidth = (w) => {
+    let width = w;
+    return proseMirrorContainerWidth.current > 0 && width > proseMirrorContainerWidth.current && (width = proseMirrorContainerWidth.current), limitWidth(width) && (width = MIN_WIDTH), Math.round(width);
+  }, onVerticalResize = (direction, diff) => {
+    const currWidth = readCurrentPixelWidth();
+    if (!currWidth) return;
+    let newWidth = direction === "left" ? currWidth - Math.abs(diff) : currWidth + Math.abs(diff);
+    newWidth = clampWidth(newWidth);
+    const ratio = aspectRatio.current || 16 / 9, newHeight = Math.round(newWidth / ratio);
+    setTimeout(() => {
+      props.updateAttributes({
+        width: newWidth,
+        height: newHeight
       });
-      return;
-    }
-    const currentMediaDimensions = {
-      width: (_a = refResizable.current) == null ? void 0 : _a.width,
-      height: (_b = refResizable.current) == null ? void 0 : _b.height
-    }, newMediaDimensions = {
-      width: -1,
-      height: -1
-    };
-    currentMediaDimensions.width && (directionOfMouseMove === "left" ? newMediaDimensions.width = currentMediaDimensions.width - Math.abs(diff) : newMediaDimensions.width = currentMediaDimensions.width + Math.abs(diff)), newMediaDimensions.width > proseMirrorContainerWidth.current && (newMediaDimensions.width = proseMirrorContainerWidth.current), diff !== 0 && limitWidthOrHeight(newMediaDimensions.width) && (newMediaDimensions.width = MIN_WIDTH), newMediaDimensions.height = newMediaDimensions.width / aspectRatio.current, setTimeout(() => {
-      props.updateAttributes(newMediaDimensions);
     });
   }, onVerticalMouseMove = (event) => {
     if (!isVerticalResizeActive.current) return;
@@ -29,8 +41,8 @@ const MIN_WIDTH = 80, useResizeMedia = (props, refResizable) => {
       clientX
     } = event, diff = lastCursorX.current - clientX;
     if (lastCursorX.current = clientX, diff === 0) return;
-    const directionOfMouseMove = diff > 0 ? "left" : "right";
-    onVerticalResize(directionOfMouseMove, Math.abs(diff));
+    const direction = diff > 0 ? "left" : "right";
+    onVerticalResize(direction, Math.abs(diff));
   }, startVerticalResize = (event) => {
     isVerticalResizeActive.current = !0, lastCursorX.current = event.clientX, document.addEventListener("mousemove", onVerticalMouseMove), document.addEventListener("mouseup", stopVerticalResize);
   }, stopVerticalResize = () => {

package/dist/modules/editor/hooks/useTipTapEditor.js

@@ -4,7 +4,6 @@ import { FontSize } from "@edifice.io/tiptap-extensions/font-size";
 import { CustomHeading } from "@edifice.io/tiptap-extensions/heading";
 import { CustomHighlight } from "@edifice.io/tiptap-extensions/highlight";
 import { Hyperlink } from "@edifice.io/tiptap-extensions/hyperlink";
-import { Iframe } from "@edifice.io/tiptap-extensions/iframe";
 import { SpeechRecognition } from "@edifice.io/tiptap-extensions/speech-recognition";
 import { SpeechSynthesis } from "@edifice.io/tiptap-extensions/speech-synthesis";
 import { TableCell } from "@edifice.io/tiptap-extensions/table-cell";
@@ -27,6 +26,7 @@ import StarterKit from "@tiptap/starter-kit";
 import { useTranslation } from "react-i18next";
 import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
 import useUpload from "../../../hooks/useUpload/useUpload.js";
+import IframeNodeView from "../components/NodeView/IframeNodeView.js";
 import VideoNodeView from "../components/NodeView/VideoNodeView.js";
 import AudioNodeView from "../components/NodeView/AudioNodeView.js";
 import LinkerNodeView from "../components/NodeView/LinkerNodeView.js";
@@ -65,7 +65,7 @@ const useTipTapEditor = (editable, content, focus, placeholder, onContentChange,
       levels: [1, 2]
     }), Typography, FontSize, SpeechRecognition, SpeechSynthesis.configure({
       lang: (currentLanguage == null ? void 0 : currentLanguage.length) === 2 ? `${currentLanguage}-${currentLanguage.toUpperCase()}` : "fr-FR"
-    }), Iframe, Hyperlink, FontFamily, Mathematics, Alert, VideoNodeView(MediaRenderer), AudioNodeView(AudioRenderer), LinkerNodeView(LinkerRenderer), ImageNodeView(MediaRenderer, uploadFile), AttachmentNodeView(AttachmentRenderer), InformationPaneNodeView(InformationPaneRenderer), ...extensions || []],
+    }), Hyperlink, FontFamily, Mathematics, Alert, IframeNodeView(MediaRenderer), VideoNodeView(MediaRenderer), AudioNodeView(AudioRenderer), LinkerNodeView(LinkerRenderer), ImageNodeView(MediaRenderer, uploadFile), AttachmentNodeView(AttachmentRenderer), InformationPaneNodeView(InformationPaneRenderer), ...extensions || []],
     content,
     // If the onContentChange callback is provided, we call it on every content change.
     ...onContentChange ? {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.3.0-develop-pedago.20250910143701",
+  "version": "2.3.0-develop-pedago.20250910164231",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -130,9 +130,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.3.0-develop-pedago.20250910143701",
-    "@edifice.io/tiptap-extensions": "2.3.0-develop-pedago.20250910143701",
-    "@edifice.io/utilities": "2.3.0-develop-pedago.20250910143701"
+    "@edifice.io/bootstrap": "2.3.0-develop-pedago.20250910164231",
+    "@edifice.io/tiptap-extensions": "2.3.0-develop-pedago.20250910164231",
+    "@edifice.io/utilities": "2.3.0-develop-pedago.20250910164231"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -163,8 +163,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.3.0-develop-pedago.20250910143701",
-    "@edifice.io/config": "2.3.0-develop-pedago.20250910143701"
+    "@edifice.io/client": "2.3.0-develop-pedago.20250910164231",
+    "@edifice.io/config": "2.3.0-develop-pedago.20250910164231"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",