new defauts + dropcursor block drop

michelson · Aug 26, 2023 · 999ebc9 · 999ebc9
1 parent 310c127
commit 999ebc9
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/packages/dante3/docs/index.mdx b/packages/dante3/docs/index.mdx
@@ -49,7 +49,7 @@ onUpdate func will return the entire instance of the editor, so you can use all
     <div>
       <DanteEditor onUpdate={(editor) => setState({ data: editor.getHTML() })} />
 
-      <div class="p-4 border-green-600 rounded-md border-2 overflow-auto">
+      <div className="p-4 border-green-600 rounded-md border-2 overflow-auto">
         {`${state.data}`}
       </div>
     </div>
@@ -130,6 +130,42 @@ Editor Props
       },
       transformPastedText(text) {
         return text.toUpperCase()
+      },
+      handleDrop: function (view, event, slice, moved) {
+        if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) { 
+          let file = event.dataTransfer.files[0];
+          let filesize = ((file.size/1024)/1024).toFixed(4); 
+
+          const { schema } = view.state;
+          const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
+
+          let _URL = window.URL || window.webkitURL;
+
+          if (file.type.startsWith("image/")) {
+              let image = new Image();
+              image.src = _URL.createObjectURL(file);
+              image.onload = function() {
+                  const node = schema.nodes.ImageBlock.create({ src: image.src });
+                  const transaction = view.state.tr.insert(coordinates.pos, node);
+                  view.dispatch(transaction);
+              }
+          } else if (file.type.startsWith("video/")) {
+              const node = schema.nodes.VideoRecorderBlock.create({ url: _URL.createObjectURL(file) });
+              const transaction = view.state.tr.insert(coordinates.pos, node);
+              view.dispatch(transaction);
+          } else if (file.type.startsWith("audio/")) {
+              const node = schema.nodes.AudioRecorderBlock.create({ url: _URL.createObjectURL(file) });
+              const transaction = view.state.tr.insert(coordinates.pos, node);
+              view.dispatch(transaction);
+          } else {
+              const node = schema.nodes.FileBlock.create({ url: _URL.createObjectURL(file) });
+              const transaction = view.state.tr.insert(coordinates.pos, node);
+              view.dispatch(transaction);
+          }
+          return true
+        }
+
+        return false; // not handled use default behaviour
       }
     }
   }

diff --git a/packages/dante3/src/blocks/audioRecorder.tsx b/packages/dante3/src/blocks/audioRecorder.tsx
@@ -184,7 +184,7 @@ export default function AudioRecorderBlock(props: any) {
       data-drag-handle="true"
     >
       <div
-        className="flex space-x-2 bg-white dark:bg-gray-800 justify-center items-center"
+        className="flex space-x-2 justify-center items-center"
         contentEditable={false}
       >
 

diff --git a/packages/dante3/src/editor/constants.ts b/packages/dante3/src/editor/constants.ts
@@ -38,6 +38,8 @@ import GiphyBlock, { GiphyBlockConfig } from "../blocks/giphy/giphyBlock";
 import SpeechToTextBlock, {
   SpeechToTextBlockConfig,
 } from "../blocks/speechToText";
+import { AudioRecorderBlockConfig } from "../blocks/audioRecorder";
+import { FileBlockConfig } from "../blocks/file";
 
 //export {DanteEditor}
 export { darkTheme, defaultTheme };
@@ -63,11 +65,13 @@ const defaultPlugins = [
   CodeBlockConfig(),
   DividerBlockConfig(),
   EmbedBlockConfig(),
+  AudioRecorderBlockConfig(),
   PlaceholderBlockConfig(),
   VideoBlockConfig(),
   GiphyBlockConfig(),
   VideoRecorderBlockConfig(),
   SpeechToTextBlockConfig(),
+  FileBlockConfig()
 ];
 
 export { defaultPlugins };

diff --git a/packages/dante3/src/editor/index.tsx b/packages/dante3/src/editor/index.tsx
@@ -12,6 +12,8 @@ import TextStyle from "@tiptap/extension-text-style";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import Focus from "@tiptap/extension-focus";
 import Link from "@tiptap/extension-link";
+import Dropcursor from '@tiptap/extension-dropcursor'
+
 
 import { extensionFactory } from "../blocks/extension";
 import {AddButtonConfig} from "../popovers/addButton";
@@ -112,6 +114,7 @@ const DanteEditor = ({
       Color,
       Focus,
       Link,
+      Dropcursor,
       /*Link.extend({
         addNodeView() {
           return ReactNodeViewRenderer(CodeBlock);