update redactor

package.json

 {
     "name": "react-ag-qeditor",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "WYSIWYG html editor",
     "author": "atma",
     "license": "MIT",

src/extensions/Image.jsx

@@ -15,32 +15,37 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
 
     // Получаем текущую ширину редактора и доступное пространство
     const getEditorDimensions = () => {
-        const editorElement = editor?.options?.element?.closest('.atma-editor-content');
-        if (!editorElement) return { width: Infinity, availableSpace: Infinity };
+        const editorContent = editor?.options?.element?.closest('.atma-editor-content');
+        if (!editorContent) return { width: Infinity, availableSpace: Infinity };
 
-        const editorWidth = editorElement.clientWidth;
-        const imgElement = imgRef.current;
-        let availableSpace = editorWidth;
+        const fullEditorWidth = editorContent.clientWidth;
+        const editorStyles = window.getComputedStyle(editorContent);
+        const paddingLeft = parseFloat(editorStyles.paddingLeft) || 0;
+        const paddingRight = parseFloat(editorStyles.paddingRight) || 0;
+        const availableEditorWidth = fullEditorWidth - paddingLeft - paddingRight;
 
-        if (imgElement) {
-            const imgRect = imgElement.getBoundingClientRect();
-            const editorRect = editorElement.getBoundingClientRect();
+        let container;
 
+        // при center — всегда редактор
         if (node.attrs.align === 'center') {
-                const leftSpace = imgRect.left - editorRect.left;
-                const rightSpace = editorRect.right - imgRect.right;
-                availableSpace = Math.min(editorWidth, (leftSpace + rightSpace + imgRect.width));
-                console.log(leftSpace, rightSpace, availableSpace);
-            } else if (node.attrs.align === 'right') {
-                availableSpace = imgRect.left - editorRect.left + node.attrs.width;
-            } else if (node.attrs.align === 'left' || node.attrs.align === 'text') {
-                availableSpace = editorRect.right - imgRect.left;
-            }
+            container = editorContent;
+        } else {
+            // при других выравниваниях — ближайший блок
+            container = imgRef.current?.closest('li, blockquote, td, p, div') || editorContent;
         }
 
-        return { width: editorWidth, availableSpace };
+        const containerStyles = window.getComputedStyle(container);
+        const containerPaddingLeft = parseFloat(containerStyles.paddingLeft) || 0;
+        const containerPaddingRight = parseFloat(containerStyles.paddingRight) || 0;
+        const containerWidth = container.clientWidth - containerPaddingLeft - containerPaddingRight;
+
+        return {
+            width: containerWidth,            // текущая ширина контейнера
+            availableSpace: availableEditorWidth // фиксированная доступная ширина
+        };
     };
 
+
     // Безопасное обновление атрибутов с учетом выравнивания и границ
     const safeUpdateAttributes = (newAttrs) => {
         const { width: editorWidth, availableSpace } = getEditorDimensions();
@@ -172,14 +177,17 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
         const aspectRatio = startWidth / startHeight;
         const startX = e.clientX;
         const startY = e.clientY;
-        const { width: editorWidth, availableSpace } = getEditorDimensions();
+        const { width: initialEditorWidth, availableSpace: initialAvailableSpace } = getEditorDimensions();
 
         const onMouseMove = (e) => {
+            requestAnimationFrame(() => {
+                const maxWidth = node.attrs.align === 'center' ? initialEditorWidth : initialAvailableSpace;
+
+                console.log(maxWidth);
                 const deltaX = e.clientX - startX;
                 const deltaY = e.clientY - startY;
 
                 let newWidth, newHeight;
-            const maxWidth = node.attrs.align === 'center' ? editorWidth : availableSpace;
 
                 if (node.attrs.align === 'center') {
                     if (direction.includes('n') || direction.includes('s')) {
@@ -215,8 +223,10 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
                 }
 
                 safeUpdateAttributes({ width: newWidth, height: newHeight });
+            });
         };
 
+
         const onMouseUp = () => {
             window.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('mouseup', onMouseUp);
@@ -231,8 +241,10 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
 
     // Изменение выравнивания с автоматическим масштабированием
     const handleAlign = (align) => {
-        safeUpdateAttributes({ align });
-        safeUpdateAttributes({ align });
+        safeUpdateAttributes({ align }); // первый вызов
+        setTimeout(() => {
+            safeUpdateAttributes({ align }); // повторный вызов с обновлёнными размерами
+        }, 50);
         setShowAlignMenu(false);
         editor.commands.focus();
     };