fix image

example/src/App.js

@@ -6,14 +6,9 @@ import 'react-ag-qeditor/dist/index.css'
 const App = () => {
     return <div style={{padding:40}}>
         <QEditor
-            value={`<p>There are two images below. One with alt text, and one without.</p>
-<!--                <img-->
-<!--                src="https://cdn.atmaguru.online/2/brs/b/7/b7NtdzpNVws1TbKxzIaZeIUjqT9Bz6NAnloaLJ0tDJMraK4T92XdJOPW3Aci69ko.jpg"-->
-<!--                alt="Sandy hills with a foggy background"-->
-<!--                />-->
-                <p></p>
-                <p></p>
-                <img src="https://cdn.atmaguru.online/2/atmacompany/L/u/Luzfq2rOeEruKLfLGNDDCWJcjh0y2zYimU7semFd3ZgW7uxA14DGwPf9jP5pH0yQ.png" /><p></p><p></p>`}
+            value={`
+<p>There are two images below. One with alt text, and one without.</p><p></p><p></p><p style="text-align: center"><img src="https://cdn.atmaguru.online/2/atmacompany/L/u/Luzfq2rOeEruKLfLGNDDCWJcjh0y2zYimU7semFd3ZgW7uxA14DGwPf9jP5pH0yQ.png" width="461"></p><p></p><p></p><p>ромывроапывроаыв</p><p></p>
+`}
             onChange={(value)=>{
                 console.log(value);
             }}

src/QEditor.jsx

@@ -305,8 +305,8 @@ const QEditor = ({
 
                 //так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
                 setTimeout(()=>{
-                    editor.commands.setTextAlign('left');
-                    editor.chain().focus().run()
+                    // editor.commands.setTextAlign('left');
+                    // editor.chain().focus().run()
                 },150)
             }
         },
@@ -314,11 +314,11 @@ const QEditor = ({
             title: 'По центру',
             onClick: () => {
                 editor.commands.setTextAlign('center');
-                editor.commands.paragraph({ textAlign: 'left' })
+                // editor.chain().focus().run();
                 //так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
                 setTimeout(()=>{
-                    editor.commands.setTextAlign('center');
-                    editor.chain().focus().run()
+                    // editor.commands.setTextAlign('center');
+                    // editor.chain().focus().run()
                 },150)
             }
         },
@@ -329,8 +329,8 @@ const QEditor = ({
 
                 //так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
                 setTimeout(()=>{
-                    editor.commands.setTextAlign('right');
-                    editor.chain().focus().run()
+                    // editor.commands.setTextAlign('right');
+                    // editor.chain().focus().run()
                 },150)
             }
         },
@@ -429,7 +429,6 @@ const QEditor = ({
         extensions: [
             StarterKit,
             Underline,
-
             CustomImage,
             // Link.configure({
             //     autolink: true,

src/extensions/Image.js

@@ -6,7 +6,6 @@ import '../Image.css'
 import { mergeAttributes } from "@tiptap/core";
 
 export default Image.extend({
-    options: {inline: true},
     addAttributes() {
         return {
             alt: {
@@ -30,6 +29,7 @@ export default Image.extend({
     },
     addOptions () {
         return {
+            inline: true,
             types: ["image"],
             handlerStyle: {
                 width: "8px",
@@ -47,52 +47,19 @@ export default Image.extend({
         };
     },
     onCreate (data) {
-
-        let editor = data.editor,
-            node = data.node;
-        const element = editor.options.element;
-        element.style.position = "relative";
-        // resizeLayer
-
-        // console.log('onCreate', data);
-        const resizeLayer = document.createElement("div");
-        resizeLayer.className = "resize-layer";
-        resizeLayer.id = "resize-layer";
-        resizeLayer.style.display = "none";
-        resizeLayer.style.position = "absolute";
-
-        Object.entries(this.options.layerStyle).forEach(([key, value]) => {
-            resizeLayer.style[key] = value;
-        });
-
-        const handlers = ["top-left", "top-right", "bottom-left", "bottom-right"];
-        const fragment = document.createDocumentFragment();
-        for (let name of handlers) {
-            const item = document.createElement("div");
-            item.className = `handler ${name}`;
-            item.style.position = "absolute";
-            Object.entries(this.options.handlerStyle).forEach(([key, value]) => {
-                item.style[key] = value;
-            });
-            const dir = name.split("-");
-            item.style[dir[0]] = parseInt(item.style.width) / -2 + "px";
-            item.style[dir[1]] = parseInt(item.style.height) / -2 + "px";
-            if (name === "bottom-left") item.style.cursor = "sw-resize";
-            if (name === "bottom-right") item.style.cursor = "se-resize";
-            fragment.appendChild(item);
-        }
-        resizeLayer.appendChild(fragment);
-        editor.resizeLayer = resizeLayer;
-        element.appendChild(resizeLayer);
-
+        create(data, this.options, this.storage);
     },
 
-    onUpdate({editor, transaction}) {
-        // console.log('update');
-        selectionUpdate({editor, transaction}, this.options, this.storage)
+    onUpdate(data) {
+        // create(data, this.options, this.storage);
+        setTimeout(()=>{
+            selectionUpdate(data, this.options, this.storage)
+        },100)
     },
-    onSelectionUpdate ({editor, transaction}) {
-        selectionUpdate({editor, transaction}, this.options, this.storage)
+    onSelectionUpdate (data) {
+        setTimeout(()=>{
+            selectionUpdate(data, this.options, this.storage)
+        },100)
     },
 })
 
@@ -111,6 +78,15 @@ function ImageNode (props) {
         const newAlt = prompt('Введите Alt:', alt || '')
         updateAttributes({ alt: newAlt })
     }
+    const onEditWidth = (width) => {
+        console.log('edit width');
+        try {
+            props.editor.commands.updateAttributes({ width: width });
+            updateAttributes({ width: width })
+        } catch (e) {
+            console.log(e);
+        }
+    }
 
     let resizeLayer = document.getElementById('resize-layer');
     if (resizeLayer) {
@@ -137,6 +113,7 @@ function ImageNode (props) {
                     resizeElement.style.width = clientWidth + "px"; // max width
 
                     last_width = clientWidth;
+
                     const pos = getRelativePosition(resizeElement, element);
                     // console.log(pos);
                     resizeLayer.style.top = pos.top + "px";
@@ -146,11 +123,11 @@ function ImageNode (props) {
 
                     startX = e.screenX;
 
+                    onEditWidth(last_width);
                 };
 
                 document.addEventListener("mousemove", mousemoveHandle);
                 document.addEventListener("mouseup", (e) => {
-                    updateAttributes({ width: last_width});
                     document.removeEventListener("mousemove", mousemoveHandle)
                 });
             }
@@ -159,7 +136,7 @@ function ImageNode (props) {
 
 
         if (resizeLayer.getAttribute('listener') !== 'true') {
-            resizeLayer.setAttribute('listener', true);
+            resizeLayer.setAttribute('listener', 'true');
             resizeLayer.addEventListener("mousedown", handler);
         }
     }
@@ -168,25 +145,24 @@ function ImageNode (props) {
     return (
         <NodeViewWrapper className={className} data-drag-handle>
             <img src={src} width={width} alt={alt}/>
+            {
+                props.selected &&
                 <span className="alt-text-indicator" style={{zIndex: '999'}}>
                     {alt ?
                         <span className="symbol symbol-positive">✔</span> :
                         <span className="symbol symbol-negative">!</span>
                     }
-                {alt ?
-                    <span className="text">Alt: "{alt}".</span> :
-                    <span className="text">Alt текст не найден.</span>
-                }
-                <button className="edit" type="button" onClick={onEditAlt}>
-                Изменить
-                </button>
+                    <button className="edit" type="button" onClick={onEditAlt}>Alt</button>
                 </span>
+            }
         </NodeViewWrapper>
     )
 }
 
-function selectionUpdate({editor, transaction}, options, storage)
+function selectionUpdate(data, options, storage)
 {
+    let editor = data.editor,
+        transaction = data.transaction;
     const element = editor.options.element;
     const node = transaction.curSelection.node;
     const resizeLayer = editor.resizeLayer;
@@ -219,3 +195,41 @@ function getRelativePosition (element, ancestor) {
     };
     return relativePosition;
 }
+function create(data, options, storage) {
+    let editor = data.editor,
+        node = data.node;
+    const element = editor.options.element;
+    element.style.position = "relative";
+    // resizeLayer
+
+    // console.log('onCreate', data);
+    const resizeLayer = document.createElement("div");
+    resizeLayer.className = "resize-layer";
+    resizeLayer.id = "resize-layer";
+    resizeLayer.style.display = "none";
+    resizeLayer.style.position = "absolute";
+
+    Object.entries(options.layerStyle).forEach(([key, value]) => {
+        resizeLayer.style[key] = value;
+    });
+
+    const handlers = ["top-left", "top-right", "bottom-left", "bottom-right"];
+    const fragment = document.createDocumentFragment();
+    for (let name of handlers) {
+        const item = document.createElement("div");
+        item.className = `handler ${name}`;
+        item.style.position = "absolute";
+        Object.entries(options.handlerStyle).forEach(([key, value]) => {
+            item.style[key] = value;
+        });
+        const dir = name.split("-");
+        item.style[dir[0]] = parseInt(item.style.width) / -2 + "px";
+        item.style[dir[1]] = parseInt(item.style.height) / -2 + "px";
+        if (name === "bottom-left") item.style.cursor = "sw-resize";
+        if (name === "bottom-right") item.style.cursor = "se-resize";
+        fragment.appendChild(item);
+    }
+    resizeLayer.appendChild(fragment);
+    editor.resizeLayer = resizeLayer;
+    element.appendChild(resizeLayer);
+}