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

package/src/molecules/editor/composables/useNodeViewResize.ts

@@ -2,7 +2,7 @@
  * Aspect-ratio-locked resize-drag for media / embed node views.
  *
  * Behavior preserved from `MediaNodeView.vue` + `IframeNodeView.vue`:
- * - `startResize` (on the handle's `mousedown`) records the start X and the
+ * - `startResize` (on the handle's `pointerdown`) records the start X and the
  *   element's current `offsetWidth`, locks the aspect ratio, and registers
  *   `mousemove` / `mouseup` listeners on `window` plus an `ew-resize` body cursor.
  * - `mousemove` applies temporary inline `width`/`height` to the element for
@@ -29,22 +29,46 @@ export interface ResizeArgs {
    * Optional — omit when there is no clipping wrapper.
    */
   containerEl?: () => HTMLElement | null
-  /** Aspect ratio expressed as height / width; multiplied by the new width. */
+  /**
+   * Fallback aspect ratio (height / width) used only when the element has no
+   * measurable rendered size at drag start. The drag normally locks the ratio
+   * from the element's live `offsetHeight / offsetWidth` so the shape on screen
+   * is preserved exactly — `getAspectRatio` can disagree with what's painted
+   * when a node stores only one dimension (the other coming from CSS
+   * `height: auto`), which used to distort the media mid-drag.
+   */
   getAspectRatio: () => number
   /** TipTap v3 node-view `getPos`; the commit is skipped when it is invalid. */
   getPos: () => number | undefined
   /** Persist the committed size (e.g. via `updateAttributes`). */
   onCommit: (size: { width: number; height: number }) => void
+  /**
+   * How the node view renders the media element's COMMITTED size:
+   * - 'attribute' (default): `width=`/`height=` attributes (img / video). The
+   *   drag's inline styles are cleared after commit — they'd otherwise mask
+   *   future attribute updates (keyboard resize, collab).
+   * - 'style': a Vue `:style` binding (e.g. the iframe's frameStyle). The
+   *   drag's inline styles are LEFT IN PLACE: they already equal the committed
+   *   size, and clearing them would wipe the binding's write (Vue only
+   *   re-writes a style property when its bound VALUE changes).
+   */
+  mediaSizing?: 'attribute' | 'style'
   /** Minimum width in px. Default 50 (matches the image node view). */
   minWidth?: number
   /** Reserved px subtracted from the editor width as the max. Default 0. */
   maxWidthPadding?: number
 }
 
+/** Which edge the drag started from; a left-edge drag inverts the delta. */
+export type ResizeEdge = 'left' | 'right'
+
 export function useNodeViewResize(
   editor: Editor,
   args: ResizeArgs,
-): { isResizing: Ref<boolean>; startResize: (event: PointerEvent | MouseEvent) => void } {
+): {
+  isResizing: Ref<boolean>
+  startResize: (event: PointerEvent | MouseEvent, edge?: ResizeEdge) => void
+} {
   const isResizing = ref(false)
   const minWidth = args.minWidth ?? 50
   const maxWidthPadding = args.maxWidthPadding ?? 0
@@ -52,8 +76,12 @@ export function useNodeViewResize(
   let startDragX = 0
   let startWidth = 0
   let aspectRatio = 1
+  let dragDirection = 1
 
-  function startResize(event: PointerEvent | MouseEvent): void {
+  function startResize(
+    event: PointerEvent | MouseEvent,
+    edge: ResizeEdge = 'right',
+  ): void {
     if (!editor.isEditable) return
     const el = args.mediaEl()
     if (!el) return
@@ -61,20 +89,31 @@ export function useNodeViewResize(
     isResizing.value = true
     startDragX = event.clientX
     startWidth = el.offsetWidth
-    aspectRatio = args.getAspectRatio() || 1
-
-    window.addEventListener('mousemove', handleResize)
-    window.addEventListener('mouseup', stopResize)
+    // Lock the ratio to the element's painted box so the drag preserves the
+    // exact shape on screen. Falls back to the supplied aspect only when the
+    // element isn't laid out yet (offsetWidth 0). Reading the rendered size
+    // avoids the stored-attrs mismatch (e.g. a node with width but no height,
+    // whose true height comes from CSS `height: auto`) that distorted media
+    // mid-drag — it became "wide" while dragging, then snapped back on release.
+    const renderedAspect = el.offsetWidth ? el.offsetHeight / el.offsetWidth : 0
+    aspectRatio = renderedAspect || args.getAspectRatio() || 1
+    // Dragging the LEFT handle outward moves the pointer left (negative
+    // clientX delta) but should grow the node — invert the delta.
+    dragDirection = edge === 'left' ? -1 : 1
+
+    window.addEventListener('pointermove', handleResize)
+    window.addEventListener('pointerup', stopResize)
+    window.addEventListener('pointercancel', stopResize)
     document.body.style.cursor = 'ew-resize'
   }
 
-  function handleResize(event: MouseEvent): void {
+  function handleResize(event: PointerEvent): void {
     if (!isResizing.value) return
     const el = args.mediaEl()
     if (!el) return
 
     const editorWidth = editor.view.dom.clientWidth
-    const deltaX = event.clientX - startDragX
+    const deltaX = (event.clientX - startDragX) * dragDirection
     const newWidth = Math.max(
       minWidth,
       Math.min(startWidth + deltaX, editorWidth - maxWidthPadding),
@@ -102,16 +141,35 @@ export function useNodeViewResize(
     const width = el.offsetWidth
     const height = el.offsetHeight
 
-    // Clear temporary styles before committing so the node re-renders cleanly.
-    el.style.width = ''
-    el.style.height = ''
-
-    // Clear the inline container width so the committed attrs/render take over.
-    const container = args.containerEl?.()
-    if (container) container.style.width = ''
-
-    if (safeGetPos(args.getPos) === null) return
+    if (safeGetPos(args.getPos) === null) {
+      // No commit happened — drop the drag styles so the (possibly stale)
+      // view falls back to its bound size.
+      el.style.width = ''
+      el.style.height = ''
+      const container = args.containerEl?.()
+      if (container) container.style.width = ''
+      return
+    }
     onCommitGuarded(width, height)
+    // Container width and a 'style'-sized media element are owned by Vue
+    // `:style` bindings on the SAME properties the drag wrote. Their inline
+    // values already equal the committed size, so leave them in place — the
+    // next binding VALUE change overwrites them. Clearing them here used to
+    // race the commit re-render: Vue wrote the committed width first, the
+    // deferred clear wiped it, and Vue never re-writes an unchanged value —
+    // leaving the block container at full editor width until some later
+    // value-changing render (the "huge ring around a small image" bug).
+    //
+    // Only an 'attribute'-sized media element (img/video, width=/height=)
+    // needs its inline styles cleared, or they'd mask future attribute
+    // updates. rAF defers that past the commit re-render so the old attribute
+    // size never paints (clearing synchronously flashed a page jump).
+    if ((args.mediaSizing ?? 'attribute') === 'attribute') {
+      requestAnimationFrame(() => {
+        el.style.width = ''
+        el.style.height = ''
+      })
+    }
   }
 
   function onCommitGuarded(width: number, height: number): void {
@@ -119,8 +177,9 @@ export function useNodeViewResize(
   }
 
   function removeWindowListeners(): void {
-    window.removeEventListener('mousemove', handleResize)
-    window.removeEventListener('mouseup', stopResize)
+    window.removeEventListener('pointermove', handleResize)
+    window.removeEventListener('pointerup', stopResize)
+    window.removeEventListener('pointercancel', stopResize)
   }
 
   onUnmounted(() => {

package/src/molecules/editor/composables/useTableCellColorState.ts

@@ -0,0 +1,78 @@
+import type { Editor } from '@tiptap/core'
+import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
+import { CellSelection, isInTable, selectionCell } from '@tiptap/pm/tables'
+import { PALETTE_NAMES } from '#molecules/editor/extensions/shared/color-palette'
+
+export interface TableCellColorState {
+  /** Named background of the anchor cell, or `null` when none / not in a table. */
+  activeBackground: Ref<string | null>
+  /** Named text color active across the selection, or `null`. */
+  activeTextColor: Ref<string | null>
+  /** Fill the selected cell(s); `null` clears the fill. */
+  setBackground: (name: string | null) => void
+  /** Color all text in the selected cell(s); `null` clears it. */
+  setTextColor: (name: string | null) => void
+}
+
+/**
+ * Reactive active-color state + setters for the table cell-color picker. Mirrors
+ * `useNamedColorState`'s leak-free subscription pattern (attach in `onMounted`,
+ * detach in `onBeforeUnmount`) and guards every read/write against a destroyed
+ * editor.
+ */
+export function useTableCellColorState(editor: Editor): TableCellColorState {
+  const activeBackground = ref<string | null>(null)
+  const activeTextColor = ref<string | null>(null)
+
+  const readBackground = (): string | null => {
+    const { state } = editor
+    if (!isInTable(state)) return null
+    const { selection } = state
+    // The anchor cell's value: for a uniform selection it's the shared color,
+    // otherwise just the anchor's — enough to drive the active swatch.
+    const $cell =
+      selection instanceof CellSelection
+        ? selection.$anchorCell
+        : selectionCell(state)
+    const value = $cell?.nodeAfter?.attrs?.backgroundColor
+    return typeof value === 'string' ? value : null
+  }
+
+  const readTextColor = (): string | null => {
+    for (const name of PALETTE_NAMES) {
+      if (editor.isActive('textStyle', { color: name })) return name
+    }
+    return null
+  }
+
+  const sync = () => {
+    if (!editor || editor.isDestroyed) return
+    activeBackground.value = readBackground()
+    activeTextColor.value = readTextColor()
+  }
+
+  onMounted(() => {
+    sync()
+    if (!editor || editor.isDestroyed) return
+    editor.on('transaction', sync)
+    editor.on('selectionUpdate', sync)
+  })
+
+  onBeforeUnmount(() => {
+    if (!editor) return
+    editor.off('transaction', sync)
+    editor.off('selectionUpdate', sync)
+  })
+
+  const setBackground = (name: string | null) => {
+    if (!editor || editor.isDestroyed) return
+    editor.chain().focus().setCellBackground(name).run()
+  }
+
+  const setTextColor = (name: string | null) => {
+    if (!editor || editor.isDestroyed) return
+    editor.chain().focus().setCellTextColor(name).run()
+  }
+
+  return { activeBackground, activeTextColor, setBackground, setTextColor }
+}

package/src/molecules/editor/composables/useWindowFileDragging.ts

@@ -0,0 +1,68 @@
+import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
+
+/**
+ * Shared, reference-counted signal that is `true` while the user is dragging
+ * file(s) anywhere over the window.
+ *
+ * Editor drop zones use it to reveal themselves the moment a file enters the
+ * page — not only once it is over the editor — so the drop targets are
+ * discoverable instead of invisible until hovered.
+ *
+ * Listeners are bound in the CAPTURE phase so the `drop`/`dragend` resets still
+ * fire when an inner handler (the media ProseMirror plugin, a scoped drop zone)
+ * calls `stopPropagation()` on the bubbling event. A single set of listeners is
+ * shared across all callers via the ref count.
+ *
+ * Detection only — it never calls `preventDefault`, so it does not turn the
+ * window into a drop target or otherwise change drop handling.
+ */
+const isWindowFileDragging = ref(false)
+let refCount = 0
+// Depth counter: dragenter on a child fires before dragleave on its parent, so
+// the count stays > 0 while the pointer is anywhere inside the window and only
+// hits 0 when the drag truly leaves it.
+let depth = 0
+
+const hasFiles = (event: DragEvent): boolean =>
+  !!event.dataTransfer && Array.from(event.dataTransfer.types).includes('Files')
+
+const reset = () => {
+  depth = 0
+  isWindowFileDragging.value = false
+}
+
+const onDragEnter = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  depth += 1
+  isWindowFileDragging.value = true
+}
+
+const onDragLeave = () => {
+  depth = Math.max(0, depth - 1)
+  if (depth === 0) isWindowFileDragging.value = false
+}
+
+export function useWindowFileDragging(): Ref<boolean> {
+  onMounted(() => {
+    if (refCount === 0) {
+      window.addEventListener('dragenter', onDragEnter, true)
+      window.addEventListener('dragleave', onDragLeave, true)
+      window.addEventListener('drop', reset, true)
+      window.addEventListener('dragend', reset, true)
+    }
+    refCount += 1
+  })
+
+  onBeforeUnmount(() => {
+    refCount = Math.max(0, refCount - 1)
+    if (refCount === 0) {
+      window.removeEventListener('dragenter', onDragEnter, true)
+      window.removeEventListener('dragleave', onDragLeave, true)
+      window.removeEventListener('drop', reset, true)
+      window.removeEventListener('dragend', reset, true)
+      reset()
+    }
+  })
+
+  return isWindowFileDragging
+}

package/src/molecules/editor/extensions/attachment/attachment-engine.ts

@@ -0,0 +1,250 @@
+/**
+ * The attachment upload pipeline.
+ *
+ * Attachments are non-image, non-video files (pdf, docx, zip, csv, …) rendered
+ * as an inline chip/link. The lifecycle mirrors the image/video engine — stage
+ * the file, insert a loading placeholder, upload via the shared upload function,
+ * write the resulting `file_url` back onto the node — but it is deliberately
+ * leaner: no base64 preview and no intrinsic-dimension probe (a file chip has no
+ * dimensions). It reuses the shared placeholder / success / error doc ops and
+ * the shared upload/progress state so behaviour stays identical to media.
+ *
+ * Async safety (conventions §0.6): `editor.view` is resolved fresh at every
+ * dispatch site (the shared doc ops read it from the passed view), and every
+ * post-`await` write is guarded by an `editor.isDestroyed` check. The staged
+ * file is dropped only on the success path so `reupload` ("Try again") can
+ * re-read it after a terminal error.
+ */
+import type { Editor } from '@tiptap/core'
+import { fileSizeLimitMessage } from '#utils/fileSize'
+import { isSafeUrl } from '#molecules/editor/extensions/shared/url-safety'
+import { findNodeByUploadId } from '#molecules/editor/extensions/shared/node-view'
+import {
+  applyUploadError,
+  applyUploadSuccess,
+  insertPlaceholder,
+  removeNodeByUploadId,
+} from '#molecules/editor/extensions/shared/media-node-ops'
+import { createUploadId } from '#molecules/editor/extensions/shared/upload-id'
+import {
+  deleteLocalFile,
+  deleteUploadProgress,
+  getLocalFile,
+  setLocalFile,
+  setUploadProgress,
+  updateUploadProgress,
+} from '#molecules/editor/extensions/shared/media-upload-state'
+import type { MediaUploadOptions } from '#molecules/editor/extensions/shared/media-upload-engine'
+import type { InsertMode } from '#molecules/editor/extensions/shared/media-upload-types'
+
+/** Schema node name this engine inserts/updates. */
+export const ATTACHMENT_NODE_NAME = 'attachment'
+
+/** Attachments have no intrinsic dimensions; the shared ops want a value. */
+const NO_DIMENSIONS = { width: null, height: null }
+
+/** The node attrs derived from a `File` before upload (filename/size/type). */
+function attachmentAttrsFromFile(file: File): Record<string, unknown> {
+  return {
+    fileName: file.name,
+    fileSize: file.size,
+    mimeType: file.type || 'application/octet-stream',
+  }
+}
+
+/**
+ * Core upload run: stage file -> placeholder -> upload -> write-back. Returns
+ * the uploadId so multi-upload sequencing can anchor the next insert.
+ */
+async function run(
+  file: File,
+  editor: Editor,
+  pos: number | null | undefined,
+  mode: InsertMode,
+  options: MediaUploadOptions,
+  placeholderAttrs: Record<string, unknown> = attachmentAttrsFromFile(file),
+): Promise<string | null> {
+  if (!options.uploadFunction) {
+    console.error('uploadFunction option is not provided')
+    return null
+  }
+  // Yield one microtask before mutating the doc. These engine entry points run
+  // from a command callback that returns `true`, after which ProseMirror's
+  // CommandManager dispatches its own transaction for that tick. Inserting the
+  // placeholder synchronously here would dispatch a second transaction built on
+  // the pre-command state, which ProseMirror rejects with "Applying a mismatched
+  // transaction". The image/video engines get this yield implicitly from their
+  // `await probeOrNull(...)`; an attachment has no dimensions to probe.
+  await Promise.resolve()
+  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 staging: insert an error placeholder with
+    // the 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,
+        ATTACHMENT_NODE_NAME,
+        pos,
+        mode,
+        uploadId,
+        NO_DIMENSIONS,
+        placeholderAttrs,
+      )
+      applyUploadError(
+        editor.view,
+        ATTACHMENT_NODE_NAME,
+        uploadId,
+        validationError,
+      )
+      return uploadId
+    }
+
+    setLocalFile(uploadId, { file })
+    if (editor.isDestroyed) {
+      deleteLocalFile(uploadId)
+      deleteUploadProgress(uploadId)
+      return uploadId
+    }
+    insertPlaceholder(
+      editor.view,
+      ATTACHMENT_NODE_NAME,
+      pos,
+      mode,
+      uploadId,
+      NO_DIMENSIONS,
+      placeholderAttrs,
+    )
+
+    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 })
+    ) {
+      applyUploadError(
+        editor.view,
+        ATTACHMENT_NODE_NAME,
+        uploadId,
+        'Upload returned no file URL',
+      )
+      return uploadId
+    }
+    // applyUploadSuccess preserves the existing attrs (fileName/fileSize/…) and
+    // only sets `src`, clears `loading`/`error`.
+    applyUploadSuccess(editor.view, ATTACHMENT_NODE_NAME, uploadId, uploaded)
+    deleteLocalFile(uploadId)
+  } catch (error) {
+    if (abortController.signal.aborted) {
+      if (!editor.isDestroyed) {
+        removeNodeByUploadId(editor.view, ATTACHMENT_NODE_NAME, uploadId)
+      }
+      deleteLocalFile(uploadId)
+      deleteUploadProgress(uploadId)
+      return uploadId
+    }
+    const message = (error as Error)?.message || 'Failed to upload attachment'
+    if (!editor.isDestroyed) {
+      applyUploadError(editor.view, ATTACHMENT_NODE_NAME, uploadId, message)
+    }
+  } finally {
+    if (!abortController.signal.aborted) {
+      deleteUploadProgress(uploadId)
+    }
+  }
+  return uploadId
+}
+
+/** Upload a single file, replacing the current selection with the chip. */
+export async function uploadAttachment(
+  file: File,
+  editor: Editor,
+  options: MediaUploadOptions,
+): Promise<void> {
+  await run(file, editor, null, 'replace', options)
+}
+
+/**
+ * Doc-mutating multi-upload for drop/paste. Uploads sequentially, anchoring each
+ * insert immediately after the previous placeholder via its uploadId. Reads
+ * `editor.view` fresh each iteration (the host may swap it mid-flight).
+ */
+export async function uploadAttachmentFiles(
+  files: File[],
+  editor: Editor,
+  pos: number | null,
+  options: MediaUploadOptions,
+): Promise<void> {
+  if (files.length === 0) return
+  if (files.length === 1) {
+    await run(files[0], editor, pos, 'replace', options)
+    return
+  }
+  let lastUploadId: string | null = null
+  for (const file of files) {
+    let insertPos = pos
+    if (lastUploadId) {
+      const prevPos = findNodeByUploadId(
+        editor.view,
+        ATTACHMENT_NODE_NAME,
+        lastUploadId,
+      )
+      if (prevPos !== null) {
+        const prevNode = editor.view.state.doc.nodeAt(prevPos)
+        insertPos = prevPos + (prevNode?.nodeSize ?? 1)
+      }
+    }
+    lastUploadId = await run(file, editor, insertPos, 'insert', options)
+  }
+}
+
+/** Re-run a failed upload for the node at `pos` using its staged file. */
+export async function reuploadAttachment(
+  editor: Editor,
+  pos: number,
+  options: MediaUploadOptions,
+): Promise<void> {
+  const node = editor.view.state.doc.nodeAt(pos)
+  const uploadId = node?.attrs.uploadId as string | undefined
+  const entry = uploadId ? getLocalFile(uploadId) : undefined
+  if (!uploadId || !entry) {
+    console.error(`reuploadAttachment: no staged file for node at ${pos}`)
+    return
+  }
+  const replacementUploadId = await run(
+    entry.file,
+    editor,
+    pos,
+    'replace',
+    options,
+    node?.attrs ?? attachmentAttrsFromFile(entry.file),
+  )
+  if (replacementUploadId) {
+    deleteLocalFile(uploadId)
+  }
+}