feat: add image paste plugin

src/mentions/plugin.js

@@ -3,16 +3,16 @@
  * https://github.com/quartzy/prosemirror-suggestions/blob/master/src/suggestions.js
  */
 
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
 
-export const triggerCharacters = char => $position => {
-  const regexp = new RegExp(`(?:^)?${char}[^\\s${char}]*`, 'g');
+export const triggerCharacters = (char) => ($position) => {
+  const regexp = new RegExp(`(?:^)?${char}[^\\s${char}]*`, "g");
 
   const textFrom = $position.before();
   const textTo = $position.end();
 
-  const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0');
+  const text = $position.doc.textBetween(textFrom, textTo, "\0", "\0");
 
   let match;
 
@@ -25,7 +25,7 @@ export const triggerCharacters = char => $position => {
     }
 
     const from = match.index + $position.start();
-    let to = from + match[0].length;
+    const to = from + match[0].length;
 
     if (from < $position.pos && to >= $position.pos) {
       return { range: { from, to }, text: match[0] };
@@ -36,14 +36,14 @@ export const triggerCharacters = char => $position => {
 
 export const suggestionsPlugin = ({
   matcher,
-  suggestionClass = 'prosemirror-mention-node',
+  suggestionClass = "prosemirror-mention-node",
   onEnter = () => false,
   onChange = () => false,
   onExit = () => false,
   onKeyDown = () => false,
-}) => {
-  return new Plugin({
-    key: new PluginKey('mentions'),
+}) =>
+  new Plugin({
+    key: new PluginKey("mentions"),
 
     view() {
       return {
@@ -126,11 +126,47 @@ export const suggestionsPlugin = ({
 
         return DecorationSet.create(editorState.doc, [
           Decoration.inline(range.from, range.to, {
-            nodeName: 'span',
+            nodeName: "span",
             class: suggestionClass,
           }),
         ]);
       },
     },
   });
-};
+
+function replaceImage(currentUrl, newUrl, view) {
+  view.state.doc.descendants((node, pos) => {
+    if (node.type.name === "image" && node.attrs.src === currentUrl) {
+      const tr = view.state.tr.setNodeMarkup(pos, null, {
+        ...node.attrs,
+        src: newUrl,
+      });
+      view.dispatch(tr);
+    }
+  });
+}
+
+export const getImagePastingPlugin = (uploadImage) =>
+  new Plugin({
+    props: {
+      handlePaste(view, event, slice) {
+        console.log("event", event);
+        const imageUrls = [];
+        slice.content.descendants((node) => {
+          if (node.type.name === "image") {
+            imageUrls.push(node.attrs.src);
+          }
+        });
+        setTimeout(() => {
+          imageUrls.forEach(async (url) => {
+            try {
+              const newUrl = await uploadImage(url);
+              replaceImage(url, newUrl, view);
+            } catch (error) {
+              console.error(error);
+            }
+          });
+        }, 100);
+      },
+    },
+  });