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

package/src/molecules/editor/components/font-color/swatches.ts

@@ -76,7 +76,7 @@ const DEFAULT_TEXT_SWATCH: ColorSwatch = {
 const DEFAULT_HIGHLIGHT_SWATCH: ColorSwatch = {
   value: null,
   label: 'Default',
-  class: 'border-outline-gray-modals',
+  class: 'border-outline-elevation-2',
 }
 
 /** Text-color swatches, "Default" first, then the palette in canonical order. */

package/src/molecules/editor/components/media-node-view-controller.ts

@@ -58,16 +58,16 @@ export function selectMedia(editor: Editor, getPos: GetPos): void {
 }
 
 /**
- * Set image alignment. Guarded `isVideo` here so callers cannot accidentally
- * dispatch the image-only `setImageAlign` command for a video node.
+ * Set media alignment on the hosted node. Both node types declare an `align`
+ * attribute, so this dispatches a plain `updateAttributes` against whichever
+ * type the node view hosts (no per-type command needed).
  */
 export function setMediaAlign(
   editor: Editor,
   isVideo: boolean,
   align: MediaAlign,
 ): void {
-  if (isVideo) return
-  editor.commands.setImageAlign(align)
+  editor.commands.updateAttributes(isVideo ? 'video' : 'image', { align })
 }
 
 export interface CaptionKeydownActions {

package/src/molecules/editor/components/media-node-view-utils.test.ts

@@ -2,7 +2,6 @@ import { describe, it, expect } from 'vitest'
 import {
   wrapperClasses,
   containerClasses,
-  alignIcon,
   aspectRatioFrom,
   heightOverWidth,
 } from './media-node-view-utils'
@@ -35,18 +34,6 @@ describe('containerClasses', () => {
   })
 })
 
-describe('alignIcon', () => {
-  it('maps known alignments', () => {
-    expect(alignIcon('center')).toBe('lucide-align-center')
-    expect(alignIcon('right')).toBe('lucide-align-right')
-  })
-
-  it('defaults to left', () => {
-    expect(alignIcon(null)).toBe('lucide-align-left')
-    expect(alignIcon(undefined)).toBe('lucide-align-left')
-  })
-})
-
 describe('aspectRatioFrom', () => {
   it('builds a CSS aspect-ratio when both dims present', () => {
     expect(aspectRatioFrom(640, 480)).toBe('640 / 480')

package/src/molecules/editor/components/media-node-view-utils.ts

@@ -42,16 +42,6 @@ export function containerClasses(
   ]
 }
 
-/** Lucide icon name for the current alignment (defaults to left). */
-export function alignIcon(align: MediaAlign | null | undefined): string {
-  const map: Record<MediaAlign, string> = {
-    left: 'lucide-align-left',
-    center: 'lucide-align-center',
-    right: 'lucide-align-right',
-  }
-  return (align && map[align]) || 'lucide-align-left'
-}
-
 /**
  * CSS `aspect-ratio` value (`"W / H"`) from the node's stored intrinsic size,
  * or `undefined` when either dimension is missing.

package/src/molecules/editor/components/table-color/tableCellColorController.ts

@@ -0,0 +1,80 @@
+import { defineComponent, h } from 'vue'
+import type { Editor } from '@tiptap/core'
+import { useFloatingPopup } from '#molecules/editor/composables/useFloatingPopup'
+import { useTableCellColorState } from '#molecules/editor/composables/useTableCellColorState'
+import EditorPopover from '#molecules/editor/components/EditorPopover.vue'
+import ColorSwatchGrid from '../font-color/ColorSwatchGrid.vue'
+import { highlightSwatches, textSwatches } from '../font-color/swatches'
+
+let activePopup: ReturnType<typeof useFloatingPopup> | null = null
+
+const TableCellColorPanel = defineComponent({
+  props: {
+    editor: { type: Object, required: true },
+    onClose: { type: Function, required: true },
+  },
+  setup(props) {
+    const { activeBackground, activeTextColor, setBackground, setTextColor } =
+      useTableCellColorState(props.editor as Editor)
+
+    const pickBackground = (value: string | null) => {
+      setBackground(value)
+      props.onClose()
+    }
+    const pickText = (value: string | null) => {
+      setTextColor(value)
+      props.onClose()
+    }
+
+    return () =>
+      h(
+        EditorPopover,
+        { dialogLabel: 'Cell color', contentClass: 'rounded-md p-2.5' },
+        {
+          default: () => [
+            h('div', { 'data-slot': 'table-cell-color-panel' }, [
+              h('div', { class: 'text-sm text-ink-gray-7' }, 'Cell color'),
+              h(ColorSwatchGrid, {
+                swatches: highlightSwatches,
+                active: activeBackground.value,
+                variant: 'highlight',
+                onSelect: pickBackground,
+              }),
+              h('div', { class: 'mt-4 text-sm text-ink-gray-7' }, 'Text color'),
+              h(ColorSwatchGrid, {
+                swatches: textSwatches,
+                active: activeTextColor.value,
+                variant: 'text',
+                onSelect: pickText,
+              }),
+            ]),
+          ],
+        },
+      )
+  },
+})
+
+/**
+ * Open the cell color picker anchored to a trigger button.
+ *
+ * The trigger rect is snapshotted into a virtual reference because the table
+ * context-menu button is removed from the DOM when the menu closes on run —
+ * anchoring to the live element would leave Floating UI tracking a detached node.
+ */
+export function openTableCellColorPicker(args: {
+  editor: Editor
+  anchor: HTMLElement
+}): void {
+  activePopup?.destroy()
+  const rect = args.anchor.getBoundingClientRect()
+  activePopup = useFloatingPopup({
+    anchor: args.anchor,
+    component: TableCellColorPanel,
+    props: {
+      editor: args.editor,
+      onClose: () => activePopup?.destroy(),
+    },
+    virtualReference: { getBoundingClientRect: () => rect },
+    floatingOptions: { placement: 'bottom-start' },
+  })
+}

package/src/molecules/editor/components/table-size-picker/TableSizePicker.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref, useTemplateRef } from 'vue'
+import EditorPopover from '../EditorPopover.vue'
+
+/**
+ * "Pick N×M" hover grid for inserting a table. Pointer users sweep the grid;
+ * keyboard users grow/shrink the size with arrows and confirm with Enter.
+ */
+const MAX_COLS = 8
+const MAX_ROWS = 6
+
+const props = defineProps<{
+  onPick: (size: { rows: number; cols: number }) => void
+}>()
+
+const rows = ref(3)
+const cols = ref(3)
+const grid = useTemplateRef<HTMLElement>('grid')
+
+// Self-managed focus (EditorPopover gets autofocus=false): the grid div is the
+// keyboard surface; FocusScope's first-tabbable scan would land elsewhere.
+onMounted(() => void nextTick(() => grid.value?.focus()))
+
+function setSize(r: number, c: number) {
+  rows.value = r
+  cols.value = c
+}
+
+function pick(r: number, c: number) {
+  props.onPick({ rows: r, cols: c })
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const step: Record<string, [number, number]> = {
+    ArrowDown: [1, 0],
+    ArrowUp: [-1, 0],
+    ArrowRight: [0, 1],
+    ArrowLeft: [0, -1],
+  }
+  const delta = step[event.key]
+  if (delta) {
+    event.preventDefault()
+    rows.value = Math.min(Math.max(rows.value + delta[0], 1), MAX_ROWS)
+    cols.value = Math.min(Math.max(cols.value + delta[1], 1), MAX_COLS)
+  } else if (event.key === 'Enter') {
+    event.preventDefault()
+    pick(rows.value, cols.value)
+  }
+}
+</script>
+
+<template>
+  <EditorPopover
+    dialog-label="Insert table"
+    content-class="rounded-md p-2.5"
+    :autofocus="false"
+  >
+    <div data-slot="table-size-picker">
+      <div
+        ref="grid"
+        tabindex="0"
+        role="grid"
+        :aria-label="`Table size, ${rows} rows by ${cols} columns`"
+        class="grid w-max gap-1 outline-none"
+        :style="{ gridTemplateColumns: `repeat(${MAX_COLS}, minmax(0, 1fr))` }"
+        @keydown="onKeydown"
+      >
+        <template v-for="r in MAX_ROWS" :key="r">
+          <button
+            v-for="c in MAX_COLS"
+            :key="c"
+            type="button"
+            tabindex="-1"
+            class="size-4 rounded-sm border"
+            :class="
+              r <= rows && c <= cols
+                ? 'border-outline-gray-3 bg-surface-gray-4'
+                : 'border-outline-gray-2 bg-surface-gray-1'
+            "
+            :aria-label="`${r} × ${c}`"
+            @pointerenter="setSize(r, c)"
+            @focus="setSize(r, c)"
+            @click="pick(r, c)"
+          />
+        </template>
+      </div>
+      <div class="mt-2 text-center text-sm text-ink-gray-7">
+        {{ rows }} × {{ cols }}
+      </div>
+    </div>
+  </EditorPopover>
+</template>

package/src/molecules/editor/components/table-size-picker/tableSizePickerController.ts

@@ -0,0 +1,40 @@
+import type { Editor } from '@tiptap/core'
+import { useFloatingPopup } from '#molecules/editor/composables/useFloatingPopup'
+import TableSizePicker from './TableSizePicker.vue'
+
+let activePopup: ReturnType<typeof useFloatingPopup> | null = null
+
+/**
+ * Open the insert-table size picker, anchored to a trigger button (toolbar) or
+ * an arbitrary rect (the caret, for the slash command). The anchor rect is
+ * snapshotted into a virtual reference — the trigger may leave the DOM while
+ * the picker is open (e.g. a closing menu), and the slash command's caret
+ * coordinates aren't an element at all.
+ */
+export function openTableSizePicker(args: {
+  editor: Editor
+  anchor?: HTMLElement
+  reference?: DOMRect
+}): void {
+  activePopup?.destroy()
+  const anchor = args.anchor ?? (args.editor.view.dom as HTMLElement)
+  const rect = args.reference ?? anchor.getBoundingClientRect()
+  activePopup = useFloatingPopup({
+    anchor,
+    component: TableSizePicker,
+    props: {
+      onPick: ({ rows, cols }: { rows: number; cols: number }) => {
+        const editor = args.editor
+        activePopup?.destroy()
+        activePopup = null
+        editor
+          .chain()
+          .focus()
+          .insertTable({ rows, cols, withHeaderRow: true })
+          .run()
+      },
+    },
+    virtualReference: { getBoundingClientRect: () => rect },
+    floatingOptions: { placement: 'bottom-start' },
+  })
+}

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

@@ -0,0 +1,117 @@
+import { onBeforeUnmount, ref, watch, type Ref } from 'vue'
+import { useWindowFileDragging } from './useWindowFileDragging'
+
+/**
+ * File drop tracking for a single editor drop zone.
+ *
+ * Exposes two signals so the zone can show a two-stage affordance:
+ *  - `isWindowDragging` — a file is being dragged anywhere over the window; the
+ *    zone reveals itself as a hint so the user can see where to drop.
+ *  - `isOverZone` — the file is over THIS zone specifically; the zone emphasises
+ *    itself as the active target.
+ *
+ * `onFiles` fires only for file drops that land inside `root` (the surrounding
+ * editor chrome). Drops on the prose itself are handled by the media ProseMirror
+ * plugin, which stop-propagates them — so our drop handler never runs for those,
+ * and `isOverZone` is instead cleared by watching the window signal (which flips
+ * false on any drop, captured before the inner `stopPropagation`).
+ *
+ * @param root  Ref to the zone element. May be null until mounted.
+ * @param onFiles Called with dropped `File[]` for drops inside `root`.
+ */
+export function useEditorFileDrop(
+  root: Ref<HTMLElement | null>,
+  onFiles: (files: File[]) => void,
+): {
+  isWindowDragging: Ref<boolean>
+  isOverZone: Ref<boolean>
+  draggedTypes: Ref<string[]>
+} {
+  const isWindowDragging = useWindowFileDragging()
+  const isOverZone = ref(false)
+  const draggedTypes = ref<string[]>([])
+  let depth = 0
+
+  const hasFiles = (event: DragEvent): boolean =>
+    !!event.dataTransfer &&
+    Array.from(event.dataTransfer.types).includes('Files')
+
+  const reset = () => {
+    depth = 0
+    isOverZone.value = false
+    draggedTypes.value = []
+  }
+
+  const updateDraggedTypes = (event: DragEvent) => {
+    draggedTypes.value = Array.from(event.dataTransfer?.items ?? [])
+      .filter((item) => item.kind === 'file')
+      .map((item) => item.type)
+      .filter(Boolean)
+  }
+
+  const onDragEnter = (event: DragEvent) => {
+    if (!hasFiles(event)) return
+    depth += 1
+    updateDraggedTypes(event)
+    isOverZone.value = true
+  }
+
+  // No updateDraggedTypes here: the dragged payload cannot change mid-drag, and
+  // dragover fires continuously — re-parsing would write a fresh array to the
+  // ref on every event and churn downstream computeds.
+  const onDragOver = (event: DragEvent) => {
+    if (!hasFiles(event)) return
+    event.preventDefault()
+  }
+
+  const onDragLeave = () => {
+    depth = Math.max(0, depth - 1)
+    if (depth === 0) isOverZone.value = false
+  }
+
+  const onDrop = (event: DragEvent) => {
+    reset()
+    const files = Array.from(event.dataTransfer?.files ?? [])
+    if (files.length === 0) return
+    event.preventDefault()
+    event.stopPropagation()
+    onFiles(files)
+  }
+
+  // The window signal flips false on any drop (capture phase) or when the drag
+  // leaves the window. Mirror that here so a prose drop — whose event never
+  // reaches our handler — can't leave the zone stuck highlighted.
+  watch(isWindowDragging, (dragging) => {
+    if (!dragging) reset()
+  })
+
+  const bind = (el: HTMLElement) => {
+    el.addEventListener('dragenter', onDragEnter)
+    el.addEventListener('dragover', onDragOver)
+    el.addEventListener('dragleave', onDragLeave)
+    el.addEventListener('drop', onDrop)
+  }
+
+  const unbind = (el: HTMLElement) => {
+    el.removeEventListener('dragenter', onDragEnter)
+    el.removeEventListener('dragover', onDragOver)
+    el.removeEventListener('dragleave', onDragLeave)
+    el.removeEventListener('drop', onDrop)
+  }
+
+  watch(
+    root,
+    (el, prev) => {
+      if (prev) unbind(prev)
+      reset()
+      if (el) bind(el)
+    },
+    { immediate: true },
+  )
+
+  onBeforeUnmount(() => {
+    if (root.value) unbind(root.value)
+  })
+
+  return { isWindowDragging, isOverZone, draggedTypes }
+}

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

@@ -19,6 +19,19 @@ export interface FloatingPopupOptions<P extends Record<string, unknown>> {
   props: P
   virtualReference?: VirtualReference
   closeOnAnchorPointerDown?: boolean
+  /**
+   * Close the popup when Escape is pressed. Defaults to `true`.
+   * Set `false` when the mounted component needs to handle Escape itself
+   * (e.g. a multi-step popup where Escape first steps back, then closes).
+   */
+  closeOnEscape?: boolean
+  /**
+   * Play a fast origin-aware appear animation on the floating wrapper (scales
+   * out from the edge nearest the anchor, using the *resolved* placement). Leave
+   * off for popups that wrap their content in `EditorPopover`, which animates
+   * itself. Defaults to `false`.
+   */
+  animate?: boolean
   floatingOptions?: {
     placement?: Placement
     strategy?: Strategy
@@ -56,6 +69,7 @@ export function useFloatingPopup<P extends Record<string, unknown>>(
 
   let cleanupAutoUpdate: (() => void) | null = null
   let destroyed = false
+  let animated = false
 
   const update = () => {
     if (destroyed) return
@@ -67,13 +81,21 @@ export function useFloatingPopup<P extends Record<string, unknown>>(
         flip(),
         shift({ padding: 8 }),
       ],
-    }).then(({ x, y, strategy }) => {
+    }).then(({ x, y, strategy, placement }) => {
       if (destroyed) return
       Object.assign(floating.style, {
         position: strategy,
         left: `${x}px`,
         top: `${y}px`,
       })
+      // First positioned frame: set the origin from the resolved placement and
+      // trigger the enter animation once (so it scales from the edge nearest the
+      // anchor, not from 0,0 before positioning).
+      if (options.animate && !animated) {
+        animated = true
+        floating.style.transformOrigin = transformOriginFor(placement)
+        floating.classList.add('editor-floating-pop')
+      }
     })
   }
 
@@ -103,11 +125,12 @@ export function useFloatingPopup<P extends Record<string, unknown>>(
   }
 
   function onKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') handle.destroy()
+    if (event.key === 'Escape' && options.closeOnEscape !== false) handle.destroy()
   }
 
   cleanupAutoUpdate = autoUpdate(reference, floating, update)
   requestAnimationFrame(() => {
+    if (destroyed) return
     document.addEventListener('pointerdown', onPointerDown, true)
     document.addEventListener('keydown', onKeydown, true)
   })
@@ -120,3 +143,24 @@ function normalizeOffset(value: number | [number, number] | undefined) {
   if (Array.isArray(value)) return { mainAxis: value[1], crossAxis: value[0] }
   return value ?? 4
 }
+
+/**
+ * CSS `transform-origin` for a popup at the given (resolved) placement: the
+ * point on the floating box nearest the anchor. A menu placed `right-start`
+ * grows from its `left top` corner; `top` grows from `center bottom`, etc.
+ */
+function transformOriginFor(placement: Placement): string {
+  const [side, align] = placement.split('-')
+  const opposite: Record<string, string> = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+  }
+  if (side === 'top' || side === 'bottom') {
+    const x = align === 'start' ? 'left' : align === 'end' ? 'right' : 'center'
+    return `${x} ${opposite[side]}`
+  }
+  const y = align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center'
+  return `${opposite[side]} ${y}`
+}

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

@@ -35,10 +35,13 @@ function makeEditor(editable = true): Editor {
   } as unknown as Editor
 }
 
-function makeEl(): HTMLElement {
+function makeEl(width = 200, height = 100): HTMLElement {
   const el = document.createElement('img')
-  Object.defineProperty(el, 'offsetWidth', { value: 200, configurable: true })
-  Object.defineProperty(el, 'offsetHeight', { value: 100, configurable: true })
+  Object.defineProperty(el, 'offsetWidth', { value: width, configurable: true })
+  Object.defineProperty(el, 'offsetHeight', {
+    value: height,
+    configurable: true,
+  })
   return el
 }
 
@@ -48,7 +51,7 @@ beforeEach(() => {
 })
 
 describe('useNodeViewResize', () => {
-  it('removes window listeners and resets cursor on stop (mouseup)', () => {
+  it('removes window listeners and resets cursor on stop (pointerup)', () => {
     const remove = vi.spyOn(window, 'removeEventListener')
     const el = makeEl()
     const { api, unmount } = mountResize(makeEditor(), {
@@ -61,10 +64,12 @@ describe('useNodeViewResize', () => {
     api.startResize({ clientX: 0 } as MouseEvent)
     expect(api.isResizing.value).toBe(true)
 
-    window.dispatchEvent(new MouseEvent('mouseup'))
+    // jsdom has no PointerEvent constructor; type string is all that matters.
+    window.dispatchEvent(new MouseEvent('pointerup'))
     expect(api.isResizing.value).toBe(false)
-    expect(remove).toHaveBeenCalledWith('mousemove', expect.any(Function))
-    expect(remove).toHaveBeenCalledWith('mouseup', expect.any(Function))
+    expect(remove).toHaveBeenCalledWith('pointermove', expect.any(Function))
+    expect(remove).toHaveBeenCalledWith('pointerup', expect.any(Function))
+    expect(remove).toHaveBeenCalledWith('pointercancel', expect.any(Function))
     expect(document.body.style.cursor).toBe('')
     unmount()
   })
@@ -82,8 +87,9 @@ describe('useNodeViewResize', () => {
     api.startResize({ clientX: 0 } as MouseEvent)
     unmount()
 
-    expect(remove).toHaveBeenCalledWith('mousemove', expect.any(Function))
-    expect(remove).toHaveBeenCalledWith('mouseup', expect.any(Function))
+    expect(remove).toHaveBeenCalledWith('pointermove', expect.any(Function))
+    expect(remove).toHaveBeenCalledWith('pointerup', expect.any(Function))
+    expect(remove).toHaveBeenCalledWith('pointercancel', expect.any(Function))
     expect(document.body.style.cursor).toBe('')
   })
 
@@ -98,7 +104,7 @@ describe('useNodeViewResize', () => {
     })
 
     api.startResize({ clientX: 0 } as MouseEvent)
-    window.dispatchEvent(new MouseEvent('mouseup'))
+    window.dispatchEvent(new MouseEvent('pointerup'))
 
     expect(onCommit).not.toHaveBeenCalled()
     unmount()
@@ -115,12 +121,55 @@ describe('useNodeViewResize', () => {
     })
 
     api.startResize({ clientX: 0 } as MouseEvent)
-    window.dispatchEvent(new MouseEvent('mouseup'))
+    window.dispatchEvent(new MouseEvent('pointerup'))
 
     expect(onCommit).toHaveBeenCalledWith({ width: 200, height: 100 })
     unmount()
   })
 
+  it('locks the aspect to the rendered box, not getAspectRatio', () => {
+    // Element paints 3:1 tall (200×600); the supplied ratio is a WRONG 1:1 —
+    // the case where a node stores only width and the height comes from CSS
+    // `height: auto`. The drag must preserve the painted shape (3), so a width
+    // grown to 300 yields height 900, never the 300 that ratio 1 would give.
+    const el = makeEl(200, 600)
+    const { api, unmount } = mountResize(makeEditor(), {
+      mediaEl: () => el,
+      getAspectRatio: () => 1,
+      getPos: () => 0,
+      onCommit: vi.fn(),
+    })
+
+    api.startResize({ clientX: 0 } as MouseEvent)
+    window.dispatchEvent(new MouseEvent('pointermove', { clientX: 100 }))
+
+    expect(el.style.width).toBe('300px')
+    expect(el.style.height).toBe('900px')
+    window.dispatchEvent(new MouseEvent('pointerup'))
+    unmount()
+  })
+
+  it('falls back to getAspectRatio when the element has no rendered size', () => {
+    // Pre-layout element (offsetWidth 0): the rendered ratio is unavailable, so
+    // the supplied aspect (0.5) drives the drag instead.
+    const el = makeEl(0, 0)
+    const { api, unmount } = mountResize(makeEditor(), {
+      mediaEl: () => el,
+      getAspectRatio: () => 0.5,
+      getPos: () => 0,
+      onCommit: vi.fn(),
+    })
+
+    api.startResize({ clientX: 0 } as MouseEvent)
+    window.dispatchEvent(new MouseEvent('pointermove', { clientX: 100 }))
+
+    // newWidth = max(50, 0 + 100) = 100; height = 100 * 0.5 = 50.
+    expect(el.style.width).toBe('100px')
+    expect(el.style.height).toBe('50px')
+    window.dispatchEvent(new MouseEvent('pointerup'))
+    unmount()
+  })
+
   it('no-ops startResize when the editor is not editable', () => {
     const onCommit = vi.fn()
     const { api, unmount } = mountResize(makeEditor(false), {