frappe-ui 0.0.47 → 0.0.48

package/package.json

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

package/src/components/TextEditor/InsertImage.vue

@@ -0,0 +1,72 @@
+<template>
+  <slot v-bind="{ openDialog, resetAddImage }"></slot>
+  <Dialog
+    :options="{ title: 'Add Image' }"
+    v-model="addImageDialog.show"
+    @after-leave="resetAddImage"
+  >
+    <template #body-content>
+      <label
+        class="relative py-1 bg-gray-100 rounded-lg cursor-pointer focus-within:bg-gray-200 hover:bg-gray-200"
+      >
+        <input
+          type="file"
+          class="w-full opacity-0"
+          @change="onImageSelect"
+          accept="image/*"
+        />
+        <span class="absolute inset-0 px-2 py-1 text-base select-none">
+          {{ addImageDialog.file ? 'Select another image' : 'Select an image' }}
+        </span>
+      </label>
+      <img
+        v-if="addImageDialog.url"
+        :src="addImageDialog.url"
+        class="w-full mt-2 rounded-lg"
+      />
+    </template>
+    <template #actions>
+      <Button appearance="primary" @click="addImage(addImageDialog.url)">
+        Insert Image
+      </Button>
+    </template>
+  </Dialog>
+</template>
+<script>
+import fileToBase64 from '../../utils/file-to-base64'
+import Dialog from '../Dialog.vue'
+
+export default {
+  name: 'InsertImage',
+  props: ['editor'],
+  expose: ['openDialog'],
+  data() {
+    return {
+      addImageDialog: { url: '', file: null, show: false },
+    }
+  },
+  components: { 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) {
+      this.editor.chain().focus().setImage({ src }).run()
+      this.resetAddImage()
+    },
+    resetAddImage() {
+      this.addImageDialog = { show: false, url: null, file: null }
+    },
+  },
+}
+</script>

package/src/components/TextEditor/Menu.vue

@@ -67,43 +67,12 @@
         </Button>
       </template>
     </Dialog>
-    <Dialog
-      :options="{ title: 'Add Image' }"
-      v-model="addImageDialog.show"
-      @after-leave="resetAddImage"
-    >
-      <template #body-content>
-        <label
-          class="relative py-1 bg-gray-100 rounded-lg cursor-pointer focus-within:bg-gray-200 hover:bg-gray-200"
-        >
-          <input
-            type="file"
-            class="w-full opacity-0"
-            @change="onImageSelect"
-            accept="image/*"
-          />
-          <span class="absolute inset-0 px-2 py-1 text-base select-none">
-            {{
-              addImageDialog.file ? 'Select another image' : 'Select an image'
-            }}
-          </span>
-        </label>
-        <img
-          v-if="addImageDialog.url"
-          :src="addImageDialog.url"
-          class="w-full mt-2 rounded-lg"
-        />
-      </template>
-      <template #actions>
-        <Button appearance="primary" @click="addImage(addImageDialog.url)">
-          Insert Image
-        </Button>
-      </template>
-    </Dialog>
+    <InsertImage ref="insertImage" :editor="editor" />
   </div>
 </template>
 <script>
 import { Popover, Dialog, Input, Button } from 'frappe-ui'
+import InsertImage from './InsertImage.vue'
 export default {
   name: 'TipTapMenu',
   props: ['editor', 'buttons'],
@@ -112,11 +81,11 @@ export default {
     Dialog,
     Input,
     Button,
+    InsertImage,
   },
   data() {
     return {
       setLinkDialog: { url: '', show: false },
-      addImageDialog: { url: '', file: null, show: false },
     }
   },
   methods: {
@@ -128,7 +97,7 @@ export default {
           this.setLinkDialog.url = existingURL
         }
       } else if (button.label === 'Image') {
-        this.addImageDialog.show = true
+        this.$refs.insertImage.openDialog()
       } else {
         button.action(this.editor)
       }
@@ -150,26 +119,6 @@ export default {
       this.setLinkDialog.show = false
       this.setLinkDialog.url = ''
     },
-    onImageSelect(e) {
-      let file = e.target.files[0]
-      if (!file) {
-        return
-      }
-      this.addImageDialog.file = file
-      let reader = new FileReader()
-      reader.onloadend = () => {
-        let base64string = reader.result
-        this.addImageDialog.url = base64string
-      }
-      reader.readAsDataURL(file)
-    },
-    addImage(src) {
-      this.editor.chain().focus().setImage({ src }).run()
-      this.resetAddImage()
-    },
-    resetAddImage() {
-      this.addImageDialog = { show: false, url: null, file: null }
-    },
   },
 }
 </script>

package/src/components/TextEditor/TextEditor.vue

@@ -49,7 +49,7 @@ import { Editor, EditorContent, BubbleMenu, FloatingMenu } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import TextAlign from '@tiptap/extension-text-align'
-import Image from '@tiptap/extension-image'
+import Image from './image-extension'
 import Link from '@tiptap/extension-link'
 import configureMention from './mention'
 import Menu from './Menu.vue'
@@ -145,9 +145,7 @@ export default {
         TextAlign.configure({
           types: ['heading', 'paragraph'],
         }),
-        Image.configure({
-          allowBase64: true,
-        }),
+        Image,
         Link,
         Placeholder.configure({
           placeholder: this.placeholder,

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

@@ -0,0 +1,152 @@
+// 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
+        },
+      },
+    },
+  })
+}

package/src/components/Tooltip.vue

@@ -24,7 +24,7 @@ export default {
       default: 0.5,
     },
     placement: {
-      default: 'bottom-start',
+      default: 'bottom',
     },
     text: {
       type: String,

package/src/utils/file-to-base64.js

@@ -0,0 +1,9 @@
+export default (file) => {
+  return new Promise((resolve) => {
+    let reader = new FileReader()
+    reader.onloadend = () => {
+      resolve(reader.result)
+    }
+    reader.readAsDataURL(file)
+  })
+}