tiptap: fix resize container size

packages/client/src/tiptap/wrappers/iframe/index.module.scss

@@ -17,6 +17,7 @@
   .innerWrap {
     position: relative;
     width: 100%;
+    height: 100%;
     overflow: hidden;
     border-radius: var(--border-radius);
     flex: 1;

packages/client/src/tiptap/wrappers/iframe/index.tsx

@@ -29,7 +29,7 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
         )}
       </NodeViewContent>
     ),
-    [url]
+    [url, width, height]
   );
 
   if (!isEditable && !url) {
@@ -39,8 +39,8 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
   return (
     <NodeViewWrapper>
       {isEditable ? (
-        <Resizeable height={height} width={width} onChange={onResize}>
-          {content}
+        <Resizeable height={height} width={width} onChangeEnd={onResize}>
+          <div style={{ width, height, maxWidth: '100%' }}>{content}</div>
         </Resizeable>
       ) : (
         <div style={{ width, height, maxWidth: '100%' }}>{content}</div>

packages/client/src/tiptap/wrappers/image/index.tsx

@@ -80,7 +80,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
 
     if (isEditable) {
       return (
-        <Resizeable className={cls('render-wrapper')} width={width} height={height} onChange={onResize}>
+        <Resizeable className={cls('render-wrapper')} width={width} height={height} onChangeEnd={onResize}>
           {img}
         </Resizeable>
       );
@@ -91,7 +91,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
         {img}
       </div>
     );
-  }, [error, src, isEditable]);
+  }, [error, src, isEditable, width, height]);
 
   return (
     <NodeViewWrapper as="div" style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>