frappe-ui 0.0.46 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.46",
+  "version": "0.0.49",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -22,17 +22,19 @@
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",
-    "@tiptap/extension-image": "^2.0.0-beta.27",
-    "@tiptap/extension-link": "^2.0.0-beta.37",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.48",
+    "@tiptap/extension-image": "^2.0.0-beta.30",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
+    "@tiptap/extension-mention": "^2.0.0-beta.102",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.53",
     "@tiptap/extension-text-align": "^2.0.0-beta.31",
-    "@tiptap/starter-kit": "^2.0.0-beta.183",
-    "@tiptap/vue-3": "^2.0.0-beta.90",
+    "@tiptap/starter-kit": "^2.0.0-beta.191",
+    "@tiptap/vue-3": "^2.0.0-beta.96",
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
     "postcss": "^8.4.5",
     "socket.io-client": "^4.5.1",
-    "tailwindcss": "^3.0.12"
+    "tailwindcss": "^3.0.12",
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "husky": ">=6",

package/src/components/Input.vue

@@ -77,6 +77,7 @@ export default {
     },
     type: {
       type: String,
+      default: 'text',
       validator(value) {
         let isValid = [
           'text',

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/MentionList.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    v-if="items.length"
+    class="p-1 text-base bg-white border rounded-lg shadow-lg min-w-40"
+  >
+    <button
+      :class="[
+        index === selectedIndex ? 'bg-gray-100' : 'text-gray-900',
+        'whitespace-nowrap flex rounded-md items-center w-full px-2 py-2 text-sm',
+      ]"
+      v-for="(item, index) in items"
+      :key="index"
+      @click="selectItem(index)"
+      @mouseover="selectedIndex = index"
+    >
+      {{ item.label }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    command: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+  watch: {
+    items() {
+      this.selectedIndex = 0
+    },
+  },
+  methods: {
+    onKeyDown({ event }) {
+      if (event.key === 'ArrowUp') {
+        this.upHandler()
+        return true
+      }
+      if (event.key === 'ArrowDown') {
+        this.downHandler()
+        return true
+      }
+      if (event.key === 'Enter') {
+        this.enterHandler()
+        return true
+      }
+      return false
+    },
+    upHandler() {
+      this.selectedIndex =
+        (this.selectedIndex + this.items.length - 1) % this.items.length
+    },
+    downHandler() {
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length
+    },
+    enterHandler() {
+      this.selectItem(this.selectedIndex)
+    },
+    selectItem(index) {
+      const item = this.items[index]
+      if (item) {
+        this.command({ id: item.value, label: item.label })
+      }
+    },
+  },
+}
+</script>
+
+<style>
+.item {
+  display: block;
+  margin: 0;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border-radius: 0.4rem;
+  border: 1px solid transparent;
+  padding: 0.2rem 0.4rem;
+}
+.item.is-selected {
+  border-color: #000;
+}
+</style>

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

@@ -41,12 +41,6 @@
       </button>
     </FloatingMenu>
     <editor-content :editor="editor" />
-    <span
-      v-if="!content"
-      class="absolute top-0 text-base text-gray-500 pointer-events-none"
-    >
-      {{ placeholder }}
-    </span>
   </div>
 </template>
 
@@ -55,8 +49,9 @@ 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'
 import commands from './commands'
 import { normalizeClass } from 'vue'
@@ -70,17 +65,48 @@ export default {
     FloatingMenu,
     Menu,
   },
-  props: [
-    'content',
-    'placeholder',
-    'editorClass',
-    'editable',
-    'fixedMenu',
-    'bubbleMenu',
-    'floatingMenu',
-    'extensions',
-    'starterkitOptions',
-  ],
+  props: {
+    content: {
+      type: String,
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    editorClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+    bubbleMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    fixedMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    floatingMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    extensions: {
+      type: Array,
+      default: () => [],
+    },
+    starterkitOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    mentions: {
+      type: Array,
+      default: () => [],
+    },
+  },
   emits: ['change'],
   expose: ['editor'],
   data() {
@@ -119,13 +145,15 @@ export default {
         TextAlign.configure({
           types: ['heading', 'paragraph'],
         }),
-        Image.configure({
-          allowBase64: true,
-        }),
+        Image,
         Link,
         Placeholder.configure({
-          placeholder: this.placeholder || 'Write something...',
+          showOnlyWhenEditable: false,
+          placeholder: () => {
+            return this.placeholder
+          },
         }),
+        configureMention(this.mentions),
         ...(this.extensions || []),
       ],
       onUpdate: ({ editor }) => {
@@ -248,4 +276,8 @@ function createEditorButton(option) {
   pointer-events: none;
   height: 0;
 }
+.mention {
+  font-weight: 600;
+  box-decoration-break: clone;
+}
 </style>

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/TextEditor/mention.js

@@ -0,0 +1,72 @@
+import tippy from 'tippy.js'
+import { VueRenderer } from '@tiptap/vue-3'
+import Mention from '@tiptap/extension-mention'
+import MentionList from './MentionList.vue'
+
+export default function configureMention(options) {
+  return Mention.configure({
+    HTMLAttributes: {
+      class: 'mention',
+    },
+    suggestion: getSuggestionOptions(options),
+  })
+}
+
+function getSuggestionOptions(options) {
+  return {
+    items: ({ query }) => {
+      return options
+        .filter((item) =>
+          item.label.toLowerCase().startsWith(query.toLowerCase())
+        )
+        .slice(0, 5)
+    },
+
+    render: () => {
+      let component
+      let popup
+
+      return {
+        onStart: (props) => {
+          component = new VueRenderer(MentionList, {
+            props,
+            editor: props.editor,
+          })
+          if (!props.clientRect) {
+            return
+          }
+          popup = tippy('body', {
+            getReferenceClientRect: props.clientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start',
+          })
+        },
+        onUpdate(props) {
+          component.updateProps(props)
+          if (!props.clientRect) {
+            return
+          }
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect,
+          })
+        },
+        onKeyDown(props) {
+          if (props.event.key === 'Escape') {
+            popup[0].hide()
+
+            return true
+          }
+          return component.ref?.onKeyDown(props)
+        },
+        onExit() {
+          popup[0].destroy()
+          component.destroy()
+        },
+      }
+    },
+  }
+}

package/src/components/Toast.vue

@@ -18,10 +18,14 @@
             </div>
             <div>
               <slot>
-                <p class="text-base font-medium text-gray-900">
+                <p
+                  v-if="title"
+                  class="text-base font-medium text-gray-900"
+                  :class="{ 'mb-1': text }"
+                >
                   {{ title }}
                 </p>
-                <p class="mt-1 text-base text-gray-600">
+                <p v-if="text" class="text-base text-gray-600">
                   {{ text }}
                 </p>
               </slot>

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)
+  })
+}

package/src/utils/vite-dev-server.js

@@ -1,7 +1,7 @@
 module.exports = {
   getProxyOptions({ port }) {
     return {
-      '^/(app|api|assets|files)': {
+      '^/(app|login|api|assets|files)': {
         target: `http://localhost:${port}`,
         ws: true,
         router: function (req) {