frappe-ui 0.1.160 → 0.1.161

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.160",
+  "version": "0.1.161",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/TextEditor/InsertImage.vue

@@ -6,17 +6,29 @@
     class="hidden"
     @change="onImageSelect"
     accept="image/*"
+    multiple
+  />
+  <ImageGroupUploadDialog
+    v-if="showModal"
+    mode="new"
+    v-model="showModal"
+    v-model:files="selectedFiles"
+    :editor="editor"
+    @close="handleCancel"
   />
 </template>
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import type { Editor } from '@tiptap/vue-3'
+import ImageGroupUploadDialog from './extensions/image-group/ImageGroupUploadDialog.vue'
 
 const props = defineProps<{
   editor: Editor
 }>()
 
-const fileInput = useTemplateRef('fileInput')
+const fileInput = useTemplateRef<HTMLInputElement>('fileInput')
+const showModal = ref(false)
+const selectedFiles = ref<File[]>([])
 
 function openFileSelector() {
   fileInput.value?.click()
@@ -24,9 +36,19 @@ function openFileSelector() {
 
 function onImageSelect(e: Event) {
   const target = e.target as HTMLInputElement
-  const file = target.files?.[0]
-  if (file) {
-    props.editor.chain().focus().uploadImage(file).run()
+  const files = target.files
+  if (files && files.length > 0) {
+    if (files.length === 1) {
+      props.editor.chain().focus().uploadImage(files[0]).run()
+    } else {
+      selectedFiles.value = Array.from(files)
+      showModal.value = true
+    }
   }
 }
+
+function handleCancel() {
+  showModal.value = false
+  selectedFiles.value = []
+}
 </script>

package/src/components/TextEditor/TextEditor.vue

@@ -20,40 +20,47 @@
 </template>
 
 <script lang="ts">
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import { normalizeClass, computed, PropType } from 'vue'
+import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
+import TextAlign from '@tiptap/extension-text-align'
 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 TextAlign from '@tiptap/extension-text-align'
-import TextStyle from '@tiptap/extension-text-style'
-import Typography from '@tiptap/extension-typography'
-import StarterKit from '@tiptap/starter-kit'
-import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
-import { common, createLowlight } from 'lowlight'
-import { DOMParser } from 'prosemirror-model'
-import { computed, normalizeClass } from 'vue'
-import { detectMarkdown, markdownToHTML } from '../../utils/markdown'
-import { useFileUpload } from '../../utils/useFileUpload'
-import CodeBlockComponent from './CodeBlockComponent.vue'
-import NamedColorExtension from './extensions/color'
-import EmojiExtension from './extensions/emoji/emoji-extension'
-import { Heading } from './extensions/heading/heading'
-import NamedHighlightExtension from './extensions/highlight'
 import { ImageExtension } from './extensions/image'
-import SlashCommands from './extensions/slash-commands/slash-commands-extension'
-import { TagExtension, TagNode } from './extensions/tag/tag-extension'
 import ImageViewerExtension from './image-viewer-extension'
+import VideoExtension from './video-extension'
 import LinkExtension from './link-extension'
+import Typography from '@tiptap/extension-typography'
+import TextStyle from '@tiptap/extension-text-style'
+import NamedColorExtension from './extensions/color'
+import NamedHighlightExtension from './extensions/highlight'
+import { common, createLowlight } from 'lowlight'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import CodeBlockComponent from './CodeBlockComponent.vue'
 import configureMention from './mention'
-import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
+import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
 import TextEditorFloatingMenu from './TextEditorFloatingMenu.vue'
-import VideoExtension from './video-extension'
+import EmojiExtension from './extensions/emoji/emoji-extension'
+import SlashCommands from './extensions/slash-commands/slash-commands-extension'
+import { detectMarkdown, markdownToHTML } from '../../utils/markdown'
+import { DOMParser } from 'prosemirror-model'
+import { TagNode, TagExtension } from './extensions/tag/tag-extension'
+import { Heading } from './extensions/heading/heading'
+import { ImageGroup } from './extensions/image-group/image-group-extension'
+import { useFileUpload } from '../../utils/useFileUpload'
 
 const lowlight = createLowlight(common)
 
+function defaultUploadFunction(file: File) {
+  // useFileUpload is frappe specific
+  let fileUpload = useFileUpload()
+  return fileUpload.upload(file)
+}
+
 export default {
   name: 'TextEditor',
   inheritAttrs: false,
@@ -113,13 +120,8 @@ export default {
       default: () => [],
     },
     uploadFunction: {
-      type: Function,
-      default: (file: File) => {
-        let fileUpload = useFileUpload()
-        return fileUpload.upload(file).then((fileDoc: any) => {
-          return { src: fileDoc.file_url }
-        })
-      },
+      type: Function as PropType<typeof defaultUploadFunction>,
+      default: defaultUploadFunction,
     },
   },
   emits: ['change', 'focus', 'blur'],
@@ -193,6 +195,9 @@ export default {
         ImageExtension.configure({
           uploadFunction: this.uploadFunction,
         }),
+        ImageGroup.configure({
+          uploadFunction: this.uploadFunction,
+        }),
         ImageViewerExtension,
         VideoExtension.configure({
           uploadFunction: this.uploadFunction,

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

@@ -9,15 +9,14 @@ import { Plugin, Selection, Transaction, EditorState } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
 import { Node } from '@tiptap/pm/model'
 import { fileToBase64 } from '../../../../index'
+import { UploadedFile } from '../../../../utils/useFileUpload'
 
 export interface ImageExtensionOptions {
   /**
    * Function to handle image uploads
    * @default null
    */
-  uploadFunction:
-    | ((file: File) => Promise<{ src: string; [key: string]: any }>)
-    | null
+  uploadFunction: ((file: File) => Promise<UploadedFile>) | null
 
   /**
    * HTML attributes to add to the image element
@@ -414,27 +413,30 @@ function uploadImageBase(
 
       return options.uploadFunction(file)
     })
-    .then((uploadedImage: any) => {
-      return getImageDimensions(uploadedImage.src)
+    .then((uploadedImage: UploadedFile) => {
+      return getImageDimensions(uploadedImage.file_url)
         .then((dimensions) => {
           return {
             ...uploadedImage,
             width: dimensions.width,
             height: dimensions.height,
-          }
+          } as UploadedFile & { width: number; height: number }
         })
         .catch(() => {
-          return uploadedImage
+          return uploadedImage as UploadedFile & {
+            width: number
+            height: number
+          }
         })
     })
-    .then((uploadedImage: any) => {
+    .then((uploadedImage) => {
       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,
+            src: uploadedImage.file_url,
             width: uploadedImage.width || node.attrs.width,
             height: uploadedImage.height || node.attrs.height,
             loading: false,

package/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue

@@ -0,0 +1,216 @@
+<template>
+  <NodeViewWrapper>
+    <div class="w-full">
+      <div v-if="isEditable" class="flex items-center mb-2 gap-2">
+        <Button @click="edit">
+          <template #prefix>
+            <LucideEdit class="size-4" />
+          </template>
+          Edit
+        </Button>
+        <Select
+          :options="selectOptions"
+          v-model="internalColumns"
+          size="sm"
+          variant="subtle"
+          class="w-28"
+        />
+      </div>
+      <div class="grid gap-px" :style="gridStyle">
+        <div
+          v-for="(img, idx) in images"
+          :key="img.attrs.src + idx"
+          class="relative aspect-square w-full h-full overflow-hidden bg-surface-white group"
+        >
+          <button
+            v-if="isEditable"
+            type="button"
+            class="absolute top-1 right-1 z-10 bg-white/80 hover:bg-white rounded-full p-1 shadow transition-opacity opacity-0 group-hover:opacity-100 focus:opacity-100"
+            aria-label="Remove image"
+            @click.stop="removeImage(idx)"
+          >
+            <LucideX class="w-4 h-4 text-gray-700" />
+          </button>
+          <img
+            :src="img.attrs.src"
+            :alt="img.attrs.alt || ''"
+            class="object-cover w-full h-full not-prose cursor-pointer rounded-[2px]"
+            v-if="!isEditable"
+            @click="openViewer(idx)"
+          />
+          <img
+            v-else
+            :src="img.attrs.src"
+            :alt="img.attrs.alt || ''"
+            class="object-cover w-full h-full not-prose rounded-[2px]"
+          />
+
+          <!-- Caption overlay (visible when there's alt text) -->
+          <div
+            v-if="img.attrs.alt"
+            class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-[2px] opacity-0 group-hover:opacity-100 transition-opacity"
+          >
+            <div class="p-2">
+              <div class="text-white text-xs truncate" :title="img.attrs.alt">
+                {{ img.attrs.alt }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ImageViewerModal
+        v-if="showViewer"
+        v-model:show="showViewer"
+        :images="viewerImages"
+        :initialIndex="viewerIndex"
+      />
+      <ImageGroupUploadDialog
+        v-if="showEditModal"
+        v-model="showEditModal"
+        :files="editFiles"
+        :editor="props.editor"
+        mode="edit"
+        :existingImages="existingImages"
+        :initialColumns="columns"
+        @close="handleEditModalClose"
+        @save="handleEditSave"
+      />
+      <slot />
+    </div>
+  </NodeViewWrapper>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { NodeViewWrapper, type Editor } from '@tiptap/vue-3'
+import type { NodeViewProps } from '@tiptap/vue-3'
+import LucideX from '~icons/lucide/x'
+import LucideEdit from '~icons/lucide/edit'
+import Button from '../../../Button/Button.vue'
+import Select from '../../../Select/Select.vue'
+import ImageViewerModal from '../../ImageViewerModal.vue'
+import ImageGroupUploadDialog from './ImageGroupUploadDialog.vue'
+
+const props = defineProps<NodeViewProps & { editor: Editor }>()
+
+const columns = computed(() => props.node.attrs.columns || 4)
+const images = computed(() => props.node.content.content || [])
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${columns.value}, minmax(0, 1fr))`,
+}))
+const isEditable = ref(props.editor.isEditable)
+
+const selectOptions = [
+  { label: '2 columns', value: '2' },
+  { label: '3 columns', value: '3' },
+  { label: '4 columns', value: '4' },
+]
+
+const internalColumns = computed({
+  get: () => String(columns.value),
+  set: (val) => props.updateAttributes({ columns: +val }),
+})
+
+const showViewer = ref(false)
+const viewerIndex = ref(0)
+const viewerImages = computed(() =>
+  images.value.map((img: any) => ({
+    src: img.attrs.src,
+    alt: img.attrs.alt || '',
+  })),
+)
+
+const showEditModal = ref(false)
+const editFiles = ref<File[]>([])
+
+interface ExistingImage {
+  src: string
+  alt: string
+}
+
+const existingImages = computed(() =>
+  images.value.map((img: any) => ({
+    src: img.attrs.src,
+    alt: img.attrs.alt || '',
+  })),
+)
+
+onMounted(() => {
+  const updateEditable = () => {
+    isEditable.value = props.editor.isEditable
+  }
+  props.editor.on('update', updateEditable)
+  onUnmounted(() => {
+    props.editor.off('update', updateEditable)
+  })
+})
+
+function edit() {
+  editFiles.value = []
+  showEditModal.value = true
+}
+
+function handleEditModalClose() {
+  showEditModal.value = false
+  editFiles.value = []
+}
+
+async function handleEditSave(data: {
+  images: ExistingImage[]
+  columns: number
+}) {
+  // Update the node with the final images and columns from the modal
+  props.editor.commands.command(({ tr, state }) => {
+    const pos = props.getPos()
+    if (typeof pos === 'number') {
+      const node = state.doc.nodeAt(pos)
+      if (node && node.type.name === 'imageGroup') {
+        const newContent = data.images.map((img) =>
+          state.schema.nodes.image.create({ src: img.src, alt: img.alt }),
+        )
+
+        const newAttrs = { ...node.attrs, columns: data.columns }
+        const newNode = node.type.create(newAttrs, newContent)
+        tr.replaceWith(pos, pos + node.nodeSize, newNode)
+        return true
+      }
+    }
+    return false
+  })
+
+  showEditModal.value = false
+}
+
+function openViewer(idx: number) {
+  if (props.editor.isEditable) return
+  viewerIndex.value = idx
+  showViewer.value = true
+}
+
+function removeImage(idx: number) {
+  // Remove the image at the specified index and update the node
+  const newImages = images.value.slice()
+  newImages.splice(idx, 1)
+  if (newImages.length === 0) {
+    // Remove the whole node if no images left
+    props.editor.commands.deleteNode('imageGroup')
+  } else {
+    // Update the node content with remaining images
+    props.updateAttributes({})
+    props.editor.commands.command(({ tr, state }) => {
+      const pos = props.getPos()
+      if (typeof pos === 'number') {
+        const node = state.doc.nodeAt(pos)
+        if (node && node.type.name === 'imageGroup') {
+          const newContent = newImages.map((img) =>
+            state.schema.nodes.image.create(img.attrs),
+          )
+          tr.replaceWith(pos + 1, pos + 1 + node.content.size, newContent)
+          return true
+        }
+      }
+      return false
+    })
+  }
+}
+</script>