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

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

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import type { Editor } from '../useEditor'
+import { useEditorFileDrop } from '../composables/useEditorFileDrop'
+
+/**
+ * Generous, editor-scoped file drop target.
+ *
+ * Wraps the editor surface (toolbar + content) so a file dropped anywhere over
+ * it uploads and inserts. The overlay is a two-stage affordance: it appears as a
+ * hint the moment a file enters the window (so the drop target is discoverable),
+ * then emphasises itself when the file is actually over this editor. Drops that
+ * land directly on the prose are handled by the media ProseMirror plugin (precise
+ * insert at the cursor) and stop there; this zone only catches drops on the
+ * surrounding chrome (toolbar, padding) and inserts at the document end.
+ *
+ * Scoped on purpose — see `useEditorFileDrop`. A page often has several editors
+ * (a discussion body plus per-comment composers), so a window-wide drop *target*
+ * would be ambiguous about which editor receives the file. (The window-wide
+ * *hint* is fine: every editable editor lights up, the user picks one.)
+ *
+ * The overlay's look is replaceable via the `#overlay` scoped slot, which
+ * receives the two drag signals; the component still owns when it shows and how
+ * it's positioned/animated.
+ */
+const props = withDefaults(
+  defineProps<{
+    editor: Editor | null
+    /** Disable dropping (e.g. read-only editors). */
+    disabled?: boolean
+    /** Default overlay label. */
+    label?: string
+  }>(),
+  { disabled: false, label: 'Drop files to upload' },
+)
+
+const root = useTemplateRef<HTMLElement>('root')
+
+const { isWindowDragging, isOverZone, draggedTypes } = useEditorFileDrop(
+  root,
+  (files) => {
+    const editor = props.editor
+    if (props.disabled || !editor || editor.isDestroyed || !editor.isEditable) {
+      return
+    }
+    // The single drop pipeline decides single-image vs group dialog vs video.
+    editor.commands.dropFiles(files)
+  },
+)
+
+const showOverlay = computed(() => isWindowDragging.value && !props.disabled)
+const overlayLabel = computed(() => {
+  const imageCount = draggedTypes.value.filter((type) =>
+    /^image\//i.test(type),
+  ).length
+  const videoCount = draggedTypes.value.filter((type) =>
+    /^video\//i.test(type),
+  ).length
+  if (videoCount > 0)
+    return videoCount === 1 ? 'Drop video to upload' : 'Drop videos to upload'
+  if (imageCount > 1) return 'Drop images to create gallery'
+  if (imageCount === 1) return 'Drop image to upload'
+  return props.label
+})
+</script>
+
+<template>
+  <div ref="root" class="relative">
+    <slot />
+
+    <Transition
+      enter-active-class="transition-opacity duration-150"
+      leave-active-class="transition-opacity duration-150"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="showOverlay"
+        class="pointer-events-none absolute inset-0 z-10 rounded-[inherit]"
+      >
+        <slot
+          name="overlay"
+          :is-over-zone="isOverZone"
+          :is-window-dragging="isWindowDragging"
+        >
+          <div
+            class="flex h-full w-full items-center justify-center rounded-[inherit] border-2 border-dashed transition-colors duration-150"
+            :class="
+              isOverZone
+                ? 'border-outline-gray-4 bg-surface-gray-2/80'
+                : 'border-outline-gray-3 bg-surface-base/70'
+            "
+          >
+            <span
+              class="text-base-medium transition-colors duration-150"
+              :class="isOverZone ? 'text-ink-gray-8' : 'text-ink-gray-5'"
+            >
+              {{ overlayLabel }}
+            </span>
+          </div>
+        </slot>
+      </div>
+    </Transition>
+  </div>
+</template>

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

@@ -0,0 +1,89 @@
+<template>
+  <FocusScope
+    role="dialog"
+    :aria-label="dialogLabel"
+    tabindex="-1"
+    :loop="loop"
+    :trapped="trapped"
+    class="editor-popover border border-outline-gray-2 bg-surface-elevation-2 shadow-2xl outline-none"
+    :class="contentClass"
+    @mount-auto-focus="onMountAutoFocus"
+    @unmount-auto-focus="onUnmountAutoFocus"
+  >
+    <slot />
+  </FocusScope>
+</template>
+
+<script setup lang="ts">
+import { FocusScope } from 'reka-ui'
+
+/**
+ * Shared chrome for editor popups mounted via `useFloatingPopup`
+ * (link editor, font-color picker, …). It owns the cross-cutting concerns a
+ * floating panel needs — border/background/shadow, `role="dialog"` + label, an
+ * enter animation, and a looping focus trap (reka-ui `FocusScope`) — so each
+ * feature only renders its own contents. The corner radius is intentionally NOT
+ * owned here: each popup sets its own via `content-class` (e.g. `rounded-md`).
+ *
+ * It deliberately does NOT handle Escape or scroll-locking: dismissal and
+ * scroll policy vary per popup and are owned by the opener (see the link
+ * controller's two-stage Escape and scroll lock).
+ *
+ * Focus trapping is on by default (standalone dialogs like the link/color
+ * editors that own focus), but can be turned off for popups that must leave
+ * focus in the editor — e.g. suggestion lists, where the user keeps typing to
+ * filter. Trapping those would let FocusScope's MutationObserver steal focus on
+ * every keystroke-driven re-render.
+ */
+const props = withDefaults(
+  defineProps<{
+    /** Accessible name announced for the dialog. */
+    dialogLabel: string
+    /** Layout/spacing classes for the panel body (width, padding, flex, …). */
+    contentClass?: string | string[]
+    /** Let FocusScope move focus to the first tabbable on open. Defaults `true`. */
+    autofocus?: boolean
+    /** Keep focus inside the panel (focus trap). Defaults `true`. */
+    trapped?: boolean
+    /** Loop Tab focus at the panel edges. Defaults `true`. */
+    loop?: boolean
+  }>(),
+  { autofocus: true, trapped: true, loop: true },
+)
+
+function onMountAutoFocus(event: Event) {
+  // When the content focuses itself (e.g. the link input autofocuses on its own
+  // nextTick), don't let FocusScope steal focus to the first tabbable on open.
+  if (!props.autofocus) event.preventDefault()
+}
+
+function onUnmountAutoFocus(event: Event) {
+  // Don't restore focus on close: the popup owner returns focus on Escape, and
+  // a deliberate click-outside should keep focus where the user clicked.
+  event.preventDefault()
+}
+</script>
+
+<style scoped>
+.editor-popover {
+  animation: editor-popover-in 90ms ease-out;
+  transform-origin: center;
+}
+
+@keyframes editor-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-popover {
+    animation: none;
+  }
+}
+</style>

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

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { ref, computed, watch, toRaw } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
-import LoadingIndicator from '#components/LoadingIndicator.vue'
 import Button from '#components/Button/Button.vue'
 import { ErrorMessage } from '#components/ErrorMessage'
-import { getLocalFile } from '#molecules/editor/extensions/shared/media-upload-state'
+import {
+  abortUpload,
+  getLocalFile,
+  getUploadProgress,
+} from '#molecules/editor/extensions/shared/media-upload-state'
+import { pickFiles } from '#molecules/editor/extensions/shared/file-picker'
 import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
 import { useNodeViewResize } from '#molecules/editor/composables/useNodeViewResize'
+import { safeGetPos } from '#molecules/editor/extensions/shared/node-view'
 import MediaToolbar from './MediaToolbar.vue'
+import MediaResizeHandles from './MediaResizeHandles.vue'
+import VideoControls from './VideoControls.vue'
+import UploadProgressIndicator from './UploadProgressIndicator.vue'
 import {
   wrapperClasses,
   containerClasses,
@@ -23,7 +31,6 @@ import {
   setMediaAlign,
   handleCaptionKeydown,
 } from './media-node-view-controller'
-
 const props = defineProps(nodeViewProps)
 
 // TipTap's VueNodeViewRenderer hands node views a REACTIVE-PROXIED editor.
@@ -43,7 +50,13 @@ const isEditable = useNodeViewEditable(editor)
 
 const isVideo = computed(() => props.node.type.name === 'video')
 const isUploaded = computed(() => Boolean(props.node.attrs.src))
-const fileContent = computed(() => getLocalFile(props.node.attrs.uploadId)?.b64)
+const localEntry = computed(() => getLocalFile(props.node.attrs.uploadId))
+const fileContent = computed(() => localEntry.value?.b64)
+const videoPoster = computed(() => localEntry.value?.poster)
+const uploadProgress = computed(() =>
+  getUploadProgress(props.node.attrs.uploadId),
+)
+const uploadPercent = computed(() => uploadProgress.value?.percent ?? 0)
 const hasError = computed(() => Boolean(props.node.attrs.error))
 
 const showCaption = ref(Boolean(props.node.attrs.alt))
@@ -92,16 +105,42 @@ function selectMedia() {
 }
 
 function onMediaClick() {
-  if (!isEditable.value && !isVideo.value && props.node.attrs.src) {
-    editor.commands.openImageViewer?.(props.node.attrs.src)
+  if (!isEditable.value && props.node.attrs.src) {
+    if (isVideo.value) {
+      // Read mode: no native controls, so clicking the video toggles playback.
+      const el = mediaRef.value as HTMLVideoElement | null
+      if (el?.paused) void el.play()
+      else el?.pause()
+    } else {
+      editor.commands.openImageViewer?.(props.node.attrs.src)
+    }
     return
   }
   if (isEditable.value) selectMedia()
 }
 
-function startResizeFromHandle(event: MouseEvent) {
+function startResizeFromHandle(event: PointerEvent, edge: 'left' | 'right') {
   selectMedia()
-  startResize(event)
+  startResize(event, edge)
+}
+
+function resizeBy(delta: number) {
+  selectMedia()
+  const currentWidth =
+    Number(props.node.attrs.width) || mediaRef.value?.offsetWidth || 320
+  const width = Math.max(50, currentWidth + delta)
+  const height = Math.round(width * mediaIntrinsicAspect())
+  props.updateAttributes({ width, height })
+}
+
+function onResizeKeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    resizeBy(-20)
+  } else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    resizeBy(20)
+  }
 }
 
 function commitCaption() {
@@ -138,21 +177,60 @@ function retryUpload() {
     editor.commands.reuploadImage(props.node.attrs.uploadId)
   }
 }
+
+function cancelUpload() {
+  abortUpload(props.node.attrs.uploadId)
+}
+
+function removeMedia() {
+  const pos = safeGetPos(() => props.getPos())
+  if (pos === null) return
+  const node = editor.view.state.doc.nodeAt(pos)
+  if (!node) return
+  editor.view.dispatch(editor.view.state.tr.delete(pos, pos + node.nodeSize))
+}
+
+async function replaceMedia() {
+  const files = await pickFiles({
+    accept: isVideo.value ? 'video/*' : 'image/*',
+  })
+  const file = files[0]
+  if (!file) return
+  const pos = safeGetPos(() => props.getPos())
+  if (pos === null) return
+  if (isVideo.value) {
+    editor.commands.replaceVideo(pos, file)
+  } else {
+    editor.commands.replaceImage(pos, file)
+  }
+}
+
+function setVideoOptions(options: {
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+}) {
+  editor.commands.setVideoOptions(options)
+}
 </script>
 
 <template>
   <NodeViewWrapper as="div" :class="wrapperClasses(node.attrs.float)">
     <div
       ref="containerRef"
-      class="group relative overflow-hidden not-prose rounded-[2px]"
+      class="group relative isolate overflow-hidden not-prose rounded"
       :class="containerClasses(node.attrs, selected)"
       :style="{ width: node.attrs.width ? `${node.attrs.width}px` : 'auto' }"
+      data-video-fullscreen-root
     >
-      <div v-if="isUploaded || fileContent" class="relative">
+      <div
+        v-if="isUploaded || fileContent || node.attrs.loading"
+        class="relative"
+      >
         <img
           v-if="!isVideo"
           ref="mediaRef"
-          class="rounded-[2px]"
+          class="rounded"
           :class="!isUploaded && 'opacity-40'"
           :src="node.attrs.src || fileContent"
           :alt="node.attrs.alt || ''"
@@ -160,10 +238,20 @@ function retryUpload() {
           :height="node.attrs.height"
           @click.stop="onMediaClick"
         />
+        <img
+          v-else-if="isVideo && !isUploaded && videoPoster"
+          ref="mediaRef"
+          class="rounded"
+          :src="videoPoster"
+          :alt="node.attrs.alt || 'Video preview'"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          @click.stop="onMediaClick"
+        />
         <video
-          v-else
+          v-else-if="isVideo"
           ref="mediaRef"
-          class="rounded-[2px]"
+          class="rounded"
           :class="!isUploaded && 'opacity-40'"
           :src="node.attrs.src || fileContent"
           :width="node.attrs.width"
@@ -171,57 +259,89 @@ function retryUpload() {
           :autoplay="node.attrs.autoplay"
           :loop="node.attrs.loop"
           :muted="node.attrs.muted"
-          :controls="isUploaded"
+          playsinline
           @click.stop="onMediaClick"
         />
 
+        <VideoControls
+          v-if="isVideo && isUploaded"
+          :video-el="mediaRef as HTMLVideoElement | null"
+          :hidden="isResizing"
+        />
+
         <MediaToolbar
           v-if="isUploaded"
           :node="node"
-          :is-video="isVideo"
+          :media-type="isVideo ? 'video' : 'image'"
           :is-editable="isEditable"
           :selected="selected"
           :show-caption="showCaption"
           @toggle-caption="toggleCaptions"
           @set-align="onSetAlign"
+          @replace="replaceMedia"
+          @set-video-options="setVideoOptions"
         />
 
-        <button
+        <MediaResizeHandles
           v-if="selected && isEditable && isUploaded"
-          class="absolute bottom-2 right-2 cursor-nw-resize bg-black/65 rounded p-1"
-          :class="{ 'cursor-ew-resize': isResizing }"
-          @mousedown.prevent="startResizeFromHandle"
-        >
-          <span class="lucide-move-diagonal-2 text-white size-4" />
-        </button>
+          label="Resize media"
+          @resize-start="startResizeFromHandle"
+          @resize-keydown="onResizeKeydown"
+        />
 
+        <!-- Upload error over the staged preview: same overlay pattern as the
+             gallery grid cell, kept inside the media box. -->
         <div
-          v-if="node.attrs.loading"
-          class="inset-0 absolute flex items-center justify-center z-10"
+          v-if="hasError"
+          aria-live="assertive"
+          class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-black/65 p-3 text-center"
         >
-          <div
-            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2"
-          >
-            <div class="flex items-center gap-2">
-              <LoadingIndicator class="text-gray-100 size-4" />
-              <span class="text-gray-100">
-                Uploading {{ isVideo ? 'video' : 'image' }}...
-              </span>
-            </div>
+          <div class="text-p-sm text-ink-base">{{ node.attrs.error }}</div>
+          <div v-if="isEditable" class="flex flex-wrap justify-center gap-2">
+            <Button size="xs" variant="subtle" @click.stop="retryUpload">
+              Try again
+            </Button>
+            <Button size="xs" variant="subtle" @click.stop="replaceMedia">
+              Choose another
+            </Button>
+            <Button size="xs" variant="subtle" @click.stop="removeMedia">
+              Remove
+            </Button>
           </div>
         </div>
+
+        <UploadProgressIndicator
+          v-if="node.attrs.loading"
+          :percent="uploadPercent"
+          @cancel="cancelUpload"
+        />
       </div>
 
       <div
         v-else
-        class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full"
+        class="flex flex-col items-center justify-center gap-3 border rounded text-ink-gray-6 text-sm px-4 py-5 max-w-full"
         :class="{ 'border-none': selected }"
         :style="{
           width: node.attrs.width ? `${node.attrs.width}px` : undefined,
           aspectRatio: aspectRatioFrom(node.attrs.width, node.attrs.height),
         }"
+        :aria-live="hasError ? 'assertive' : undefined"
       >
-        <div class="text-ink-gray-8 text-base">
+        <template v-if="hasError">
+          <ErrorMessage :message="node.attrs.error" />
+          <div v-if="isEditable" class="flex flex-wrap justify-center gap-2">
+            <Button size="xs" variant="subtle" @click.stop="retryUpload">
+              Try again
+            </Button>
+            <Button size="xs" variant="subtle" @click.stop="replaceMedia">
+              Choose another
+            </Button>
+            <Button size="xs" variant="subtle" @click.stop="removeMedia">
+              Remove
+            </Button>
+          </div>
+        </template>
+        <div v-else class="text-ink-gray-8 text-base">
           This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.
         </div>
       </div>
@@ -231,24 +351,11 @@ function retryUpload() {
         v-model="caption"
         class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-none focus:ring-0 placeholder-ink-gray-4"
         placeholder="Add caption"
+        aria-label="Media caption"
         :disabled="!isEditable"
         @blur="commitCaption"
         @keydown="onCaptionKeydown"
       />
-
-      <div
-        v-if="hasError"
-        class="w-full py-2 flex flex-col items-center justify-center gap-2"
-      >
-        <ErrorMessage :message="`Upload failed: ${node.attrs.error}`" />
-        <Button
-          v-if="isEditable"
-          variant="subtle"
-          icon-left="lucide-rotate-cw"
-          label="Try again"
-          @click="retryUpload"
-        />
-      </div>
     </div>
   </NodeViewWrapper>
 </template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/**
+ * Edge resize handles for media / embed node views.
+ *
+ * Renders a vertical pill handle centered on the left and right edges of the
+ * media box (the Notion convention). Each handle reports which edge started
+ * the drag so `useNodeViewResize` can invert the delta for left-edge drags.
+ * Keyboard resize (arrow keys) is forwarded unchanged from either handle.
+ */
+import type { ResizeEdge } from '#molecules/editor/composables/useNodeViewResize'
+
+defineProps<{
+  /** Accessible label prefix, e.g. "Resize media" / "Resize embed". */
+  label: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'resize-start', event: PointerEvent, edge: ResizeEdge): void
+  (e: 'resize-keydown', event: KeyboardEvent): void
+}>()
+
+const edges: readonly ResizeEdge[] = ['left', 'right']
+</script>
+
+<template>
+  <button
+    v-for="edge in edges"
+    :key="edge"
+    type="button"
+    class="absolute top-1/2 z-30 flex h-8 max-h-[50%] w-4 -translate-y-1/2 cursor-ew-resize touch-none items-center justify-center bg-transparent"
+    :class="edge === 'left' ? 'left-0' : 'right-0'"
+    :aria-label="`${label} from ${edge} edge`"
+    @pointerdown.prevent="emit('resize-start', $event, edge)"
+    @keydown="emit('resize-keydown', $event)"
+  >
+    <span class="pointer-events-none h-full w-1 rounded-full bg-black/65 ring-1 ring-white/50" />
+  </button>
+</template>