fix bug

example/src/App.js

@@ -8,7 +8,7 @@ const App = () => {
     return <div style={{padding:40}}>
         <QEditor
             value={'<p><b>bold</b></p>' +
-                '<p><img src="https://cdn.atmaguru.online/2/atma/4/e/4edof0juw55fUp6TC41r7Swt4eCMWFGHJKBvtZxyglvI2B7aae1NRsqkvV7CLkny.jpeg" width="100"></p>'}
+                '<p><img src="https://cdn.atmaguru.online/2/atma/4/e/4edof0juw55fUp6TC41r7Swt4eCMWFGHJKBvtZxyglvI2B7aae1NRsqkvV7CLkny.jpeg" style="width: 100px;"></p>'}
             onChange={(value)=>{
                 console.log('sads', value);
             }}

package.json

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

src/QEditor.jsx

 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 ReactQuill, { Quill } from 'react-quill'
+import './index.scss'
+import 'react-quill/dist/quill.snow.css'
+import "katex/dist/katex.min.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 BlotFormatter from 'quill-blot-formatter'
+import ResizeImageBlot from "./blots/ResizeImageBlot"
 import katex from "katex";
 
-
-Quill.register('modules/blotFormatter', BlotFormatter);
-
-
-
 export default class QEditor extends React.Component {
     constructor (props) {
         super(props)
@@ -32,7 +27,7 @@ export default class QEditor extends React.Component {
 
         Quill.register('formats/video', VideoBlot)
         Quill.register('formats/videoLocal', VideoLocalBlot)
-        // Quill.register('modules/imageResize', ImageResize)
+        Quill.register('modules/blotFormatter', BlotFormatter)
         Quill.register('formats/image', ImageBlot)
 
     }
@@ -75,32 +70,15 @@ export default class QEditor extends React.Component {
                     }, () => this.editorModal.show({title: 'Загрузить видео'}));
                 },
                 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' }));
-                }]
-            ]
-        } */
+        blotFormatter: {
+            specs: [ ResizeImageBlot ],
+        }
     }
 
     formats = [
@@ -144,6 +122,7 @@ export default class QEditor extends React.Component {
                             <li className={'vimeo'}/>
                             {/* <li className={'vk'}/> */}
                             <li className={'ok'}/>
+                            <li className={'rutube'}/>
                         </ul>
                     </Fragment>
                 )

src/blots/ImageBlot.js

@@ -13,6 +13,16 @@ export default class ImageBlot extends Image {
     }
 
     static value(domNode) {
+
+        if(domNode.hasAttribute('style')) {
+            domNode.style.height = 'none';
+
+            if(domNode.style.width !== '' && domNode.style.width !== 'auto'){
+                domNode.setAttribute('width', domNode.style.width);
+                domNode.style.width = '';
+            }
+        }
+
         return domNode;
     }
 

src/blots/ResizeImageBlot.js

+import { AlignAction, DeleteAction, ImageSpec, ResizeAction } from "quill-blot-formatter";
+
+export default class ResizeImageBlot extends ImageSpec {
+    getActions() {
+        return [AlignAction, DeleteAction, ResizeAction];
+    }
+}

src/blots/VideoBlot.js

@@ -17,6 +17,10 @@ export default class VideoBlot extends Video {
             case 'www.rutube.ru':
                 value = `https://rutube.ru/pl/?pl_id&pl_type&pl_video=${id}`;
                 break
+            case 'vimeo.com':
+                value = `https://player.vimeo.com/video/${id}`;
+
+                break
             case 'ok.ru':
             case 'www.ok.ru':
                 value = `//ok.ru/videoembed/${id}`;

src/index.scss

@@ -243,6 +243,12 @@
                 width: 24px;
                 height: 24px;
             }
+            &.rutube{
+                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2246%22%20height%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.902%206H0v15h3.87v-4.88h7.414L14.667%2021H19l-3.73-4.902c1.158-.18%201.992-.608%202.502-1.282.51-.675.765-1.755.765-3.194v-1.124c0-.855-.093-1.53-.255-2.047a3.399%203.399%200%200%200-.834-1.372%203.799%203.799%200%200%200-1.437-.832C15.455%206.09%2014.76%206%2013.903%206zm-.625%206.814H3.87V9.306h9.407c.533%200%20.904.09%201.089.247.185.158.301.45.301.877v1.26c0%20.45-.116.742-.301.9-.185.157-.556.224-1.09.224zM24.758%2016.57V6H21v10.48c0%20.854.067%201.552.225%202.069.157.54.427.99.832%201.372.383.404.833.674%201.373.832.54.18%201.215.247%202.07.247h9c.833%200%201.508-.067%202.047-.247.54-.158.99-.428%201.396-.832.382-.383.652-.832.81-1.372.157-.517.247-1.215.247-2.07V6h-3.758v10.57c0%20.45-.112.742-.292.9-.18.157-.54.224-1.058.224h-7.785c-.54%200-.9-.067-1.08-.225-.18-.157-.27-.45-.27-.9z%22%20fill%3D%22%2314191E%22%2F%3E%3Cpath%20d%3D%22M42.682%205.252a2.623%202.623%200%200%200%202.619-2.626A2.623%202.623%200%200%200%2042.682%200a2.623%202.623%200%200%200-2.62%202.626%202.623%202.623%200%200%200%202.62%202.626z%22%20fill%3D%22%23F41240%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+                width: 32px;
+                height: 24px;
+                background-size: contain;
+            }
         }
     }