frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/molecules/editor/extensions/image-group/image-group-extension.ts

@@ -3,14 +3,15 @@ import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import ImageGroupNodeView from './ImageGroupNodeView.vue'
 import { buildImageGroupCommands } from './image-group-commands'
 import { clampColumns, DEFAULT_COLUMNS } from './image-group-utils'
-import type { UploadedFile } from '#utils/useFileUpload'
+import type { UploadFunction } from '#molecules/editor/extensions/shared/media-upload-engine'
 
 export interface ImageGroupOptions {
   /**
-   * Function to handle image uploads.
+   * Function to handle image uploads. Receives optional request options
+   * (abort signal + progress callback) as the second argument.
    * @default null
    */
-  uploadFunction: ((file: File) => Promise<UploadedFile>) | null
+  uploadFunction: UploadFunction | null
   HTMLAttributes: Record<string, unknown>
 }
 

package/src/molecules/editor/extensions/image-group/useImageGroupDialog.ts

@@ -1,9 +1,16 @@
 import { computed, onBeforeUnmount, ref } from 'vue'
 import type { Editor } from '@tiptap/core'
+import { fileSizeLimitMessage } from '#utils/fileSize'
 import {
   resolveUploadOptions,
-  uploadFilesParallel,
+  uploadFile,
 } from '#molecules/editor/extensions/shared/media-upload-engine'
+import {
+  abortUpload,
+  deleteUploadProgress,
+  setUploadProgress,
+  updateUploadProgress,
+} from '#molecules/editor/extensions/shared/media-upload-state'
 import type {
   ExistingImage,
   MediaUploadOptions,
@@ -15,7 +22,12 @@ import {
   filterImageFiles,
 } from './image-group-utils'
 
-/** A single grid item: either a staged file or an already-existing image. */
+/**
+ * A single grid item: either a staged file or an already-existing image.
+ *
+ * Transient progress/cancel state is NOT stored here — it lives in the shared
+ * `uploadProgressMap` (keyed by `id`), the same mechanism media node views use.
+ */
 export interface ImageItem {
   type: 'file' | 'existing'
   id: string
@@ -23,6 +35,9 @@ export interface ImageItem {
   existing?: ExistingImage
   /** Caption for a not-yet-uploaded file (existing items carry it on `existing`). */
   alt?: string
+  status?: 'idle' | 'uploading' | 'uploaded' | 'failed'
+  error?: string
+  uploaded?: ExistingImage
 }
 
 export interface UseImageGroupDialogArgs {
@@ -32,7 +47,12 @@ export interface UseImageGroupDialogArgs {
 
 /** Build an `ImageItem` for a staged file (deterministic id). */
 function makeFileItem(file: File): ImageItem {
-  return { type: 'file', file, id: fileItemId(file) }
+  return {
+    type: 'file',
+    file,
+    id: fileItemId(file),
+    status: 'idle',
+  }
 }
 
 /** Build an `ImageItem` for an existing image (deterministic id). */
@@ -75,9 +95,7 @@ export function useImageGroupDialog(args: UseImageGroupDialogArgs) {
     const existingItems = (opts.existing ?? []).map(makeExistingItem)
     const fileItems = opts.files.map(makeFileItem)
     images.value =
-      args.mode() === 'edit'
-        ? [...existingItems, ...fileItems]
-        : fileItems
+      args.mode() === 'edit' ? [...existingItems, ...fileItems] : fileItems
     uploadedCount.value = 0
     totalCount.value = 0
     hasUploadError.value = false
@@ -152,19 +170,71 @@ export function useImageGroupDialog(args: UseImageGroupDialogArgs) {
   }
 
   /** Upload the staged files (in current UI order). Never throws. */
-  async function uploadStagedFiles(files: File[]): Promise<UploadResult[]> {
-    if (files.length === 0) return []
+  async function uploadItem(item: ImageItem): Promise<UploadResult> {
+    if (!item.file)
+      return { success: false, error: new Error('No file selected') }
+    if (item.uploaded)
+      return { success: true, file: { file_url: item.uploaded.src } }
     const options = resolveOptions()
-    uploading.value = true
-    hasUploadError.value = false
-    totalCount.value = files.length
-    uploadedCount.value = 0
+    const validationError = fileSizeLimitMessage(item.file)
+    if (validationError) {
+      item.status = 'failed'
+      item.error = validationError
+      hasUploadError.value = true
+      return { success: false, error: new Error(validationError) }
+    }
+
+    const abortController = new AbortController()
+    setUploadProgress(item.id, {
+      loaded: 0,
+      total: item.file.size,
+      percent: 0,
+      abort: () => abortController.abort(),
+    })
+    item.status = 'uploading'
+    item.error = ''
+
     try {
-      return await uploadFilesParallel(files, options, {
-        onProgress: (done) => {
-          uploadedCount.value = done
+      const result = await uploadFile(item.file, options, {
+        signal: abortController.signal,
+        onProgress: (progress) => {
+          updateUploadProgress(item.id, progress)
         },
       })
+      item.status = 'uploaded'
+      item.uploaded = {
+        src: result.file_url,
+        alt: item.alt || (result.file_name as string) || '',
+      }
+      return { success: true, file: result }
+    } catch (error) {
+      item.status = 'failed'
+      item.error = abortController.signal.aborted
+        ? 'Upload cancelled'
+        : (error as Error)?.message || 'Upload failed'
+      hasUploadError.value = true
+      return { success: false, error: error as Error }
+    } finally {
+      deleteUploadProgress(item.id)
+    }
+  }
+
+  async function uploadStagedFiles(
+    items: ImageItem[],
+  ): Promise<UploadResult[]> {
+    if (items.length === 0) return []
+    uploading.value = true
+    hasUploadError.value = false
+    totalCount.value = items.length
+    uploadedCount.value = items.filter((item) => item.uploaded).length
+    try {
+      return await Promise.all(
+        items.map(async (item) => {
+          const result = await uploadItem(item)
+          uploadedCount.value += 1
+          return result
+        }),
+      )
     } finally {
       uploading.value = false
     }
@@ -176,8 +246,11 @@ export function useImageGroupDialog(args: UseImageGroupDialogArgs) {
    * UI order) and `hasUploadError` flags the failures so the dialog stays open.
    */
   async function buildFinalImages(): Promise<ExistingImage[]> {
-    const staged = fileItems()
-    const results = await uploadStagedFiles(staged)
+    const stagedItems = images.value.filter(
+      (item) => item.type === 'file' && item.file && !item.uploaded,
+    )
+    const staged = stagedItems.map((item) => item.file as File)
+    const results = await uploadStagedFiles(stagedItems)
 
     const fileToImage = new Map<File, ExistingImage>()
     staged.forEach((file, index) => {
@@ -199,6 +272,11 @@ export function useImageGroupDialog(args: UseImageGroupDialogArgs) {
     for (const item of images.value) {
       if (item.type === 'existing' && item.existing) {
         final.push(item.existing)
+      } else if (item.uploaded) {
+        final.push({
+          src: item.uploaded.src,
+          alt: item.alt ?? item.uploaded.alt,
+        })
       } else if (item.file) {
         const uploaded = fileToImage.get(item.file)
         if (uploaded) {
@@ -209,6 +287,25 @@ export function useImageGroupDialog(args: UseImageGroupDialogArgs) {
     return final
   }
 
+  async function retryImage(index: number) {
+    const item = images.value[index]
+    if (!item || item.type !== 'file') return
+    hasUploadError.value = false
+    uploading.value = true
+    totalCount.value = 1
+    uploadedCount.value = 0
+    try {
+      await uploadItem(item)
+    } finally {
+      uploadedCount.value = 1
+      uploading.value = false
+    }
+  }
+
+  function abortAll() {
+    images.value.forEach((item) => abortUpload(item.id))
+  }
+
   return {
     images,
     columns,
@@ -226,5 +323,7 @@ export function useImageGroupDialog(args: UseImageGroupDialogArgs) {
     fileItems,
     matchesFileSet,
     buildFinalImages,
+    retryImage,
+    abortAll,
   }
 }

package/src/molecules/editor/extensions/link/LinkEditorPopup.vue

@@ -1,74 +1,80 @@
 <template>
-  <div
-    class="p-2 w-72 flex items-center gap-2 bg-surface-white shadow-xl rounded"
+  <EditorPopover
+    dialog-label="Edit link"
+    content-class="flex min-w-60 max-w-80 items-center gap-1 rounded-md p-1"
+    :autofocus="false"
   >
-    <TextInput
-      v-if="edit"
-      ref="input"
-      type="text"
-      class="w-full"
-      placeholder="https://example.com"
-      v-model="_href"
-      @keydown.enter="submitLink"
-      @keydown.esc="$emit('close')"
-    />
-    <a
-      v-else
-      class="text-ink-gray-700 underline text-sm flex-1 truncate pl-1"
-      :title="_href"
-      :href="_href"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {{ _href }}
-    </a>
-    <div class="shrink-0 flex items-center gap-1.5 ml-auto">
-      <template v-if="edit">
-        <Button
-          @click="submitLink"
-          tooltip="Submit"
-          :icon="'lucide-check'"
-          variant="subtle"
+    <template v-if="edit">
+      <div
+        class="flex-1"
+        :class="{ 'editor-link-shake': shake }"
+        @animationend="shake = false"
+      >
+        <TextInput
+          ref="input"
+          type="text"
+          class="w-full"
+          placeholder="https://example.com"
+          v-model="_href"
+          @keydown.enter="submitLink"
         />
-        <Button
-          @click="props.href ? (edit = false) : $emit('updateHref', '')"
-          tooltip="Exit"
-          :icon="'lucide-x'"
-          variant="subtle"
-        />
-      </template>
-      <template v-else>
-        <Button
-          @click="copyLink"
-          tooltip="Copy"
-          :icon="'lucide-copy'"
-          variant="subtle"
-        />
-        <Button
-          @click="edit = true"
-          tooltip="Edit"
-          :icon="'lucide-pencil'"
-          variant="subtle"
-        />
-        <Button
-          tooltip="Remove"
-          variant="subtle"
-          @click="$emit('updateHref', '')"
-          :icon="'lucide-link-2-off'"
-        />
-      </template>
-    </div>
-  </div>
+      </div>
+      <Button
+        v-if="href"
+        size="xs"
+        variant="ghost"
+        tooltip="Remove link"
+        :icon="'lucide-link-2-off'"
+        @click="$emit('updateHref', '')"
+      />
+      <Button
+        size="xs"
+        variant="ghost"
+        tooltip="Apply"
+        :icon="'lucide-check'"
+        @click="submitLink"
+      />
+    </template>
+
+    <template v-else>
+      <span
+        class="lucide-globe ml-1.5 size-4 shrink-0 text-ink-gray-5"
+        aria-hidden="true"
+      />
+      <div class="pl-1.5 flex-1 min-w-0 flex">
+        <a
+          class="truncate text-sm text-ink-gray-9 border-b border-outline-gray-2 hover:border-outline-gray-3"
+          :title="_href"
+          :href="_href"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ _href }}
+        </a>
+      </div>
+      <Button
+        size="xs"
+        variant="ghost"
+        tooltip="Copy link"
+        :icon="'lucide-copy'"
+        @click="copyLink"
+      />
+      <Button size="xs" variant="ghost" @click="enterEditMode">Edit</Button>
+    </template>
+  </EditorPopover>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, nextTick } from 'vue'
 import Button from '#components/Button/Button.vue'
 import TextInput from '#components/TextInput/TextInput.vue'
+import EditorPopover from '#molecules/editor/components/EditorPopover.vue'
 import { isSafeUrl } from '#molecules/editor/extensions/shared/url-safety'
 
 const props = defineProps<{
   href: string
+  /** Open directly in edit mode. Defaults to "edit when there is no href". */
+  startInEdit?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -76,15 +82,65 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
+const ALLOWED_SCHEMES = ['http', 'https', 'mailto', 'tel']
+
 const _href = ref(props.href)
 const input = useTemplateRef('input')
-const edit = ref(!props.href)
+// New links open straight into edit mode; existing links open in the view —
+// unless the caller forces it (e.g. ⌘K on a selected link → edit mode).
+const edit = ref(props.startInEdit ?? !props.href)
+const shake = ref(false)
+
+/**
+ * Make a bare entry usable as a link: `github.com` → `https://github.com`.
+ * Anything that already carries a scheme (`http:`, `mailto:`, `tel:`, …) or is
+ * empty is left untouched, matching the extension's `defaultProtocol: 'https'`.
+ */
+const normalizeHref = (value: string): string => {
+  const trimmed = value.trim()
+  if (!trimmed) return ''
+  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed)) return trimmed
+  return `https://${trimmed}`
+}
+
+/**
+ * Stricter than {@link isSafeUrl} alone: the URL parser accepts bare tokens
+ * (`asdf` → `https://asdf`) as valid hostnames, so for http(s) links we also
+ * require a dotted host (or localhost). Keeps "not a link" text from being
+ * accepted once auto-prefixed.
+ */
+const isValidLinkHref = (href: string): boolean => {
+  if (!isSafeUrl(href, { allowedSchemes: ALLOWED_SCHEMES })) return false
+  let url: URL
+  try {
+    url = new URL(href)
+  } catch {
+    return false
+  }
+  if (url.protocol === 'http:' || url.protocol === 'https:') {
+    return url.hostname === 'localhost' || url.hostname.includes('.')
+  }
+  return true
+}
+
+const triggerShake = () => {
+  // Restart the animation even if it is mid-flight.
+  shake.value = false
+  requestAnimationFrame(() => {
+    shake.value = true
+  })
+}
 
 const submitLink = () => {
-  // Empty submits through as the "remove link" action; otherwise require a
-  // well-formed http(s) URL (shared url-safety, not the legacy isValidUrl).
-  if (_href.value === '' || isSafeUrl(_href.value, { allowedSchemes: ['http', 'https', 'mailto', 'tel'] })) {
-    emit('updateHref', _href.value)
+  const normalized = normalizeHref(_href.value)
+  // Empty submits through as the "remove link" action; otherwise the URL must
+  // be well-formed and look like a real link (see isValidLinkHref).
+  if (normalized === '') {
+    emit('updateHref', '')
+  } else if (isValidLinkHref(normalized)) {
+    emit('updateHref', normalized)
+  } else {
+    triggerShake()
   }
 }
 
@@ -97,14 +153,101 @@ const copyLink = async () => {
   }
 }
 
-onMounted(async () => {
+const focusInput = async () => {
   await nextTick()
-  if (input.value?.el) {
-    // preventScroll: the popup is teleported to <body> and positioned async by
-    // floating-ui, so at focus time the input may still be at the top of the
-    // document — a plain focus() would scroll the page up to it.
-    input.value.el.focus({ preventScroll: true })
-    input.value.el.select()
+  const el = input.value?.el
+  if (!el) return
+  // preventScroll: the popup is teleported to <body> and positioned async by
+  // floating-ui, so at focus time the input may still be at the top of the
+  // document — a plain focus() would scroll the page up to it.
+  el.focus({ preventScroll: true })
+  el.select()
+}
+
+const enterEditMode = () => {
+  edit.value = true
+  focusInput()
+}
+
+/**
+ * When creating a brand-new link, offer a URL already on the clipboard as the
+ * default — the common "copy a URL, select some text, ⌘K" flow. The value is
+ * left selected so a keystroke replaces it.
+ */
+const maybePrefillFromClipboard = async () => {
+  if (props.href || _href.value) return
+  // Clipboard read needs a secure context (https/localhost); it is unavailable
+  // over plain http (e.g. *.frappe.test dev), where this simply no-ops.
+  if (!navigator.clipboard?.readText) return
+  let text = ''
+  try {
+    text = (await navigator.clipboard.readText()).trim()
+  } catch {
+    return // No permission / not focused.
   }
+  const normalized = normalizeHref(text)
+  if (!isValidLinkHref(normalized)) return
+  _href.value = normalized
+  await nextTick()
+  input.value?.el?.select()
+}
+
+/**
+ * Escape is owned here (the floating popup is created with `closeOnEscape:
+ * false`). When editing an existing link the first Escape discards the edit
+ * and steps back to the view; in every other case it closes the popup.
+ */
+const handleEscape = () => {
+  if (edit.value && props.href) {
+    _href.value = props.href
+    edit.value = false
+    return
+  }
+  emit('close')
+}
+
+const onDocumentKeydown = (event: KeyboardEvent) => {
+  if (event.key !== 'Escape') return
+  // Consume it so a single Escape doesn't also close a surrounding dialog.
+  event.preventDefault()
+  event.stopPropagation()
+  handleEscape()
+}
+
+onMounted(async () => {
+  document.addEventListener('keydown', onDocumentKeydown, true)
+  if (edit.value) {
+    focusInput()
+    await maybePrefillFromClipboard()
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onDocumentKeydown, true)
 })
 </script>
+
+<style scoped>
+.editor-link-shake {
+  animation: editor-link-shake 160ms ease-in-out;
+}
+
+@keyframes editor-link-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-3px);
+  }
+  75% {
+    transform: translateX(3px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-link-shake {
+    animation: none;
+  }
+}
+</style>

package/src/molecules/editor/extensions/link/link-click-plugin.ts

@@ -1,5 +1,4 @@
 import type { Editor } from '@tiptap/core'
-import { getMarkRange } from '@tiptap/core'
 import type { MarkType } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 
@@ -17,41 +16,37 @@ export interface LinkClickPluginOptions {
  *  - Not editable → `return false` (let the browser follow the link).
  *  - Not on a link → `return false`.
  *  - Cmd/Meta-click → open the href in a new tab; `return true`.
- *  - Plain click   → open the link editor popup; `return true`.
+ *  - Plain click   → `return false`; let the caret land where the user clicked so
+ *    link text stays editable. The link editor is opened via the hover affordance
+ *    / `Mod-k`, not by trapping a plain click.
  *
  * Always returns a boolean so ProseMirror knows whether the click was handled
  * (the legacy handler returned `undefined` from the editable/meta branches).
  */
 export function linkClickPlugin(options: LinkClickPluginOptions): Plugin {
-  const { editor, type } = options
+  const { editor } = options
   return new Plugin({
     key: new PluginKey('handleLinkClick'),
     props: {
-      handleClick: (view, pos, event): boolean => {
+      handleClick: (view, _pos, event): boolean => {
         if (!editor.isEditable) return false
 
         const target = event.target as HTMLElement | null
         const anchor = target?.closest('a[href]')
         if (!anchor || !view.dom.contains(anchor)) return false
 
-        event.preventDefault()
-
         if (event.metaKey || event.ctrlKey) {
+          event.preventDefault()
           const url = anchor.getAttribute('href') || undefined
           if (url) window.open(url, '_blank', 'noopener,noreferrer')
           editor.commands.focus()
           return true
         }
 
-        const resolved = view.state.doc.resolve(pos)
-        const range = getMarkRange(resolved, type)
-        if (range) {
-          editor.chain().setTextSelection(range).run()
-        }
-        requestAnimationFrame(() => {
-          if (!editor.isDestroyed) editor.commands.openLinkEditor()
-        })
-        return true
+        // Plain click: don't preventDefault or reselect the whole link range —
+        // that stole focus into the editor popup and trapped the caret. Let the
+        // browser place the caret where the user clicked.
+        return false
       },
     },
   })

package/src/molecules/editor/extensions/link/link-commands.ts

@@ -4,10 +4,23 @@ import { mapStoredRange } from '#molecules/editor/extensions/shared/node-view'
 import { openLinkPopup } from './link-popup-controller'
 import type { VirtualReference } from '#molecules/editor/composables/useFloatingPopup'
 
+/** Options accepted by the `openLinkEditor` command. */
+export interface OpenLinkEditorOptions {
+  /**
+   * Force the popup to open in edit mode. When omitted it defaults to edit mode
+   * for new links and view mode for existing links. The ⌘K shortcut passes
+   * `true` for an explicit (non-collapsed) selection so editing a link's URL is
+   * one keystroke, while a plain click on a link stays in view mode.
+   */
+  startInEdit?: boolean
+}
+
 /**
- * A TipTap command factory: `() => ({ editor }) => boolean`.
+ * A TipTap command factory: `(options?) => ({ editor }) => boolean`.
  */
-type LinkEditorCommand = () => (props: { editor: Editor }) => boolean
+type LinkEditorCommand = (
+  options?: OpenLinkEditorOptions,
+) => (props: { editor: Editor }) => boolean
 
 /**
  * Build the `openLinkEditor` command for the given link mark type.
@@ -24,7 +37,7 @@ type LinkEditorCommand = () => (props: { editor: Editor }) => boolean
  * after the `await` is guarded by `editor.isDestroyed`.
  */
 export function buildOpenLinkEditor(markType: MarkType): LinkEditorCommand {
-  return () =>
+  return (options?: OpenLinkEditorOptions) =>
     ({ editor }: { editor: Editor }): boolean => {
       const { state } = editor
       const { from, to } = state.selection
@@ -51,8 +64,16 @@ export function buildOpenLinkEditor(markType: MarkType): LinkEditorCommand {
       const show = () => {
         void openLinkPopup({
           href: existingHref,
+          startInEdit: options?.startInEdit ?? !existingHref,
           anchor: editor.view.dom,
           virtualReference: selectionReference(editor, range),
+          onEscape: () => {
+            // Escape leaves focus on <body>; return it to the editor so the
+            // user can keep typing where they left off.
+            if (!editor.isDestroyed) {
+              editor.commands.focus(null, { scrollIntoView: false })
+            }
+          },
         }).then((href) => {
           // Cancelled, or the editor went away while the popup was open.
           if (href === null || editor.isDestroyed) return