frappe-ui 0.1.166 → 0.1.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.166",
+  "version": "0.1.168",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -8,7 +8,8 @@
     "test": "vitest --run",
     "type-check": "tsc --noEmit",
     "prettier": "yarn prettier -w ./src",
-    "bump-and-release": "yarn test && git pull --rebase origin main && yarn version --patch && git push && git push --tags",
+    "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
+    "release-patch": "yarn version --patch && git push && git push --tags",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",

package/src/components/Combobox/Combobox.vue

@@ -44,7 +44,12 @@ interface ComboboxProps {
 }
 
 const props = defineProps<ComboboxProps>()
-const emit = defineEmits(['update:modelValue', 'update:selectedOption'])
+const emit = defineEmits([
+  'update:modelValue',
+  'update:selectedOption',
+  'focus',
+  'blur',
+])
 
 const searchTerm = ref(getDisplayValue(props.modelValue))
 const internalModelValue = ref(props.modelValue)
@@ -196,6 +201,14 @@ const handleOpenChange = (open: boolean) => {
     userHasTyped.value = false
   }
 }
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
 </script>
 
 <template>
@@ -215,6 +228,8 @@ const handleOpenChange = (open: boolean) => {
           <ComboboxInput
             :value="searchTerm"
             @input="handleInputChange"
+            @focus="handleFocus"
+            @blur="handleBlur"
             class="bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full"
             :placeholder="placeholder || ''"
             :disabled="disabled"

package/src/components/TextEditor/InsertVideo.vue

@@ -1,97 +1,14 @@
 <template>
-  <slot v-bind="{ onClick: openDialog }"></slot>
-  <Dialog
-    :options="{ title: 'Add Video' }"
-    v-model="addVideoDialog.show"
-    @after-leave="reset"
-  >
-    <template #body-content>
-      <FileUploader
-        file-types="video/*"
-        @success="(file) => (addVideoDialog.url = file.file_url)"
-      >
-        <template v-slot="{ file, progress, uploading, openFileSelector }">
-          <div class="flex items-center space-x-2">
-            <Button @click="openFileSelector">
-              {{
-                uploading
-                  ? `Uploading ${progress}%`
-                  : addVideoDialog.url
-                    ? 'Change Video'
-                    : 'Upload Video'
-              }}
-            </Button>
-            <Button
-              v-if="addVideoDialog.url"
-              @click="
-                () => {
-                  addVideoDialog.url = null
-                  addVideoDialog.file = null
-                }
-              "
-            >
-              Remove
-            </Button>
-          </div>
-        </template>
-      </FileUploader>
-      <video
-        v-if="addVideoDialog.url"
-        :src="addVideoDialog.url"
-        class="mt-2 w-full rounded-lg"
-        type="video/mp4"
-        controls
-      />
-    </template>
-    <template #actions>
-      <div class="flex gap-2">
-        <Button variant="solid" @click="addVideo(addVideoDialog.url)">
-          Insert Video
-        </Button>
-        <Button @click="reset">Cancel</Button>
-      </div>
-    </template>
-  </Dialog>
+  <slot v-bind="{ onClick: selectAndUploadVideo }"></slot>
 </template>
-<script>
-import { Button } from '../Button'
-import { Dialog } from '../Dialog'
-import { FileUploader } from '../FileUploader'
+<script setup lang="ts">
+import { Editor } from '@tiptap/vue-3'
 
-export default {
-  name: 'InsertImage',
-  props: ['editor'],
-  expose: ['openDialog'],
-  data() {
-    return {
-      addVideoDialog: { url: '', file: null, show: false },
-    }
-  },
-  components: { Button, Dialog, FileUploader },
-  methods: {
-    openDialog() {
-      this.addVideoDialog.show = true
-    },
-    onVideoSelect(e) {
-      let file = e.target.files[0]
-      if (!file) {
-        return
-      }
-      this.addVideoDialog.file = file
-    },
+const props = defineProps<{
+  editor: Editor
+}>()
 
-    addVideo(src) {
-      if (!src) return
-      this.editor
-        .chain()
-        .focus()
-        .insertContent(`<video src="${src}"></video>`)
-        .run()
-      this.reset()
-    },
-    reset() {
-      this.addVideoDialog = this.$options.data().addVideoDialog
-    },
-  },
+function selectAndUploadVideo() {
+  props.editor.chain().focus().selectAndUploadVideo().run()
 }
 </script>

package/src/components/TextEditor/TextEditor.vue

@@ -59,7 +59,7 @@ import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
 import TextEditorFloatingMenu from './TextEditorFloatingMenu.vue'
 import EmojiExtension from './extensions/emoji/emoji-extension'
 import SlashCommands from './extensions/slash-commands/slash-commands-extension'
-import { MarkdownPasteExtension } from './extensions/markdown-paste-extension'
+import { ContentPasteExtension } from './extensions/content-paste-extension'
 import { TagNode, TagExtension } from './extensions/tag/tag-extension'
 import { Heading } from './extensions/heading/heading'
 import { ImageGroup } from './extensions/image-group/image-group-extension'
@@ -202,9 +202,10 @@ onMounted(() => {
       TagExtension.configure({
         tags: () => props.tags,
       }),
-      MarkdownPasteExtension.configure({
+      ContentPasteExtension.configure({
         enabled: true,
         showConfirmation: true,
+        uploadFunction: props.uploadFunction || defaultUploadFunction,
       }),
       ...(props.extensions || []),
     ],

package/src/components/TextEditor/extensions/{markdown-paste-extension.ts → content-paste-extension.ts}

@@ -1,31 +1,53 @@
 import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { DOMParser } from '@tiptap/pm/model'
+import { EditorView } from 'prosemirror-view'
 import { detectMarkdown, markdownToHTML } from '../../../utils/markdown'
+import { processMultipleImages } from './image/image-extension'
 
-export interface MarkdownPasteOptions {
+export interface ContentPasteOptions {
   enabled: boolean
   showConfirmation: boolean
+  uploadFunction: Function | null
 }
 
-export const MarkdownPasteExtension = Extension.create<MarkdownPasteOptions>({
-  name: 'markdownPaste',
+export const ContentPasteExtension = Extension.create<ContentPasteOptions>({
+  name: 'contentPaste',
 
   addOptions() {
     return {
       enabled: true,
       showConfirmation: true,
+      uploadFunction: null,
     }
   },
 
   addProseMirrorPlugins() {
+    const extensionThis = this
     return [
       new Plugin({
-        key: new PluginKey('markdownPaste'),
+        key: new PluginKey('contentPaste'),
         props: {
-          handlePaste: (view, event, slice) => {
+          handlePaste: (
+            view: EditorView,
+            event: ClipboardEvent,
+            slice: any,
+          ) => {
             if (!this.options.enabled) return false
 
+            // handle image pasting
+            const files: File[] | [] = Array.from(
+              event.clipboardData?.files || [],
+            )
+            const images = Array.from(files).filter((file) =>
+              file.type.startsWith('image/'),
+            )
+            if (images.length > 0) {
+              processMultipleImages(images, view, null, extensionThis.options)
+              return true
+            }
+
+            // handle markdown pasting
             const text = event.clipboardData?.getData('text/plain')
             if (!text) return false
 

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

@@ -554,7 +554,7 @@ function getImageDimensions(
 /**
  * Process multiple image uploads sequentially
  */
-function processMultipleImages(
+export function processMultipleImages(
   images: File[],
   view: EditorView,
   pos: number | null,

package/src/index.ts

@@ -90,6 +90,7 @@ export { default as fileToBase64 } from './utils/file-to-base64'
 export { default as FileUploadHandler } from './utils/fileUploadHandler'
 export { usePageMeta } from './utils/pageMeta'
 export { dayjsLocal, dayjs } from './utils/dayjs'
+export * from './utils/useFileUpload'
 
 // data-fetching, resources
 export {

package/src/utils/fileUploadHandler.ts

@@ -1,17 +1,4 @@
-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
-}
+import { UploadOptions } from "./useFileUpload"
 
 type EventListenerOption = 'start' | 'progress' | 'finish' | 'error'