Allow uploading pictures into description by drag&drop them

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Editor.vue

@@ -162,12 +162,11 @@ import {
     History,
     Placeholder,
     Mention,
-    Image,
 } from 'tiptap-extensions';
 import tippy, { Instance } from 'tippy.js';
 import { SEARCH_PERSONS } from '@/graphql/search';
 import { IActor } from '@/types/actor';
-
+import Image from '@/components/Editor/Image';
 
 @Component({
   components: { EditorContent, EditorMenuBar, EditorMenuBubble },

js/src/components/Editor/Image.ts

@@ -0,0 +1,94 @@
+import { Node, Plugin } from 'tiptap';
+import { UPLOAD_PICTURE } from '@/graphql/upload';
+import { apolloProvider } from '@/vue-apollo';
+import ApolloClient from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+
+export default class Image extends Node {
+
+  get name() {
+    return 'image';
+  }
+
+  get schema() {
+    return {
+      inline: true,
+      attrs: {
+        src: {},
+        alt: {
+          default: null,
+        },
+        title: {
+          default: null,
+        },
+      },
+      group: 'inline',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs: dom => ({
+            src: dom.getAttribute('src'),
+            title: dom.getAttribute('title'),
+            alt: dom.getAttribute('alt'),
+          }),
+        },
+      ],
+      toDOM: node => ['img', node.attrs],
+    };
+  }
+
+  commands({ type }) {
+    return attrs => (state, dispatch) => {
+      const { selection } = state;
+      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos;
+      const node = type.create(attrs);
+      const transaction = state.tr.insert(position, node);
+      dispatch(transaction);
+    };
+  }
+
+  get plugins() {
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            async drop(view, event: DragEvent) {
+              if (!(event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length)) {
+                return;
+              }
+
+              const images = Array
+                                .from(event.dataTransfer.files)
+                                .filter((file: any) => (/image/i).test(file.type));
+
+              if (images.length === 0) {
+                return;
+              }
+
+              event.preventDefault();
+
+              const { schema } = view.state;
+              const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
+              const client = apolloProvider.defaultClient as ApolloClient<InMemoryCache>;
+
+              for (const image of images) {
+                const { data } = await client.mutate({
+                  mutation: UPLOAD_PICTURE,
+                  variables: {
+                    file: image,
+                    name: image.name,
+                  },
+                });
+                const node = schema.nodes.image.create({ src: data.uploadPicture.url });
+                const transaction = view.state.tr.insert(coordinates.pos, node);
+                view.dispatch(transaction);
+              }
+            },
+          },
+        },
+      }),
+    ];
+  }
+
+}

js/src/graphql/upload.ts

@@ -1,10 +1,10 @@
 import gql from 'graphql-tag';
 
 export const UPLOAD_PICTURE = gql`
-    mutation {
+    mutation UploadPicture($file: Upload!, $alt: String, $name: String!){
-        uploadPicture(file: "file") {
+        uploadPicture(file: $file, alt: $alt, name: $name) {
             url,
-            url_thumbnail
+            id
         }
     }
 `;