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

package/src/molecules/editor/components/MediaToolbar.vue

@@ -2,11 +2,11 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import type { Node } from '@tiptap/pm/model'
 import Tooltip from '#components/Tooltip/Tooltip.vue'
-import { alignIcon, type MediaAlign } from './media-node-view-utils'
+import type { MediaAlign } from './media-node-view-utils'
 
 const props = defineProps<{
   node: Node
-  isVideo: boolean
+  mediaType: 'image' | 'video' | 'embed'
   isEditable: boolean
   selected: boolean
   showCaption: boolean
@@ -15,28 +15,52 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'toggle-caption'): void
   (e: 'set-align', align: MediaAlign): void
+  (e: 'replace'): void
+  (
+    e: 'set-video-options',
+    options: { autoplay?: boolean; loop?: boolean; muted?: boolean },
+  ): void
 }>()
 
-const showAlignPopper = ref(false)
-const alignPopperRef = ref<HTMLElement | null>(null)
+const showVideoOptions = ref(false)
+const videoOptionsRef = ref<HTMLElement | null>(null)
+const videoOptionKeys = ['autoplay', 'loop', 'muted'] as const
+
+const alignOptions: Array<{
+  value: MediaAlign
+  label: string
+  icon: string
+}> = [
+  { value: 'left', label: 'Align left', icon: 'lucide-align-left' },
+  { value: 'center', label: 'Align center', icon: 'lucide-align-center' },
+  { value: 'right', label: 'Align right', icon: 'lucide-align-right' },
+]
 
-const currentAlignIcon = computed(() => alignIcon(props.node.attrs.align))
 const isVisible = computed(() => props.selected && props.isEditable)
+const isVideo = computed(() => props.mediaType === 'video')
+
+const replaceLabel = computed(
+  () =>
+    ({
+      image: 'Replace image',
+      video: 'Replace video',
+      embed: 'Change link',
+    })[props.mediaType],
+)
 
-function toggleAlignPopper(event: MouseEvent) {
+function toggleVideoOptions(event: MouseEvent) {
   event.stopPropagation()
-  showAlignPopper.value = !showAlignPopper.value
+  showVideoOptions.value = !showVideoOptions.value
 }
 
-function chooseAlign(align: MediaAlign) {
-  emit('set-align', align)
-  showAlignPopper.value = false
+function toggleVideoOption(key: 'autoplay' | 'loop' | 'muted') {
+  emit('set-video-options', { [key]: !props.node.attrs[key] })
 }
 
 function handleClickOutside(event: MouseEvent) {
   const target = event.target as HTMLElement
-  if (alignPopperRef.value && !alignPopperRef.value.contains(target)) {
-    showAlignPopper.value = false
+  if (videoOptionsRef.value && !videoOptionsRef.value.contains(target)) {
+    showVideoOptions.value = false
   }
 }
 
@@ -51,57 +75,87 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="absolute top-2 right-2 items-center bg-black/65 px-1.5 py-1 gap-2 rounded"
+    class="absolute top-2 right-2 z-20 items-center bg-black/65 px-1.5 py-1 gap-2 rounded"
     :class="isVisible ? 'flex' : 'hidden'"
   >
-    <button @click.stop="emit('toggle-caption')">
-      <span
-        class="lucide-captions size-4"
-        :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']"
-      />
-    </button>
+    <Tooltip text="Toggle caption" class="h-5">
+      <button
+        type="button"
+        aria-label="Toggle caption"
+        :aria-pressed="showCaption"
+        @click.stop="emit('toggle-caption')"
+      >
+        <span
+          class="lucide-captions size-4"
+          :class="[showCaption ? 'text-ink-base' : 'text-ink-gray-4']"
+        />
+      </button>
+    </Tooltip>
+
+    <Tooltip :text="replaceLabel" class="h-5">
+      <button
+        type="button"
+        :aria-label="replaceLabel"
+        @click.stop="emit('replace')"
+      >
+        <span
+          class="size-4 text-ink-gray-4 hover:text-ink-base"
+          :class="mediaType === 'embed' ? 'lucide-link' : 'lucide-refresh-cw'"
+        />
+      </button>
+    </Tooltip>
+
+    <Tooltip
+      v-for="align in alignOptions"
+      :key="align.value"
+      :text="align.label"
+      class="h-5"
+    >
+      <button
+        type="button"
+        class="hover:text-ink-base"
+        :class="
+          node.attrs.align === align.value ? 'text-ink-base' : 'text-ink-gray-4'
+        "
+        :aria-label="align.label"
+        :aria-pressed="node.attrs.align === align.value"
+        @click.stop="emit('set-align', align.value)"
+      >
+        <span :class="[align.icon, 'size-4']" />
+      </button>
+    </Tooltip>
 
     <button
-      v-if="!isVideo"
-      class="hover:text-ink-white"
-      :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']"
-      @click.stop="toggleAlignPopper"
+      v-if="isVideo"
+      type="button"
+      class="hover:text-ink-base"
+      :class="showVideoOptions ? 'text-ink-base' : 'text-ink-gray-4'"
+      aria-label="Video options"
+      @click.stop="toggleVideoOptions"
     >
-      <span :class="[currentAlignIcon, 'size-4']" />
+      <span class="lucide-settings-2 size-4" />
     </button>
 
     <div
-      v-if="showAlignPopper && !isVideo"
-      ref="alignPopperRef"
-      class="absolute top-full mt-1 right-6 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center"
+      v-if="showVideoOptions && isVideo"
+      ref="videoOptionsRef"
+      class="absolute top-full right-0 z-50 mt-1 w-40 rounded bg-black/80 p-1 shadow-lg"
     >
-      <Tooltip text="Align left" class="h-5">
-        <button
-          class="hover:text-ink-white"
-          :class="node.attrs.align === 'left' ? 'text-ink-white' : 'text-ink-gray-4'"
-          @click="chooseAlign('left')"
-        >
-          <span class="lucide-align-left size-4" />
-        </button>
-      </Tooltip>
-      <Tooltip text="Align center" class="h-5">
-        <button
-          class="hover:text-ink-white"
-          :class="node.attrs.align === 'center' ? 'text-ink-white' : 'text-ink-gray-4'"
-          @click="chooseAlign('center')"
-        >
-          <span class="lucide-align-center size-4" />
-        </button>
-      </Tooltip>
-      <Tooltip text="Align right" class="h-5">
-        <button
-          class="hover:text-ink-white"
-          :class="node.attrs.align === 'right' ? 'text-ink-white' : 'text-ink-gray-4'"
-          @click="chooseAlign('right')"
-        >
-          <span class="lucide-align-right size-4" />
-        </button>
-      </Tooltip>
+      <button
+        v-for="option in videoOptionKeys"
+        :key="option"
+        type="button"
+        class="flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs text-ink-gray-2 hover:bg-white/10 hover:text-ink-base"
+        :aria-pressed="Boolean(node.attrs[option])"
+        @click.stop="toggleVideoOption(option)"
+      >
+        <span class="capitalize">{{ option }}</span>
+        <span
+          v-if="node.attrs[option]"
+          class="lucide-check size-3"
+          aria-hidden="true"
+        />
+      </button>
     </div>
   </div>
 </template>

package/src/molecules/editor/components/TableContextMenu.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
+import type { Editor } from '../useEditor'
+import type { CommandMenuItem, MenuItem } from '../menu'
+
+/**
+ * Vertical, labelled table actions for the right-click context menu. Renders the
+ * same `tableToolbar` items the floating toolbar uses (icon + label here, plus a
+ * check for toggle items), and runs them against the editor. Mounted
+ * imperatively by `EditorTableMenu` via `useFloatingPopup`, which owns
+ * positioning and outside-click / Escape close; arrow-key focus is handled
+ * here, menu-style.
+ */
+const props = defineProps<{
+  editor: Editor
+  items: MenuItem[]
+  /** Called after an action runs, so the host can close the menu. */
+  onRun?: () => void
+}>()
+
+function isSeparator(item: MenuItem): item is { type: 'separator' } {
+  return 'type' in item && item.type === 'separator'
+}
+function isCommand(item: MenuItem): item is CommandMenuItem {
+  return !('type' in item)
+}
+function isAvailable(item: CommandMenuItem): boolean {
+  return item.isAvailable?.(props.editor) !== false
+}
+
+// Keep available commands; collapse separators so none ends up leading,
+// trailing, or doubled after filtering.
+const visible = computed<MenuItem[]>(() => {
+  const out: MenuItem[] = []
+  for (const item of props.items) {
+    if (isSeparator(item)) {
+      const last = out[out.length - 1]
+      if (last && !isSeparator(last)) out.push(item)
+    } else if (isCommand(item) && isAvailable(item)) {
+      out.push(item)
+    }
+  }
+  if (out.length && isSeparator(out[out.length - 1])) out.pop()
+  return out
+})
+
+function labelOf(item: CommandMenuItem): string {
+  return item.getLabel?.(props.editor) ?? item.label
+}
+
+function disabled(item: CommandMenuItem): boolean {
+  return item.isDisabled?.(props.editor) === true
+}
+
+function isChecked(item: CommandMenuItem): boolean {
+  return item.isActive?.(props.editor) === true
+}
+
+function run(item: CommandMenuItem, event: MouseEvent): void {
+  if (disabled(item)) return
+  item.action(props.editor, {
+    event,
+    trigger: event.currentTarget as HTMLElement | undefined,
+  })
+  props.onRun?.()
+}
+
+// --- Menu-style keyboard support -------------------------------------------
+const menuEl = useTemplateRef<HTMLElement>('menu')
+
+function focusables(): HTMLButtonElement[] {
+  return Array.from(
+    menuEl.value?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ??
+      [],
+  )
+}
+
+onMounted(() => focusables()[0]?.focus())
+
+// The popup host removes the menu without restoring focus; hand it back to the
+// editor so keyboard users don't land on <body>.
+onBeforeUnmount(() => {
+  if (menuEl.value?.contains(document.activeElement)) {
+    try {
+      props.editor.view.focus()
+    } catch {
+      // view already destroyed
+    }
+  }
+})
+
+function onKeydown(event: KeyboardEvent) {
+  const list = focusables()
+  if (!list.length) return
+  const index = list.indexOf(document.activeElement as HTMLButtonElement)
+  let next = -1
+  if (event.key === 'ArrowDown') next = (index + 1) % list.length
+  else if (event.key === 'ArrowUp')
+    next = index <= 0 ? list.length - 1 : index - 1
+  else if (event.key === 'Home') next = 0
+  else if (event.key === 'End') next = list.length - 1
+  else return
+  event.preventDefault()
+  list[next]?.focus()
+}
+</script>
+
+<template>
+  <div
+    ref="menu"
+    role="menu"
+    class="min-w-[208px] rounded-lg border border-outline-gray-1 bg-surface-elevation-2 p-1 text-base shadow-xl outline-none"
+    @keydown="onKeydown"
+  >
+    <template v-for="(item, index) in visible" :key="index">
+      <div
+        v-if="isSeparator(item)"
+        class="my-1 h-px bg-surface-gray-2"
+        aria-hidden="true"
+      />
+      <button
+        v-else-if="isCommand(item)"
+        type="button"
+        :role="item.isActive ? 'menuitemcheckbox' : 'menuitem'"
+        :aria-checked="item.isActive ? isChecked(item) : undefined"
+        class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-ink-gray-8 hover:bg-surface-gray-3 focus-visible:bg-surface-gray-3 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        :disabled="disabled(item)"
+        @click="run(item, $event)"
+      >
+        <span
+          v-if="typeof item.icon === 'string'"
+          :class="['size-4 shrink-0', item.icon]"
+          aria-hidden="true"
+        />
+        <span>{{ labelOf(item) }}</span>
+        <span
+          v-if="isChecked(item)"
+          class="lucide-check ml-auto size-4 shrink-0"
+          aria-hidden="true"
+        />
+      </button>
+    </template>
+  </div>
+</template>

package/src/molecules/editor/components/UploadProgressIndicator.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * Upload progress pill shown over media while a file uploads: percent +
+ * cancel, in the same dark-pill language as MediaToolbar. Shared by the
+ * single image/video node view and the gallery dialog cells so the two
+ * can't drift apart.
+ *
+ * Positions itself in the top-right corner of the nearest positioned
+ * ancestor; only the pill itself receives pointer events.
+ */
+defineProps<{ percent: number }>()
+
+const emit = defineEmits<{ (e: 'cancel'): void }>()
+</script>
+
+<template>
+  <div
+    class="pointer-events-none absolute inset-0 flex items-start justify-end p-0.5"
+    aria-live="polite"
+  >
+    <div
+      class="pointer-events-auto flex items-center gap-2 rounded bg-black/65 px-1.5 py-1"
+    >
+      <span class="tabular-nums text-sm text-white">{{ percent }}%</span>
+      <button
+        type="button"
+        class="lucide-x size-4 p-1 text-gray-500 hover:text-white"
+        aria-label="Cancel upload"
+        @click.stop="emit('cancel')"
+      />
+    </div>
+  </div>
+</template>

package/src/molecules/editor/components/VideoControls.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+/**
+ * Custom video controls for the media node view, replacing the native
+ * `controls` attribute so the player matches the design system (same dark
+ * pill language as MediaToolbar). Play/pause, scrubbable progress, time,
+ * mute, and fullscreen.
+ *
+ * The host passes the live `<video>` element; this component only attaches
+ * listeners and drives it imperatively — it never owns playback state.
+ */
+import { ref, watch, computed, onBeforeUnmount } from 'vue'
+import Tooltip from '#components/Tooltip/Tooltip.vue'
+
+const props = defineProps<{
+  videoEl: HTMLVideoElement | null
+  /** Hidden entirely while true (e.g. during a resize drag). */
+  hidden?: boolean
+}>()
+
+const playing = ref(false)
+const muted = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+const scrubbing = ref(false)
+const trackRef = ref<HTMLElement | null>(null)
+
+const progress = computed(() =>
+  duration.value ? (currentTime.value / duration.value) * 100 : 0,
+)
+
+function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return '0:00'
+  const m = Math.floor(seconds / 60)
+  const s = Math.floor(seconds % 60)
+    .toString()
+    .padStart(2, '0')
+  return `${m}:${s}`
+}
+
+let bound: Array<[string, EventListener]> = []
+
+function bind(el: HTMLVideoElement) {
+  playing.value = !el.paused
+  muted.value = el.muted
+  duration.value = el.duration || 0
+  currentTime.value = el.currentTime || 0
+  const on = (event: string, handler: EventListener) => {
+    el.addEventListener(event, handler)
+    bound.push([event, handler])
+  }
+  on('play', () => (playing.value = true))
+  on('pause', () => (playing.value = false))
+  on('ended', () => (playing.value = false))
+  on('timeupdate', () => (currentTime.value = el.currentTime))
+  on('loadedmetadata', () => (duration.value = el.duration || 0))
+  on('durationchange', () => (duration.value = el.duration || 0))
+  on('volumechange', () => (muted.value = el.muted))
+}
+
+function unbind(el: HTMLVideoElement) {
+  for (const [event, handler] of bound.splice(0)) {
+    el.removeEventListener(event, handler)
+  }
+}
+
+watch(
+  () => props.videoEl,
+  (el, prev) => {
+    if (prev) unbind(prev)
+    if (el) bind(el)
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  if (props.videoEl) unbind(props.videoEl)
+})
+
+function togglePlay() {
+  const el = props.videoEl
+  if (!el) return
+  if (el.paused) void el.play()
+  else el.pause()
+}
+
+function toggleMute() {
+  const el = props.videoEl
+  if (el) el.muted = !el.muted
+}
+
+function toggleFullscreen() {
+  const el = props.videoEl
+  if (!el) return
+  if (document.fullscreenElement) {
+    void document.exitFullscreen()
+    return
+  }
+  // Fullscreen the wrapper so these controls stay visible over the video.
+  const root = el.closest('[data-video-fullscreen-root]') ?? el
+  void (root as HTMLElement).requestFullscreen?.()
+}
+
+function timeFromPointer(event: PointerEvent): number {
+  const track = trackRef.value
+  if (!track) return 0
+  const rect = track.getBoundingClientRect()
+  const ratio = Math.min(
+    1,
+    Math.max(0, (event.clientX - rect.left) / rect.width),
+  )
+  return ratio * duration.value
+}
+
+function onTrackPointerDown(event: PointerEvent) {
+  if (!props.videoEl || !duration.value) return
+  scrubbing.value = true
+  try {
+    trackRef.value?.setPointerCapture(event.pointerId)
+  } catch {
+    // Inactive pointer id (synthetic events, some pen edge cases) — scrubbing
+    // still works through the track's own move/up handlers.
+  }
+  props.videoEl.currentTime = timeFromPointer(event)
+}
+
+function onTrackPointerMove(event: PointerEvent) {
+  if (!scrubbing.value || !props.videoEl) return
+  props.videoEl.currentTime = timeFromPointer(event)
+}
+
+function onTrackPointerUp() {
+  scrubbing.value = false
+}
+</script>
+
+<template>
+  <div
+    v-if="videoEl && !hidden"
+    class="absolute inset-x-2 bottom-2 flex items-center gap-2 rounded bg-black/65 px-2 py-1.5 transition-opacity"
+    :class="
+      playing && !scrubbing
+        ? 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'
+        : 'opacity-100'
+    "
+    @click.stop
+    @pointerdown.stop
+  >
+    <Tooltip :text="playing ? 'Pause' : 'Play'" class="h-5">
+      <button
+        type="button"
+        class="text-ink-gray-2 hover:text-ink-base"
+        :aria-label="playing ? 'Pause' : 'Play'"
+        @click="togglePlay"
+      >
+        <span :class="[playing ? 'lucide-pause' : 'lucide-play', 'size-4']" />
+      </button>
+    </Tooltip>
+
+    <span class="text-xs tabular-nums text-ink-gray-2 select-none">
+      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+    </span>
+
+    <div
+      ref="trackRef"
+      class="relative flex h-4 flex-1 cursor-pointer touch-none items-center"
+      role="slider"
+      aria-label="Seek"
+      :aria-valuemin="0"
+      :aria-valuemax="Math.round(duration)"
+      :aria-valuenow="Math.round(currentTime)"
+      @pointerdown="onTrackPointerDown"
+      @pointermove="onTrackPointerMove"
+      @pointerup="onTrackPointerUp"
+      @pointercancel="onTrackPointerUp"
+    >
+      <div class="h-1 w-full overflow-hidden rounded-full bg-white/25">
+        <div
+          class="h-full rounded-full bg-white"
+          :style="{ width: `${progress}%` }"
+        />
+      </div>
+    </div>
+
+    <Tooltip :text="muted ? 'Unmute' : 'Mute'" class="h-5">
+      <button
+        type="button"
+        class="text-ink-gray-2 hover:text-ink-base"
+        :aria-label="muted ? 'Unmute' : 'Mute'"
+        @click="toggleMute"
+      >
+        <span
+          :class="[muted ? 'lucide-volume-x' : 'lucide-volume-2', 'size-4']"
+        />
+      </button>
+    </Tooltip>
+
+    <Tooltip text="Fullscreen" class="h-5">
+      <button
+        type="button"
+        class="text-ink-gray-2 hover:text-ink-base"
+        aria-label="Fullscreen"
+        @click="toggleFullscreen"
+      >
+        <span class="lucide-maximize size-4" />
+      </button>
+    </Tooltip>
+  </div>
+</template>

package/src/molecules/editor/components/font-color/ColorSwatchGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-1 grid grid-cols-6 gap-1">
+  <div class="mt-2 grid grid-cols-6 gap-2">
     <Tooltip
       v-for="swatch in swatches"
       :key="swatch.label"
@@ -10,13 +10,11 @@
         type="button"
         :aria-label="swatch.label"
         :aria-pressed="swatch.value === active"
-        class="flex h-5 w-5 items-center justify-center rounded border text-base"
+        class="flex h-6 w-6 items-center justify-center rounded-sm border text-base focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3"
         :class="[
           swatch.class,
           variant === 'highlight' ? 'text-ink-gray-9' : '',
-          swatch.value === active
-            ? 'ring-2 ring-outline-gray-3 ring-offset-1'
-            : '',
+          swatch.value === active ? 'ring-2 ring-outline-gray-4' : '',
         ]"
         @click="emit('select', swatch.value)"
       >

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

@@ -2,6 +2,7 @@ import { defineComponent, h } from 'vue'
 import type { Editor } from '@tiptap/core'
 import { useFloatingPopup } from '#molecules/editor/composables/useFloatingPopup'
 import { useNamedColorState } from '#molecules/editor/composables/useNamedColorState'
+import EditorPopover from '#molecules/editor/components/EditorPopover.vue'
 import ColorSwatchGrid from './ColorSwatchGrid.vue'
 import { highlightSwatches, textSwatches } from './swatches'
 
@@ -28,31 +29,35 @@ const FontColorPanel = defineComponent({
 
     return () =>
       h(
-        'div',
+        EditorPopover,
         {
-          'data-slot': 'font-color-panel',
-          class: 'rounded-lg bg-surface-white p-2 shadow-2xl',
+          dialogLabel: 'Text and background color',
+          contentClass: 'rounded-md p-2.5',
+        },
+        {
+          default: () => [
+            h('div', { 'data-slot': 'font-color-panel' }, [
+              h('div', { class: 'text-sm text-ink-gray-7' }, 'Text Color'),
+              h(ColorSwatchGrid, {
+                swatches: textSwatches,
+                active: activeTextColor.value,
+                variant: 'text',
+                onSelect: selectText,
+              }),
+              h(
+                'div',
+                { class: 'mt-4 text-sm text-ink-gray-7' },
+                'Background Color',
+              ),
+              h(ColorSwatchGrid, {
+                swatches: highlightSwatches,
+                active: activeHighlightColor.value,
+                variant: 'highlight',
+                onSelect: selectHighlight,
+              }),
+            ]),
+          ],
         },
-        [
-          h('div', { class: 'text-sm text-ink-gray-7' }, 'Text Color'),
-          h(ColorSwatchGrid, {
-            swatches: textSwatches,
-            active: activeTextColor.value,
-            variant: 'text',
-            onSelect: selectText,
-          }),
-          h(
-            'div',
-            { class: 'mt-2 text-sm text-ink-gray-7' },
-            'Background Color',
-          ),
-          h(ColorSwatchGrid, {
-            swatches: highlightSwatches,
-            active: activeHighlightColor.value,
-            variant: 'highlight',
-            onSelect: selectHighlight,
-          }),
-        ],
       )
   },
 })