95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
|
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);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|