feat: image pasting

frontend/src/utils/image.js

@@ -0,0 +1,64 @@
+class ImageTool {
+	constructor({ data, api }) {
+		this.api = api
+		this.data = data
+		this.wrapper = undefined
+	}
+
+	static get toolbox() {
+		return {
+			title: 'Image',
+			icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-2 0H5V5h14v14zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',
+		}
+	}
+
+	render() {
+		this.wrapper = document.createElement('div')
+		this.wrapper.classList.add('image-tool')
+
+		if (this.data && this.data.url) {
+			this._createImage(this.data.url)
+		}
+
+		this.wrapper.addEventListener('paste', (event) => {
+			this._handlePaste(event)
+		})
+
+		return this.wrapper
+	}
+
+	_createImage(url) {
+		const image = document.createElement('img')
+		image.src = url
+		image.classList.add('image-tool__image')
+		this.wrapper.innerHTML = ''
+		this.wrapper.appendChild(image)
+
+		const resizeObserver = new ResizeObserver(() => {
+			image.style.width = `${this.wrapper.clientWidth}px`
+		})
+		resizeObserver.observe(this.wrapper)
+	}
+
+	_handlePaste(event) {
+		const clipboardData = event.clipboardData || window.clipboardData
+		const items = clipboardData.items
+		for (let i = 0; i < items.length; i++) {
+			if (items[i].type.indexOf('image') !== -1) {
+				const file = items[i].getAsFile()
+				const reader = new FileReader()
+				reader.onload = (e) => {
+					this._createImage(e.target.result)
+				}
+				reader.readAsDataURL(file)
+			}
+		}
+	}
+
+	save(blockContent) {
+		const img = blockContent.querySelector('img')
+		return {
+			url: img.src,
+		}
+	}
+}

frontend/src/utils/index.js

@@ -4,13 +4,13 @@ import { Quiz } from '@/utils/quiz'
 import { Upload } from '@/utils/upload'
 import Header from '@editorjs/header'
 import Paragraph from '@editorjs/paragraph'
-import Image from '@editorjs/image'
 import { CodeBox } from '@/utils/code'
 import NestedList from '@editorjs/nested-list'
 import InlineCode from '@editorjs/inline-code'
 import { watch } from 'vue'
 import dayjs from '@/utils/dayjs'
 import Embed from '@editorjs/embed'
+import SimpleImage from '@editorjs/simple-image'
 
 export function createToast(options) {
 	toast({
@@ -137,7 +137,7 @@ export function getEditorTools() {
 		header: Header,
 		quiz: Quiz,
 		upload: Upload,
-		image: Image,
+		image: SimpleImage,
 		paragraph: {
 			class: Paragraph,
 			inlineToolbar: true,
@@ -173,7 +173,7 @@ export function getEditorTools() {
 						regex: /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/,
 						embedUrl:
 							'https://www.youtube.com/embed/<%= remote_id %>',
-						html: '<iframe style="width:100%;" height="320" frameborder="0" allowfullscreen></iframe>',
+						html: '<iframe style="width:100%; height: 30rem;" frameborder="0" allowfullscreen></iframe>',
 						height: 320,
 						width: 580,
 						id: ([id, params]) => {
@@ -181,7 +181,7 @@ export function getEditorTools() {
 								return id
 							}
 
-							const paramsMap: Record<string, string> = {
+							const paramsMap = {
 								start: 'start',
 								end: 'end',
 								t: 'start',
@@ -227,7 +227,7 @@ export function getEditorTools() {
 						regex: /(?:http[s]?:\/\/)?(?:www.)?aparat\.com\/v\/([^\/\?\&]+)\/?/,
 						embedUrl:
 							'https://www.aparat.com/video/video/embed/videohash/<%= remote_id %>/vt/frame',
-						html: '<iframe width="600" height="300" style="margin: 0 auto;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>',
+						html: '<iframe style="margin: 0 auto; width: 100%; height: 25rem;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>',
 						height: 300,
 						width: 600,
 					},