update

.idea/claudeCodeTabState.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ClaudeCodeTabState">
+    <option name="tabSessions">
+      <map>
+        <entry key="0">
+          <value>
+            <TabSessionState>
+              <option name="provider" value="claude" />
+              <option name="sessionId" value="bca3c9d2-5b93-479f-bd56-e8e8b8ddc1a3" />
+              <option name="cwd" value="$PROJECT_DIR$" />
+              <option name="model" value="claude-sonnet-4-6" />
+              <option name="permissionMode" value="bypassPermissions" />
+              <option name="reasoningEffort" value="medium" />
+            </TabSessionState>
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+</project>
\ No newline at end of file

example/src/App.js

@@ -4,7 +4,7 @@ import QEditor from 'react-ag-qeditor'
 import 'react-ag-qeditor/dist/index.css'
 
 const App = () => {
-    return <div style={{padding:40}}>
+    return <div>
         <QEditor
             // value={`<iframe src="https://cdn.atmaguru.online/2/atmacompany/8/b/8bTfGoWtAuv5waVabQRTtWaNOrve5uv8UBXFbGOH9cowQ1K56dYi7TFz6h5jUfzr.pdf" width="100%" /><iframe src="https://www.youtube.com/embed/YmZGP7YP8c4" frameborder="0" allowfullscreen="true"></iframe><video src="https://cdn.atmaguru.online/2/demo/V/k/VkrEXjkxnutXLgcJPt5CLXNgEj4RaL9Zk4SQhIMUjOeIRpu0dSKtQCIMl49pJM6N.webm" controls="true"></video><p>Так исторически сложилось, что взрослым людям стараются дать максимум материалов: часовые лекции, объемные массивы текста и должностных инструкций. Сотрудник изучает огромный объем информации. Пытается его запомнить, а потом в конце курса сдать большой аттестационный экзамен. Вы не учитывете при этом, что мозг взрослого человека перегружен, ему нужно выполнять обязанности по работе, думать о домашних делах, его постоянно отвлекают менеджеры и коллеги по работе… Единственный правильный способ — это давать информацию небольшими кусочками и после каждой порции проверять усвоена она или нет.</p><p></p><p>что-то новое о компании<br><a href="https://cdn.atmaguru.online/1/demo/T/G/TGvSAoLawONkteJ47yyNfmsC8zNe3ZRG4iO0ZfAjmvOIZkm20BWp8KdWCH5p1Rrx.gif" target="_blank" download="Редактор.gif" data-size="37 Мб">РСкачать книгу</a> <br></p>`}
             // value={"<p style=\"text-align: left\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://telemost.yandex.ru/j/5911922929\">дшдлодлод</a></p><table data-bordered=\"true\" class=\"\" style=\"min-width: 75px\"><colgroup><col style=\"min-width: 25px\"><col style=\"min-width: 25px\"><col style=\"min-width: 25px\"></colgroup><tbody><tr><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></th><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\"></p></th><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></th></tr><tr><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\"></p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></td></tr></tbody></table><p style=\"text-align: left\"></p>"}
@@ -18,8 +18,7 @@ const App = () => {
                 errorMessage: 'Загрузка временно невозможна'
             }}
             style={{
-                maxWidth: '830px',
-                margin: '20px 20px 20px 100px',
+                maxWidth: '1000px',
             }}
             toolsOptions={{
                 type: 'all'

package.json

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

src/extensions/DragAndDrop.js

@@ -68,7 +68,51 @@ export const DragAndDrop = Extension.create({
         };
         // <<< NEW
 
-        const handleFileUpload = async (file, view, position) => {
+        // Парсим атрибуты изображения из Word HTML (размеры и выравнивание)
+        const parseWordImageAttrs = (html) => {
+            try {
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(html, 'text/html');
+                const img = doc.querySelector('img');
+                if (!img) return {};
+
+                const style = img.getAttribute('style') || '';
+                const result = {};
+
+                // Конвертация единиц в пиксели (96 dpi)
+                const toPixels = (value, unit) => {
+                    const n = parseFloat(value);
+                    if (unit === 'in') return Math.round(n * 96);
+                    if (unit === 'cm') return Math.round(n * 37.795);
+                    if (unit === 'pt') return Math.round(n * 1.333);
+                    if (unit === 'px') return Math.round(n);
+                    return null;
+                };
+
+                const parseStyleDim = (prop) => {
+                    const m = style.match(new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([\\d.]+)(in|cm|pt|px)`, 'i'));
+                    return m ? toPixels(m[1], m[2]) : null;
+                };
+
+                result.width  = parseStyleDim('width')  || parseInt(img.getAttribute('width'),  10) || null;
+                result.height = parseStyleDim('height') || parseInt(img.getAttribute('height'), 10) || null;
+
+                // Выравнивание по margin/float
+                const ml = (style.match(/margin-left\s*:\s*([^;]+)/i) || [])[1]?.trim();
+                const mr = (style.match(/margin-right\s*:\s*([^;]+)/i) || [])[1]?.trim();
+                const fl = (style.match(/float\s*:\s*([^;]+)/i) || [])[1]?.trim();
+
+                if (ml === 'auto' && mr === 'auto') result.align = 'center';
+                else if (fl === 'right' || ml === 'auto') result.align = 'right';
+                else result.align = 'left';
+
+                return result;
+            } catch {
+                return {};
+            }
+        };
+
+        const handleFileUpload = async (file, view, position, extraAttrs = {}) => {
             if (!extension.options.uploadUrl && !extension.options.uploadHandler) {
                 console.error('No upload URL or handler provided');
                 return;
@@ -95,50 +139,37 @@ export const DragAndDrop = Extension.create({
                 const id = `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
                 if (nodeType === 'image') {
-                    const img = new Image();
-                    img.src = result.file_path;
-                    img.onload = () => {
-                        // === твой расчёт размеров — без изменений ===
-                        const viewDom = view.dom;
-                        const editorContent = viewDom.closest('.atma-editor-content');
-                        const fullEditorWidth = editorContent?.clientWidth || 1000;
-                        const editorStyles = editorContent ? window.getComputedStyle(editorContent) : {};
-                        const paddingLeft = parseFloat(editorStyles.paddingLeft) || 0;
-                        const paddingRight = parseFloat(editorStyles.paddingRight) || 0;
-                        const availableEditorWidth = fullEditorWidth - paddingLeft - paddingRight;
-
-                        const container = editorContent;
-                        const containerStyles = container ? window.getComputedStyle(container) : {};
-                        const containerPaddingLeft = parseFloat(containerStyles.paddingLeft) || 0;
-                        const containerPaddingRight = parseFloat(containerStyles.paddingRight) || 0;
-                        const containerWidth = container ? (container.clientWidth - containerPaddingLeft - containerPaddingRight) : availableEditorWidth;
-
-                        const maxWidth = Math.min(containerWidth, availableEditorWidth);
-                        // === конец блока расчёта ===
-
-                        let width = img.naturalWidth;
-                        let height = img.naturalHeight;
-
-                        if (width > maxWidth) {
-                            const ratio = maxWidth / width;
-                            width = maxWidth;
+                    // Если есть готовые атрибуты (напр. из Word) — используем их,
+                    // ограничивая ширину размером редактора.
+                    // Иначе вставляем без size — Image.jsx сам инициализирует.
+                    let nodeAttrs = {
+                        src: result.file_path,
+                        alt: '',
+                        title: file.name,
+                        align: extraAttrs.align || 'left',
+                        'data-node-id': id
+                    };
+
+                    if (extraAttrs.width && extraAttrs.height) {
+                        const editorContent = view.dom.closest('.atma-editor-content');
+                        const editorWidth = editorContent
+                            ? editorContent.clientWidth - (parseFloat(getComputedStyle(editorContent).paddingLeft) || 0) - (parseFloat(getComputedStyle(editorContent).paddingRight) || 0)
+                            : Infinity;
+
+                        let { width, height } = extraAttrs;
+                        if (width > editorWidth && editorWidth !== Infinity) {
+                            const ratio = editorWidth / width;
+                            width  = Math.round(editorWidth);
                             height = Math.round(height * ratio);
                         }
+                        nodeAttrs.width  = width;
+                        nodeAttrs.height = height;
+                    }
 
-                        const node = view.state.schema.nodes[nodeType].create({
-                            src: result.file_path,
-                            alt: '',
-                            title: file.name,
-                            width,
-                            height,
-                            align: 'left',
-                            'data-node-id': id
-                        });
-
-                        const tr = view.state.tr.insert(position || view.state.selection.from, node);
-                        view.dispatch(tr);
-                        extension.options.onUploadSuccess(result);
-                    };
+                    const node = view.state.schema.nodes[nodeType].create(nodeAttrs);
+                    const tr = view.state.tr.insert(position || view.state.selection.from, node);
+                    view.dispatch(tr);
+                    extension.options.onUploadSuccess(result);
                 } else {
                     const node = view.state.schema.nodes[nodeType].create({
                         src: result.file_path,
@@ -160,17 +191,99 @@ export const DragAndDrop = Extension.create({
 
         const handlePaste = (view, event) => {
             const items = Array.from(event.clipboardData?.items || []);
-            if (event.clipboardData.getData('text/html').includes('urn:schemas-microsoft-com')) {
-                return false;
+            const html  = event.clipboardData.getData('text/html');
+
+            // 1. Word: берём изображение из clipboard items + атрибуты из HTML
+            if (html.includes('urn:schemas-microsoft-com')) {
+                const imageItem = items.find(
+                    item => item.kind === 'file' && item.type.startsWith('image/')
+                );
+                if (!imageItem) return false;
+
+                const file = imageItem.getAsFile();
+                if (!file) return false;
+
+                event.preventDefault();
+                handleFileUpload(file, view, null, parseWordImageAttrs(html));
+                return true;
             }
 
+            // 2. Бинарный файл в буфере (обычный drag&paste)
             const maybeFile = items.find(item => isRealFile(item.getAsFile()));
-            const file = maybeFile?.getAsFile();
-            if (!file) return false;
+            const binaryFile = maybeFile?.getAsFile();
+            if (binaryFile) {
+                event.preventDefault();
+                handleFileUpload(binaryFile, view);
+                return true;
+            }
 
-            event.preventDefault();
-            handleFileUpload(file, view);
-            return true;
+            // 3. HTML с внешними картинками (Google Docs, веб-страницы и т.д.)
+            if (html) {
+                console.log('[DragAndDrop] paste html types:', items.map(i => `${i.kind}:${i.type}`));
+
+                const tmpDoc = new DOMParser().parseFromString(html, 'text/html');
+                const externalImgs = Array.from(tmpDoc.querySelectorAll('img[src]')).filter(img => {
+                    const src = img.getAttribute('src') || '';
+                    return src.startsWith('http://') || src.startsWith('https://') || src.startsWith('data:');
+                });
+
+                console.log('[DragAndDrop] external imgs found:', externalImgs.length, externalImgs.map(i => i.getAttribute('src')?.slice(0, 80)));
+
+                if (externalImgs.length > 0) {
+                    const imgData = externalImgs.map(img => ({
+                        src:    img.getAttribute('src'),
+                        width:  parseInt(img.getAttribute('width'))  || null,
+                        height: parseInt(img.getAttribute('height')) || null,
+                    }));
+
+                    // Убираем <img> из HTML — TipTap вставит только текст
+                    externalImgs.forEach(img => img.remove());
+
+                    event.preventDefault();
+
+                    const cleanHtml = tmpDoc.body.innerHTML;
+                    if (cleanHtml.trim()) {
+                        extension.editor.commands.insertContent(cleanHtml);
+                    }
+
+                    // Асинхронно загружаем каждую картинку на сервер и вставляем
+                    ;(async () => {
+                        for (const { src, width, height } of imgData) {
+                            try {
+                                let blob;
+                                if (src.startsWith('data:')) {
+                                    // data URI — конвертируем сразу в blob
+                                    const [header, b64] = src.split(',');
+                                    const mime = (header.match(/:(.*?);/) || [])[1] || 'image/png';
+                                    const binary = atob(b64);
+                                    const arr = new Uint8Array(binary.length);
+                                    for (let i = 0; i < binary.length; i++) arr[i] = binary.charCodeAt(i);
+                                    blob = new Blob([arr], { type: mime });
+                                } else {
+                                    // Внешний URL — без credentials (иначе CORS с Access-Control-Allow-Origin: * падает)
+                                    const resp = await fetch(src);
+                                    console.log('[DragAndDrop] fetch', src.slice(0, 80), resp.status, resp.headers.get('content-type'));
+                                    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+                                    blob = await resp.blob();
+                                }
+                                if (!blob.type.startsWith('image/')) {
+                                    console.warn('[DragAndDrop] unexpected blob type:', blob.type);
+                                    continue;
+                                }
+                                const ext = blob.type.split('/')[1]?.split('+')[0] || 'png';
+                                const file = new File([blob], `pasted-image.${ext}`, { type: blob.type });
+                                await handleFileUpload(file, view, null, { width, height, align: 'left' });
+                            } catch (e) {
+                                console.warn('[DragAndDrop] не удалось загрузить картинку:', src?.slice(0, 80), e);
+                            }
+                        }
+                    })();
+
+                    return true;
+                }
+            }
+
+            return false;
         };
 
         const handleDragStart = (event) => {

src/extensions/Iframe.js

@@ -212,10 +212,11 @@ const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected
                     style={{
                         width: '100%',
                         height: '100%',
-                        pointerEvents: 'auto',
+                        pointerEvents: 'none',
                     }}
                 />
 
+
                 {(selected || isResizing) && (
                     <Fragment>
                         <button

src/extensions/Image.jsx

@@ -278,16 +278,21 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
         const startWidth = node.attrs.width || imgRef.current.naturalWidth;
         const startHeight = node.attrs.height || imgRef.current.naturalHeight;
         const aspectRatio = startWidth / startHeight;
-        const startX = e.clientX;
-        const startY = e.clientY;
+
+        const getClientX = (e) => e.touches ? e.touches[0].clientX : e.clientX;
+        const getClientY = (e) => e.touches ? e.touches[0].clientY : e.clientY;
+
+        const startX = getClientX(e);
+        const startY = getClientY(e);
         const { width: initialEditorWidth, availableSpace: initialAvailableSpace } = getEditorDimensions();
 
-        const onMouseMove = (e) => {
+        const onMove = (e) => {
+            if (e.cancelable) e.preventDefault();
             requestAnimationFrame(() => {
                 const maxWidth = node.attrs.align === 'center' ? initialEditorWidth : initialAvailableSpace;
 
-                const deltaX = e.clientX - startX;
-                const deltaY = e.clientY - startY;
+                const deltaX = getClientX(e) - startX;
+                const deltaY = getClientY(e) - startY;
 
                 let newWidth, newHeight;
 
@@ -328,10 +333,11 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
             });
         };
 
-
-        const onMouseUp = () => {
-            window.removeEventListener('mousemove', onMouseMove);
-            window.removeEventListener('mouseup', onMouseUp);
+        const onEnd = () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onEnd);
+            window.removeEventListener('touchmove', onMove);
+            window.removeEventListener('touchend', onEnd);
             setIsResizing(false);
             try {
                 const pos = getPos?.()
@@ -341,22 +347,30 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
             } catch (e) {
                 console.warn('getPos() failed:', e)
             }
-            // editor.commands.setNodeSelection(getPos());
             editor.commands.focus();
         };
 
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onEnd);
+        window.addEventListener('touchmove', onMove, { passive: false });
+        window.addEventListener('touchend', onEnd);
     };
 
     // Изменение выравнивания с автоматическим масштабированием
     const handleAlign = (align) => {
-        safeUpdateAttributes({ align }); // первый вызов
+        safeUpdateAttributes({ align });
         setTimeout(() => {
-            safeUpdateAttributes({ align }); // повторный вызов с обновлёнными размерами
+            safeUpdateAttributes({ align });
+            try {
+                const pos = getPos?.()
+                if (typeof pos === 'number') {
+                    editor.commands.setNodeSelection(pos)
+                }
+            } catch (e) {
+                console.warn('getPos() failed:', e)
+            }
         }, 50);
         setShowAlignMenu(false);
-        editor.commands.focus();
     };
 
     // Стили для обертки изображения
@@ -388,11 +402,13 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
                 float: 'left',
                 marginRight: '1rem',
                 width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
+                maxWidth: '100%',
             }),
             ...(node.attrs.align === 'right' && {
                 float: 'right',
                 marginLeft: '1rem',
                 width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
+                maxWidth: '100%',
             }),
             ...(node.attrs.align === 'text' && {
                 display: 'inline-block',
@@ -400,6 +416,7 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
                 margin: '0 0.2rem',
                 verticalAlign: 'middle',
                 width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
+                maxWidth: '100%',
             }),
         };
     };
@@ -538,6 +555,7 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
                         <div
                             key={dir}
                             onMouseDown={handleResizeStart(dir)}
+                            onTouchStart={handleResizeStart(dir)}
                             style={{
                                 position: 'absolute',
                                 width: 12,

src/extensions/ToggleBlock.js

 import { Node } from '@tiptap/core'
 import { ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent } from '@tiptap/react'
 import React, { useEffect, useRef, useState } from 'react'
-import { TextSelection } from 'prosemirror-state'
+import { TextSelection, Plugin, PluginKey } from 'prosemirror-state'
 
 // React компонент NodeView
 export const ToggleBlockComponent = ({node, updateAttributes, getPos, editor}) => {
@@ -90,7 +90,7 @@ export const ToggleBlockComponent = ({node, updateAttributes, getPos, editor}) =
                 className="toggle-body"
                 data-collapsed={!open}
                 style={{
-                    maxHeight: open ? '1000px' : '0',
+                    maxHeight: open ? 'none' : '0',
                 }}
             >
                 <div
@@ -182,6 +182,57 @@ const ToggleBlock = Node.create({
     addNodeView () {
         return ReactNodeViewRenderer(ToggleBlockComponent)
     },
+
+    addProseMirrorPlugins () {
+        return [
+            new Plugin({
+                key: new PluginKey('toggleBlockPaste'),
+                props: {
+                    handlePaste (view, _event, slice) {
+                        const { selection } = view.state
+                        const $from = selection.$from
+
+                        // Ищем toggleBlock в стеке предков
+                        let toggleDepth = -1
+                        for (let d = $from.depth; d > 0; d--) {
+                            if ($from.node(d).type.name === 'toggleBlock') {
+                                toggleDepth = d
+                                break
+                            }
+                        }
+                        if (toggleDepth === -1) return false
+
+                        // Только если есть заголовки — иначе стандартная обработка
+                        let hasHeadings = false
+                        slice.content.forEach(node => {
+                            if (node.type.name === 'heading') hasHeadings = true
+                        })
+                        if (!hasHeadings) return false
+
+                        // replaceSelection с openStart > 0 уходит выше toggleBlock и заменяет его.
+                        // Вставляем узлы через tr.insert напрямую — позиция строго внутри toggleBlock.
+                        let insertPos = $from.after(toggleDepth + 1)
+
+                        const tr = view.state.tr
+                        if (!selection.empty) {
+                            tr.deleteSelection()
+                            insertPos = tr.mapping.map(insertPos)
+                        }
+
+                        const nodes = []
+                        slice.content.forEach(n => nodes.push(n))
+                        // Вставляем в обратном порядке в одну позицию — итоговый порядок правильный
+                        for (let i = nodes.length - 1; i >= 0; i--) {
+                            tr.insert(insertPos, nodes[i])
+                        }
+
+                        view.dispatch(tr.scrollIntoView())
+                        return true
+                    }
+                }
+            })
+        ]
+    },
 })
 
 export default ToggleBlock

src/index.scss

@@ -288,6 +288,7 @@ body{
                 padding: 8px;
                 right: 42%;
                 transform: translateX(50%);
+                z-index: 10;
 
                 &-item{
                     display: flex;
@@ -589,6 +590,17 @@ body{
             max-height: 900px;
             overflow-y: scroll;
 
+            @media (max-width: 600px) {
+                min-width: 0;
+                width: calc(100vw - 32px);
+                max-width: calc(100vw - 32px);
+                left: 50%;
+                transform: translate(-50%, -50%);
+                padding: 24px 16px;
+                max-height: calc(100dvh - 40px);
+                border-radius: 12px;
+            }
+
             &-header{
                 display: block;
                 text-align: left;
@@ -637,6 +649,11 @@ body{
             &:hover{
                 border-color: #adb0b6;
             }
+
+            @media (max-width: 600px) {
+                width: 100%;
+                height: 120px;
+            }
         }
         &-placeholder{
             display: inline-block;
@@ -1230,3 +1247,19 @@ body{
     border-radius: 4px;
     transition: background 0.3s ease, border 0.3s ease;
 }
+
+@media (max-width: 768px) {
+    .ProseMirror,
+    .atma-editor-content {
+        // Ограничиваем враппер шириной контейнера, не трогая float и width
+        div[data-image-wrapper] {
+            max-width: 100% !important;
+        }
+
+        // Картинка масштабируется пропорционально внутри враппера
+        div[data-image-wrapper] img {
+            max-width: 100% !important;
+            height: auto !important;
+        }
+    }
+}