added resizable image

example/src/App.js

@@ -7,12 +7,13 @@ import 'react-ag-qeditor/dist/index.css'
 const App = () => {
     return <div style={{padding:40}}>
         <QEditor
-            value={'<span style="font-size: 20px;">asds</span>'}
+            value={'<p><b>bold</b></p>' +
+                '<p><img src="https://cdn.atmaguru.online/2/atma/4/e/4edof0juw55fUp6TC41r7Swt4eCMWFGHJKBvtZxyglvI2B7aae1NRsqkvV7CLkny.jpeg" width="100"></p>'}
             onChange={(value)=>{
                 console.log('sads', value);
             }}
             uploadOptions={{
-                url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=UN8SUwWR8m5XUm9v8uDtew&expires=1652081782',
+                url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=YEUk8Mjmh2h9NnJrVO7Srg&expires=1653194293',
                 errorMessage: 'Загрузка временно невозможна'
             }}
         />

package.json

 {
     "name": "react-ag-qeditor",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "WYSIWYG html editor",
     "author": "atma",
     "license": "MIT",
@@ -16,7 +16,7 @@
     },
     "scripts": {
         "build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
-        "start": "microbundle-crl watch --no-compress --format modern,cjs ",
+        "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",
         "prepare": "run-s build",
         "test": "run-s test:unit test:lint test:build",
         "test:build": "run-s build",
@@ -54,10 +54,12 @@
         "dist"
     ],
     "dependencies": {
+        "katex": "^0.15.3",
+        "quill-blot-formatter": "^1.0.5",
+        "quill-image-resize-module-react": "^3.0.0",
+        "rc-upload": "^4.3.3",
         "react": "^18.0.0",
         "react-quill": "^1.3.5",
-        "sass": "^1.49.9",
-        "katex": "^0.15.3",
-        "rc-upload": "^4.3.3"
+        "sass": "^1.49.9"
     }
 }

src/QEditor.jsx

@@ -2,13 +2,21 @@ import React, { Fragment } from 'react'
 import ReactQuill, { Quill } from 'react-quill';
 import './index.scss';
 import 'react-quill/dist/quill.snow.css';
+import ImageBlot from "./blots/ImageBlot";
 import VideoBlot from "./blots/VideoBlot";
 import VideoLocalBlot from "./blots/VideoLocalBlot";
 import EditorModal from "./components/EditorModal";
 import Uploader from "./components/Uploader";
 import "katex/dist/katex.min.css";
+import ImageResize from "quill-image-resize-module-react";
+import BlotFormatter from 'quill-blot-formatter';
 import katex from "katex";
 
+
+Quill.register('modules/blotFormatter', BlotFormatter);
+
+
+
 export default class QEditor extends React.Component {
     constructor (props) {
         super(props)
@@ -24,6 +32,8 @@ export default class QEditor extends React.Component {
 
         Quill.register('formats/video', VideoBlot)
         Quill.register('formats/videoLocal', VideoLocalBlot)
+        // Quill.register('modules/imageResize', ImageResize)
+        Quill.register('formats/image', ImageBlot)
 
     }
 
@@ -64,13 +74,33 @@ export default class QEditor extends React.Component {
                         innerModalType: 'videoLocal'
                     }, () => this.editorModal.show({title: 'Загрузить видео'}));
                 },
-                image: () => {
+                image: (a) => {
+
+                    console.log(a);
+
                     this.setState({
                         innerModalType: 'image'
                     }, () => this.editorModal.show({title: 'Загрузить изображение'}));
                 }
             }
         },
+        // imageResize: {
+        //     parchment: Quill.import("parchment"),
+        //     modules: ["Resize", "DisplaySize"]
+        // },
+        blotFormatter: {}
+        /* clipboard: {
+            matchers: [
+                ['IMG', (node, delta)=>{
+
+                    console.log(delta)
+
+
+
+                    return delta.compose(new Delta().retain(delta.length(), { width: 100, title: 'ekwgon' }));
+                }]
+            ]
+        } */
     }
 
     formats = [
@@ -79,7 +109,7 @@ export default class QEditor extends React.Component {
         'list', 'bullet', 'indent',
         'align',
         'link', 'image', 'video', 'color', 'background', 'videoLocal',
-        'formula'/*'imageHandler',*/
+        'formula'
     ]
 
     buildActionsModal (buttons = []) {
@@ -170,6 +200,7 @@ export default class QEditor extends React.Component {
                 this.state.uploadedPaths.map((file, i) => {
                     quill.insertEmbed(index, this.state.innerModalType, file.path, Quill.sources.USER);
                     quill.setSelection(index + 1);
+                    quill.blur();
                 });
                 break
 
@@ -251,6 +282,6 @@ QEditor.defaultProps = {
     lang: 'ru',
     uploadOptions: {
         url: null,
-        errorMessage: null
+        errorMessage: 'Загрузка временно невозможна'
     }
 }

src/blots/ImageBlot.js

+import { Quill } from 'react-quill'
+
+const Image = Quill.import('formats/image')
+
+export default class ImageBlot extends Image {
+
+    static create(value) {
+        if (typeof value == 'string') {
+            return super.create(value);
+        } else {
+            return value;
+        }
+    }
+
+    static value(domNode) {
+        return domNode;
+    }
+
+    static get ATTRIBUTES() {
+        return [ 'alt', 'height', 'width' ]
+    }
+    //
+    // static formats(domNode) {
+    //
+    //     console.log(domNode);
+    //
+    //
+    //     return this.ATTRIBUTES.reduce(function(formats, attribute) {
+    //         if (domNode.hasAttribute(attribute)) {
+    //             formats[attribute] = domNode.getAttribute(attribute);
+    //         }
+    //         return formats;
+    //     }, {});
+    // }
+
+    formatAt(name, value) {
+
+        console.log(name, value);
+
+        if (this.constructor.ATTRIBUTES.indexOf(name) > -1) {
+            if (value) {
+                this.domNode.setAttribute(name, value);
+            } else {
+                this.domNode.removeAttribute(name);
+            }
+        } else {
+            super.format(name, value);
+        }
+    }
+}

src/blots/VideoBlot.js

@@ -15,9 +15,8 @@ export default class VideoBlot extends Video {
         switch (url.hostname){
             case 'rutube.ru':
             case 'www.rutube.ru':
-                value = `//rutube.ru/play/embed/${id}`;
+                value = `https://rutube.ru/pl/?pl_id&pl_type&pl_video=${id}`;
                 break
-
             case 'ok.ru':
             case 'www.ok.ru':
                 value = `//ok.ru/videoembed/${id}`;

src/index.scss

@@ -33,8 +33,13 @@
         }
 
         &-editor{
-            min-height: 350px;
-            max-height: 800px;
+            overflow: visible;
+
+            &:after{
+                content: "";
+                display: block;
+                clear: both;
+            }
         }
 
         &-container{
@@ -243,8 +248,6 @@
 
 
     //lang RU
-
-
     &[data-lang="ru"]{
         .ql-snow{
             .ql-picker.ql-header .ql-picker-label,
@@ -289,8 +292,5 @@
         }
 
     }
-
-
-
 }