pimelon-ui 0.1.124 → 0.1.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.124",
+  "version": "0.1.126",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/TextEditor/ImageNodeView.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import LoadingIndicator from '../LoadingIndicator.vue'
+import { ref, onMounted } from 'vue'
+import ErrorMessage from '../ErrorMessage.vue'
+
+const props = defineProps(nodeViewProps)
+
+function selectImage() {
+  props.editor.commands.setNodeSelection(props.getPos())
+}
+
+const caption = ref(props.node.attrs.alt || '')
+const isEditable = ref(false)
+
+onMounted(() => {
+  isEditable.value = props.editor.isEditable
+})
+
+props.editor.on('update', () => {
+  isEditable.value = props.editor.isEditable
+})
+
+function updateCaption(event: Event) {
+  const newCaption = (event.target as HTMLInputElement).value
+  caption.value = newCaption
+  props.updateAttributes({ alt: newCaption })
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (
+    event.key === 'Enter' ||
+    event.key === 'Escape' ||
+    event.key === 'ArrowDown'
+  ) {
+    event.preventDefault()
+    setCursorAfterImage()
+  }
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    setCursorBeforeImage()
+  }
+}
+
+function setCursorAt(pos: number) {
+  props.editor.commands.focus()
+  props.editor.chain().setTextSelection(pos).scrollIntoView().run()
+}
+
+function setCursorAfterImage() {
+  const pos = props.getPos() + props.node.nodeSize
+  setCursorAt(pos)
+}
+
+function setCursorBeforeImage() {
+  const pos = props.getPos()
+  setCursorAt(pos - 1)
+}
+</script>
+
+<template>
+  <NodeViewWrapper>
+    <div class="relative overflow-hidden not-prose my-6">
+      <div class="relative">
+        <img
+          v-if="node.attrs.src"
+          class="rounded-[2px]"
+          :src="node.attrs.src"
+          :alt="node.attrs.alt || ''"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          @click="selectImage"
+        />
+
+        <!-- Loading indicator overlay -->
+        <div
+          v-if="node.attrs.loading"
+          class="inset-0 absolute flex items-center justify-center z-10"
+        >
+          <div
+            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2"
+          >
+            <div class="flex items-center gap-2">
+              <LoadingIndicator class="text-gray-100 size-4" />
+              <span class="text-gray-100">Uploading...</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Selection overlay -->
+        <div
+          class="absolute pointer-events-none inset-0 rounded-[2px] bg-black/20 dark:bg-white/20 z-5 transition-opacity"
+          :class="{
+            'opacity-100': selected,
+            'opacity-0': !selected,
+          }"
+        ></div>
+      </div>
+
+      <input
+        v-if="(isEditable || node.attrs.alt) && !node.attrs.error"
+        v-model="caption"
+        class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-none focus:ring-0 placeholder-ink-gray-4"
+        placeholder="Add caption"
+        :disabled="!isEditable"
+        @change="updateCaption"
+        @keydown="handleKeydown"
+      />
+
+      <div v-if="node.attrs.error" class="w-full py-1.5">
+        <ErrorMessage :message="`Upload Failed: ${node.attrs.error}`" />
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>

package/src/components/TextEditor/InsertImage.vue

@@ -1,77 +1,31 @@
 <template>
-  <slot v-bind="{ onClick: openDialog }"></slot>
-  <Dialog
-    :options="{ title: 'Add Image' }"
-    v-model="addImageDialog.show"
-    @after-leave="reset"
-  >
-    <template #body-content>
-      <label
-        class="relative cursor-pointer rounded-lg bg-surface-gray-2 py-1 focus-within:bg-surface-gray-3 hover:bg-surface-gray-3"
-      >
-        <input
-          type="file"
-          class="w-full opacity-0"
-          @change="onImageSelect"
-          accept="image/*"
-        />
-        <span class="absolute inset-0 select-none px-2 py-1 text-base">
-          {{ addImageDialog.file ? 'Select another image' : 'Select an image' }}
-        </span>
-      </label>
-      <img
-        v-if="addImageDialog.url"
-        :src="addImageDialog.url"
-        class="mt-2 w-full rounded-lg"
-      />
-    </template>
-    <template #actions>
-      <div class="flex gap-2">
-        <Button variant="solid" @click="addImage(addImageDialog.url)">
-          Insert Image
-        </Button>
-        <Button @click="reset"> Cancel </Button>
-      </div>
-    </template>
-  </Dialog>
+  <slot v-bind="{ onClick: openFileSelector }"></slot>
+  <input
+    ref="fileInput"
+    type="file"
+    class="hidden"
+    @change="onImageSelect"
+    accept="image/*"
+  />
 </template>
-<script>
-import fileToBase64 from '../../utils/file-to-base64'
-import Dialog from '../Dialog.vue'
-import { Button } from '../Button'
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
 
-export default {
-  name: 'InsertImage',
-  props: ['editor'],
-  expose: ['openDialog'],
-  data() {
-    return {
-      addImageDialog: { url: '', file: null, show: false },
-    }
-  },
-  components: { Button, Dialog },
-  methods: {
-    openDialog() {
-      this.addImageDialog.show = true
-    },
-    onImageSelect(e) {
-      let file = e.target.files[0]
-      if (!file) {
-        return
-      }
-      this.addImageDialog.file = file
-      fileToBase64(file).then((base64) => {
-        this.addImageDialog.url = base64
-      })
-    },
-    addImage(src) {
-      if (!src) return
-      this.editor.chain().focus().setImage({ src }).run()
-      this.reset()
-    },
-    reset() {
-      this.addImageDialog = this.$options.data().addImageDialog
-    },
-  },
+const props = defineProps<{
+  editor: any
+}>()
+
+const fileInput = useTemplateRef('fileInput')
+
+function openFileSelector() {
+  fileInput.value?.click()
+}
+
+function onImageSelect(e: Event) {
+  const target = e.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    props.editor.chain().focus().uploadImage(file).run()
+  }
 }
 </script>

package/src/components/TextEditor/TextEditor.vue

@@ -25,7 +25,7 @@ import Table from '@tiptap/extension-table'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
 import TableRow from '@tiptap/extension-table-row'
-import Image from './image-extension'
+import ImageExtension from './image-extension'
 import Video from './video-extension'
 import Link from '@tiptap/extension-link'
 import Typography from '@tiptap/extension-typography'
@@ -99,6 +99,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    imageUploadFunction: {
+      type: Function,
+      default: () => null,
+    },
   },
   emits: ['change', 'focus', 'blur'],
   expose: ['editor'],
@@ -161,7 +165,9 @@ export default {
             return VueNodeViewRenderer(CodeBlockComponent)
           },
         }).configure({ lowlight }),
-        Image,
+        ImageExtension.configure({
+          uploadFunction: this.imageUploadFunction,
+        }),
         Video,
         Link.configure({
           openOnClick: false,

package/src/components/TextEditor/image-extension.ts

@@ -0,0 +1,424 @@
+import {
+  Node as NodeExtension,
+  nodeInputRule,
+  mergeAttributes,
+} from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import ImageNodeView from './ImageNodeView.vue'
+import { Plugin, Selection } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { Node } from '@tiptap/pm/model'
+import fileToBase64 from '../../utils/file-to-base64'
+
+export interface ImageOptions {
+  /**
+   * Function to handle image uploads
+   * @default null
+   */
+  uploadFunction:
+    | ((file: File) => Promise<{ src: string; [key: string]: any }>)
+    | null
+
+  /**
+   * HTML attributes to add to the image element
+   * @default {}
+   */
+  HTMLAttributes: Record<string, any>
+}
+
+export interface SetImageOptions {
+  src: string
+  alt?: string
+  title?: string
+  width?: string | number | null
+  height?: string | number | null
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    image: {
+      /**
+       * Insert an image
+       */
+      setImage: (options: SetImageOptions) => ReturnType
+
+      /**
+       * Upload and insert an image
+       */
+      uploadImage: (file: File) => ReturnType
+    }
+  }
+}
+
+/**
+ * Matches markdown image syntax: ![alt](src "title")
+ */
+export const inputRegex =
+  /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+
+export default NodeExtension.create<ImageOptions>({
+  name: 'image',
+
+  group: 'block',
+  draggable: true,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      alt: { default: null },
+      title: { default: null },
+      width: { default: null },
+      height: { default: null },
+      loading: {
+        default: false,
+        parseHTML: () => false,
+      },
+      uploadId: {
+        default: null,
+        parseHTML: () => null,
+      },
+      error: {
+        default: null,
+        parseHTML: () => null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'img[src]',
+        getAttrs: (node) => {
+          if (typeof node === 'string') return {}
+          const element = node as HTMLElement
+          return {
+            src: element.getAttribute('src'),
+            alt: element.getAttribute('alt'),
+            title: element.getAttribute('title'),
+            width: element.getAttribute('width'),
+            height: element.getAttribute('height'),
+          }
+        },
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'img',
+      mergeAttributes(this.options.HTMLAttributes || {}, HTMLAttributes),
+    ]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(ImageNodeView)
+  },
+
+  addOptions() {
+    return {
+      uploadFunction: null,
+      HTMLAttributes: {},
+    }
+  },
+
+  addCommands() {
+    return {
+      setImage:
+        (attributes: SetImageOptions) =>
+        ({ commands, editor }) => {
+          const result = commands.insertContent({
+            type: this.name,
+            attrs: attributes,
+          })
+
+          // Calculate and update dimensions if successful
+          if (result && attributes.src) {
+            // Find the newly inserted node
+            findImageNodeBySource(editor.view, attributes.src, (node, pos) => {
+              updateNodeWithDimensions(
+                attributes.src,
+                editor.view,
+                pos,
+                node.attrs,
+              )
+            })
+          }
+
+          return result
+        },
+
+      uploadImage:
+        (file: File) =>
+        ({ editor }) => {
+          return uploadImage(file, editor.view, null, this.options)
+        },
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, , alt, src, title] = match
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+
+  addProseMirrorPlugins() {
+    const extensionThis = this
+
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            drop: (view, event) => {
+              const hasFiles = event.dataTransfer?.files?.length
+
+              if (!hasFiles || !extensionThis.options.uploadFunction) {
+                return false
+              }
+
+              const images = Array.from(event.dataTransfer.files).filter(
+                (file) => /image/i.test(file.type),
+              )
+
+              if (images.length === 0) {
+                return false
+              }
+
+              event.preventDefault()
+
+              // Set selection to drop position
+              const coordinates = view.posAtCoords({
+                left: event.clientX,
+                top: event.clientY,
+              })
+
+              let pos: number | null = null
+              if (coordinates) {
+                pos = coordinates.pos
+                const transaction = view.state.tr.setSelection(
+                  Selection.near(view.state.doc.resolve(pos)),
+                )
+                view.dispatch(transaction)
+              }
+
+              images.forEach((file) => {
+                uploadImage(file, view, pos, extensionThis.options)
+              })
+
+              return true
+            },
+          },
+
+          handlePaste: (view, event, slice) => {
+            if (!extensionThis.options.uploadFunction) {
+              return false
+            }
+
+            const clipboardItems = event.clipboardData?.items
+            if (!clipboardItems || clipboardItems.length === 0) {
+              return false
+            }
+
+            const images: File[] = []
+
+            for (let i = 0; i < clipboardItems.length; i++) {
+              const item = clipboardItems[i]
+              if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
+                const file = item.getAsFile()
+                if (file) {
+                  images.push(file)
+                }
+              }
+            }
+
+            if (images.length === 0) {
+              return false
+            }
+
+            event.preventDefault()
+
+            images.forEach((file) => {
+              uploadImage(file, view, null, extensionThis.options)
+            })
+
+            return true
+          },
+        },
+
+        appendTransaction(transactions, oldState, newState) {
+          const newImageNodes: { node: Node; pos: number }[] = []
+
+          if (transactions.some((tr) => tr.docChanged)) {
+            newState.doc.descendants((node, pos) => {
+              if (
+                node.type.name === 'image' &&
+                node.attrs.src &&
+                (!node.attrs.width || !node.attrs.height) &&
+                !node.attrs.loading
+              ) {
+                newImageNodes.push({ node, pos })
+              }
+            })
+          }
+
+          if (newImageNodes.length === 0) return null
+
+          newImageNodes.forEach(({ node, pos }) => {
+            const editor = extensionThis.editor
+            if (editor) {
+              updateNodeWithDimensions(
+                node.attrs.src,
+                editor.view,
+                pos,
+                node.attrs,
+              )
+            }
+          })
+
+          return null
+        },
+      }),
+    ]
+  },
+})
+
+function uploadImage(
+  file: File,
+  view: EditorView,
+  pos: number | null | undefined,
+  options: Record<string, any>,
+): boolean {
+  if (!options.uploadFunction) {
+    console.error('uploadFunction option is not provided')
+    return false
+  }
+
+  const uploadId = `upload-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+
+  fileToBase64(file)
+    .then((base64Result: string) => {
+      const node = view.state.schema.nodes.image.create({
+        loading: true,
+        uploadId,
+        src: base64Result, // Base64 preview while uploading
+      })
+
+      const tr = view.state.tr
+
+      if (pos != null) {
+        tr.insert(pos, node)
+      } else {
+        tr.replaceSelectionWith(node)
+      }
+
+      view.dispatch(tr)
+
+      return options.uploadFunction(file)
+    })
+    .then((uploadedImage: any) => {
+      return getImageDimensions(uploadedImage.src)
+        .then((dimensions) => {
+          return {
+            ...uploadedImage,
+            width: dimensions.width,
+            height: dimensions.height,
+          }
+        })
+        .catch(() => {
+          return uploadedImage
+        })
+    })
+    .then((uploadedImage: any) => {
+      const transaction = view.state.tr
+
+      view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'image' && node.attrs.uploadId === uploadId) {
+          transaction.setNodeMarkup(pos, undefined, {
+            ...node.attrs,
+            src: uploadedImage.src,
+            width: uploadedImage.width || node.attrs.width,
+            height: uploadedImage.height || node.attrs.height,
+            loading: false,
+          })
+          return false // Stop traversal after finding our node
+        }
+      })
+
+      view.dispatch(transaction)
+    })
+    .catch((error: Error) => {
+      console.error('Image upload failed:', error)
+
+      const transaction = view.state.tr
+
+      view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'image' && node.attrs.uploadId === uploadId) {
+          transaction.setNodeMarkup(pos, undefined, {
+            ...node.attrs,
+            loading: false,
+            error: error.message || 'Failed to upload image',
+          })
+          return false // Stop traversal after finding our node
+        }
+      })
+
+      view.dispatch(transaction)
+    })
+
+  return true
+}
+
+function findImageNodeBySource(
+  view: EditorView,
+  src: string,
+  callback: (node: Node, pos: number) => void,
+) {
+  view.state.doc.descendants((node, pos) => {
+    if (node.type.name === 'image' && node.attrs.src === src) {
+      callback(node, pos)
+      return false // Stop traversal after finding our node
+    }
+  })
+}
+
+function updateNodeWithDimensions(
+  src: string,
+  view: EditorView,
+  pos: number,
+  attrs: any,
+) {
+  getImageDimensions(src)
+    .then((dimensions) => {
+      const transaction = view.state.tr.setNodeMarkup(pos, undefined, {
+        ...attrs,
+        width: dimensions.width,
+        height: dimensions.height,
+      })
+      view.dispatch(transaction)
+    })
+    .catch((error) => {
+      console.error('Failed to get image dimensions:', error)
+    })
+}
+
+function getImageDimensions(
+  src: string,
+): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () =>
+      resolve({
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+      })
+    img.onerror = reject
+    img.src = src
+  })
+}

package/src/utils/useFileUpload.ts

@@ -0,0 +1,223 @@
+import { reactive, computed } from 'vue'
+
+export interface UploadOptions {
+  private?: boolean
+  folder?: string
+  file_url?: string
+  doctype?: string
+  docname?: string
+  fieldname?: string
+  method?: string
+  type?: string
+  upload_endpoint?: string
+  optimize?: boolean
+  max_width?: number
+  max_height?: number
+}
+
+export interface UploadState {
+  uploading: boolean
+  progress: number
+  uploaded: number
+  total: number
+  error: any | null
+  result: any | null
+}
+
+export function useFileUpload() {
+  const state = reactive<UploadState>({
+    uploading: false,
+    progress: 0,
+    uploaded: 0,
+    total: 0,
+    error: null,
+    result: null,
+  })
+
+  // Function to reset the state
+  const reset = () => {
+    state.uploading = false
+    state.progress = 0
+    state.uploaded = 0
+    state.total = 0
+    state.error = null
+    state.result = null
+  }
+
+  // Computed values for convenience
+  const isUploading = computed(() => state.uploading)
+  const progress = computed(() => state.progress)
+  const error = computed(() => state.error)
+  const result = computed(() => state.result)
+
+  return {
+    upload: (file: File) => upload(file, {}, state, reset),
+    reset,
+    state,
+    isUploading,
+    progress,
+    error,
+    result,
+  }
+}
+
+async function upload(
+  file: File | null,
+  options: UploadOptions = {},
+  state: UploadState,
+  reset: () => void,
+) {
+  reset()
+  state.uploading = true
+
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+
+    // Set up event listeners
+    xhr.upload.addEventListener('loadstart', () => {
+      state.uploading = true
+      state.error = null
+    })
+
+    xhr.upload.addEventListener('progress', (e) => {
+      if (e.lengthComputable) {
+        state.uploaded = e.loaded
+        state.total = e.total
+        state.progress = Math.round((e.loaded / e.total) * 100)
+      }
+    })
+
+    xhr.upload.addEventListener('load', () => {
+      state.progress = 100
+    })
+
+    xhr.addEventListener('error', (error) => {
+      state.uploading = false
+      state.error = 'Upload failed'
+      reject('Upload failed')
+    })
+
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        let error
+        if (xhr.status === 200) {
+          let r = null
+          try {
+            r = JSON.parse(xhr.responseText)
+          } catch (e) {
+            r = xhr.responseText
+          }
+
+          const result = r.message || r
+          state.result = result
+          resolve(result)
+        } else if (xhr.status === 403) {
+          error = JSON.parse(xhr.responseText)
+        } else {
+          try {
+            error = JSON.parse(xhr.responseText)
+          } catch (e) {
+            error = 'Upload failed'
+          }
+        }
+
+        if (error) {
+          let exception
+          let errorParts = [
+            [error.exc_type, error._error_message].filter(Boolean).join(' '),
+          ]
+          if (error.exc) {
+            exception = error.exc
+            try {
+              exception = JSON.parse(exception)[0]
+              console.log(exception)
+              // eslint-disable-next-line no-empty
+            } catch (e) {}
+          }
+          let e = new Error(errorParts.join('\n'))
+          let messages = error._server_messages
+            ? JSON.parse(error._server_messages)
+            : []
+          messages = messages
+            .map((m: string) => {
+              try {
+                return JSON.parse(m).message
+              } catch (error) {
+                return m
+              }
+            })
+            .filter(Boolean)
+          if (!messages.length) {
+            messages = error._error_message
+              ? [error._error_message]
+              : ['Internal Server Error']
+          }
+          e.message = messages.join('\n')
+          state.error = e
+          reject(e)
+        }
+
+        state.uploading = false
+      }
+    }
+
+    const uploadEndpoint = options.upload_endpoint || '/api/method/upload_file'
+    xhr.open('POST', uploadEndpoint, true)
+    xhr.setRequestHeader('Accept', 'application/json')
+
+    if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
+      xhr.setRequestHeader('X-Melon-CSRF-Token', window.csrf_token)
+    }
+
+    const formData = new FormData()
+    if (file) {
+      formData.append('file', file, file.name)
+    }
+
+    formData.append('is_private', options.private ? '1' : '0')
+    formData.append('folder', options.folder || 'Home')
+
+    if (options.file_url) {
+      formData.append('file_url', options.file_url)
+    }
+
+    if (options.doctype) {
+      formData.append('doctype', options.doctype)
+    }
+
+    if (options.docname) {
+      formData.append('docname', options.docname)
+    }
+
+    if (options.fieldname) {
+      formData.append('fieldname', options.fieldname)
+    }
+
+    if (options.method) {
+      formData.append('method', options.method)
+    }
+
+    if (options.type) {
+      formData.append('type', options.type)
+    }
+
+    if (options.optimize) {
+      formData.append('optimize', '1')
+      if (options.max_width) {
+        formData.append('max_width', options.max_width.toString())
+      }
+      if (options.max_height) {
+        formData.append('max_height', options.max_height.toString())
+      }
+    }
+
+    xhr.send(formData)
+  })
+}
+
+// Add the Window interface for typescript
+declare global {
+  interface Window {
+    csrf_token?: string
+  }
+}

package/src/components/TextEditor/image-extension.js

@@ -1,152 +0,0 @@
-// Plugin adapted from the following examples:
-// - https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/src/image.ts
-// - https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521
-
-import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core'
-import { Plugin } from 'prosemirror-state'
-import fileToBase64 from '../../utils/file-to-base64'
-
-export const inputRegex =
-  /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
-
-export default Node.create({
-  name: 'image',
-  addOptions() {
-    return {
-      inline: false,
-      HTMLAttributes: {},
-    }
-  },
-  inline() {
-    return this.options.inline
-  },
-  group() {
-    return this.options.inline ? 'inline' : 'block'
-  },
-  draggable: true,
-  addAttributes() {
-    return {
-      src: {
-        default: null,
-      },
-      alt: {
-        default: null,
-      },
-      title: {
-        default: null,
-      },
-    }
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'img[src]',
-      },
-    ]
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
-  },
-
-  addCommands() {
-    return {
-      setImage:
-        (options) =>
-        ({ commands }) => {
-          return commands.insertContent({
-            type: this.name,
-            attrs: options,
-          })
-        },
-    }
-  },
-
-  addInputRules() {
-    return [
-      nodeInputRule({
-        find: inputRegex,
-        type: this.type,
-        getAttributes: (match) => {
-          const [, , alt, src, title] = match
-
-          return { src, alt, title }
-        },
-      }),
-    ]
-  },
-
-  addProseMirrorPlugins() {
-    return [dropImagePlugin()]
-  },
-})
-
-const dropImagePlugin = () => {
-  return new Plugin({
-    props: {
-      handlePaste(view, event, slice) {
-        const items = Array.from(event.clipboardData?.items || [])
-        const { schema } = view.state
-
-        items.forEach((item) => {
-          const image = item.getAsFile()
-          if (!image) return
-
-          if (item.type.indexOf('image') === 0) {
-            event.preventDefault()
-
-            fileToBase64(image).then((base64) => {
-              const node = schema.nodes.image.create({
-                src: base64,
-              })
-              const transaction = view.state.tr.replaceSelectionWith(node)
-              view.dispatch(transaction)
-            })
-          }
-        })
-
-        return false
-      },
-      handleDOMEvents: {
-        drop: (view, event) => {
-          const hasFiles =
-            event.dataTransfer &&
-            event.dataTransfer.files &&
-            event.dataTransfer.files.length
-
-          if (!hasFiles) {
-            return false
-          }
-
-          const images = Array.from(event.dataTransfer?.files ?? []).filter(
-            (file) => /image/i.test(file.type),
-          )
-
-          if (images.length === 0) {
-            return false
-          }
-
-          event.preventDefault()
-
-          const { schema } = view.state
-          const coordinates = view.posAtCoords({
-            left: event.clientX,
-            top: event.clientY,
-          })
-          if (!coordinates) return false
-
-          images.forEach(async (image) => {
-            fileToBase64(image).then((base64) => {
-              const node = schema.nodes.image.create({
-                src: base64,
-              })
-              const transaction = view.state.tr.insert(coordinates.pos, node)
-              view.dispatch(transaction)
-            })
-          })
-
-          return true
-        },
-      },
-    },
-  })
-}