add screencust and videocam recording (audio not working)

package.json

@@ -75,6 +75,7 @@
         "rc-upload": "^4.3.3",
         "react": "^17.0.2",
         "react-media-recorder": "^1.6.6",
+        "react-stopwatch": "^2.0.4",
         "react-webcam": "^7.0.1",
         "sass": "^1.49.9"
     }

src/components/ToolBar.js

@@ -52,12 +52,6 @@ const toolsInit = {
         {
             type: 'g',
             items: [
-                'webcamera',
-            ]
-        },
-        {
-            type: 'g',
-            items: [
                 'clearMarks',
                 'hardBreak',
             ]
@@ -82,7 +76,14 @@ const toolsInit = {
                 'mergeOrSplit',
                 'deleteTable'
             ]
-        }
+        },
+        {
+            type: 'g',
+            items: [
+                'webcamera',
+                'screencust'
+            ]
+        },
     ],
     'text': [
         {
@@ -105,12 +106,6 @@ const toolsInit = {
         {
             type: 'g',
             items: [
-                'webcamera',
-            ]
-        },
-        {
-            type: 'g',
-            items: [
                 'bulletList',
                 'orderedList',
                 'blockquote',
@@ -134,6 +129,13 @@ const toolsInit = {
                 'hardBreak',
             ]
         },
+        {
+            type: 'g',
+            items: [
+                'webcamera',
+                'screencust'
+            ]
+        },
     ]
 }
 

src/extensions/DragAndDrop.js

@@ -50,30 +50,21 @@ const DragAndDrop = Extension.create({
                             // }));
                             // console.log(hasFiles)
 
-                            if (!hasFiles) {
+                            if (hasFiles) {
+                                event.preventDefault();
+                                const images = event.dataTransfer.files;
                                 const {schema} = view.state;
                                 const coordinates = view.posAtCoords({left: event.clientX, top: event.clientY});
 
-                                const transaction = view.state.tr.insert(coordinates.pos, schema.text(
-                                    event.dataTransfer.getData("text/plain")
-                                ));
-                                view.dispatch(transaction)
-                                return
-                            }
-
-                            event.preventDefault();
-                            const images = event.dataTransfer.files;
-                            const {schema} = view.state;
-                            const coordinates = view.posAtCoords({left: event.clientX, top: event.clientY});
-
-                            for (let i = 0; i < images.length; i++) {
-                                const imageSrc = await upload(images[i]);
-                                if (imageSrc) {
-                                    const node = schema.nodes.image.create({
-                                        src: imageSrc
-                                    });
-                                    const transaction = view.state.tr.insert(coordinates.pos, node);
-                                    view.dispatch(transaction)
+                                for (let i = 0; i < images.length; i++) {
+                                    const imageSrc = await upload(images[i]);
+                                    if (imageSrc) {
+                                        const node = schema.nodes.image.create({
+                                            src: imageSrc
+                                        });
+                                        const transaction = view.state.tr.insert(coordinates.pos, node);
+                                        view.dispatch(transaction)
+                                    }
                                 }
                             }
                         }

src/extensions/VoiceMessage.js

+import React from 'react';
+import { mergeAttributes, Node } from "@tiptap/core";
+
+const VoiceMessage = Node.create({
+    addCommands() {
+        return {
+            setVoiceMessage: (options) => ({ chain }) => {
+                console.log(options)
+                return chain()
+                .insertContent('<h1>' + options.src + '</h1>')
+                .run()
+            },
+        }
+    }
+});
+
+export default VoiceMessage;

yarn.lock

@@ -8249,7 +8249,7 @@ ms@2.1.2:
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.1.1:
+ms@2.1.3, ms@^2.1.1, ms@^2.1.2:
   version "2.1.3"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -10280,6 +10280,13 @@ react-scripts@^3.4.1:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-stopwatch@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-stopwatch/-/react-stopwatch-2.0.4.tgz#b76e25bbcee0da62cfe58facd7b36c85404366bf"
+  integrity sha512-FBF5MS3ODWbGWi7f5wkspMuazZFBZTdUZ2Qgjct7k6tnicHTuUdY1v//MmB3PKmFDX5wrtU++DhTO3ARGVr2wQ==
+  dependencies:
+    ms "^2.1.2"
+
 react-webcam@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-7.0.1.tgz#8249e1d621eb4bba7e3f52135f562439d0528df3"