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

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

@@ -14,6 +14,8 @@
  */
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
+const createUploadId = vi.hoisted(() => vi.fn(() => 'uid-1'))
+
 vi.mock('#utils/file-to-base64', () => ({
   default: vi.fn(async () => 'data:image/png;base64,AAAA'),
 }))
@@ -21,12 +23,16 @@ vi.mock('#molecules/editor/extensions/shared/url-safety', () => ({
   isSafeUrl: () => true,
 }))
 vi.mock('#molecules/editor/extensions/shared/upload-id', () => ({
-  createUploadId: () => 'uid-1',
+  createUploadId,
 }))
 vi.mock('#molecules/editor/extensions/shared/media-upload-state', () => ({
   setLocalFile: vi.fn(),
+  updateLocalFile: vi.fn(),
   getLocalFile: vi.fn(() => ({ file: new File(['x'], 'x.png') })),
   deleteLocalFile: vi.fn(),
+  setUploadProgress: vi.fn(),
+  updateUploadProgress: vi.fn(),
+  deleteUploadProgress: vi.fn(),
 }))
 vi.mock('#molecules/editor/extensions/shared/media-node-ops', () => ({
   insertPlaceholder: vi.fn(),
@@ -38,7 +44,10 @@ vi.mock('#molecules/editor/extensions/shared/media-node-ops', () => ({
 
 import { createMediaUploadEngine } from '#molecules/editor/extensions/shared/media-upload-engine'
 import fileToBase64 from '#utils/file-to-base64'
-import { setLocalFile } from '#molecules/editor/extensions/shared/media-upload-state'
+import {
+  setLocalFile,
+  deleteLocalFile,
+} from '#molecules/editor/extensions/shared/media-upload-state'
 import {
   insertPlaceholder,
   applyUploadSuccess,
@@ -64,6 +73,8 @@ const config: MediaUploadConfig = {
 describe('media upload engine — live editor.view', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    createUploadId.mockReset()
+    createUploadId.mockReturnValue('uid-1')
   })
 
   it('dispatches against the CURRENT editor.view, not the one captured at call time', async () => {
@@ -99,6 +110,7 @@ describe('media upload engine — live editor.view', () => {
       'replace',
       'uid-1',
       expect.anything(),
+      expect.anything(),
     )
 
     // Host swaps the editor's view while the upload is in flight.
@@ -141,6 +153,31 @@ describe('media upload engine — live editor.view', () => {
 
     expect(applyUploadSuccess).not.toHaveBeenCalled()
     expect(applyUploadError).not.toHaveBeenCalled()
+    expect(deleteLocalFile).toHaveBeenCalledWith('uid-1')
+  })
+
+  it('cleans up the old staged file after reupload creates a replacement upload id', async () => {
+    createUploadId.mockReturnValue('uid-2')
+    const editor = {
+      view: {
+        ...makeView(),
+        state: {
+          doc: {
+            nodeAt: () => ({ attrs: { uploadId: 'old-uid' } }),
+          },
+          selection: { from: 0 },
+        },
+      },
+      isDestroyed: false,
+    } as never
+
+    const engine = createMediaUploadEngine(config)
+    await engine.reupload(editor, 0, {
+      uploadFunction: async () => ({ file_url: '/files/x.png' }),
+    })
+
+    expect(deleteLocalFile).toHaveBeenCalledWith('uid-2')
+    expect(deleteLocalFile).toHaveBeenCalledWith('old-uid')
   })
 
   it('does not base64-encode files when the media config stores only the File', async () => {

package/src/molecules/editor/extensions/shared/media-upload-engine.ts

@@ -20,12 +20,17 @@
  */
 import type { Editor } from '@tiptap/core'
 import fileToBase64 from '#utils/file-to-base64'
+import { fileSizeLimitMessage } from '#utils/fileSize'
 import { isSafeUrl } from '#molecules/editor/extensions/shared/url-safety'
 import { findNodeByUploadId } from '#molecules/editor/extensions/shared/node-view'
 import {
   deleteLocalFile,
+  deleteUploadProgress,
   getLocalFile,
+  setUploadProgress,
   setLocalFile,
+  updateLocalFile,
+  updateUploadProgress,
 } from '#molecules/editor/extensions/shared/media-upload-state'
 import { createUploadId } from '#molecules/editor/extensions/shared/upload-id'
 import {
@@ -34,6 +39,7 @@ import {
   backfillDimensions,
   findNodeBySource,
   insertPlaceholder,
+  removeNodeByUploadId,
   type OptionalDimensions,
 } from '#molecules/editor/extensions/shared/media-node-ops'
 import type {
@@ -41,6 +47,7 @@ import type {
   MediaUploadConfig,
   MediaUploadEngine,
   MediaUploadOptions,
+  MediaUploadRequestOptions,
   UploadedFile,
   UploadResult,
 } from '#molecules/editor/extensions/shared/media-upload-types'
@@ -49,6 +56,8 @@ export type {
   MediaUploadConfig,
   MediaUploadEngine,
   MediaUploadOptions,
+  MediaUploadRequestOptions,
+  UploadFunction,
   UploadedFile,
   UploadResult,
 } from '#molecules/editor/extensions/shared/media-upload-types'
@@ -63,7 +72,9 @@ export type {
  * shared storage.)
  */
 export function resolveUploadOptions(
-  raw: Partial<MediaUploadOptions> & { editor?: { storage?: unknown } | null } = {},
+  raw: Partial<MediaUploadOptions> & {
+    editor?: { storage?: unknown } | null
+  } = {},
 ): MediaUploadOptions {
   const { editor, ...options } = raw
   const storage = editor?.storage as Record<string, unknown> | undefined
@@ -85,11 +96,12 @@ export function resolveUploadOptions(
 export async function uploadFile(
   file: File,
   options: MediaUploadOptions,
+  requestOptions?: MediaUploadRequestOptions,
 ): Promise<UploadedFile> {
   if (!options.uploadFunction) {
     throw new Error('uploadFunction option is not provided')
   }
-  const uploaded = await options.uploadFunction(file)
+  const uploaded = await options.uploadFunction(file, requestOptions)
   if (
     !uploaded?.file_url ||
     !isSafeUrl(uploaded.file_url, { base: window.location.origin })
@@ -129,7 +141,9 @@ export async function dataUrlOrBlobToFile(
 ): Promise<File> {
   const response = await fetch(src)
   const blob = await response.blob()
-  return new File([blob], filename, { type: blob.type || 'application/octet-stream' })
+  return new File([blob], filename, {
+    type: blob.type || 'application/octet-stream',
+  })
 }
 
 /** Build a media-upload engine for one node type. */
@@ -166,13 +180,45 @@ export function createMediaUploadEngine(
     pos: number | null | undefined,
     mode: InsertMode,
     options: MediaUploadOptions,
+    placeholderAttrs: Record<string, unknown> = {},
   ): Promise<string | null> {
     if (!options.uploadFunction) {
       console.error('uploadFunction option is not provided')
       return null
     }
     const uploadId = createUploadId()
+    const abortController = new AbortController()
+    setUploadProgress(uploadId, {
+      loaded: 0,
+      total: file.size,
+      percent: 0,
+      abort: () => abortController.abort(),
+    })
     try {
+      // Reject over-limit files before the expensive staging work: no base64
+      // encode, no dimension probe — just an error placeholder with the staged
+      // file kept so "Try again" / "Choose another" still work.
+      const validationError = fileSizeLimitMessage(file)
+      if (validationError) {
+        setLocalFile(uploadId, { file })
+        if (editor.isDestroyed) {
+          deleteLocalFile(uploadId)
+          deleteUploadProgress(uploadId)
+          return uploadId
+        }
+        insertPlaceholder(
+          editor.view,
+          nodeName,
+          pos,
+          mode,
+          uploadId,
+          { width: null, height: null },
+          placeholderAttrs,
+        )
+        applyUploadError(editor.view, nodeName, uploadId, validationError)
+        return uploadId
+      }
+
       const b64 = storeBase64 ? await fileToBase64(file) : null
       const probeSrc = b64 ?? URL.createObjectURL(file)
       setLocalFile(uploadId, b64 ? { b64, file } : { file })
@@ -182,11 +228,36 @@ export function createMediaUploadEngine(
       } finally {
         if (!b64) URL.revokeObjectURL(probeSrc)
       }
-      if (editor.isDestroyed) return uploadId
-      insertPlaceholder(editor.view, nodeName, pos, mode, uploadId, dims)
+      if (dims.poster) updateLocalFile(uploadId, { poster: dims.poster })
+      if (editor.isDestroyed) {
+        deleteLocalFile(uploadId)
+        deleteUploadProgress(uploadId)
+        return uploadId
+      }
+      insertPlaceholder(
+        editor.view,
+        nodeName,
+        pos,
+        mode,
+        uploadId,
+        dims,
+        placeholderAttrs,
+      )
 
-      const uploaded = await options.uploadFunction(file)
-      if (editor.isDestroyed) return uploadId
+      const uploaded = await options.uploadFunction(file, {
+        signal: abortController.signal,
+        onProgress: (progress) => {
+          updateUploadProgress(uploadId, {
+            ...progress,
+            abort: () => abortController.abort(),
+          })
+        },
+      })
+      if (editor.isDestroyed) {
+        deleteLocalFile(uploadId)
+        deleteUploadProgress(uploadId)
+        return uploadId
+      }
       if (
         !uploaded?.file_url ||
         !isSafeUrl(uploaded.file_url, { base: window.location.origin })
@@ -204,11 +275,23 @@ export function createMediaUploadEngine(
       // survive so `reupload` ("Try again") can re-read it.
       deleteLocalFile(uploadId)
     } catch (error) {
+      if (abortController.signal.aborted) {
+        if (!editor.isDestroyed) {
+          removeNodeByUploadId(editor.view, nodeName, uploadId)
+        }
+        deleteLocalFile(uploadId)
+        deleteUploadProgress(uploadId)
+        return uploadId
+      }
       const message =
         (error as Error)?.message || `Failed to upload ${nodeName}`
       if (!editor.isDestroyed) {
         applyUploadError(editor.view, nodeName, uploadId, message)
       }
+    } finally {
+      if (!abortController.signal.aborted) {
+        deleteUploadProgress(uploadId)
+      }
     }
     return uploadId
   }
@@ -226,8 +309,9 @@ export function createMediaUploadEngine(
     editor: Editor,
     pos: number,
     options: MediaUploadOptions,
+    attrs: Record<string, unknown> = {},
   ): Promise<void> {
-    await run(file, editor, pos, 'replace', options)
+    await run(file, editor, pos, 'replace', options, attrs)
   }
 
   async function reupload(
@@ -238,11 +322,21 @@ export function createMediaUploadEngine(
     const node = editor.view.state.doc.nodeAt(pos)
     const uploadId = node?.attrs.uploadId as string | undefined
     const entry = uploadId ? getLocalFile(uploadId) : undefined
-    if (!entry) {
+    if (!uploadId || !entry) {
       console.error(`reupload: no staged file for node at ${pos}`)
       return
     }
-    await run(entry.file, editor, pos, 'replace', options)
+    const replacementUploadId = await run(
+      entry.file,
+      editor,
+      pos,
+      'replace',
+      options,
+      node?.attrs ?? {},
+    )
+    if (replacementUploadId) {
+      deleteLocalFile(uploadId)
+    }
   }
 
   /**

package/src/molecules/editor/extensions/shared/media-upload-state.ts

@@ -6,6 +6,7 @@
  * This module is the lifecycle owner of `localFileMap`; the engine deletes
  * entries here in a `finally` (covering success, error and mid-upload deletion).
  */
+import { reactive } from 'vue'
 
 /**
  * A staged local file awaiting upload.
@@ -14,17 +15,38 @@
  */
 export interface LocalFileEntry {
   b64?: string
+  poster?: string
   file: File
 }
 
+export interface UploadProgressEntry {
+  loaded: number
+  total: number
+  percent: number
+  abort?: () => void
+}
+
 /** uploadId -> staged local file. Read by node views for the loading preview. */
 export const localFileMap = new Map<string, LocalFileEntry>()
 
+/** uploadId -> transient progress/cancel state. Reactive for node views. */
+export const uploadProgressMap = reactive(
+  new Map<string, UploadProgressEntry>(),
+)
+
 /** Store the staged file for an upload id. */
 export function setLocalFile(uploadId: string, entry: LocalFileEntry): void {
   localFileMap.set(uploadId, entry)
 }
 
+export function updateLocalFile(
+  uploadId: string,
+  patch: Partial<LocalFileEntry>,
+): void {
+  const current = localFileMap.get(uploadId)
+  if (current) localFileMap.set(uploadId, { ...current, ...patch })
+}
+
 /** Read the staged file for an upload id, if present. */
 export function getLocalFile(uploadId: string): LocalFileEntry | undefined {
   return localFileMap.get(uploadId)
@@ -34,3 +56,36 @@ export function getLocalFile(uploadId: string): LocalFileEntry | undefined {
 export function deleteLocalFile(uploadId: string): void {
   localFileMap.delete(uploadId)
 }
+
+export function setUploadProgress(
+  uploadId: string,
+  entry: UploadProgressEntry,
+): void {
+  uploadProgressMap.set(uploadId, entry)
+}
+
+export function getUploadProgress(
+  uploadId: string,
+): UploadProgressEntry | undefined {
+  return uploadProgressMap.get(uploadId)
+}
+
+export function updateUploadProgress(
+  uploadId: string,
+  patch: Partial<UploadProgressEntry>,
+): void {
+  const current = uploadProgressMap.get(uploadId) ?? {
+    loaded: 0,
+    total: 0,
+    percent: 0,
+  }
+  uploadProgressMap.set(uploadId, { ...current, ...patch })
+}
+
+export function abortUpload(uploadId: string): void {
+  uploadProgressMap.get(uploadId)?.abort?.()
+}
+
+export function deleteUploadProgress(uploadId: string): void {
+  uploadProgressMap.delete(uploadId)
+}

package/src/molecules/editor/extensions/shared/media-upload-types.ts

@@ -10,6 +10,35 @@ import type { Editor } from '@tiptap/core'
 import type { UploadedFile as FrappeUploadedFile } from '#utils/useFileUpload'
 import type { MediaDimensions } from '#molecules/editor/extensions/shared/media-dimensions'
 
+/**
+ * Programmatic upload commands, declared once in a dedicated `mediaUpload`
+ * group (tiptap flattens every group into `RawCommands`, so callers still use
+ * the flat `editor.commands.uploadVideoFiles`).
+ *
+ * Kept out of the `video` group only for symmetry with the legacy-conflict
+ * rationale on images: the legacy TextEditor augments `Commands.image`, so a
+ * divergent second declaration of a shared group is a TS2717 error. A separate
+ * group sidesteps that.
+ */
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mediaUpload: {
+      /** Upload and insert already-provided video files (e.g. from a drop). */
+      uploadVideoFiles: (files: File[], pos?: number | null) => ReturnType
+      /** Replace an existing image node while keeping its caption/options. */
+      replaceImage: (pos: number, file: File) => ReturnType
+      /** Replace an existing video node while keeping its caption/options. */
+      replaceVideo: (pos: number, file: File) => ReturnType
+      /** Toggle video playback options. */
+      setVideoOptions: (options: {
+        autoplay?: boolean
+        loop?: boolean
+        muted?: boolean
+      }) => ReturnType
+    }
+  }
+}
+
 /** Result of a successful upload. Must carry a `file_url`. */
 export interface UploadedFile extends Partial<FrappeUploadedFile> {
   file_url: string
@@ -17,13 +46,34 @@ export interface UploadedFile extends Partial<FrappeUploadedFile> {
   height?: number | null
 }
 
+export interface MediaUploadProgress {
+  loaded: number
+  total: number
+  percent: number
+}
+
+export interface MediaUploadRequestOptions {
+  signal?: AbortSignal
+  onProgress?: (progress: MediaUploadProgress) => void
+}
+
+/**
+ * Host-provided upload function. The engine passes `options` (abort signal +
+ * progress callback) on every call; implementations may ignore it, so legacy
+ * single-parameter functions remain assignable.
+ */
+export type UploadFunction = (
+  file: File,
+  options?: MediaUploadRequestOptions,
+) => Promise<UploadedFile>
+
 /**
  * Effective upload options. Mirrors the legacy extension option shape: the only
  * field the pipeline reads is `uploadFunction`; `HTMLAttributes` and any extra
  * keys are carried through untouched.
  */
 export interface MediaUploadOptions {
-  uploadFunction?: ((file: File) => Promise<UploadedFile>) | null
+  uploadFunction?: UploadFunction | null
   HTMLAttributes?: Record<string, unknown>
   [k: string]: unknown
 }
@@ -74,6 +124,7 @@ export interface MediaUploadEngine {
     editor: Editor,
     pos: number,
     options: MediaUploadOptions,
+    attrs?: Record<string, unknown>,
   ): Promise<void>
   /** Re-run an upload for the failed node at `pos` using its staged file. */
   reupload(

package/src/molecules/editor/extensions/shared/suggestion-helpers.ts

@@ -1,4 +1,5 @@
 import type { Editor, Range } from '@tiptap/core'
+import type { EditorState } from '@tiptap/pm/state'
 
 /**
  * Shared helpers for slash/emoji/mention/tag suggesters: DRY node-insertion,
@@ -46,6 +47,25 @@ export function filterByQuery<T>(items: T[], query: string, key: keyof T): T[] {
   })
 }
 
+/**
+ * True when `pos` sits inside a code context — either a code-block node or text
+ * carrying the inline `code` mark. Suggesters (`@`/`#`/`:`) use this to stay
+ * inert inside code, where a `:emoji`/`#tag`/`@mention` trigger would otherwise
+ * corrupt the literal source the author is typing.
+ *
+ * Detection is structural: code-block nodes carry `spec.code === true`, and
+ * inline code is a mark — so we walk the resolved ancestors for the former and
+ * test the position's mark set for the latter.
+ */
+export function isInCode(state: EditorState, pos: number): boolean {
+  const $pos = state.doc.resolve(pos)
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    if ($pos.node(depth).type.spec.code) return true
+  }
+  const codeMark = state.schema.marks.code
+  return codeMark ? codeMark.isInSet($pos.marks()) != null : false
+}
+
 /**
  * Typed replacement for
  * `editor.extensionManager.extensions.find((e) => e.name === name)!.options`.

package/src/molecules/editor/extensions/shared/suggestion-types.ts

@@ -19,6 +19,13 @@ export interface BaseSuggestionItem {
   display?: string
   title?: string
   name?: string
+  /**
+   * Optional section label (dropdown-group style). Consecutive items sharing
+   * a `group` render under one non-interactive header in `SuggestionList`;
+   * items without one render headerless. Display-only — keyboard navigation
+   * stays flat.
+   */
+  group?: string
   [key: string]: unknown
 }
 

package/src/molecules/editor/extensions/shared/upload-types.ts

@@ -11,6 +11,7 @@
  */
 export type {
   MediaUploadOptions,
+  UploadFunction,
   UploadResult,
   UploadedFile,
 } from '#molecules/editor/extensions/shared/media-upload-types'

package/src/molecules/editor/extensions/slash-commands/slash-commands-extension.test.ts

@@ -0,0 +1,38 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect, vi } from 'vitest'
+import { SlashCommands } from './slash-commands-extension'
+
+describe('SlashCommands', () => {
+  it('opens the link editor for the Link command', () => {
+    const chain = {
+      focus: vi.fn(() => chain),
+      deleteRange: vi.fn(() => chain),
+      insertContent: vi.fn(() => chain),
+      setTextSelection: vi.fn(() => chain),
+      run: vi.fn(() => true),
+    }
+    const editor = {
+      schema: { marks: { link: {} }, nodes: {} },
+      commands: { openLinkEditor: vi.fn() },
+      chain: vi.fn(() => chain),
+    }
+    const options = (SlashCommands as any).config.addOptions.call({})
+    const [item] = options.suggestion.items({ query: 'link', editor })
+
+    options.suggestion.command({
+      editor,
+      range: { from: 3, to: 8 },
+      props: item,
+    })
+
+    expect(chain.deleteRange).toHaveBeenCalledWith({ from: 3, to: 8 })
+    expect(chain.insertContent).toHaveBeenCalledWith('Link')
+    expect(chain.setTextSelection).toHaveBeenCalledWith({ from: 3, to: 7 })
+    expect(editor.commands.openLinkEditor).toHaveBeenCalledWith({
+      startInEdit: true,
+    })
+  })
+})