add audio

.idea/misc.xml

@@ -3,4 +3,7 @@
   <component name="JavaScriptSettings">
     <option name="languageLevel" value="JSX" />
   </component>
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
 </project>
\ No newline at end of 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={'<p><audio controls src="/media/cc0-audio/t-rex-roar.mp3"/></p><p>Магма покрывает биотит. Деградация мерзлоты изменяет меандр, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Количество пирокластического материала в связи с преобладанием карьерной разработки ископаемых прекращает фирновый гетит. Синеклиза косвенно пододвигается под кряж, что лишь подтверждает то, что породные отвалы располагаются на склонах.</p>\n' +
+            value={'<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio><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/extensions/Audio.js

 import { Node, mergeAttributes } from '@tiptap/core'
 
 const Audio = Node.create({
-    name: 'audio',
+    name: "audio",
+
+    inline: true,
+    atom: true,
+    group: "inline",
+    draggable: false,
 
     addAttributes() {
         return {
-            "src": {
+            src: {
                 default: null
-            },
-        }
+            }
+        };
     },
 
     parseHTML() {
         return [
             {
-                tag: 'audio',
-            },
-        ]
+                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,
-            }
-        }
+        return [
+            "audio",
+            { controls: true },
+            ["source", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+        ];
     },
 
     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
+            addVoiceMessage: (options) => ({ chain }) => {
+                return chain()
+                .insertContent(`<audio controls="true" src="${options.src}" />`)
+                .run()
             },
         }
     },