added audio file player and some changes in toolbar aligning

src/QEditor.jsx

@@ -168,6 +168,10 @@ const QEditor = ({
             title: 'Вставить презентацию pptx',
             onClick: () => modalOpener('iframe_pptx', 'Вставить презентацию pptx')
         },
+        audio: {
+            title: 'Вставить аудио файл',
+            onClick: () => modalOpener('audio', 'Вставить аудио файл')
+        },
         image: {
             title: 'Загрузить изображение',
             onClick: () => modalOpener('image', 'Загрузить изображение')
@@ -522,6 +526,10 @@ const QEditor = ({
                 return (
                     <Fragment>{getUploader({accept: 'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation', afterParams: ['no_convert=1']})}</Fragment>
                 )
+            case 'audio':
+                return (
+                    <Fragment>{getUploader({accept: '.wav, .mp3, .ogg'})}</Fragment>
+                )
             case 'video':
                 return (
                     <Fragment>{getUploader({accept: 'video/*'})}</Fragment>
@@ -990,6 +998,11 @@ const QEditor = ({
                                                     editor.chain().focus().insertContent(`<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=${file.path}" width="100%" height="600px" frameBorder="0"></iframe>`).run();
                                                 })
                                                 break
+                                            case 'audio':
+                                                uploadedPaths.map((file) => {
+                                                    editor.chain().focus().insertContent(`<audio class="audio-player" controls="true" src="${file.path}" />`).run()
+                                                })
+                                                break;
                                             case 'file':
                                                 uploadedPaths.map((file, i) => {
                                                     let exp = file.path.split('.');

src/components/ToolBar.js

@@ -48,6 +48,7 @@ const toolsInit = {
                 'video',
                 'iframe',
                 'iframe_pptx',
+                'audio',
                 'iframe_custom',
             ]
         },

src/index.scss

@@ -246,6 +246,8 @@ body{
 
     &-toolbar{
         display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
         position: sticky;
         top: 0;
         flex-direction: row;
@@ -933,6 +935,9 @@ body{
         &.qiframe_custom{
             background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2221%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.262%2013.837c.388.103.74-.11.857-.498L12.766.837C12.87.485%2012.7.134%2012.312.03c-.38-.102-.71.044-.842.498L7.844%2012.966c-.117.395.008.761.418.871zM20.53%206.923a.742.742%200%200%200-.25-.556l-4.892-4.41c-.315-.278-.718-.278-.974.008-.256.285-.22.703.073.967l4.41%203.991-4.41%203.992c-.293.264-.33.674-.073.967.256.285.66.285.974.007l4.893-4.416a.716.716%200%200%200%20.249-.55zM0%206.923c0%20.205.088.403.256.55l4.893%204.416c.308.278.718.278.974-.007.256-.293.212-.703-.08-.967L1.64%206.923l4.401-3.991c.293-.264.337-.682.081-.967-.256-.286-.666-.286-.974-.008L.256%206.367A.75.75%200%200%200%200%206.923z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
         }
+        &.qaudio {
+            background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cpath style='fill:%23222222;stroke:%23666666' d='M 41,65 41,1.4 89,11 89,86 c 0,0 -9,12 -28,5 -8,-3 -7,-12 2,-15 9,-3 15,-1 20,1 L 83,24 47,14 47,72 c 0,0 -5,14 -26,8 -7,-2 -11.8,-12 1,-16 7,-2 14,-2 19,1 z'/%3E%3C/svg%3E");
+        }
         &.qinsertTable{
             background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2215%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281.517%20.975%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M.976%205.967h11M6.035.033v11%22%2F%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
         }