setState({ data: editor.getHTML() })} />
-
@@ -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
index 684b940..3bc8a78 100644
--- 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"
>
diff --git a/packages/dante3/src/editor/constants.ts b/packages/dante3/src/editor/constants.ts
index eb9f211..9fbb734 100644
--- 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
index cfcda64..43d0aa4 100644
--- 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);