add tools type

example/src/App.js

@@ -9,7 +9,7 @@ const App = () => {
         <QEditor
             value={'<p>Магма покрывает биотит. Деградация мерзлоты изменяет меандр, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Количество пирокластического материала в связи с преобладанием карьерной разработки ископаемых прекращает фирновый гетит. Синеклиза косвенно пододвигается под кряж, что лишь подтверждает то, что породные отвалы располагаются на склонах.</p>\n' +
                 '<p>Можно ожидать, что мергель опускает флювиогляциальный ортоклаз. Колонны могут образоваться после того, как брекчия длительно прекращает флювиогляциальный батолит. Габбро слагает оз, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Кайнозой обеднен. Извержение спорадически ослабляет днепровский рифт. Оттаивание пород, из которого на 50% состоит руда месторождения, неоднозначно переоткладывает железистый биотит.</p>\n' +
-                '<p>Зандровое поле, особенно в верхах разреза, постоянно разогревает кристаллический грунт, что в конце концов приведет к полному разрушению хребта под действием собственного веса. Большое значение для формирования химического состава грунтовых и пластовых вод имеет выклинивание стягивает гидротермальный базальтовый слой. Сель, используя геологические данные нового типа, сдвигает днепровский блеск.</p>'}
+                '<p>Зандровое поле, особенно в верхах разреза, постоянно разогревает кристаллический грунт, что в конце концов приведет к полному разрушению хребта под действием собственного веса. Большое значение для формирования химического состава грунтовых и пластовых вод имеет выклинивание стягивает гидротермальный базальтовый слой. Сель, используя геологические данные нового типа, сдвигает днепровский блеск.</p><span class="math" data-content="c = \pm\sqrt{a^2 + b^2}"></span>'}
             onChange={(value)=>{
                 console.log('sads', value);
             }}
@@ -21,6 +21,9 @@ const App = () => {
                 maxWidth: '830px',
                 margin: '20px 20px 20px 100px',
             }}
+            toolsOptions={{
+                type: 'text'
+            }}
         />
     </div>
 }

package.json

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

src/QEditor.jsx

@@ -28,7 +28,7 @@ import CustomLink from './extensions/CustomLink'
 
 const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
 
-const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
+const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions = { type: 'all' } }) => {
     const [innerModalType, setInnerModalType] = useState(null);
     const [embedContent, setEmbedContent] = useState('');
     const [uploaderUid, setUploaderUid] = useState('uid' + new Date());
@@ -474,7 +474,9 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
             <div className="atma-editor">
                 <ToolBar
                     editor={editor}
+                    {...{toolsOptions}}
                     {...{toolsLib}}
+
                 />
                 <BubbleMenu typpyOptions={{followCursor: true,}} editor={editor} shouldShow={({...o}) => {
                     let items = [];

src/components/ToolBar.js

 import React, { Fragment, useState } from 'react';
 
-const ToolBar = ({ editor, toolsLib = []  }) => {
-    if (!editor) {
-        return null
-    }
 
-    const [toolbarItems, setToolbarItems ] = useState([
+const toolsInit = {
+    'all': [
         {
             type: 'g',
             items: [
@@ -81,7 +78,61 @@ const ToolBar = ({ editor, toolsLib = []  }) => {
                 'deleteTable'
             ]
         }
-    ])
+    ],
+    'text': [
+        {
+            type: 'g',
+            items: [
+                'undo',
+                'redo'
+            ]
+        },
+        {
+            type: 's',
+            toggle: true,
+            items: [
+                'paragraph',
+                'h2',
+                'h3',
+                'h4'
+            ]
+        },
+        {
+            type: 'g',
+            items: [
+                'bulletList',
+                'orderedList',
+                'blockquote',
+                'codeBlock',
+                'hr',
+            ]
+        },
+        {
+            type: 's',
+            toggle: true,
+            items: [
+                'alignLeft',
+                'alignCenter',
+                'alignRight',
+            ]
+        },
+        {
+            type: 'g',
+            items: [
+                'clearMarks',
+                'hardBreak',
+            ]
+        },
+    ]
+}
+
+const ToolBar = ({ editor, toolsLib = [], toolsOptions  }) => {
+    if (!editor) {
+        return null
+    }
+
+    const [toolbarItems, setToolbarItems ] = useState((toolsOptions && toolsOptions.type ? toolsInit[toolsOptions.type] : toolsInit['all']))
+
 
     const isActive = (type) => {
         if(type === 'h2' || type === 'h3' || type === 'h4'){
@@ -140,6 +191,7 @@ const ToolBar = ({ editor, toolsLib = []  }) => {
                             return false;
                         }}
                         className={`atma-editor-toolbar-s-opts-item` + (isActive(type) ? ' active' : '' ) + (isDisabled(type) ? ' disabled' : '')}
+                        data-type={type}
                     >
                         <Fragment>
                             <div className={`qicon q${type}`} />