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

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

@@ -1,5 +1,5 @@
 import Link from '@tiptap/extension-link'
-import { buildOpenLinkEditor } from './link-commands'
+import { buildOpenLinkEditor, type OpenLinkEditorOptions } from './link-commands'
 import { linkPastePlugin } from './link-paste-plugin'
 import { clearLinkOnBoundaryPlugin } from './clear-link-on-boundary-plugin'
 import { linkClickPlugin } from './link-click-plugin'
@@ -9,7 +9,7 @@ declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     linkEditor: {
       /** Opens the link editor bubble menu. */
-      openLinkEditor: () => ReturnType
+      openLinkEditor: (options?: OpenLinkEditorOptions) => ReturnType
     }
   }
 }
@@ -33,6 +33,15 @@ export const LinkExtension = Link.extend({
       autolink: true,
       defaultProtocol: 'https',
       linkOnPaste: false,
+      // Don't auto-link bare dotted identifiers like `data.doc.name` (`.name` is a
+      // real TLD, so linkify matches them). Only auto-link inputs that carry an
+      // explicit scheme (`http://`, `mailto:`, …) or a `www.` prefix — i.e. things
+      // a user actually means as a URL. `url` here is the raw matched text.
+      shouldAutoLink: (url: string): boolean => {
+        const hasScheme = /^[a-z][a-z0-9+.-]*:/i.test(url)
+        const hasWww = /^www\./i.test(url)
+        return hasScheme || hasWww
+      },
     }
   },
 

package/src/molecules/editor/extensions/link/link-popup-controller.test.ts

@@ -0,0 +1,49 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect } from 'vitest'
+import { lockScroll } from './link-popup-controller'
+
+describe('lockScroll', () => {
+  // Regression: opening the link popup over a scrolled editor used to drop the
+  // container's `overflow-y` on close, so long content overflowed its box and
+  // painted over the toolbar/Submit. The lock must restore the exact prior
+  // overflow, even when it was authored as the `overflow-y` longhand.
+  it('restores an `overflow-y` longhand after lock/unlock', () => {
+    const el = document.createElement('div')
+    el.style.overflowY = 'auto'
+
+    const unlock = lockScroll(el)
+    expect(el.style.overflowY).toBe('hidden')
+    expect(el.style.overflowX).toBe('hidden')
+
+    unlock()
+    expect(el.style.overflowY).toBe('auto')
+  })
+
+  it('restores each axis independently after lock/unlock', () => {
+    const el = document.createElement('div')
+    el.style.overflowX = 'hidden'
+    el.style.overflowY = 'auto'
+
+    lockScroll(el)()
+
+    expect(el.style.overflowX).toBe('hidden')
+    expect(el.style.overflowY).toBe('auto')
+  })
+
+  it('leaves no inline overflow when the element had none', () => {
+    const el = document.createElement('div')
+
+    lockScroll(el)()
+
+    expect(el.style.overflowX).toBe('')
+    expect(el.style.overflowY).toBe('')
+    expect(el.getAttribute('style')).toBeFalsy()
+  })
+
+  it('is a no-op for a null scroll parent', () => {
+    expect(() => lockScroll(null)()).not.toThrow()
+  })
+})

package/src/molecules/editor/extensions/link/link-popup-controller.ts

@@ -10,10 +10,17 @@ import LinkEditorPopup from './LinkEditorPopup.vue'
 export interface OpenLinkPopupOptions {
   /** Existing href to seed the editor with (`null` when creating a new link). */
   href: string | null
+  /** Open straight into edit mode (vs. the read-only view). */
+  startInEdit?: boolean
   /** Anchor element used for popup ownership and outside-click containment. */
   anchor: HTMLElement
   /** Optional positioning reference. Defaults to the editor selection. */
   virtualReference?: VirtualReference
+  /**
+   * Called when the user dismisses the popup with Escape (not on apply or
+   * click-outside). Used to return focus to the editor.
+   */
+  onEscape?: () => void
 }
 
 /**
@@ -35,6 +42,11 @@ export function openLinkPopup(
 ): Promise<string | null> {
   const { href, anchor } = options
 
+  // Lock the page's scroll container while the popup is open so the anchored
+  // editor can't scroll away underneath it. The app scrolls an inner
+  // overflow-auto element (not <body>), so we lock the nearest such ancestor.
+  const unlockScroll = lockScroll(getScrollParent(anchor))
+
   return new Promise<string | null>((resolve) => {
     let settled = false
     const settle = (value: string | null) => {
@@ -47,16 +59,21 @@ export function openLinkPopup(
       anchor,
       component: LinkEditorPopup,
       closeOnAnchorPointerDown: true,
+      // The popup owns Escape: in view mode it closes; in edit mode the first
+      // Escape steps back to view mode and only a second one closes.
+      closeOnEscape: false,
       virtualReference: options.virtualReference ?? {
         getBoundingClientRect: () => selectionRect(anchor),
       },
       floatingOptions: { placement: 'top' },
       props: {
         href: href ?? '',
+        startInEdit: options.startInEdit ?? !href,
         onClose: () => {
-          // Cancel: resolve null, then tear down.
+          // Cancel via Escape: resolve null, tear down, then hand focus back.
           settle(null)
           popup.destroy()
+          options.onEscape?.()
         },
         onUpdateHref: (newHref: string) => {
           settle(newHref)
@@ -69,14 +86,62 @@ export function openLinkPopup(
     // else settled the promise by the time the popup is gone.
     const originalDestroy = popup.destroy
     popup.destroy = () => {
+      unlockScroll()
       settle(null)
       originalDestroy()
     }
 
-    if (!popup.floating) settle(null)
+    if (!popup.floating) {
+      unlockScroll()
+      settle(null)
+    }
   })
 }
 
+/**
+ * Lock vertical+horizontal scrolling on `el` and return a function that
+ * restores it.
+ *
+ * Save/restore the `overflow-x`/`overflow-y` *longhands* — never the `overflow`
+ * shorthand. A scroll container's value usually lives in a longhand (e.g.
+ * EditorContent sets `overflow-y: auto` inline); reading `.style.overflow`
+ * returns '' whenever the two axes differ, so locking via the shorthand and
+ * later clearing it would drop the original `overflow-y` and leave the editor
+ * overflowing its box — content then paints over the toolbar (the link-edit
+ * overflow bug). The longhand getters reflect the value regardless of how it
+ * was originally authored, so restoring them reproduces the prior state exactly.
+ *
+ * No-op (returns a no-op restore) when `el` is `null`.
+ */
+export function lockScroll(el: HTMLElement | null): () => void {
+  if (!el) return () => {}
+  const previous = { x: el.style.overflowX, y: el.style.overflowY }
+  el.style.overflowX = 'hidden'
+  el.style.overflowY = 'hidden'
+  return () => {
+    el.style.overflowX = previous.x
+    el.style.overflowY = previous.y
+  }
+}
+
+/**
+ * Nearest scrollable ancestor of `el` (the element that actually scrolls), used
+ * to lock scrolling while editing. The app's scroll container is an inner
+ * `overflow-auto` div, not `document.body`, so locking the body is a no-op —
+ * we must lock this element instead. Returns `null` if nothing scrolls.
+ */
+function getScrollParent(el: HTMLElement | null): HTMLElement | null {
+  let node: HTMLElement | null = el
+  while (node && node !== document.body) {
+    const { overflowY } = getComputedStyle(node)
+    if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) {
+      return node
+    }
+    node = node.parentElement
+  }
+  return null
+}
+
 /**
  * Build a live `DOMRect` from the current selection (collapsed → caret rect,
  * expanded → selection rect). Falls back to the anchor's own rect when there

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

@@ -24,7 +24,7 @@ export function linkShortcutPlugin(options: LinkShortcutPluginOptions): Plugin {
   return new Plugin({
     key: new PluginKey('linkShortcut'),
     props: {
-      handleKeyDown: (_view, event): boolean => {
+      handleKeyDown: (view, event): boolean => {
         const isModK =
           (event.metaKey || event.ctrlKey) &&
           !event.shiftKey &&
@@ -34,7 +34,12 @@ export function linkShortcutPlugin(options: LinkShortcutPluginOptions): Plugin {
 
         event.preventDefault()
         event.stopPropagation()
-        editor.commands.openLinkEditor()
+        // An explicit selection (e.g. selecting a link) → edit its URL straight
+        // away; a bare cursor in a link → the default read-only view.
+        const hasSelection = !view.state.selection.empty
+        editor.commands.openLinkEditor(
+          hasSelection ? { startInEdit: true } : undefined,
+        )
         return true
       },
     },

package/src/molecules/editor/extensions/media-drop/media-drop-extension.ts

@@ -0,0 +1,177 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, Selection } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
+import { openImageGroupUploadDialog } from '#molecules/editor/extensions/image-group/imageGroupDialogController'
+
+/**
+ * The single drop pipeline.
+ *
+ * One place decides what a set of dropped files becomes, so every entry point
+ * behaves identically: the precise in-prose drop (this extension's ProseMirror
+ * plugin, which drops at the cursor) and the generous editor-area drop zone
+ * (`EditorDropZone`, which calls `dropFiles` directly).
+ *
+ * Routing by type/count:
+ *   - exactly one image  -> insert it inline (`uploadImage`)
+ *   - several images     -> open the image group dialog (matches the toolbar's
+ *                           multi-image pick, instead of stacking them inline)
+ *   - any video(s)       -> upload inline (`uploadVideoFiles`)
+ *   - anything else      -> upload inline as attachments (`uploadAttachmentFiles`)
+ *
+ * Type routing is feature-detected via the editor's commands, so a kit without
+ * the image, video, or attachment extension simply skips that branch.
+ *
+ * Drop is handled under `handleDOMEvents.drop`; a file paste of non-image,
+ * non-video files is handled under `props.handlePaste` (image/video pastes keep
+ * flowing to their own extensions' paste handlers).
+ */
+
+const IMAGE_RE = /^image\//i
+const VIDEO_RE = /^video\//i
+
+/** Pull every `File` out of a drag `DataTransfer`, regardless of MIME. */
+function collectFiles(dataTransfer: DataTransfer | null | undefined): File[] {
+  const items = dataTransfer?.items
+  if (!items || items.length === 0) return []
+  const files: File[] = []
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].kind === 'file') {
+      const file = items[i].getAsFile()
+      if (file) files.push(file)
+    }
+  }
+  return files
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mediaDrop: {
+      /**
+       * Route dropped/provided files by type and count (the single drop
+       * pipeline). Inserts at the current selection — callers that want a
+       * precise position should move the selection first.
+       */
+      dropFiles: (files: File[]) => ReturnType
+    }
+  }
+}
+
+export const MediaDrop = Extension.create({
+  name: 'mediaDrop',
+
+  addCommands() {
+    return {
+      dropFiles:
+        (files: File[]) =>
+        ({ editor }) => {
+          if (files.length === 0) return false
+
+          const images = files.filter((f) => IMAGE_RE.test(f.type))
+          const videos = files.filter((f) => VIDEO_RE.test(f.type))
+          // Everything that is neither image nor video becomes an attachment.
+          const others = files.filter(
+            (f) => !IMAGE_RE.test(f.type) && !VIDEO_RE.test(f.type),
+          )
+
+          const can = (name: string): boolean =>
+            typeof (editor.commands as Record<string, unknown>)[name] ===
+            'function'
+
+          let handled = false
+
+          if (images.length === 1 && can('uploadImage')) {
+            editor.commands.uploadImage(images[0])
+            handled = true
+          } else if (images.length > 1 && can('uploadImage')) {
+            openImageGroupUploadDialog({ editor, files: images })
+            handled = true
+          }
+
+          if (videos.length > 0 && can('uploadVideoFiles')) {
+            editor.commands.uploadVideoFiles(videos)
+            handled = true
+          }
+
+          if (others.length > 0 && can('uploadAttachmentFiles')) {
+            editor.commands.uploadAttachmentFiles(others)
+            handled = true
+          }
+
+          return handled
+        },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor
+
+    /** Whether a kit exposes a given routing command. */
+    const can = (name: string): boolean =>
+      typeof (editor.commands as Record<string, unknown>)[name] === 'function'
+
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            drop: (view: EditorView, event: DragEvent): boolean => {
+              const files = collectFiles(event.dataTransfer)
+              if (files.length === 0) return false
+              // Only claim drops we can actually route; let ProseMirror handle
+              // the rest. Non-media files route to attachments when available.
+              const hasMedia = files.some(
+                (f) => IMAGE_RE.test(f.type) || VIDEO_RE.test(f.type),
+              )
+              const hasOther = files.some(
+                (f) => !IMAGE_RE.test(f.type) && !VIDEO_RE.test(f.type),
+              )
+              const routable =
+                hasMedia || (hasOther && can('uploadAttachmentFiles'))
+              if (!routable) return false
+
+              event.preventDefault()
+              event.stopPropagation()
+
+              // Drop at the cursor: move the selection to the drop point so the
+              // single-image insert lands where the file was released.
+              const coords = view.posAtCoords({
+                left: event.clientX,
+                top: event.clientY,
+              })
+              if (coords) {
+                view.dispatch(
+                  view.state.tr.setSelection(
+                    Selection.near(view.state.doc.resolve(coords.pos)),
+                  ),
+                )
+              }
+
+              editor.commands.dropFiles(files)
+              return true
+            },
+          },
+
+          // Paste of non-image, non-video files (image/video pastes keep
+          // flowing to their own extensions' paste handlers, so we never claim
+          // them here). Pure-attachment pastes are uploaded at the cursor.
+          handlePaste: (_view, event): boolean => {
+            if (!can('uploadAttachmentFiles')) return false
+            const files = collectFiles(event.clipboardData)
+            if (files.length === 0) return false
+            const others = files.filter(
+              (f) => !IMAGE_RE.test(f.type) && !VIDEO_RE.test(f.type),
+            )
+            // Only claim when the paste is exclusively attachments; otherwise
+            // defer to the image/video paste handlers.
+            if (others.length !== files.length) return false
+
+            event.preventDefault()
+            editor.commands.uploadAttachmentFiles(others)
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})
+
+export default MediaDrop

package/src/molecules/editor/extensions/shared/media-dimensions.ts

@@ -11,6 +11,7 @@
 export interface MediaDimensions {
   width: number
   height: number
+  poster?: string
 }
 
 /** Probe an image source via `<img>.naturalWidth`/`naturalHeight`. */
@@ -35,21 +36,53 @@ export function probeImageDimensions(src: string): Promise<MediaDimensions> {
   })
 }
 
-/** Probe a video source via `<video>.videoWidth`/`videoHeight` (metadata only). */
+function captureVideoPoster(video: HTMLVideoElement): string | undefined {
+  if (!video.videoWidth || !video.videoHeight) return undefined
+  const canvas = document.createElement('canvas')
+  canvas.width = video.videoWidth
+  canvas.height = video.videoHeight
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return undefined
+  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+  return canvas.toDataURL('image/jpeg', 0.72)
+}
+
+/** Probe a video source via `<video>.videoWidth`/`videoHeight` and a poster frame. */
 export function probeVideoDimensions(src: string): Promise<MediaDimensions> {
   return new Promise<MediaDimensions>((resolve, reject) => {
     const video = document.createElement('video')
     video.preload = 'metadata'
+    video.muted = true
+    video.playsInline = true
     const cleanup = () => {
       video.onloadedmetadata = null
+      video.onseeked = null
       video.onerror = null
       video.removeAttribute('src')
       video.load()
     }
-    video.onloadedmetadata = () => {
+    const resolveWithPoster = () => {
       const dims = { width: video.videoWidth, height: video.videoHeight }
+      let poster: string | undefined
+      try {
+        poster = captureVideoPoster(video)
+      } catch {
+        poster = undefined
+      }
       cleanup()
-      resolve(dims)
+      resolve({ ...dims, poster })
+    }
+    video.onloadedmetadata = () => {
+      if (Number.isFinite(video.duration) && video.duration > 0.15) {
+        video.onseeked = resolveWithPoster
+        try {
+          video.currentTime = 0.1
+        } catch {
+          resolveWithPoster()
+        }
+      } else {
+        resolveWithPoster()
+      }
     }
     video.onerror = () => {
       cleanup()

package/src/molecules/editor/extensions/shared/media-node-ops.ts

@@ -22,6 +22,7 @@ import type {
 export interface OptionalDimensions {
   width: number | null
   height: number | null
+  poster?: string
 }
 
 /**
@@ -76,8 +77,10 @@ export function insertPlaceholder(
   mode: InsertMode,
   uploadId: string,
   dims: OptionalDimensions,
+  attrs: Record<string, unknown> = {},
 ): void {
   const node = view.state.schema.nodes[nodeName].create({
+    ...attrs,
     loading: true,
     uploadId,
     src: null,
@@ -99,6 +102,19 @@ export function insertPlaceholder(
   dispatchIfAlive(view, tr)
 }
 
+/** Remove a loading placeholder after user cancellation. */
+export function removeNodeByUploadId(
+  view: EditorView,
+  nodeName: string,
+  uploadId: string,
+): void {
+  const pos = findNodeByUploadId(view, nodeName, uploadId)
+  if (pos === null) return
+  const node = view.state.doc.nodeAt(pos)
+  if (!node) return
+  dispatchIfAlive(view, view.state.tr.delete(pos, pos + node.nodeSize))
+}
+
 /** Write the uploaded src/dimensions back onto the placeholder node. */
 export function applyUploadSuccess(
   view: EditorView,
@@ -118,6 +134,7 @@ export function applyUploadSuccess(
       width: uploaded.width || node.attrs.width,
       height: uploaded.height || node.attrs.height,
       loading: false,
+      error: null,
     }),
   )
 }

package/src/molecules/editor/extensions/shared/media-plugin.test.ts

@@ -0,0 +1,60 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect, vi } from 'vitest'
+
+vi.mock('#molecules/editor/extensions/shared/node-view', () => ({
+  dispatchIfAlive: vi.fn(),
+}))
+
+import { createMediaPlugin } from '#molecules/editor/extensions/shared/media-plugin'
+import { dispatchIfAlive } from '#molecules/editor/extensions/shared/node-view'
+import type { MediaUploadConfig } from '#molecules/editor/extensions/shared/media-upload-types'
+
+function mediaNode(src: string, attrs: Record<string, unknown> = {}) {
+  return {
+    type: { name: 'image' },
+    attrs: { src, ...attrs },
+  }
+}
+
+describe('media plugin dimension backfill', () => {
+  it('does not write stale dimensions when the node at the captured position changed source', async () => {
+    const inserted = mediaNode('/files/old.png')
+    const live = mediaNode('/files/new.png')
+    const config: MediaUploadConfig = {
+      nodeName: 'image',
+      accept: /image/i,
+      storeBase64: true,
+      probeDimensions: vi.fn(async () => ({ width: 100, height: 50 })),
+    }
+    const view = {
+      state: {
+        doc: { nodeAt: () => live },
+        tr: { setNodeMarkup: vi.fn() },
+      },
+    }
+    const plugin = createMediaPlugin({} as never, config, {
+      editor: { view } as never,
+      options: {},
+    })
+    const newState = {
+      doc: {
+        descendants: (visit: (node: unknown, pos: number) => void) => {
+          visit(inserted, 5)
+        },
+        nodeAt: () => inserted,
+      },
+    }
+
+    ;(plugin as any).spec.appendTransaction(
+      [{ docChanged: true }],
+      {} as never,
+      newState,
+    )
+    await Promise.resolve()
+
+    expect(dispatchIfAlive).not.toHaveBeenCalled()
+  })
+})

package/src/molecules/editor/extensions/shared/media-plugin.ts

@@ -8,7 +8,7 @@
  * is handled under `props.handlePaste` (NOT `handleDOMEvents.paste`), per the
  * conventions §1.6 contract.
  */
-import { Plugin, Selection } from '@tiptap/pm/state'
+import { Plugin } from '@tiptap/pm/state'
 import type { Transaction, EditorState } from '@tiptap/pm/state'
 import type { EditorView } from '@tiptap/pm/view'
 import type { Editor } from '@tiptap/core'
@@ -61,42 +61,11 @@ export function createMediaPlugin(
 
   return new Plugin({
     props: {
-      handleDOMEvents: {
-        drop: (view: EditorView, event: DragEvent): boolean => {
-          const editor = host.editor
-          const options = resolve()
-          if (
-            !editor ||
-            !event.dataTransfer?.files?.length ||
-            !options.uploadFunction
-          ) {
-            return false
-          }
-          const files = collectFiles(event.dataTransfer, config.accept)
-          if (files.length === 0) return false
-
-          event.preventDefault()
-
-          let pos: number | null = null
-          const coords = view.posAtCoords({
-            left: event.clientX,
-            top: event.clientY,
-          })
-          if (coords) {
-            pos = coords.pos
-            view.dispatch(
-              view.state.tr.setSelection(
-                Selection.near(view.state.doc.resolve(pos)),
-              ),
-            )
-          }
-
-          void engine.processMultiple(files, editor, pos, options)
-          return true
-        },
-      },
-
-      handlePaste: (view: EditorView, event: ClipboardEvent): boolean => {
+      // NOTE: drop is NOT handled here. The single drop pipeline lives in the
+      // `MediaDrop` extension (`media-drop-extension.ts`), which routes a whole
+      // drop by type/count. This per-node plugin owns only paste + the
+      // intrinsic-dimension back-fill below.
+      handlePaste: (_view: EditorView, event: ClipboardEvent): boolean => {
         const editor = host.editor
         const options = resolve()
         if (!editor || !options.uploadFunction) return false
@@ -145,6 +114,7 @@ export function createMediaPlugin(
             const view = editor.view
             const live = view.state.doc.nodeAt(pos)
             if (!live || live.type.name !== config.nodeName) return
+            if (live.attrs.src !== src) return
             if (live.attrs.width != null && live.attrs.height != null) return
             dispatchIfAlive(
               view,