mobilizon/js/src/components/Editor/Image.ts

114 lines
3.4 KiB
TypeScript
Raw Normal View History

import { Node } from "tiptap";
import { UPLOAD_PICTURE } from "@/graphql/upload";
import apolloProvider from "@/vue-apollo";
import ApolloClient from "apollo-client";
import { NormalizedCacheObject } from "apollo-cache-inmemory";
import { NodeType, NodeSpec } from "prosemirror-model";
import { EditorState, Plugin, TextSelection } from "prosemirror-state";
import { DispatchFn } from "tiptap-commands";
import { EditorView } from "prosemirror-view";
/* eslint-disable class-methods-use-this */
export default class Image extends Node {
get name() {
return "image";
}
get schema(): NodeSpec {
return {
inline: true,
attrs: {
src: {},
alt: {
default: null,
},
title: {
default: null,
},
},
group: "inline",
draggable: true,
parseDOM: [
{
tag: "img[src]",
getAttrs: (dom: any) => ({
src: dom.getAttribute("src"),
title: dom.getAttribute("title"),
alt: dom.getAttribute("alt"),
}),
},
],
toDOM: (node: any) => ["img", node.attrs],
};
}
commands({ type }: { type: NodeType }): any {
return (attrs: { [key: string]: string }) => (state: EditorState, dispatch: DispatchFn) => {
const { selection }: { selection: TextSelection } = 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: {
drop(view: EditorView<any>, event: Event) {
const realEvent = event as DragEvent;
if (
!(
realEvent.dataTransfer &&
realEvent.dataTransfer.files &&
realEvent.dataTransfer.files.length
)
) {
return false;
}
const images = Array.from(realEvent.dataTransfer.files).filter((file: any) =>
/image/i.test(file.type)
);
if (images.length === 0) {
return false;
}
realEvent.preventDefault();
const { schema } = view.state;
const coordinates = view.posAtCoords({
left: realEvent.clientX,
top: realEvent.clientY,
});
if (!coordinates) return false;
const client = apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
const editorElem = document.getElementById("tiptab-editor");
2019-05-31 17:58:03 +02:00
const actorId = editorElem && editorElem.dataset.actorId;
images.forEach(async (image) => {
const { data } = await client.mutate({
mutation: UPLOAD_PICTURE,
variables: {
2019-05-31 17:58:03 +02:00
actorId,
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);
});
return true;
},
},
},
}),
];
}
}