From 4bc3ac1665d26098ef944ab5d9109b08f5175b53 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 18 Jul 2024 21:29:40 +0530
Subject: [PATCH 1/3] fix: batch filters on desk

---
 frontend/package.json                  |  2 +-
 frontend/src/components/AppSidebar.vue |  2 +-
 frontend/src/utils/index.js            | 64 +++++++++++++++++++++++++-
 frontend/yarn.lock                     | 15 ++----
 4 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 6775773db..82258fe44 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "@editorjs/editorjs": "^2.29.0",
     "@editorjs/embed": "^2.7.0",
     "@editorjs/header": "^2.8.1",
-    "@editorjs/image": "^2.9.0",
+    "@editorjs/image": "^2.9.2",
     "@editorjs/inline-code": "^1.5.0",
     "@editorjs/nested-list": "^1.4.2",
     "@editorjs/paragraph": "^2.11.3",
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 3e62170ff..49f33da6a 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -27,7 +27,7 @@
 				>
 					<div
 						v-if="!isSidebarCollapsed"
-						class="flex items-center text-sm font-medium text-gray-600"
+						class="flex items-center text-sm text-gray-600 my-1"
 					>
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 							<ChevronRight
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 866550c6a..54c07d328 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -4,6 +4,7 @@ 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'
@@ -136,6 +137,7 @@ export function getEditorTools() {
 		header: Header,
 		quiz: Quiz,
 		upload: Upload,
+		image: Image,
 		paragraph: {
 			class: Paragraph,
 			inlineToolbar: true,
@@ -167,10 +169,68 @@ export function getEditorTools() {
 			inlineToolbar: false,
 			config: {
 				services: {
-					youtube: true,
+					youtube: {
+						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>',
+						height: 320,
+						width: 580,
+						id: ([id, params]) => {
+							if (!params && id) {
+								return id
+							}
+
+							const paramsMap: Record<string, string> = {
+								start: 'start',
+								end: 'end',
+								t: 'start',
+								// eslint-disable-next-line camelcase
+								time_continue: 'start',
+								list: 'list',
+							}
+
+							let newParams = params
+								.slice(1)
+								.split('&')
+								.map((param) => {
+									const [name, value] = param.split('=')
+
+									if (!id && name === 'v') {
+										id = value
+
+										return null
+									}
+
+									if (!paramsMap[name]) {
+										return null
+									}
+
+									if (
+										value === 'LL' ||
+										value.startsWith('RDMM') ||
+										value.startsWith('FL')
+									) {
+										return null
+									}
+
+									return `${paramsMap[name]}=${value}`
+								})
+								.filter((param) => !!param)
+
+							return id + '?' + newParams.join('&')
+						},
+					},
 					vimeo: true,
 					codepen: true,
-					aparat: true,
+					aparat: {
+						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>',
+						height: 300,
+						width: 600,
+					},
 					github: true,
 					slides: {
 						regex: /https:\/\/docs\.google\.com\/presentation\/d\/e\/([A-Za-z0-9_-]+)\/pub/,
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 831fadb17..254beaeab 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -27,11 +27,6 @@
   resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.5.tgz#d17f39b6a0497c6439f57dd42711817a3dd3679c"
   integrity sha512-s6H2KXhLz2rgbMZSkRm8dsMJvyUNZsEjxobBEg9ztdrb1B2H3pEzY6iTwI4XUPJWJ3c3qRKwV4TrO3J5jUdoQA==
 
-"@codexteam/icons@^0.0.6":
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.6.tgz#5553ada48dddf5940851ccc142cfe17835c36ad3"
-  integrity sha512-L7Q5PET8PjKcBT5wp7VR+FCjwCi5PUp7rd/XjsgQ0CI5FJz0DphyHGRILMuDUdCW2MQT9NHbVr4QP31vwAkS/A==
-
 "@codexteam/icons@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.3.0.tgz#62380b4053d487a257de443864b5c72dafab95e6"
@@ -68,12 +63,12 @@
   dependencies:
     "@codexteam/icons" "^0.0.5"
 
-"@editorjs/image@^2.9.0":
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/@editorjs/image/-/image-2.9.0.tgz#0c83252d569a0dc3af14c3f7d16b6df033b9c37b"
-  integrity sha512-xItihKJFiWJ06SMtLWQZvzHv4LRPNAFZYaHAXesBFzXvWwUrtVaVMcNSf0eNnw3InrPO3Po1vZRRgpsT+Ya3Bg==
+"@editorjs/image@^2.9.2":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@editorjs/image/-/image-2.9.2.tgz#c8bea65a578fab65a1a75df1223b4fd8f06b57d5"
+  integrity sha512-n09sMieGW8cksoeflpplzvbmFH2bdVzVTWbnidPWAHaeU467HRteoXU9yfGBB7+eeHZLnmCulQ2dr6ae+G2niw==
   dependencies:
-    "@codexteam/icons" "^0.0.6"
+    "@codexteam/icons" "^0.3.0"
 
 "@editorjs/inline-code@^1.5.0":
   version "1.5.0"

From 69d266e01867ed738afc060a650a975a030f7318 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 19 Jul 2024 11:55:36 +0530
Subject: [PATCH 2/3] feat: image pasting

---
 frontend/package.json                        |  2 +-
 frontend/src/components/BatchCard.vue        | 23 ++++---
 frontend/src/pages/CreateLesson.vue          |  7 ++-
 frontend/src/utils/image.js                  | 64 ++++++++++++++++++++
 frontend/src/utils/index.js                  | 10 +--
 frontend/yarn.lock                           | 12 ++++
 lms/lms/doctype/lms_batch/lms_batch.json     |  5 +-
 lms/lms/doctype/lms_batch/lms_batch.py       |  1 +
 lms/templates/emails/batch_confirmation.html |  3 +-
 9 files changed, 106 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/utils/image.js

diff --git a/frontend/package.json b/frontend/package.json
index 82258fe44..7935452aa 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,10 +14,10 @@
     "@editorjs/editorjs": "^2.29.0",
     "@editorjs/embed": "^2.7.0",
     "@editorjs/header": "^2.8.1",
-    "@editorjs/image": "^2.9.2",
     "@editorjs/inline-code": "^1.5.0",
     "@editorjs/nested-list": "^1.4.2",
     "@editorjs/paragraph": "^2.11.3",
+    "@editorjs/simple-image": "^1.6.0",
     "chart.js": "^4.4.1",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index 84697c51f..734950c7e 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -3,6 +3,9 @@
 		class="flex flex-col shadow hover:bg-gray-100 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
+		<div class="text-xl font-semibold mb-2">
+			{{ batch.title }}
+		</div>
 		<Badge
 			v-if="batch.seat_count && batch.seats_left > 0"
 			theme="green"
@@ -19,9 +22,6 @@
 		>
 			{{ __('Sold Out') }}
 		</Badge>
-		<div class="text-xl font-semibold mb-1">
-			{{ batch.title }}
-		</div>
 		<div class="short-introduction">
 			{{ batch.description }}
 		</div>
@@ -29,23 +29,26 @@
 			<div v-if="batch.amount" class="font-semibold text-lg">
 				{{ batch.price }}
 			</div>
-			<div class="flex items-center">
-				<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<!-- <div class="flex items-center text-sm text-gray-700">
+				<BookOpen class="h-3 w-3 stroke-1.5 mr-2 text-gray-700" />
 				<span> {{ batch.courses.length }} {{ __('Courses') }} </span>
-			</div>
+			</div> -->
 			<DateRange
 				:startDate="batch.start_date"
 				:endDate="batch.end_date"
-				class="mb-3"
+				class="text-sm text-gray-700 mb-3"
 			/>
-			<div class="flex items-center">
+			<div class="flex items-center text-sm text-gray-700">
 				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 				<span>
 					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
 				</span>
 			</div>
-			<div v-if="batch.timezone" class="flex items-center">
-				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<div
+				v-if="batch.timezone"
+				class="flex items-center text-sm text-gray-700"
+			>
+				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-600" />
 				<span>
 					{{ batch.timezone }}
 				</span>
diff --git a/frontend/src/pages/CreateLesson.vue b/frontend/src/pages/CreateLesson.vue
index 7e7a47e30..cdd9703ac 100644
--- a/frontend/src/pages/CreateLesson.vue
+++ b/frontend/src/pages/CreateLesson.vue
@@ -43,7 +43,7 @@
 							<div
 								v-show="openInstructorEditor"
 								id="instructor-notes"
-								class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6 py-3"
+								class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal py-3"
 							></div>
 						</div>
 					</div>
@@ -54,7 +54,7 @@
 							</label>
 							<div
 								id="content"
-								class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6 py-3"
+								class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal py-3"
 							></div>
 						</div>
 					</div>
@@ -439,7 +439,8 @@ const pageMeta = computed(() => {
 updateDocumentTitle(pageMeta)
 </script>
 <style>
-.embed-tool__caption {
+.embed-tool__caption,
+.cdx-simple-image__caption {
 	display: none;
 }
 
diff --git a/frontend/src/utils/image.js b/frontend/src/utils/image.js
new file mode 100644
index 000000000..fa2f2c66a
--- /dev/null
+++ b/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,
+		}
+	}
+}
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 54c07d328..c981296e0 100644
--- a/frontend/src/utils/index.js
+++ b/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,
 					},
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 254beaeab..30adce7ce 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -27,6 +27,11 @@
   resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.5.tgz#d17f39b6a0497c6439f57dd42711817a3dd3679c"
   integrity sha512-s6H2KXhLz2rgbMZSkRm8dsMJvyUNZsEjxobBEg9ztdrb1B2H3pEzY6iTwI4XUPJWJ3c3qRKwV4TrO3J5jUdoQA==
 
+"@codexteam/icons@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.6.tgz#5553ada48dddf5940851ccc142cfe17835c36ad3"
+  integrity sha512-L7Q5PET8PjKcBT5wp7VR+FCjwCi5PUp7rd/XjsgQ0CI5FJz0DphyHGRILMuDUdCW2MQT9NHbVr4QP31vwAkS/A==
+
 "@codexteam/icons@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.3.0.tgz#62380b4053d487a257de443864b5c72dafab95e6"
@@ -91,6 +96,13 @@
   dependencies:
     "@codexteam/icons" "^0.0.4"
 
+"@editorjs/simple-image@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@editorjs/simple-image/-/simple-image-1.6.0.tgz#711c3900e17845331d6667cf0fe91793a5557f84"
+  integrity sha512-WvdGfQPlozwZd3PXQrJnRXk6gEYbv1U2vRupYJ6lTd3/UsLInXYUX5jSFcnGB5ZMH3bd0JDZfcb4d4Sv1/1big==
+  dependencies:
+    "@codexteam/icons" "^0.0.6"
+
 "@esbuild/aix-ppc64@0.20.2":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz#a70f4ac11c6a1dfc18b8bbb13284155d933b9537"
diff --git a/lms/lms/doctype/lms_batch/lms_batch.json b/lms/lms/doctype/lms_batch/lms_batch.json
index bf36dc8c8..482b77832 100644
--- a/lms/lms/doctype/lms_batch/lms_batch.json
+++ b/lms/lms/doctype/lms_batch/lms_batch.json
@@ -103,6 +103,7 @@
    "fieldname": "start_date",
    "fieldtype": "Date",
    "in_list_view": 1,
+   "in_standard_filter": 1,
    "label": "Start Date",
    "reqd": 1
   },
@@ -127,6 +128,7 @@
   {
    "fieldname": "start_time",
    "fieldtype": "Time",
+   "in_list_view": 1,
    "label": "Start Time",
    "reqd": 1
   },
@@ -165,6 +167,7 @@
   {
    "fieldname": "category",
    "fieldtype": "Link",
+   "in_standard_filter": 1,
    "label": "Category",
    "options": "LMS Category"
   },
@@ -325,7 +328,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-06-24 16:24:45.536453",
+ "modified": "2024-07-18 18:06:37.229885",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Batch",
diff --git a/lms/lms/doctype/lms_batch/lms_batch.py b/lms/lms/doctype/lms_batch/lms_batch.py
index 5883c4d1e..2150fb4fb 100644
--- a/lms/lms/doctype/lms_batch/lms_batch.py
+++ b/lms/lms/doctype/lms_batch/lms_batch.py
@@ -96,6 +96,7 @@ def send_mail(self, student):
 		)
 
 		args = {
+			"title": self.title,
 			"student_name": student.student_name,
 			"start_time": self.start_time,
 			"start_date": self.start_date,
diff --git a/lms/templates/emails/batch_confirmation.html b/lms/templates/emails/batch_confirmation.html
index ce8850a21..b74d5a3df 100644
--- a/lms/templates/emails/batch_confirmation.html
+++ b/lms/templates/emails/batch_confirmation.html
@@ -8,10 +8,11 @@
 <br>
 <p>
     <b>
-        {{ _("Important Details:") }}
+        {{ title }}
     </b>
 </p>
 
+
 <p>
     <b>{{ _("Batch Start Date:") }}</b> {{ frappe.utils.format_date(start_date, "medium") }}
 </p>

From cbc4b8c59d82b6ef80090b284da264d92abec350 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 19 Jul 2024 12:07:35 +0530
Subject: [PATCH 3/3] chore: removed unused plugin

---
 frontend/src/components/BatchCard.vue |  5 +--
 frontend/src/utils/image.js           | 64 ---------------------------
 2 files changed, 1 insertion(+), 68 deletions(-)
 delete mode 100644 frontend/src/utils/image.js

diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index 734950c7e..51941d53a 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -29,10 +29,7 @@
 			<div v-if="batch.amount" class="font-semibold text-lg">
 				{{ batch.price }}
 			</div>
-			<!-- <div class="flex items-center text-sm text-gray-700">
-				<BookOpen class="h-3 w-3 stroke-1.5 mr-2 text-gray-700" />
-				<span> {{ batch.courses.length }} {{ __('Courses') }} </span>
-			</div> -->
+
 			<DateRange
 				:startDate="batch.start_date"
 				:endDate="batch.end_date"
diff --git a/frontend/src/utils/image.js b/frontend/src/utils/image.js
deleted file mode 100644
index fa2f2c66a..000000000
--- a/frontend/src/utils/image.js
+++ /dev/null
@@ -1,64 +0,0 @@
-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,
-		}
-	}
-}