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

package/src/molecules/editor/extensions/iframe/IframeInsertDialog.vue

@@ -1,26 +1,26 @@
 <template>
   <Dialog
     v-model="open"
-    :options="{ title: 'Insert Embed', size: 'md' }"
+    :options="{ title: dialogTitle, size: 'md' }"
     @close="$emit('close')"
   >
     <template #body-content>
       <div>
-        <label class="mb-2 block text-sm font-medium text-ink-gray-7">
+        <label class="mb-2 block text-base text-ink-gray-5">
           URL or Embed Code
         </label>
         <Textarea
           ref="input"
           v-model="dialog.embedInput.value"
-          placeholder="https://youtube.com/watch?v=… or <iframe src=…>"
+          :placeholder="placeholder"
           @keydown.enter.prevent="submit"
         />
-        <p v-if="dialog.urlError.value" class="mt-1 text-sm text-ink-red-3">
+        <p v-if="dialog.urlError.value" class="mt-1 text-sm text-ink-red-6">
           {{ dialog.urlError.value }}
         </p>
         <p
           v-else-if="dialog.embedInput.value && dialog.isValidUrl.value"
-          class="mt-1 text-sm text-ink-green-3"
+          class="mt-1 text-sm text-ink-green-6"
         >
           ✓ Valid {{ dialog.platformName.value }} URL
         </p>
@@ -35,7 +35,7 @@
           :disabled="!dialog.isValidUrl.value"
           @click="submit"
         >
-          Insert Embed
+          {{ isEditing ? 'Update Embed' : 'Insert Embed' }}
         </Button>
       </div>
     </template>
@@ -49,10 +49,17 @@ import Dialog from '#components/Dialog/Dialog.vue'
 import Button from '#components/Button/Button.vue'
 import Textarea from '#components/Textarea/Textarea.vue'
 import { useIframeDialog } from './useIframeDialog'
+import { platformByName } from './iframe-embed-utils'
 
 const props = defineProps<{
   modelValue: boolean
   editor: Editor
+  /** Edit mode: position resolver for the iframe node being edited. */
+  getReplacePos?: () => number | undefined
+  /** Prefill for edit mode. */
+  initialUrl?: string
+  /** Platform name (e.g. "YouTube") tailoring the title/placeholder. */
+  platform?: string
 }>()
 
 const emit = defineEmits<{
@@ -65,7 +72,27 @@ const open = computed({
   set: (value) => emit('update:modelValue', value),
 })
 
-const dialog = useIframeDialog(props.editor)
+const isEditing = computed(() => !!props.getReplacePos)
+
+const platformConfig = computed(() =>
+  props.platform ? platformByName(props.platform) : null,
+)
+const dialogTitle = computed(() => {
+  if (isEditing.value) return 'Edit Embed'
+  return platformConfig.value
+    ? `Embed ${platformConfig.value.name}`
+    : 'Insert Embed'
+})
+const placeholder = computed(
+  () =>
+    platformConfig.value?.example ??
+    'https://youtube.com/watch?v=… or <iframe src=…>',
+)
+
+const dialog = useIframeDialog(props.editor, {
+  getReplacePos: props.getReplacePos,
+  initialUrl: props.initialUrl,
+})
 const input = useTemplateRef<{ el?: HTMLTextAreaElement }>('input')
 
 function submit() {

package/src/molecules/editor/extensions/iframe/IframeNodeView.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, toRaw } from 'vue'
+import { computed, ref, toRaw, watch } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import MediaToolbar from '#molecules/editor/components/MediaToolbar.vue'
+import MediaResizeHandles from '#molecules/editor/components/MediaResizeHandles.vue'
 import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
 import { useNodeViewResize } from '#molecules/editor/composables/useNodeViewResize'
 import { safeGetPos } from '#molecules/editor/extensions/shared/node-view'
 import { IFRAME_SANDBOX } from './iframe-allowlist'
+import { openIframeInsertDialog } from './iframeInsertDialogController'
 import type { IframeAlign } from './iframe-commands'
 
 const props = defineProps(nodeViewProps)
@@ -32,7 +35,8 @@ const aspectRatio = computed<number>(
 const frameStyle = computed(() => {
   const width = (props.node.attrs.width as number | null) ?? 640
   const height =
-    (props.node.attrs.height as number | null) ?? Math.round(width * aspectRatio.value)
+    (props.node.attrs.height as number | null) ??
+    Math.round(width * aspectRatio.value)
   return { width: `${width}px`, height: `${height}px` }
 })
 
@@ -51,23 +55,48 @@ const { startResize } = useNodeViewResize(editor, {
   },
   minWidth: MIN_WIDTH,
   maxWidthPadding: EDITOR_PADDING,
+  // The iframe's committed size renders via the frameStyle `:style` binding.
+  mediaSizing: 'style',
 })
 
+const showCaption = ref(Boolean(props.node.attrs.title))
+
+// Re-sync when the title attr changes elsewhere (collab, undo, …).
+watch(
+  () => props.node.attrs.title,
+  (title) => {
+    if (title) showCaption.value = true
+  },
+)
+
 function selectIframe(): void {
   const pos = safeGetPos(() => props.getPos())
   if (pos === null) return
   editor.commands.setNodeSelection(pos)
 }
 
-function onResizeStart(event: MouseEvent): void {
+function onResizeStart(event: PointerEvent, edge: 'left' | 'right'): void {
   selectIframe()
-  startResize(event)
+  startResize(event, edge)
 }
 
 function setAlignment(align: IframeAlign): void {
   props.updateAttributes({ align })
 }
 
+function toggleCaption(): void {
+  showCaption.value = !showCaption.value
+  if (!showCaption.value) props.updateAttributes({ title: '' })
+}
+
+function changeEmbedLink(): void {
+  openIframeInsertDialog({
+    editor,
+    getReplacePos: () => safeGetPos(() => props.getPos()) ?? undefined,
+    initialUrl: (props.node.attrs.src as string | null) ?? undefined,
+  })
+}
+
 function setCursorAt(pos: number): void {
   editor.commands.focus()
   editor.chain().setTextSelection(pos).scrollIntoView().run()
@@ -111,7 +140,7 @@ function commitCaption(event: Event): void {
   <NodeViewWrapper>
     <div
       ref="containerRef"
-      class="relative my-6 block max-w-full overflow-hidden rounded-lg not-prose focus:outline-none"
+      class="relative isolate my-6 block max-w-full overflow-hidden rounded not-prose focus:outline-none"
       :class="[
         { 'ring-2 ring-outline-gray-3 ring-offset-2': selected },
         node.attrs.align === 'center' ? 'mx-auto' : '',
@@ -129,7 +158,7 @@ function commitCaption(event: Event): void {
         <iframe
           v-if="node.attrs.src"
           ref="iframeRef"
-          class="block h-auto max-w-full rounded-lg border-0"
+          class="block h-auto max-w-full rounded border-0"
           :class="{ 'pointer-events-none': overlayActive }"
           :src="node.attrs.src"
           :style="frameStyle"
@@ -149,52 +178,29 @@ function commitCaption(event: Event): void {
           @click.stop="selectIframe"
         ></div>
 
-        <!-- Controls overlay -->
-        <div class="absolute bottom-2 right-2 z-20 flex items-center gap-2">
-          <div
-            v-if="selected && isEditable"
-            class="flex divide-x divide-ink-gray-6 rounded-md bg-black/65"
-          >
-            <button
-              class="px-1.5 py-1 text-ink-gray-4 transition-colors duration-150 hover:text-white"
-              :class="{ 'text-white': node.attrs.align === 'left' }"
-              title="Align Left"
-              @click.stop="setAlignment('left')"
-            >
-              <span class="lucide-align-left size-4" />
-            </button>
-            <button
-              class="px-1.5 py-1 text-ink-gray-4 transition-colors duration-150 hover:text-white"
-              :class="{ 'text-white': node.attrs.align === 'center' }"
-              title="Align Center"
-              @click.stop="setAlignment('center')"
-            >
-              <span class="lucide-align-center size-4" />
-            </button>
-            <button
-              class="px-1.5 py-1 text-ink-gray-4 transition-colors duration-150 hover:text-white"
-              :class="{ 'text-white': node.attrs.align === 'right' }"
-              title="Align Right"
-              @click.stop="setAlignment('right')"
-            >
-              <span class="lucide-align-right size-4" />
-            </button>
-          </div>
+        <!-- Shared media toolbar (caption / change link / align) -->
+        <MediaToolbar
+          v-if="node.attrs.src"
+          :node="node"
+          media-type="embed"
+          :is-editable="isEditable"
+          :selected="selected"
+          :show-caption="showCaption"
+          @toggle-caption="toggleCaption"
+          @set-align="setAlignment"
+          @replace="changeEmbedLink"
+        />
 
-          <button
-            v-if="selected && isEditable"
-            class="cursor-nw-resize rounded-md bg-black/65 p-1"
-            title="Resize"
-            @mousedown.prevent="onResizeStart"
-          >
-            <span class="lucide-move-diagonal-2 size-4 text-white" />
-          </button>
-        </div>
+        <MediaResizeHandles
+          v-if="selected && isEditable"
+          label="Resize embed"
+          @resize-start="onResizeStart"
+        />
 
         <!-- Placeholder while no src is set -->
         <div
           v-if="!node.attrs.src"
-          class="flex h-[360px] w-[640px] items-center justify-center rounded-lg bg-surface-gray-1"
+          class="flex h-[360px] w-[640px] items-center justify-center rounded bg-surface-gray-1"
         >
           <div class="text-center text-ink-gray-5">
             <div class="mb-1 text-lg">🔗</div>
@@ -205,7 +211,7 @@ function commitCaption(event: Event): void {
 
       <!-- Caption input (commits on blur / Enter) -->
       <input
-        v-if="(isEditable || node.attrs.title) && node.attrs.src"
+        v-if="(node.attrs.title || showCaption) && node.attrs.src"
         :value="node.attrs.title"
         class="mt-2 h-7 w-full border-0 bg-transparent text-center text-sm text-ink-gray-6 placeholder-ink-gray-4 focus:outline-none focus:ring-0 disabled:opacity-60"
         placeholder="Add caption"

package/src/molecules/editor/extensions/iframe/iframe-allowlist.ts

@@ -8,6 +8,7 @@
  * (absolute + http/https only) and {@link matchesHostname} (exact host OR
  * dot-boundary suffix — never substring).
  */
+import type { Editor } from '@tiptap/core'
 import {
   isSafeUrl,
   matchesHostname,
@@ -38,12 +39,40 @@ export const IFRAME_ALLOWLIST: readonly string[] = [
 /**
  * The sandbox attribute applied to every embedded iframe.
  *
- * Deliberately WITHOUT `allow-same-origin`: the embed must not be able to read
- * cookies / localStorage for our origin. Scripts, popups, forms, and
- * presentation (fullscreen) are permitted so the common embeds still work.
+ * Includes `allow-same-origin`: this lets the embed keep ITS OWN origin
+ * (youtube.com etc.) so its scripts can use their own cookies/storage —
+ * without it, YouTube's player throws SecurityError and renders a black box.
+ * It does NOT grant the iframe our origin; cross-origin isolation from the
+ * host still applies. The `allow-scripts + allow-same-origin` sandbox-escape
+ * concern only exists for content served from OUR origin, which the
+ * allowlist precludes (absolute http(s) URLs on external hosts only).
  */
 export const IFRAME_SANDBOX =
-  'allow-scripts allow-popups allow-forms allow-presentation' as const
+  'allow-scripts allow-same-origin allow-popups allow-forms allow-presentation' as const
+
+/**
+ * The allowlist override configured on the editor's iframe extension, or
+ * `undefined` when the extension is absent / uses the default list.
+ */
+export function getIframeAllowlist(
+  editor: Editor,
+): readonly string[] | undefined {
+  return editor.extensionManager?.extensions.find(
+    (extension) => extension.name === 'iframe',
+  )?.options.allowlist as readonly string[] | undefined
+}
+
+/**
+ * True iff any of `hosts` would pass the editor's iframe allowlist — used to
+ * prune per-platform embed shortcuts when a custom allowlist excludes them.
+ */
+export function allowlistPermitsHosts(
+  editor: Editor,
+  hosts: readonly string[],
+): boolean {
+  const allowlist = getIframeAllowlist(editor) ?? IFRAME_ALLOWLIST
+  return hosts.some((host) => matchesHostname(host, allowlist))
+}
 
 /** Options for {@link validateIframeUrl}. */
 export interface ValidateIframeUrlOptions {

package/src/molecules/editor/extensions/iframe/iframe-commands.ts

@@ -31,8 +31,18 @@ declare module '@tiptap/core' {
       insertIframeURL: (url: string) => ReturnType
       /** Update the selected iframe's alignment. */
       setIframeAlign: (align: IframeAlign) => ReturnType
-      /** Open the insert-embed dialog (mounts it via the controller). */
-      openIframeDialog: () => ReturnType
+      /**
+       * Open the insert-embed dialog (mounts it via the controller).
+       * `platform` (a `PLATFORM_CONFIGS` name, e.g. "YouTube") tailors the
+       * dialog title/placeholder; the dialog still accepts any supported URL.
+       */
+      openIframeDialog: (platform?: string) => ReturnType
+    }
+    // Separate group: the legacy TextEditor also augments `Commands.iframe`,
+    // and a divergent second declaration of a shared group is a TS2717 error.
+    iframeEdit: {
+      /** Swap the src of the iframe node at `pos` (keeps caption/align). */
+      updateIframeAt: (pos: number, url: string) => ReturnType
     }
   }
 }
@@ -78,11 +88,45 @@ export function buildIframeCommands(
       commands.setIframe({ src: url })
 
   const openIframeDialog: RawCommands['openIframeDialog'] =
-    () =>
+    (platform?: string) =>
     ({ editor }) => {
-      openIframeInsertDialog({ editor })
+      openIframeInsertDialog({ editor, platform })
+      return true
+    }
+
+  const updateIframeAt: RawCommands['updateIframeAt'] =
+    (pos: number, url: string) =>
+    ({ editor, tr, dispatch }) => {
+      const node = editor.state.doc.nodeAt(pos)
+      if (!node || node.type.name !== nodeName) return false
+      const processedSrc = processEmbedUrl(url)
+      if (!validateIframeUrl(processedSrc, { allowlist })) return false
+      // Same src → keep the user's sizing; new src → re-derive platform dims.
+      let { width, height } = node.attrs as {
+        width: number | null
+        height: number | null
+      }
+      if (processedSrc !== node.attrs.src || !width || !height) {
+        const editorWidth = editor.view.dom.clientWidth || 800
+        ;({ width, height } = getOptimalDimensions(processedSrc, editorWidth))
+      }
+      if (dispatch) {
+        tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          src: processedSrc,
+          width,
+          height,
+          aspectRatio: height / width,
+        })
+      }
       return true
     }
 
-  return { setIframeAlign, setIframe, insertIframeURL, openIframeDialog }
+  return {
+    setIframeAlign,
+    setIframe,
+    insertIframeURL,
+    openIframeDialog,
+    updateIframeAt,
+  }
 }

package/src/molecules/editor/extensions/iframe/iframe-embed-utils.ts

@@ -32,6 +32,13 @@ export interface PlatformConfig {
   defaultWidth: number
   /** Hostnames (exact or dot-boundary suffix) this platform owns. */
   hosts: readonly string[]
+  /**
+   * Slash-menu glyph. Lucide ships no brand icons, so these are semantic
+   * stand-ins (play for video platforms, frame for Figma, …).
+   */
+  icon: string
+  /** Example URL shown as the dialog placeholder for this platform. */
+  example: string
 }
 
 /** Per-platform sizing + host ownership. */
@@ -41,45 +48,68 @@ export const PLATFORM_CONFIGS: readonly PlatformConfig[] = [
     ratio: 9 / 16,
     defaultWidth: 640,
     hosts: ['youtube.com', 'youtu.be', 'youtube-nocookie.com'],
+    icon: 'lucide-square-play',
+    example: 'https://youtube.com/watch?v=…',
   },
   {
     name: 'Vimeo',
     ratio: 9 / 16,
     defaultWidth: 640,
     hosts: ['vimeo.com', 'player.vimeo.com'],
+    icon: 'lucide-circle-play',
+    example: 'https://vimeo.com/…',
   },
   {
     name: 'CodePen',
     ratio: 3 / 2,
     defaultWidth: 500,
     hosts: ['codepen.io'],
+    icon: 'lucide-code-xml',
+    example: 'https://codepen.io/user/pen/…',
   },
   {
     name: 'CodeSandbox',
     ratio: 3 / 2,
     defaultWidth: 500,
     hosts: ['codesandbox.io'],
+    icon: 'lucide-box',
+    example: 'https://codesandbox.io/s/…',
   },
   {
     name: 'Figma',
     ratio: 9 / 16,
     defaultWidth: 800,
     hosts: ['figma.com', 'embed.figma.com'],
+    icon: 'lucide-frame',
+    example: 'https://figma.com/design/…',
   },
   {
     name: 'Google Docs',
     ratio: 4 / 3,
     defaultWidth: 600,
     hosts: ['docs.google.com', 'drive.google.com'],
+    icon: 'lucide-file-text',
+    example: 'https://docs.google.com/document/d/…',
   },
   {
     name: 'Notion',
     ratio: 4 / 3,
     defaultWidth: 600,
     hosts: ['notion.so'],
+    icon: 'lucide-notebook-text',
+    example: 'https://notion.so/…',
   },
 ]
 
+/** Resolve a platform config by its display name (case-insensitive). */
+export function platformByName(name: string): PlatformConfig | null {
+  const lower = name.toLowerCase()
+  return (
+    PLATFORM_CONFIGS.find((config) => config.name.toLowerCase() === lower) ??
+    null
+  )
+}
+
 /** Resolve the platform config for a URL, or null when unknown/unparseable. */
 export function detectPlatform(url: string): PlatformConfig | null {
   let host: string

package/src/molecules/editor/extensions/iframe/iframe-extension.ts

@@ -8,8 +8,8 @@
  *  - `src` is validated against the allowlist on LOAD (`parseHTML` `getAttrs`)
  *    and on insert/paste — substring matching and the `startsWith('/')` escape
  *    hatch are gone (see `iframe-allowlist.ts`).
- *  - the default `sandbox` no longer includes `allow-same-origin`
- *    ({@link IFRAME_SANDBOX}); rendering always forces that value.
+ *  - rendering always forces the {@link IFRAME_SANDBOX} value, so incoming
+ *    markup can never widen the sandbox beyond it.
  */
 import { Node, mergeAttributes } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
@@ -106,8 +106,8 @@ export const IframeExtension = Node.create<IframeOptions>({
       },
       sandbox: {
         default: IFRAME_SANDBOX,
-        // Never let incoming HTML widen the sandbox: the strict default always
-        // wins, so attacker markup cannot re-add `allow-same-origin` on load.
+        // Never let incoming HTML widen the sandbox: the fixed default always
+        // wins, so attacker markup cannot add extra capabilities on load.
         parseHTML: () => IFRAME_SANDBOX,
         renderHTML: () => ({ sandbox: IFRAME_SANDBOX }),
       },

package/src/molecules/editor/extensions/iframe/iframeInsertDialogController.ts

@@ -18,7 +18,15 @@ function teardown() {
   container = null
 }
 
-export function openIframeInsertDialog(args: { editor: Editor }): void {
+export function openIframeInsertDialog(args: {
+  editor: Editor
+  /** Edit mode: position resolver for the iframe node being edited. */
+  getReplacePos?: () => number | undefined
+  /** Prefill for edit mode (the node's current src). */
+  initialUrl?: string
+  /** Platform name (e.g. "YouTube") tailoring the dialog title/placeholder. */
+  platform?: string
+}): void {
   teardown()
 
   const open = ref(true)
@@ -35,6 +43,9 @@ export function openIframeInsertDialog(args: { editor: Editor }): void {
           if (!value) setTimeout(teardown, 0)
         },
         editor: args.editor,
+        getReplacePos: args.getReplacePos,
+        initialUrl: args.initialUrl,
+        platform: args.platform,
         onClose: () => setTimeout(teardown, 0),
       })
     },

package/src/molecules/editor/extensions/iframe/index.ts

@@ -6,17 +6,17 @@ export type {
 } from './iframe-extension'
 export {
   detectPlatform,
+  platformByName,
   calculateAspectRatio,
   getOptimalDimensions,
   processEmbedUrl,
   PLATFORM_CONFIGS,
 } from './iframe-embed-utils'
-export type {
-  AspectRatioInfo,
-  PlatformConfig,
-} from './iframe-embed-utils'
+export type { AspectRatioInfo, PlatformConfig } from './iframe-embed-utils'
 export {
   IFRAME_ALLOWLIST,
   IFRAME_SANDBOX,
   validateIframeUrl,
+  getIframeAllowlist,
+  allowlistPermitsHosts,
 } from './iframe-allowlist'

package/src/molecules/editor/extensions/iframe/useIframeDialog.ts

@@ -11,7 +11,7 @@
  */
 import { computed, ref, watch, type Ref } from 'vue'
 import type { Editor } from '@tiptap/core'
-import { validateIframeUrl } from './iframe-allowlist'
+import { getIframeAllowlist, validateIframeUrl } from './iframe-allowlist'
 import {
   calculateAspectRatio,
   detectPlatform,
@@ -28,10 +28,15 @@ function extractSrc(input: string): string {
   return trimmed
 }
 
-function getAllowlist(editor: Editor): readonly string[] | undefined {
-  return editor.extensionManager?.extensions.find(
-    (extension) => extension.name === 'iframe',
-  )?.options.allowlist as readonly string[] | undefined
+export interface UseIframeDialogArgs {
+  /**
+   * Edit mode: resolve the position of the iframe node being edited. The
+   * dialog then swaps that node's src in place (via `updateIframeAt`) instead
+   * of inserting. Resolved at submit time so doc changes can't stale the pos.
+   */
+  getReplacePos?: () => number | undefined
+  /** Prefill for edit mode (the node's current src). */
+  initialUrl?: string
 }
 
 export interface UseIframeDialog {
@@ -47,9 +52,12 @@ export interface UseIframeDialog {
   insert: () => boolean
 }
 
-export function useIframeDialog(editor: Editor): UseIframeDialog {
-  const allowlist = getAllowlist(editor)
-  const embedInput = ref('')
+export function useIframeDialog(
+  editor: Editor,
+  args: UseIframeDialogArgs = {},
+): UseIframeDialog {
+  const allowlist = getIframeAllowlist(editor)
+  const embedInput = ref(args.initialUrl ?? '')
   const urlError = ref('')
   const width = ref(640)
   const height = ref(360)
@@ -99,11 +107,15 @@ export function useIframeDialog(editor: Editor): UseIframeDialog {
 
   function insert(): boolean {
     if (!isValidUrl.value) return false
-    const success = editor.commands.setIframe({
-      src: processedUrl.value,
-      width: width.value,
-      height: height.value,
-    })
+    const replacePos = args.getReplacePos?.()
+    const success =
+      replacePos != null
+        ? editor.commands.updateIframeAt(replacePos, processedUrl.value)
+        : editor.commands.setIframe({
+            src: processedUrl.value,
+            width: width.value,
+            height: height.value,
+          })
     if (success) {
       editor.commands.focus()
     } else {