upload video/*

cursor pointer to video upload block

src/QEditor.jsx

 import React, { Fragment, useEffect, useState, useRef } from 'react'
 import './index.scss'
-// import "katex/dist/katex.min.css"
 // import EditorModal from "./components/EditorModal"
 // import Uploader from "./components/Uploader"
 
@@ -25,6 +24,7 @@ import Uploader from "./components/Uploader"
 import Video from './extensions/Video'
 import Iframe from './extensions/Iframe'
 import CustomLink from './extensions/CustomLink'
+//import Formula from './extensions/Formula'
 
 const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
 
@@ -270,7 +270,15 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
             title: 'Цвет фона',
             onClick: () => setColorsSelected('highlight')
         },
-
+        // katex: {
+        //     title: 'Вставить формулу',
+        //     onClick: () => {
+        //
+        //         console.log(katex.renderToString(String.raw`c = \pm\sqrt{a^2 + b^2}`));
+        //
+        //         // editor.chain().focus().insertContent()
+        //     }
+        // }
     }
 
     const editor = useEditor({
@@ -402,7 +410,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
                 )
             case 'video':
                 return (
-                    <Fragment>{ getUploader({ accept: 'video/x-msvideo, video/quicktime, video/x-matroska, video/mp4, video/x-ms-wmv' }) }</Fragment>
+                    <Fragment>{ getUploader({ accept: 'video/*' }) }</Fragment>
                 )
             case 'image':
                 return (

src/index.scss

@@ -75,7 +75,7 @@ body{
                     }
 
                     span{
-                        font-size: 13px;
+                        font-size: 1em;
                         white-space: nowrap;
                     }
 
@@ -87,6 +87,33 @@ body{
                         opacity: 0.6;
                         cursor: default;
                     }
+
+                    &[data-type="h2"]{
+                        span{
+                            font-size: 1.5em;
+                        }
+                    }
+                    &[data-type="h3"]{
+                        span{
+                            font-size: 1.17em;
+                        }
+                    }
+
+                    &[data-type="h2"], &[data-type="h3"], &[data-type="h4"]{
+                        font-weight: 500;
+                        padding: 8px;
+
+                        .qicon{
+                            display: none;
+                        }
+                    }
+                    &[data-type="paragraph"]{
+                        padding: 8px;
+
+                        .qicon{
+                            display: none;
+                        }
+                    }
                 }
             }
 
@@ -101,6 +128,7 @@ body{
                 position: absolute;
                 top: 50%;
                 right: 0;
+                margin-top: -2px;
             }
 
             &.show{
@@ -343,6 +371,11 @@ body{
             box-shadow: 0 0 0 1px #F5F7FA;
             justify-content: center;
             align-items: center;
+            cursor: pointer;
+
+            &:hover{
+                border-color: #adb0b6;
+            }
         }
         &-placeholder{
             display: inline-block;