fix bug

c2c9d3d2 · Рамис · 10d4b78a · c2c9d3d2 · c2c9d3d2 · c2c9d3d2
Commit c2c9d3d2 authored May 11, 2022 by Рамис
Hide whitespace changes
Inline Side-by-side

Showing with 32 additions and 23 deletions

README.md README.md +1 -1

App.js example/src/App.js +1 -1

package.json package.json +1 -1

QEditor.jsx src/QEditor.jsx +2 -1

index.scss src/index.scss +27 -19

No files found.
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 ## Install

 ```bash
-npm install --save https://gitlab.atma.company/lib/react-ag-qeditor.git
+npm install --save git+https://gitlab.atma.company/lib/react-ag-qeditor.git
 ```

 ## Usage

--- a/example/src/App.js
+++ b/example/src/App.js
@@ -6,7 +6,7 @@ import 'react-ag-qeditor/dist/index.css'

 const App = () => {
    return <div style={{padding:40}}>
-        <QEditor value={'<p>asds</p>'} onChange={(value)=>{
+        <QEditor value={'<span style="font-size: 20px;">asds</span>'} onChange={(value)=>{
            console.log('sads', value);
        }} />
    </div>

--- a/package.json
+++ b/package.json
 {
    "name": "react-ag-qeditor",
-    "version": "0.0.2",
+    "version": "0.0.3",
    "description": "WYSIWYG html editor",
    "author": "atma",
    "license": "MIT",

--- a/src/QEditor.jsx
+++ b/src/QEditor.jsx
@@ -24,6 +24,7 @@ export default class QEditor extends React.Component {

        Quill.register('formats/video', VideoBlot)
        Quill.register('formats/videoLocal', VideoLocalBlot)
+
    }

    componentDidMount () {
@@ -90,7 +91,7 @@ export default class QEditor extends React.Component {
            <div className={'atma-editor-modal-action'}>
                {
                    buttons.map((btn, i) => (
-                        <button key={'mAction' + i} className={'atma-editor-btn' + btn.className}
+                        <button type={'button'} key={'mAction' + i} className={'atma-editor-btn' + btn.className}
                                onClick={btn.onClick}>{btn.title}</button>
                    ))
                }

--- a/src/index.scss
+++ b/src/index.scss
@@ -10,33 +10,41 @@
        }
    }

-    .ql-toolbar{
-        &.ql-snow{
-            position: sticky;
-            top: 0;
-            z-index: 10;
-            background-color: #fff;
+    .ql{
+        &-toolbar{
+            &.ql-snow{
+                position: sticky;
+                top: 0;
+                z-index: 10;
+                background-color: #fff;


-            .ql-videoLocal:after{
-                content:'';
-                display: inline-block;
-                width: 18px;
-                height: 18px;
-                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2249%22%20height%3D%2242%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M16.844%2024.038c.151%200%20.296-.026.435-.079.14-.053.29-.127.451-.221l8.66-5.015c.318-.181.541-.348.67-.5a.824.824%200%200%200%20.195-.551.827.827%200%200%200-.194-.548c-.13-.155-.353-.322-.671-.503l-8.66-5.014a3.08%203.08%200%200%200-.45-.222%201.21%201.21%200%200%200-.436-.08.876.876%200%200%200-.698.306c-.175.204-.263.48-.263.826v10.471c0%20.345.088.62.263.824a.876.876%200%200%200%20.698.306z%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%2F%3E%3Crect%20stroke%3D%22%23444%22%20stroke-width%3D%226%22%20x%3D%223%22%20y%3D%223%22%20width%3D%2236%22%20height%3D%2230%22%20rx%3D%223%22%2F%3E%3Ccircle%20stroke%3D%22%23FFF%22%20stroke-width%3D%222.2%22%20fill%3D%22%23444%22%20cx%3D%2239%22%20cy%3D%2232%22%20r%3D%228.9%22%2F%3E%3Cpath%20d%3D%22M34.917%2032.498a.959.959%200%200%200%20.704.291c.275%200%20.51-.097.703-.291l.433-.432%201.316-1.538-.1%204.844a.96.96%200%200%200%20.291.754c.208.208.462.315.764.322a.975.975%200%200%200%20.749-.317.974.974%200%200%200%20.296-.749l-.11-4.814%201.296%201.478.432.432a.97.97%200%200%200%20.699.296.935.935%200%200%200%20.698-.286.935.935%200%200%200%20.286-.699.97.97%200%200%200-.296-.698l-3.236-3.236c-.563-.563-1.122-.566-1.678-.01l-3.247%203.246a.959.959%200%200%200-.291.703c0%20.275.097.51.291.704z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
-                background-repeat: no-repeat;
-                background-size: contain;
-                background-position: center center;
+                .ql-videoLocal:after{
+                    content:'';
+                    display: inline-block;
+                    width: 18px;
+                    height: 18px;
+                    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2249%22%20height%3D%2242%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M16.844%2024.038c.151%200%20.296-.026.435-.079.14-.053.29-.127.451-.221l8.66-5.015c.318-.181.541-.348.67-.5a.824.824%200%200%200%20.195-.551.827.827%200%200%200-.194-.548c-.13-.155-.353-.322-.671-.503l-8.66-5.014a3.08%203.08%200%200%200-.45-.222%201.21%201.21%200%200%200-.436-.08.876.876%200%200%200-.698.306c-.175.204-.263.48-.263.826v10.471c0%20.345.088.62.263.824a.876.876%200%200%200%20.698.306z%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%2F%3E%3Crect%20stroke%3D%22%23444%22%20stroke-width%3D%226%22%20x%3D%223%22%20y%3D%223%22%20width%3D%2236%22%20height%3D%2230%22%20rx%3D%223%22%2F%3E%3Ccircle%20stroke%3D%22%23FFF%22%20stroke-width%3D%222.2%22%20fill%3D%22%23444%22%20cx%3D%2239%22%20cy%3D%2232%22%20r%3D%228.9%22%2F%3E%3Cpath%20d%3D%22M34.917%2032.498a.959.959%200%200%200%20.704.291c.275%200%20.51-.097.703-.291l.433-.432%201.316-1.538-.1%204.844a.96.96%200%200%200%20.291.754c.208.208.462.315.764.322a.975.975%200%200%200%20.749-.317.974.974%200%200%200%20.296-.749l-.11-4.814%201.296%201.478.432.432a.97.97%200%200%200%20.699.296.935.935%200%200%200%20.698-.286.935.935%200%200%200%20.286-.699.97.97%200%200%200-.296-.698l-3.236-3.236c-.563-.563-1.122-.566-1.678-.01l-3.247%203.246a.959.959%200%200%200-.291.703c0%20.275.097.51.291.704z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    background-position: center center;
+                }
+
            }
+        }

+        &-editor{
+            min-height: 350px;
+            max-height: 800px;
        }
-    }

-    .ql-editor{
-        min-height: 350px;
-        max-height: 800px;
+        &-container{
+            font-size: 16px;
+        }
    }

+
+
    &-modal{
        position: fixed;
        top: 0;