test audio

example/src/App.js

@@ -7,7 +7,7 @@ import 'react-ag-qeditor/dist/index.css'
 const App = () => {
     return <div style={{padding:40}}>
         <QEditor
-            value={'<p>Магма покрывает биотит. Деградация мерзлоты изменяет меандр, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Количество пирокластического материала в связи с преобладанием карьерной разработки ископаемых прекращает фирновый гетит. Синеклиза косвенно пододвигается под кряж, что лишь подтверждает то, что породные отвалы располагаются на склонах.</p>\n' +
+            value={'<p><audio controls src="/media/cc0-audio/t-rex-roar.mp3"/></p><p>Магма покрывает биотит. Деградация мерзлоты изменяет меандр, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Количество пирокластического материала в связи с преобладанием карьерной разработки ископаемых прекращает фирновый гетит. Синеклиза косвенно пододвигается под кряж, что лишь подтверждает то, что породные отвалы располагаются на склонах.</p>\n' +
                 '<p>Можно ожидать, что мергель опускает флювиогляциальный ортоклаз. Колонны могут образоваться после того, как брекчия длительно прекращает флювиогляциальный батолит. Габбро слагает оз, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Кайнозой обеднен. Извержение спорадически ослабляет днепровский рифт. Оттаивание пород, из которого на 50% состоит руда месторождения, неоднозначно переоткладывает железистый биотит.</p>\n' +
                 '<p>Зандровое поле, особенно в верхах разреза, постоянно разогревает кристаллический грунт, что в конце концов приведет к полному разрушению хребта под действием собственного веса. Большое значение для формирования химического состава грунтовых и пластовых вод имеет выклинивание стягивает гидротермальный базальтовый слой. Сель, используя геологические данные нового типа, сдвигает днепровский блеск.</p><span class="math" data-content="c = \pm\sqrt{a^2 + b^2}"></span>'}
             onChange={(value)=>{

src/QEditor.jsx

@@ -29,6 +29,7 @@ import { useReactMediaRecorder } from "react-media-recorder";
 import axios from "axios";
 import ReactStopwatch from 'react-stopwatch';
 import VoiceMessage from "./extensions/VoiceMessage";
+import Audio from "./extensions/Audio";
 
 const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
 
@@ -365,7 +366,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
             DragAndDrop.configure({
                 linkUpload: uploadOptions.url
             }),
-            VoiceMessage
+            VoiceMessage,
+            Audio
         ],
         content: value,
         onUpdate: ({editor}) => onChange(editor.getHTML()),
@@ -791,7 +793,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
                                                 break
                                             case 'voicemessage':
                                                 if (uploadedPaths?.file_path) {
-                                                    editor.commands.setVoiceMessage({ src: uploadedPaths.file_path })
+                                                    editor.chain().focus().addVoiceMessage({ src: uploadedPaths.file_path }).run()
                                                 }
                                                 break
                                             case 'screencust':

src/components/ToolBar.js

@@ -80,6 +80,7 @@ const toolsInit = {
         {
             type: 'g',
             items: [
+                'voicemessage',
                 'webcamera',
                 'screencust'
             ]
@@ -132,6 +133,7 @@ const toolsInit = {
         {
             type: 'g',
             items: [
+                'voicemessage',
                 'webcamera',
                 'screencust'
             ]

src/extensions/Audio.js

+import { Node, mergeAttributes } from '@tiptap/core'
+
+const Audio = Node.create({
+    name: 'audio',
+
+    addAttributes() {
+        return {
+            "src": {
+                default: null
+            },
+        }
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: 'audio',
+            },
+        ]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ['audio', mergeAttributes(HTMLAttributes)];
+    },
+
+    addNodeView() {
+        return ({ editor, node, ...a }) => {
+            const audioElement = document.createElement('audio');
+
+            audioElement.src = node.attrs.src;
+            return {
+                dom: audioElement,
+            }
+        }
+    },
+
+    addCommands() {
+        return {
+            addVoiceMessage: (options) => ({ tr, dispatch }) => {
+                const { selection } = tr
+                const node = this.type.create(options)
+
+                if (dispatch) {
+                    tr.replaceRangeWith(selection.from, selection.to, node)
+                }
+
+                return true
+            },
+        }
+    },
+});
+
+export default Audio;