disable attach file

example/src/App.js

@@ -7,7 +7,7 @@ import 'react-ag-qeditor/dist/index.css'
 const App = () => {
     return <div style={{padding:40}}>
         <QEditor
-            value={'<iframe src="https://www.youtube.com/embed/I7vc0lESM6c" frameborder="0" allowfullscreen="true"></iframe>'}
+            value={'<iframe src="https://www.youtube.com/embed/I7vc0lESM6c" frameborder="0" allowfullscreen="true"></iframe><p>asfdnasjkfasf</p>'}
             onChange={(value)=>{
                 console.log('sads', value);
             }}

package.json

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

src/QEditor.jsx

@@ -38,11 +38,20 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
     const [bubbleItems, setBubbleItems] = useState(initialBubbleItems);
     const [colorsTabsActive, setColorsTabsActive] = useState('color'); //highlight || color
     const [colorsSelected, setColorsSelected] = useState(null);
+    const [focusFromTo, setFocusFromTo] = useState(null);
+    const [oldFocusFromTo, setOldFocusFromTo] = useState(null);
     const getRgb = (hex) => {
         var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
         return result ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` : null;
     }
 
+    useEffect(() => {
+        if(focusFromTo !== oldFocusFromTo){
+            setColorsSelected(null)
+            setOldFocusFromTo(focusFromTo);
+        }
+    }, [focusFromTo])
+
     const modalOpener = (type, title) => {
         setModalTitle(title);
         setInnerModalType(type);
@@ -174,15 +183,24 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
         },
         alignLeft: {
             title: 'По левому краю',
-            onClick: () => editor.commands.setTextAlign('left')
+            onClick: () => {
+                editor.commands.setTextAlign('left');
+                editor.chain().focus();
+            }
         },
         alignCenter: {
             title: 'По центру',
-            onClick: () => editor.commands.setTextAlign('center')
+            onClick: () => {
+                editor.commands.setTextAlign('center')
+                editor.chain().focus();
+            }
         },
         alignRight: {
             title: 'По правому краю',
-            onClick: () => editor.commands.setTextAlign('right')
+            onClick: () => {
+                editor.commands.setTextAlign('right');
+                editor.chain().focus();
+            }
         },
         insertTable: {
             title: 'Вставить таблицу',
@@ -226,7 +244,10 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
         },
         colorText: {
             title: 'Цвет текста',
-            onClick: () => setColorsSelected('color')
+            onClick: () => {
+                setColorsSelected('color')
+                editor.chain().focus();
+            }
         },
 
         highlight: {
@@ -284,7 +305,10 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
         onFocus: ({editor})=>{
             let wrap = editor.options.element.closest('.atma-editor-wrap');
 
-            wrap.querySelector('.atma-editor-toolbar-s').classList.remove('show');
+            wrap.querySelectorAll('.atma-editor-toolbar-s').forEach(function(s) {
+                s.classList.remove('show');
+            });
+
         }
     })
 
@@ -427,7 +451,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
                     if(editor.isActive('image') === true){
                         items = ['alignLeft', 'alignCenter', 'alignRight'];
                     }
-                    setColorsSelected(null);
+                    setFocusFromTo([o.from, o.to].join(':'));
+
                     if(items.length > 0){
                         setBubbleItems(items);
                         return true;

src/components/ToolBar.js

@@ -34,7 +34,8 @@ const ToolBar = ({ editor, toolsLib = []  }) => {
             ]
         },
         {
-            type: 'g',
+            type: 's',
+            toggle: true,
             items: [
                 'alignLeft',
                 'alignCenter',
@@ -45,7 +46,7 @@ const ToolBar = ({ editor, toolsLib = []  }) => {
             type: 'g',
             items: [
                 'link',
-                'file',
+                // 'file',
                 'image',
                 'video',
                 'iframe',
@@ -105,7 +106,12 @@ const ToolBar = ({ editor, toolsLib = []  }) => {
                     <div
                         key={idx}
                         onClick={(e) => {
+                            let wrap = editor.options.element.closest('.atma-editor-wrap');
+
                             item.onClick();
+                            wrap.querySelectorAll('.atma-editor-toolbar-s').forEach(function(s) {
+                                s.classList.remove('show');
+                            });
                             e.preventDefault();
                             e.stopPropagation()
                             return false;

src/index.scss

@@ -40,7 +40,7 @@ body{
             &:after{
                 content: '';
                 display: inline-block;
-                width: 14px;
+                width: 20px;
             }
         }
         &-s{