{"version":3,"sources":["../src/index.ts","../src/hyperMultimediaKit.ts","../src/extensions/mediaResizeControls.ts","../src/utils/media-resize-controls.ts","../src/toolbar/contextRegistry.ts","../../../packages/floating-tooltip/src/tooltip.ts","../src/kitStorage.ts","../../../packages/floating-popover/src/controller.ts","../../../packages/floating-popover/src/createPopover.ts","../src/utils/icons.ts","../src/utils/media-placement.ts","../src/toolbar/resolveIcon.ts","../src/toolbar/menu.ts","../src/nodes/x/embedOptions.ts","../src/extensions/decorationHelpers.ts","../src/utils/utils.ts","../src/utils/media-node-attrs.ts","../src/toolbar/handlers.ts","../src/utils/media-target.ts","../src/utils/fitImageDimensions.ts","../src/utils/embedKit.ts","../src/nodes/loom/embedOptions.ts","../src/nodes/loom/helper.ts","../src/nodes/soundcloud/helper.ts","../src/utils/layoutStyle.ts","../src/loading/syncLayout.ts","../src/nodes/spotify/embedOptions.ts","../src/nodes/spotify/helper.ts","../src/nodes/vimeo/embedOptions.ts","../src/nodes/vimeo/helper.ts","../src/utils/logger.ts","../src/utils/sanitizeHtml.ts","../src/nodes/x/helper.ts","../src/nodes/youtube/embedOptions.ts","../src/nodes/youtube/helper.ts","../src/utils/mediaUrl.ts","../src/toolbar/replaceUrl.ts","../src/toolbar/actions.ts","../src/toolbar/compose.ts","../src/toolbar/registry.ts","../src/toolbar/renderToolbar.ts","../src/toolbar/createMediaToolbar.ts","../src/toolbar/mount.ts","../src/extensions/mediaResizeGripper.ts","../src/extensions/decoration/index.ts","../src/nodes/soundcloud/embedOptions.ts","../src/extensions/decoration/utils.ts","../src/extensions/decoration/gripperDrag.ts","../src/extensions/decoration/media-resize-gripper.ts","../src/nodes/audio/audio.ts","../src/caption.ts","../src/loading/defaultShell.ts","../src/loading/attach.ts","../src/markdown/typedMediaMarkdown.ts","../src/utils/htmlMediaNode.ts","../src/utils/ignoreNodeViewMutation.ts","../src/nodes/audio/helper.ts","../src/nodes/image/image.ts","../src/nodes/image/helper.ts","../src/nodes/image/nodeView.ts","../src/nodes/image/plugin.ts","../src/nodes/loom/loom.ts","../src/utils/iframeEmbedNode.ts","../src/nodes/soundcloud/soundcloud.ts","../src/nodes/spotify/spotify.ts","../src/nodes/video/video.ts","../src/nodes/video/helper.ts","../src/nodes/vimeo/vimeo.ts","../src/nodes/x/x.ts","../src/nodes/youtube/youtube.ts","../src/utils/detectMediaType.ts","../src/utils/isMediaUrl.ts"],"sourcesContent":["// Re-exported so the `media` command augmentation in surface.ts lands in the\n// bundled .d.ts (it is the single declaration point for every node's commands).\nexport type { MediaPublicCommands } from './commands/surface'\nexport * from './hyperMultimediaKit'\nexport {\n createDefaultMediaLoadingShell,\n type MediaLoadingBindLoadOptions,\n type MediaLoadingController,\n type MediaLoadingKind,\n type MediaLoadingShellContext,\n type MediaLoadingShellFactory,\n type MediaLoadingShellOption,\n type MediaLoadingShellWrapOptions,\n wrapMediaWithLoadingShell\n} from './loading'\nexport type { SetAudioOptions } from './nodes/audio/audio'\nexport { isImageUrl } from './nodes/image/helper'\nexport type { SetImageOptions, UpdateImageDimensionsParams } from './nodes/image/types'\nexport { isValidLoomUrl } from './nodes/loom/helper'\nexport type { SetLoomOptions } from './nodes/loom/loom'\nexport { isValidSoundCloudUrl } from './nodes/soundcloud/helper'\nexport type { SetSoundCloudOptions } from './nodes/soundcloud/soundcloud'\nexport {\n isValidSpotifyUrl,\n parseSpotifyEntity,\n SPOTIFY_ENTITY_TYPES,\n type SpotifyEntityType,\n type SpotifyTheme\n} from './nodes/spotify/helper'\nexport type { SetSpotifyOptions } from './nodes/spotify/spotify'\nexport type { SetVideoOptions } from './nodes/video/video'\nexport { isValidVimeoUrl } from './nodes/vimeo/helper'\nexport type { SetVimeoOptions } from './nodes/vimeo/vimeo'\nexport {\n buildXOEmbedParams,\n resolveXEmbedSizeId,\n X_EMBED_DEFAULT_MAXWIDTH,\n X_EMBED_SIZE_OPTIONS,\n X_EMBED_THEME_OPTIONS,\n type XEmbedSizeId,\n type XEmbedTheme\n} from './nodes/x/embedOptions'\nexport { isValidXUrl } from './nodes/x/helper'\nexport type { AddXOptions } from './nodes/x/x'\nexport { isValidYoutubeUrl, parseYoutubeVideoId } from './nodes/youtube/helper'\nexport type { SetYoutubeVideoOptions } from './nodes/youtube/youtube'\nexport {\n attachTooltip,\n canViewOriginal,\n closeMediaToolbar,\n closeToolbarPopover,\n composeMediaActions,\n copyMediaNode,\n createMediaToolbar,\n createReplaceUrlPopover,\n downloadMedia,\n hideTooltip,\n isDownloadable,\n layoutMediaActions,\n type MediaAction,\n type MediaActionAnchor,\n type MediaActionContext,\n type MediaActionList,\n type MediaActionPlacement,\n type MediaActionsBuilder,\n type MediaActionsResolver,\n type MediaToolbarFactory,\n type MediaToolbarIconContext,\n type MediaToolbarIconKey,\n type MediaToolbarIconsResolver,\n type MediaToolbarLayout,\n type MediaToolbarOptions,\n openMediaPopover,\n openMediaToolbar,\n openReplaceUrlPopover,\n openToolbarPopover,\n removeMediaNode,\n type ReplaceUrlPopoverFactory,\n type ReplaceUrlPopoverOptions,\n resolveMediaActions,\n viewOriginalMedia\n} from './toolbar'\nexport { detectMediaType, type MediaNodeType } from './utils/detectMediaType'\nexport {\n fitDimensionsToBounds,\n fitLayoutToEditorColumn,\n getEditorContentWidth\n} from './utils/fitImageDimensions'\nexport { isMediaUrl } from './utils/isMediaUrl'\nexport { applyNodeAttributes } from './utils/media-node-attrs'\nexport {\n getCurrentMediaPlacement,\n getMediaPlacementAttrs,\n MEDIA_MARGIN_OPTIONS,\n MEDIA_PLACEMENT_OPTIONS,\n type MediaPlacementId\n} from './utils/media-placement'\nexport { resolveMediaNodePos } from './utils/media-resize-controls'\nexport { isAudioUrl, isVideoUrl } from './utils/mediaUrl'\n","import { Extension } from '@tiptap/core'\n\nimport { MediaResizeControls } from './extensions/mediaResizeControls'\nimport { MediaResizeGripper } from './extensions/mediaResizeGripper'\nimport { HYPER_MULTIMEDIA_KIT_EXTENSION_NAME } from './kitStorage'\nimport type { MediaLoadingShellOption } from './loading'\nimport { Audio, AudioOptions } from './nodes/audio/audio'\nimport { Image } from './nodes/image/image'\nimport type { ImageOptions } from './nodes/image/types'\nimport { Loom, LoomOptions } from './nodes/loom/loom'\nimport { SoundCloud, SoundCloudOptions } from './nodes/soundcloud/soundcloud'\nimport { Spotify, SpotifyOptions } from './nodes/spotify/spotify'\nimport { Video, VideoOptions } from './nodes/video/video'\nimport { Vimeo, VimeoOptions } from './nodes/vimeo/vimeo'\nimport { X, XOptions } from './nodes/x/x'\nimport { Youtube, YoutubeOptions } from './nodes/youtube/youtube'\nimport type { ReplaceUrlPopoverFactory } from './toolbar/replaceUrl'\nimport type { MediaToolbarIconsResolver } from './toolbar/resolveIcon'\nimport type { MediaActionContext, MediaActionsResolver, MediaToolbarFactory } from './toolbar/types'\n\nexport interface HyperMultimediaKitOptions {\n Image: Partial | true | false\n Audio: Partial | true | false\n Video: Partial | true | false\n Youtube: Partial | true | false\n Vimeo: Partial | true | false\n SoundCloud: Partial | true | false\n Spotify: Partial | true | false\n Loom: Partial | true | false\n X: Partial | true | false\n /**\n * Host-agnostic toolbar slot. Return an element for the desktop floating\n * toolbar or `null` to opt out so the host renders its own surface (mobile\n * sheet). Omit to use the built-in `createMediaToolbar`.\n */\n mediaToolbar?: MediaToolbarFactory\n /**\n * Loading overlay while remote media / embeds resolve. `true` = built-in\n * shimmer shell; `false` = off; pass a factory to replace the overlay UI only.\n */\n loadingShell?: MediaLoadingShellOption\n /** Customize/extend/reorder the built-in toolbar actions per node. */\n mediaActions?: MediaActionsResolver\n /**\n * Swap toolbar/menu SVG markup by icon key (`caption`, `more`, `align:center`,\n * custom action ids) without replacing toolbar factories or submenus.\n */\n mediaToolbarIcons?: MediaToolbarIconsResolver\n /**\n * Replace-URL popover slot. Return the popover content for the node-anchored\n * dialog, or `null` to opt out so the host renders its own surface (mobile\n * sheet). Omit to use the built-in URL editor.\n */\n replaceUrlPopover?: ReplaceUrlPopoverFactory\n /** Return true for host-uploaded assets so \"View original\" is hidden (image/video/audio). */\n isUploadedMedia?: (ctx: MediaActionContext) => boolean\n}\n\ntype MediaExtension =\n | typeof Image\n | typeof Video\n | typeof Audio\n | typeof Youtube\n | typeof Vimeo\n | typeof SoundCloud\n | typeof Spotify\n | typeof Loom\n | typeof X\n\nexport const HyperMultimediaKit = Extension.create({\n name: HYPER_MULTIMEDIA_KIT_EXTENSION_NAME,\n\n // Expose the host-agnostic toolbar factory on per-editor storage so\n // `openMediaToolbar` (called from every node-view) can resolve it without\n // threading the option through each node. A host wires a mobile-sheet\n // factory here; absent, the built-in desktop toolbar is used.\n addStorage() {\n return {\n mediaToolbar: this.options.mediaToolbar,\n loadingShell: this.options.loadingShell ?? true,\n mediaActions: this.options.mediaActions,\n mediaToolbarIcons: this.options.mediaToolbarIcons,\n replaceUrlPopover: this.options.replaceUrlPopover,\n isUploadedMedia: this.options.isUploadedMedia\n }\n },\n\n addExtensions() {\n const extensions = []\n const resizableMedia: string[] = []\n const mediaNodeNames: string[] = []\n\n const addMediaExtension = (media: MediaExtension, mediaOptions: any) => {\n if (mediaOptions !== false) {\n mediaNodeNames.push(media.name)\n extensions.push(media.configure(mediaOptions))\n\n // X embeds use oEmbed maxwidth presets in the toolbar, not drag handles.\n if (mediaOptions?.resizeGripper !== false && media.name !== 'x') {\n resizableMedia.push(media.name)\n }\n }\n }\n\n addMediaExtension(Image, this.options.Image)\n addMediaExtension(Video, this.options.Video)\n addMediaExtension(Audio, this.options.Audio)\n addMediaExtension(Youtube, this.options.Youtube)\n addMediaExtension(Vimeo, this.options.Vimeo)\n addMediaExtension(SoundCloud, this.options.SoundCloud)\n addMediaExtension(Spotify, this.options.Spotify)\n addMediaExtension(Loom, this.options.Loom)\n addMediaExtension(X, this.options.X)\n\n if (mediaNodeNames.length > 0) {\n if (resizableMedia.length > 0) {\n extensions.push(\n MediaResizeGripper.configure({\n acceptedNodes: resizableMedia\n })\n )\n }\n extensions.push(\n MediaResizeControls.configure({\n trackedNodes: mediaNodeNames\n })\n )\n }\n\n return extensions\n }\n})\n","import { Extension } from '@tiptap/core'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\n\nimport {\n handleMediaClick,\n handleMediaHover,\n handleMediaUnhover,\n hideMediaResizeControls,\n remapActiveNodePos,\n syncControlsToDoc\n} from '../utils/media-resize-controls'\nimport { hasFinePointer } from '../utils/media-target'\nimport { shouldHideResizeGripper, transactionAffectsTrackedNodes } from './decorationHelpers'\n\nexport interface MediaResizeControlsOptions {\n /** Media node types whose add/remove should tear down hover controls (includes X). */\n trackedNodes: string[]\n}\n\nexport const MediaResizeControls = Extension.create({\n name: 'MediaResizeControls',\n\n addOptions() {\n return {\n trackedNodes: ['image']\n }\n },\n\n addProseMirrorPlugins() {\n const editor = this.editor\n const { trackedNodes } = this.options\n\n return [\n new Plugin({\n key: new PluginKey('MediaResizeControls'),\n view: () => ({\n // PM calls this on every state update; a selection-only change moves no\n // media, so skip the reposition + editor-wide orphan scan on keystrokes.\n update: (view, prevState) => {\n if (view.state.doc !== prevState.doc) syncControlsToDoc(editor)\n },\n destroy: () => hideMediaResizeControls(editor)\n }),\n appendTransaction(transactions) {\n const shouldHide = transactions.some(\n (tr) => shouldHideResizeGripper(tr) || transactionAffectsTrackedNodes(tr, trackedNodes)\n )\n if (shouldHide) {\n hideMediaResizeControls(editor)\n } else {\n remapActiveNodePos(editor, transactions)\n }\n return null\n },\n props: {\n handleDOMEvents: {\n mouseover: (view, event) =>\n view.editable ? handleMediaHover(editor, event, hasFinePointer()) : false,\n mouseout: (view, event) =>\n view.editable ? handleMediaUnhover(editor, event, hasFinePointer()) : false,\n // Touch taps synthesize `click`; finePointer gates hover vs click-to-lock downstream.\n click: (view, event) => (view.editable ? handleMediaClick(editor, event) : false)\n }\n }\n })\n ]\n }\n})\n","import type { Editor } from '@tiptap/core'\nimport { TextSelection, type Transaction } from '@tiptap/pm/state'\n\nimport { updateToolbarContextNodePos } from '../toolbar/contextRegistry'\nimport { closeMediaToolbar, openMediaToolbar } from '../toolbar/mount'\nimport {\n findGripperForMedia,\n findMediaTarget,\n getMediaNodeType,\n hasFinePointer,\n isInsideMediaControlsUI,\n isInteractiveEmbed,\n resolveMediaFromGripper\n} from './media-target'\n\n/** Grace period to traverse from the inline bar to the detached `…`/submenu popovers. */\nconst HOVER_HIDE_DELAY_MS = 250\n\ninterface MediaControlsState {\n activeTarget: HTMLElement | null\n activeNodePos: number | null\n selectionLocked: boolean\n mediaResizing: boolean\n listenersAttached: boolean\n hoverHideTimer: ReturnType | null\n pointerX: number\n pointerY: number\n pointerMoveAttached: boolean\n onPointerOutside: (event: PointerEvent) => void\n onDocumentKeyDown: (event: KeyboardEvent) => void\n onWindowResize: () => void\n onPointerMove: (event: PointerEvent) => void\n}\n\nconst controlsByEditor = new WeakMap()\n\nfunction createControlsState(editor: Editor): MediaControlsState {\n return {\n activeTarget: null,\n activeNodePos: null,\n selectionLocked: false,\n mediaResizing: false,\n listenersAttached: false,\n hoverHideTimer: null,\n pointerX: 0,\n pointerY: 0,\n pointerMoveAttached: false,\n onPointerOutside: (event) => handlePointerOutside(editor, event),\n onDocumentKeyDown: (event) => {\n handleMediaDeleteKey(editor, event)\n handleToolbarEscape(editor, event)\n },\n onWindowResize: () => hideMediaResizeControls(editor),\n onPointerMove: (event) => {\n const state = getControlsState(editor)\n state.pointerX = event.clientX\n state.pointerY = event.clientY\n }\n }\n}\n\nfunction getControlsState(editor: Editor): MediaControlsState {\n let state = controlsByEditor.get(editor)\n if (!state) {\n state = createControlsState(editor)\n controlsByEditor.set(editor, state)\n }\n return state\n}\n\nfunction clearActiveState(state: MediaControlsState): void {\n state.activeTarget = null\n state.activeNodePos = null\n state.selectionLocked = false\n state.mediaResizing = false\n}\n\nfunction canUseHoverControls(state: MediaControlsState, finePointer: boolean): boolean {\n return finePointer && !state.selectionLocked\n}\n\nfunction isDeleteKey(event: KeyboardEvent): boolean {\n return event.key === 'Delete' || event.key === 'Backspace'\n}\n\nfunction isFormControlInMediaUI(element: Element | null): boolean {\n if (!(element instanceof HTMLElement) || !isInsideMediaControlsUI(element)) {\n return false\n }\n const tag = element.tagName\n return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT'\n}\n\n/** The caption is an editable shell in node content; its Backspace/Delete must edit text, not nuke the node. */\nfunction isEditingMediaCaption(element: Element | null): boolean {\n return element instanceof HTMLElement && element.closest('.hm-caption') != null\n}\n\n/** Set by the drag layer so hover-out/outside-pointer don't tear down controls mid-drag. */\nexport function setMediaResizing(editor: Editor, active: boolean): void {\n getControlsState(editor).mediaResizing = active\n}\n\n/** The pixel-sized loading-shell host, not the wrapper-with-caption, is the visible media box. */\nfunction resolveMediaBox(target: HTMLElement): HTMLElement {\n const host = target.querySelector('.hm-media-host')\n return host instanceof HTMLElement ? host : target\n}\n\n/**\n * Overlay the visible media box. Both rects come from `getBoundingClientRect`, then convert\n * into the gripper's own `offsetParent` frame (its border via clientLeft/Top). Drag math\n * reads and writes `offset*`, so the conversion keeps it in one coordinate space.\n */\nfunction positionResizeGripper(gripper: HTMLElement, target: HTMLElement): void {\n const parent = gripper.offsetParent as HTMLElement | null\n const parentRect = parent?.getBoundingClientRect()\n const box = resolveMediaBox(target).getBoundingClientRect()\n\n const originLeft = (parentRect?.left ?? 0) + (parent?.clientLeft ?? 0)\n const originTop = (parentRect?.top ?? 0) + (parent?.clientTop ?? 0)\n\n gripper.style.width = `${box.width}px`\n gripper.style.height = `${box.height}px`\n gripper.style.left = `${box.left - originLeft}px`\n gripper.style.top = `${box.top - originTop}px`\n}\n\nfunction activateResizeGripper(gripper: HTMLElement, target: HTMLElement): void {\n // `--active` flips display:none→block first: a hidden gripper has a null offsetParent\n // and zero-size rects, so positionResizeGripper must run while it is laid out.\n gripper.classList.add('hypermultimedia__resize-gripper--active')\n positionResizeGripper(gripper, target)\n}\n\nfunction deactivateResizeGripper(gripper: HTMLElement): void {\n gripper.classList.remove(\n 'hypermultimedia__resize-gripper--active',\n 'hypermultimedia__resize-gripper--dragging'\n )\n gripper.style.width = ''\n gripper.style.height = ''\n gripper.style.left = ''\n gripper.style.top = ''\n}\n\n/** Active grippers whose media sibling is gone (delete, cut, collab) must not linger in the DOM. */\nfunction purgeOrphanedResizeControls(root: ParentNode = document): void {\n root.querySelectorAll('.hypermultimedia__resize-gripper--active').forEach((node) => {\n if (!(node instanceof HTMLElement)) return\n const media = resolveMediaFromGripper(node, root)\n if (!media || !findMediaTarget(media, root)) {\n deactivateResizeGripper(node)\n }\n })\n}\n\nfunction cancelHoverHide(state: MediaControlsState): void {\n if (state.hoverHideTimer != null) {\n window.clearTimeout(state.hoverHideTimer)\n state.hoverHideTimer = null\n }\n}\n\nfunction isPointerOverActiveControls(editor: Editor): boolean {\n const state = getControlsState(editor)\n if (!state.activeTarget) return false\n\n // Keyboard use parks the pointer anywhere: typing in the Replace dialog or\n // arrowing through menus must not die to the pointer-based 250ms hide.\n const focused = document.activeElement\n if (focused instanceof HTMLElement && isInsideMediaControlsUI(focused)) return true\n\n const hit = document.elementFromPoint(state.pointerX, state.pointerY)\n if (!(hit instanceof HTMLElement)) return false\n if (isInsideMediaControlsUI(hit)) return true\n return findMediaTarget(hit, editor.view.dom) === state.activeTarget\n}\n\nfunction scheduleHoverHide(editor: Editor, event?: MouseEvent): void {\n const state = getControlsState(editor)\n if (event) {\n state.pointerX = event.clientX\n state.pointerY = event.clientY\n }\n\n cancelHoverHide(state)\n state.hoverHideTimer = window.setTimeout(() => {\n state.hoverHideTimer = null\n if (!isPointerOverActiveControls(editor)) hideMediaResizeControls(editor)\n }, HOVER_HIDE_DELAY_MS)\n}\n\nfunction setPointerTracking(editor: Editor, state: MediaControlsState, attach: boolean): void {\n if (state.pointerMoveAttached === attach) return\n if (attach) {\n document.addEventListener('pointermove', state.onPointerMove, { passive: true })\n } else {\n document.removeEventListener('pointermove', state.onPointerMove)\n }\n state.pointerMoveAttached = attach\n}\n\nexport function hideMediaResizeControls(editor: Editor): void {\n const state = getControlsState(editor)\n const gripper = state.activeTarget\n ? findGripperForMedia(state.activeTarget, editor.view.dom)\n : null\n\n cancelHoverHide(state)\n setPointerTracking(editor, state, false)\n if (gripper) deactivateResizeGripper(gripper)\n // Idle controls have no active target, and `closeMediaToolbar` then falls back\n // to `document` — which would tear down another editor's mounted bar.\n closeMediaToolbar(state.activeTarget ?? editor.view.dom)\n clearActiveState(state)\n setOutsideListeners(state, false)\n purgeOrphanedResizeControls(editor.view.dom)\n}\n\n/** Keeps Delete-key and toolbar actions aimed at the node when edits above shift its position. */\nexport function remapActiveNodePos(editor: Editor, transactions: readonly Transaction[]): void {\n const state = getControlsState(editor)\n if (state.activeNodePos === null || state.mediaResizing) return\n\n let pos = state.activeNodePos\n for (const tr of transactions) {\n if (!tr.docChanged) continue\n const mapped = tr.mapping.mapResult(pos)\n if (mapped.deleted) {\n hideMediaResizeControls(editor)\n return\n }\n pos = mapped.pos\n }\n if (pos === state.activeNodePos) return\n\n state.activeNodePos = pos\n if (state.activeTarget) updateToolbarContextNodePos(state.activeTarget, pos)\n}\n\n/** Runs post-DOM-update: edits above reflow the node, but the gripper's inline box is a snapshot. */\nfunction repositionActiveGripper(editor: Editor, state: MediaControlsState): void {\n if (!state.activeTarget) return\n const gripper = findGripperForMedia(state.activeTarget, editor.view.dom)\n if (gripper?.classList.contains('hypermultimedia__resize-gripper--active')) {\n positionResizeGripper(gripper, state.activeTarget)\n }\n}\n\n/** Tear down when the node behind the active controls has left the document (delete, cut, remote edit). */\nexport function syncControlsToDoc(editor: Editor): void {\n const state = getControlsState(editor)\n if (state.mediaResizing) return\n // Idle controls ⇒ nothing to tear down; skip the document-wide orphan scan on every transaction.\n if (!state.activeTarget && !state.listenersAttached) return\n if (state.activeTarget && !state.activeTarget.isConnected) {\n hideMediaResizeControls(editor)\n return\n }\n repositionActiveGripper(editor, state)\n purgeOrphanedResizeControls(editor.view.dom)\n}\n\n// Scroll is not a teardown trigger: gripper rides content; toolbar tracks via autoUpdate.\nfunction setOutsideListeners(state: MediaControlsState, attach: boolean): void {\n if (state.listenersAttached === attach) return\n\n if (attach) {\n document.addEventListener('pointerdown', state.onPointerOutside, true)\n document.addEventListener('keydown', state.onDocumentKeyDown, true)\n window.addEventListener('resize', state.onWindowResize)\n } else {\n document.removeEventListener('pointerdown', state.onPointerOutside, true)\n document.removeEventListener('keydown', state.onDocumentKeyDown, true)\n window.removeEventListener('resize', state.onWindowResize)\n }\n\n state.listenersAttached = attach\n}\n\nfunction handlePointerOutside(editor: Editor, event: PointerEvent): void {\n const state = getControlsState(editor)\n if (state.mediaResizing) return\n const clickTarget = event.target as HTMLElement | null\n if (isInsideMediaControlsUI(clickTarget)) return\n const media = findMediaTarget(clickTarget, editor.view.dom)\n if (media === state.activeTarget) return\n hideMediaResizeControls(editor)\n}\n\n/** DOM → doc position with a node-type guard; also re-resolves stale drag-end positions. */\nexport function resolveMediaNodePos(\n view: Editor['view'],\n target: HTMLElement,\n nodeType: string\n): number | null {\n try {\n const pos = view.posAtDOM(target, 0)\n const node = view.state.doc.nodeAt(pos)\n if (node?.type.name === nodeType) return pos\n\n const $pos = view.state.doc.resolve(pos)\n if ($pos.nodeAfter?.type.name === nodeType) return $pos.pos\n if ($pos.nodeBefore?.type.name === nodeType) {\n return $pos.pos - $pos.nodeBefore.nodeSize\n }\n } catch {\n return null\n }\n return null\n}\n\n/** Desktop hover or touch click — gripper + toolbar, or toolbar-only for X embeds. */\nfunction showMediaResizeControls(editor: Editor, target: HTMLElement): boolean {\n const state = getControlsState(editor)\n const nodeType = getMediaNodeType(target)\n if (!nodeType) return false\n\n const nodePos = resolveMediaNodePos(editor.view, target, nodeType)\n if (nodePos === null) return false\n\n const gripper = findGripperForMedia(target, editor.view.dom)\n const toolbarOnly = nodeType === 'x'\n if (!gripper && !toolbarOnly) return false\n\n if (state.activeTarget && state.activeTarget !== target) {\n hideMediaResizeControls(editor)\n }\n\n cancelHoverHide(state)\n\n if (gripper) activateResizeGripper(gripper, target)\n openMediaToolbar({\n target,\n editor,\n nodeType,\n nodePos\n })\n\n state.activeTarget = target\n state.activeNodePos = nodePos\n setPointerTracking(editor, state, true)\n setOutsideListeners(state, true)\n return true\n}\n\nfunction lockMediaSelection(editor: Editor): void {\n getControlsState(editor).selectionLocked = true\n}\n\nfunction deleteActiveMediaNode(editor: Editor): boolean {\n const state = getControlsState(editor)\n const { activeTarget, activeNodePos, mediaResizing } = state\n if (!activeTarget || activeNodePos === null || mediaResizing || !editor.isEditable) {\n return false\n }\n\n const node = editor.state.doc.nodeAt(activeNodePos)\n const nodeType = getMediaNodeType(activeTarget)\n if (!node || !nodeType || node.type.name !== nodeType) return false\n\n editor.view.dispatch(editor.state.tr.delete(activeNodePos, activeNodePos + node.nodeSize))\n return true\n}\n\nfunction handleMediaDeleteKey(editor: Editor, event: KeyboardEvent): boolean {\n if (!isDeleteKey(event)) return false\n if (event.metaKey || event.ctrlKey || event.altKey || event.isComposing) return false\n if (!getControlsState(editor).activeTarget) return false\n if (isFormControlInMediaUI(document.activeElement)) return false\n if (isEditingMediaCaption(document.activeElement)) return false\n // A focused caret in text must keep editing text. Hover controls only own the\n // key when the node is selected or focus is outside the editor.\n if (editor.view.hasFocus() && editor.state.selection instanceof TextSelection) return false\n if (!deleteActiveMediaNode(editor)) return false\n\n event.preventDefault()\n return true\n}\n\n/** Escape with focus in the toolbar dismisses it and refocuses the editor. Skips when focus sits in a floating popover — its own bubble-phase Escape closes just the popover. */\nfunction handleToolbarEscape(editor: Editor, event: KeyboardEvent): boolean {\n if (event.key !== 'Escape' || !getControlsState(editor).activeTarget) return false\n const focused = document.activeElement\n if (!(focused instanceof HTMLElement) || focused.closest('.floating-popover')) return false\n if (!focused.closest('[data-hm-toolbar]')) return false\n\n hideMediaResizeControls(editor)\n editor.commands.focus()\n event.preventDefault()\n return true\n}\n\nexport function handleMediaHover(editor: Editor, event: MouseEvent, finePointer: boolean): boolean {\n const state = getControlsState(editor)\n if (!canUseHoverControls(state, finePointer)) return false\n\n cancelHoverHide(state)\n state.pointerX = event.clientX\n state.pointerY = event.clientY\n\n const fromTarget = event.target as HTMLElement\n if (isInsideMediaControlsUI(fromTarget)) return false\n\n const target = findMediaTarget(fromTarget, editor.view.dom)\n if (!target || target === state.activeTarget) return false\n\n showMediaResizeControls(editor, target)\n return false\n}\n\nexport function handleMediaUnhover(\n editor: Editor,\n event: MouseEvent,\n finePointer: boolean\n): boolean {\n const state = getControlsState(editor)\n if (!canUseHoverControls(state, finePointer) || !state.activeTarget || state.mediaResizing) {\n return false\n }\n\n const related = event.relatedTarget as HTMLElement | null\n if (isInsideMediaControlsUI(related)) return false\n if (findMediaTarget(related, editor.view.dom) === state.activeTarget) return false\n\n scheduleHoverHide(editor, event)\n return false\n}\n\nexport function handleMediaClick(editor: Editor, event: MouseEvent | TouchEvent): boolean {\n if (isInsideMediaControlsUI(event.target as HTMLElement)) return false\n\n const target = findMediaTarget(event.target as HTMLElement, editor.view.dom)\n if (!target) return false\n\n // Notion-style: embed iframes stay interactive; only images use click-to-lock.\n if (isInteractiveEmbed(getMediaNodeType(target))) return false\n\n lockMediaSelection(editor)\n showMediaResizeControls(editor, target)\n event.preventDefault()\n return true\n}\n\n/** Re-mount hover controls after resize rebuilds the gripper decoration. */\nexport function restoreControlsAfterResize(\n editor: Editor,\n gripper: HTMLElement,\n nodePos?: number\n): void {\n setMediaResizing(editor, false)\n\n let target: HTMLElement | null = null\n if (nodePos !== undefined) {\n target = editor.view.nodeDOM(nodePos) as HTMLElement | null\n } else {\n target = resolveMediaFromGripper(gripper, editor.view.dom)\n }\n\n hideMediaResizeControls(editor)\n\n if (hasFinePointer() && target?.matches(':hover')) {\n showMediaResizeControls(editor, target)\n }\n\n editor.commands.focus()\n}\n","import type { MediaActionContext } from './types'\n\n// Internal bridge: lets the controls layer refresh a mounted bar's nodePos\n// without importing toolbar internals beyond this module (no utils↔toolbar cycle).\nconst contextByToolbar = new WeakMap()\n\n/** Only the default factory registers; host-provided toolbars opt out by never appearing here. */\nexport function registerToolbarContext(bar: HTMLElement, ctx: MediaActionContext): void {\n contextByToolbar.set(bar, ctx)\n}\n\n/** Action handlers close over ctx and read it at click time, so mutating in place is enough. */\nexport function updateToolbarContextNodePos(wrapper: HTMLElement, nodePos: number): void {\n const bar = wrapper.querySelector(':scope > [data-hm-toolbar]')\n const ctx = bar ? contextByToolbar.get(bar) : undefined\n if (ctx) ctx.nodePos = nodePos\n}\n","import { computePosition, flip, offset, shift } from '@floating-ui/dom'\n\n/*\n * Built on raw `@floating-ui/dom`, deliberately not `createPopover`: the engine\n * self-adopts into the one-popover-at-a-time controller, so showing a tooltip\n * would dismiss an open menu or dialog. One shared bubble serves every button.\n */\n\nconst SHOW_DELAY_MS = 400\nconst VISIBLE_CLASS = 'visible'\n\nlet bubble: HTMLDivElement | null = null\nlet showTimer: ReturnType | null = null\n\nfunction ensureBubble(): HTMLDivElement {\n if (!bubble) {\n bubble = document.createElement('div')\n bubble.className = 'floating-tooltip'\n bubble.setAttribute('role', 'tooltip')\n document.body.append(bubble)\n }\n return bubble\n}\n\nfunction cancelShow(): void {\n if (showTimer !== null) {\n clearTimeout(showTimer)\n showTimer = null\n }\n}\n\n// No autoUpdate: tooltips are ephemeral, every hide/re-show re-positions.\nasync function show(target: HTMLElement, label: string): Promise {\n if (!target.isConnected) return\n const el = ensureBubble()\n el.textContent = label\n const { x, y } = await computePosition(target, el, {\n strategy: 'fixed',\n placement: 'top',\n middleware: [offset(6), flip(), shift({ padding: 8 })]\n })\n el.style.left = `${x}px`\n el.style.top = `${y}px`\n el.classList.add(VISIBLE_CLASS)\n}\n\n/** Hide the shared tooltip bubble and cancel any pending show. */\nexport function hideTooltip(): void {\n cancelShow()\n bubble?.classList.remove(VISIBLE_CLASS)\n}\n\n/** Show `label` above `target` after a short hover/focus delay. Returns a detach function for surfaces that re-render in place. */\nexport function attachTooltip(target: HTMLElement, label: string): () => void {\n const schedule = (): void => {\n cancelShow()\n showTimer = setTimeout(() => {\n showTimer = null\n void show(target, label)\n }, SHOW_DELAY_MS)\n }\n // Keyboard focus only: click-focus would re-show over the popover the click opened.\n const scheduleOnFocus = (): void => {\n if (target.matches(':focus-visible')) schedule()\n }\n target.addEventListener('mouseenter', schedule)\n target.addEventListener('focus', scheduleOnFocus)\n target.addEventListener('mouseleave', hideTooltip)\n target.addEventListener('blur', hideTooltip)\n // Activation opens popovers; the tooltip must not linger over them.\n // `click` covers keyboard Enter/Space, which fire no pointerdown.\n target.addEventListener('pointerdown', hideTooltip)\n target.addEventListener('click', hideTooltip)\n return () => {\n target.removeEventListener('mouseenter', schedule)\n target.removeEventListener('focus', scheduleOnFocus)\n target.removeEventListener('mouseleave', hideTooltip)\n target.removeEventListener('blur', hideTooltip)\n target.removeEventListener('pointerdown', hideTooltip)\n target.removeEventListener('click', hideTooltip)\n hideTooltip()\n }\n}\n","import type { Editor } from '@tiptap/core'\n\nimport type { MediaLoadingShellOption } from './loading/types'\nimport type { ReplaceUrlPopoverFactory } from './toolbar/replaceUrl'\nimport type { MediaToolbarIconsResolver } from './toolbar/resolveIcon'\nimport type { MediaActionContext, MediaActionsResolver, MediaToolbarFactory } from './toolbar/types'\n\nexport const HYPER_MULTIMEDIA_KIT_EXTENSION_NAME = 'HyperMultimediaKit'\n\n/** Single source of truth for the kit's storage shape — read via `getKitStorage`. */\nexport interface HyperMultimediaKitStorage {\n mediaToolbar?: MediaToolbarFactory\n /** Matches the real stored value (`boolean | factory`), not a bare boolean. */\n loadingShell?: MediaLoadingShellOption\n mediaActions?: MediaActionsResolver\n /** Swap toolbar/menu SVG markup by icon key without replacing toolbar factories. */\n mediaToolbarIcons?: MediaToolbarIconsResolver\n replaceUrlPopover?: ReplaceUrlPopoverFactory\n isUploadedMedia?: (ctx: MediaActionContext) => boolean\n}\n\n/** Typed accessor that replaces the ad-hoc `editor.storage as Record<...>` casts. */\nexport function getKitStorage(editor: Editor): HyperMultimediaKitStorage {\n return (\n (editor.storage as Record)[\n HYPER_MULTIMEDIA_KIT_EXTENSION_NAME\n ] ?? {}\n )\n}\n","// Extension-agnostic single-popover lifecycle owner. `adopt` takes\n// ownership of a built popover (destroying the previous owner), `close`\n// hides + idles, `reposition` re-anchors, `subscribe` observes\n// idle ↔ mounted transitions.\n\nexport type PopoverKind = 'preview' | 'edit' | 'create' | (string & {})\n\nexport type VirtualCoordinates = {\n getBoundingClientRect: () => { x: number; y: number; width: number; height: number }\n contextElement?: HTMLElement\n}\n\nexport interface ManagedPopover {\n hide: () => void\n destroy: () => void\n updateReference: (referenceElement?: HTMLElement, coordinates?: VirtualCoordinates) => void\n}\n\nexport type AdoptMetadata = {\n /** The popover's root element — what subscribers attach focus rings, scroll-freezes, or DOM observers to. */\n element: HTMLElement\n /** The anchor the popover is glued to — `null` for virtual-coords popovers (e.g. selection-anchored create). */\n referenceElement: HTMLElement | null\n}\n\nexport type ControllerState =\n { kind: 'idle' } | ({ kind: 'mounted'; popoverKind: PopoverKind } & AdoptMetadata)\n\nexport interface PopoverController {\n adopt(popover: ManagedPopover, kind: PopoverKind, metadata: AdoptMetadata): () => void\n close(): void\n reposition(referenceElement?: HTMLElement, coordinates?: VirtualCoordinates): void\n getState(): ControllerState\n subscribe(listener: (state: ControllerState) => void): () => void\n}\n\nexport function createPopoverController(): PopoverController {\n let current: { popover: ManagedPopover; kind: PopoverKind; metadata: AdoptMetadata } | null = null\n const listeners = new Set<(state: ControllerState) => void>()\n\n const snapshot = (): ControllerState =>\n current === null\n ? { kind: 'idle' }\n : {\n kind: 'mounted',\n popoverKind: current.kind,\n element: current.metadata.element,\n referenceElement: current.metadata.referenceElement\n }\n\n const notify = (): void => {\n const state = snapshot()\n listeners.forEach((listener) => listener(state))\n }\n\n return {\n adopt(popover, kind, metadata) {\n const previous = current\n current = { popover, kind, metadata }\n if (previous && previous.popover !== popover) previous.popover.destroy()\n notify()\n return () => {\n if (current?.popover === popover) {\n current = null\n notify()\n }\n }\n },\n close() {\n if (current === null) return\n const { popover } = current\n current = null\n popover.hide()\n notify()\n },\n reposition(referenceElement, coordinates) {\n current?.popover.updateReference(referenceElement, coordinates)\n },\n getState: snapshot,\n subscribe(listener) {\n listeners.add(listener)\n return () => {\n listeners.delete(listener)\n }\n }\n }\n}\n\nlet defaultController: PopoverController = createPopoverController()\n\nexport function getDefaultController(): PopoverController {\n return defaultController\n}\n\nexport function setDefaultController(controller: PopoverController): void {\n defaultController = controller\n}\n\nexport function resetDefaultController(): void {\n defaultController = createPopoverController()\n}\n","import {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n hide as hideMiddleware,\n offset,\n type Placement,\n type ReferenceElement,\n shift,\n type VirtualElement\n} from '@floating-ui/dom'\n\nimport { getDefaultController, type VirtualCoordinates } from './controller'\n\ntype PopoverAnchor =\n | { referenceElement: HTMLElement; coordinates?: never }\n | { referenceElement?: never; coordinates: VirtualCoordinates }\n\ntype PopoverShellOptions = {\n content: HTMLElement\n placement?: Placement\n offset?: number\n showArrow?: boolean\n className?: string\n zIndex?: number\n /**\n * ARIA has no popover role — the shell carries its content's role\n * (`toolbar`, `dialog`, …) and stays role-less when omitted.\n */\n role?: string\n /** Same ARIA axis as `role` — shell-level so BYO content inherits the accessible name. */\n ariaLabel?: string\n /**\n * Nodes that must not light-dismiss (toggle triggers). When set, only these\n * are ignored — not `referenceElement` — so a larger position surface (e.g.\n * a toolbar bar) can still dismiss on sibling clicks. When omitted, the\n * HTMLElement `referenceElement` is ignored instead.\n */\n ignoreOutsideClickOn?: HTMLElement | HTMLElement[]\n /**\n * When false, `shift` only moves on the main axis so end-aligned menus\n * (e.g. toolbar overflow) stay pinned to the reference’s end edge.\n * @default true\n */\n crossAxisShift?: boolean\n onShow?: () => void\n onHide?: () => void\n}\n\nexport type PopoverOptions = PopoverAnchor & PopoverShellOptions\n\n/**\n * One-shot once opened: hiding releases the controller's ownership and nothing\n * re-adopts, so `show()` will not reopen it. Build a new popover instead — a\n * re-shown one would sit outside the single-popover invariant, invisible to\n * `close()` and never evicted by the next `adopt()`.\n */\nexport interface Popover {\n element: HTMLElement\n /** No-op once the popover has been hidden or destroyed. */\n show: () => void\n /** Terminal once shown. Before the first `show()` it no-ops and keeps ownership. */\n hide: () => void\n destroy: () => void\n isVisible: () => boolean\n setContent: (content: HTMLElement) => void\n updateReference: (referenceElement?: HTMLElement, coordinates?: VirtualCoordinates) => void\n}\n\nexport const DEFAULT_OFFSET = 8\nconst DEFAULT_Z_INDEX = 9999\nconst SHIFT_PADDING = 8\nconst ARROW_STATIC_OFFSET = '-5px'\nconst OUTSIDE_CLICK_DEFER_MS = 50\n// Covers the skins' 80ms exit; transitionend never fires under display:none or\n// prefers-reduced-motion `transition: none`, so removal cannot rely on it alone.\nconst EXIT_FALLBACK_MS = 150\n\nconst ORIGIN_BY_SIDE: Record = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left'\n}\n\nfunction createVirtualReference(coords: VirtualCoordinates): VirtualElement {\n return {\n getBoundingClientRect: () => {\n const { x, y, width, height } = coords.getBoundingClientRect()\n return { width, height, top: y, right: x + width, bottom: y + height, left: x, x, y }\n },\n contextElement: coords.contextElement || document.body\n }\n}\n\n// Wraps focusables in a Tab cycle. Returns removers so each `setContent`\n// can drop the prior batch before re-binding — without it the per-focusable\n// `keydown` listeners leaked across content swaps and on destroy.\nfunction setupKeyboardNav(container: HTMLElement): Array<() => void> {\n const focusable = container.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n )\n if (!focusable.length) return []\n const removers: Array<() => void> = []\n focusable.forEach((el, i) => {\n const onKeydown = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return\n e.preventDefault()\n const next = e.shiftKey\n ? (i - 1 + focusable.length) % focusable.length\n : (i + 1) % focusable.length\n focusable[next].focus()\n }\n el.addEventListener('keydown', onKeydown)\n removers.push(() => el.removeEventListener('keydown', onKeydown))\n })\n return removers\n}\n\nexport function createPopover(options: PopoverOptions): Popover {\n const controller = getDefaultController()\n\n const {\n referenceElement,\n coordinates,\n content,\n placement = 'bottom-start',\n offset: offsetVal = DEFAULT_OFFSET,\n showArrow = false,\n className = '',\n zIndex = DEFAULT_Z_INDEX,\n role,\n ariaLabel,\n ignoreOutsideClickOn,\n crossAxisShift = true,\n onShow,\n onHide\n } = options\n\n // Defence-in-depth for `any`-typed and JS-only callers; the discriminated\n // union in `PopoverOptions` already makes this case a compile error.\n if (!referenceElement && !coordinates) {\n throw new Error('Either referenceElement or coordinates must be provided')\n }\n\n let reference: ReferenceElement = referenceElement || createVirtualReference(coordinates!)\n // Prefer an explicit ignore list (position ref ≠ toggle trigger). Otherwise\n // the HTMLElement reference is the toggle target and must not light-dismiss.\n const outsideIgnore: HTMLElement[] = ignoreOutsideClickOn\n ? Array.isArray(ignoreOutsideClickOn)\n ? [...ignoreOutsideClickOn]\n : [ignoreOutsideClickOn]\n : referenceElement\n ? [referenceElement]\n : []\n const cleanups: (() => void)[] = []\n let visible = false\n let terminated = false\n let autoUpdateCleanup: (() => void) | null = null\n\n const isOutsideDismissTarget = (target: Node | null): boolean => {\n if (!target) return true\n if (root.contains(target)) return false\n return !outsideIgnore.some((el) => el === target || el.contains(target))\n }\n\n const root = document.createElement('div')\n root.className = `floating-popover ${className}`.trim()\n if (role) root.setAttribute('role', role)\n if (ariaLabel) root.setAttribute('aria-label', ariaLabel)\n root.setAttribute('tabindex', '-1')\n root.style.zIndex = String(zIndex)\n root.style.position = 'fixed'\n\n let arrowEl: HTMLElement | null = null\n if (showArrow) {\n arrowEl = document.createElement('div')\n arrowEl.className = 'floating-popover-arrow'\n root.appendChild(arrowEl)\n }\n\n const contentContainer = document.createElement('div')\n contentContainer.className = 'floating-popover-content'\n root.appendChild(contentContainer)\n\n const navListeners: Array<() => void> = []\n const clearNavListeners = (): void => {\n while (navListeners.length) navListeners.pop()!()\n }\n\n const setContent = (el: HTMLElement): void => {\n clearNavListeners()\n contentContainer.innerHTML = ''\n contentContainer.appendChild(el)\n navListeners.push(...setupKeyboardNav(root))\n }\n\n setContent(content)\n\n const updatePosition = async (): Promise => {\n if (!visible) return\n const middleware = [\n offset(offsetVal),\n flip(),\n shift({ padding: SHIFT_PADDING, crossAxis: crossAxisShift })\n ]\n if (arrowEl) middleware.push(arrow({ element: arrowEl }))\n middleware.push(hideMiddleware({ strategy: 'referenceHidden' }))\n\n const {\n x,\n y,\n placement: actual,\n middlewareData\n } = await computePosition(reference, root, {\n placement,\n strategy: 'fixed',\n middleware\n })\n if (!visible) return\n Object.assign(root.style, { left: `${x}px`, top: `${y}px` })\n root.style.visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'\n\n const side = actual.split('-')[0]\n // Scale blooms from the anchored side instead of center.\n root.style.transformOrigin = ORIGIN_BY_SIDE[side] ?? 'center'\n\n if (arrowEl && middlewareData.arrow) {\n const { x: ax, y: ay } = middlewareData.arrow\n // Arrow pins to the side opposite the placement — the same mapping.\n const staticSide = ORIGIN_BY_SIDE[side]!\n arrowEl.className = `floating-popover-arrow floating-popover-arrow-${side}`\n Object.assign(arrowEl.style, {\n left: ax != null ? `${ax}px` : '',\n top: ay != null ? `${ay}px` : '',\n right: '',\n bottom: '',\n [staticSide]: ARROW_STATIC_OFFSET\n })\n }\n }\n\n let unregister: (() => void) | null = null\n let removalTimer: ReturnType | null = null\n let onExitEnd: ((e: TransitionEvent) => void) | null = null\n\n const cancelPendingRemoval = (): void => {\n if (removalTimer) {\n clearTimeout(removalTimer)\n removalTimer = null\n }\n if (onExitEnd) {\n root.removeEventListener('transitionend', onExitEnd)\n onExitEnd = null\n }\n }\n\n const finishHide = (): void => {\n cancelPendingRemoval()\n root.remove()\n }\n\n const hide = (): void => {\n if (!visible) return\n visible = false\n terminated = true\n autoUpdateCleanup?.()\n autoUpdateCleanup = null\n clearNavListeners()\n cleanups.forEach((fn) => fn())\n cleanups.length = 0\n unregister?.()\n unregister = null\n // Removing .visible plays the skin's exit transition; the DOM node leaves on\n // transitionend, with the fallback timer as the guarantee.\n root.classList.remove('visible')\n onExitEnd = (e) => {\n if (e.target === root) finishHide()\n }\n root.addEventListener('transitionend', onExitEnd)\n removalTimer = setTimeout(finishHide, EXIT_FALLBACK_MS)\n onHide?.()\n }\n\n const show = (): void => {\n // A removal is only ever armed after `terminated` is set, so this can never\n // find one pending — the re-show/removal race is gone rather than guarded.\n if (visible || terminated) return\n document.body.appendChild(root)\n visible = true\n autoUpdateCleanup = autoUpdate(reference, root, updatePosition)\n requestAnimationFrame(() => root.classList.add('visible'))\n setTimeout(() => {\n if (!visible) return\n const onMouseDown = (e: MouseEvent) => {\n if (isOutsideDismissTarget(e.target as Node)) hide()\n }\n const onTouchStart = (e: TouchEvent) => {\n if (!e.touches.length) return\n const target = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)\n if (isOutsideDismissTarget(target)) hide()\n }\n document.addEventListener('mousedown', onMouseDown, { passive: true })\n document.addEventListener('touchstart', onTouchStart, { passive: true })\n cleanups.push(\n () => document.removeEventListener('mousedown', onMouseDown),\n () => document.removeEventListener('touchstart', onTouchStart)\n )\n }, OUTSIDE_CLICK_DEFER_MS)\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault()\n hide()\n }\n }\n root.addEventListener('keydown', onKeyDown)\n cleanups.push(() => root.removeEventListener('keydown', onKeyDown))\n onShow?.()\n }\n\n const destroy = (): void => {\n hide()\n // `hide()` no-ops when the popover was never shown; destroying is terminal either way.\n terminated = true\n // Teardown is immediate — destroy callers replace or unmount the surface.\n finishHide()\n }\n\n const popover: Popover = {\n element: root,\n show,\n hide,\n destroy,\n isVisible: () => visible,\n setContent,\n updateReference: (ref?: HTMLElement, coords?: VirtualCoordinates) => {\n if (ref) reference = ref\n else if (coords) reference = createVirtualReference(coords)\n if (visible) {\n autoUpdateCleanup?.()\n autoUpdateCleanup = autoUpdate(reference, root, updatePosition)\n } else {\n updatePosition()\n }\n }\n }\n\n unregister = controller.adopt(popover, 'unknown', {\n element: root,\n referenceElement: referenceElement ?? null\n })\n return popover\n}\n","interface IconProps {\n size?: number\n fill?: string\n className?: string\n}\n\nconst VIEW_BOX = '0 -960 960 960'\n\n/** Google Material Symbols (outlined) path → inline SVG for imperative toolbar DOM. */\nfunction materialIcon(\n path: string,\n { size = 20, fill = 'currentColor', className = '' }: IconProps = {}\n): string {\n const klass = className ? ` class=\"${className}\"` : ''\n return ``\n}\n\n/** Official Material Symbols outlined paths — matches `@docs.plus/extension-hyperlink` icon style. */\nconst PATHS = {\n alignLeft:\n 'M120-120v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Z',\n alignCenter:\n 'M120-120v-80h720v80H120Zm160-160v-80h400v80H280ZM120-440v-80h720v80H120Zm160-160v-80h400v80H280ZM120-760v-80h720v80H120Z',\n alignRight:\n 'M120-120v-80h720v80H120Zm240-160v-80h480v80H360ZM120-440v-80h720v80H120Zm240-160v-80h480v80H360ZM120-760v-80h720v80H120Z',\n imageLeft:\n 'M120-280v-400h400v400H120Zm80-80h240v-240H200v240Zm-80-400v-80h720v80H120Zm480 160v-80h240v80H600Zm0 160v-80h240v80H600Zm0 160v-80h240v80H600ZM120-120v-80h720v80H120Z',\n imageRight:\n 'M440-280v-400h400v400H440Zm80-80h240v-240H520v240ZM120-120v-80h720v80H120Zm0-160v-80h240v80H120Zm0-160v-80h240v80H120Zm0-160v-80h240v80H120Zm0-160v-80h720v80H120Z',\n caption:\n 'M240-320h320v-80H240v80Zm400 0h80v-80h-80v80ZM240-480h80v-80h-80v80Zm160 0h320v-80H400v80ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z',\n externalLink: 'M256-240 200-296l384-384H320v-80h400v400h-80v-264L256-240Z',\n download:\n 'M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z',\n replaceUrl:\n 'M280-120 80-320l200-200 57 56-104 104h607v80H233l104 104-57 56Zm400-320-57-56 104-104H120v-80h607L623-784l57-56 200 200-200 200Z',\n copy: 'M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z',\n trash:\n 'M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z',\n more: 'M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z'\n} as const\n\ntype IconRenderer = (props?: IconProps) => string\n\nfunction icon(path: string): IconRenderer {\n return (props) => materialIcon(path, props)\n}\n\nexport const AlignLeft = icon(PATHS.alignLeft)\nexport const AlignCenter = icon(PATHS.alignCenter)\nexport const AlignRight = icon(PATHS.alignRight)\nexport const ImageLeft = icon(PATHS.imageLeft)\nexport const ImageRight = icon(PATHS.imageRight)\nexport const Caption = icon(PATHS.caption)\nexport const ExternalLink = icon(PATHS.externalLink)\nexport const Download = icon(PATHS.download)\nexport const Replace = icon(PATHS.replaceUrl)\nexport const Copy = icon(PATHS.copy)\nexport const Trash = icon(PATHS.trash)\nexport const More = icon(PATHS.more)\n","export const MEDIA_MARGIN_OPTIONS = [\n { value: '0in', label: '0\"' },\n { value: '0.06in', label: '1/16\"' },\n { value: '0.13in', label: '1/8\"' },\n { value: '0.25in', label: '1/4\"' },\n { value: '0.38in', label: '3/8\"' },\n { value: '0.5in', label: '1/2\"' },\n { value: '0.75in', label: '3/4\"' },\n { value: '1in', label: '1\"' }\n] as const\n\nexport type MediaPlacementId = 'inline' | 'center' | 'right' | 'float-left' | 'float-right'\n\nexport const MEDIA_PLACEMENT_OPTIONS: ReadonlyArray<{ id: MediaPlacementId; label: string }> = [\n { id: 'inline', label: 'Left' },\n { id: 'center', label: 'Center' },\n { id: 'right', label: 'Right' },\n { id: 'float-left', label: 'Wrap left' },\n { id: 'float-right', label: 'Wrap right' }\n]\n\nexport function getMediaPlacementAttrs(\n id: MediaPlacementId,\n margin = '0.5in'\n): Record {\n switch (id) {\n case 'inline':\n return { display: 'block', float: 'none', clear: 'none', margin: '0' }\n case 'center':\n return { display: 'block', float: 'none', clear: 'none', margin: 'auto' }\n case 'right':\n return { display: 'block', float: 'none', clear: 'none', margin: '0 0 0 auto' }\n case 'float-left':\n return { display: 'block', float: 'left', clear: 'none', margin }\n case 'float-right':\n return { display: 'block', float: 'right', clear: 'none', margin }\n }\n}\n\nexport function getCurrentMediaPlacement(attrs: Record): MediaPlacementId {\n if (attrs.float === 'left') return 'float-left'\n if (attrs.float === 'right') return 'float-right'\n if (attrs.display === 'block' && attrs.margin === 'auto') return 'center'\n if (attrs.display === 'block' && attrs.margin === '0 0 0 auto') return 'right'\n return 'inline'\n}\n\nconst isZeroLength = (value: string): boolean =>\n value === '0' || value === '0px' || value === '0in' || value === '0rem' || value === '0em'\n\n/** Left+right margin expression for `calc(100% - …)` — null when there is no horizontal inset. */\nfunction horizontalMarginExpression(margin: string | null | undefined): string | null {\n if (margin == null) return null\n const trimmed = margin.trim()\n if (!trimmed || isZeroLength(trimmed) || /\\bauto\\b/i.test(trimmed)) return null\n\n const parts = trimmed.split(/\\s+/)\n switch (parts.length) {\n case 1:\n return isZeroLength(parts[0]) ? null : `2 * ${parts[0]}`\n case 2:\n case 3:\n return isZeroLength(parts[1]) ? null : `2 * ${parts[1]}`\n case 4: {\n const right = parts[1]\n const left = parts[3]\n if (isZeroLength(left) && isZeroLength(right)) return null\n if (isZeroLength(left)) return right\n if (isZeroLength(right)) return left\n return `${left} + ${right}`\n }\n default:\n return null\n }\n}\n\n/**\n * Floated media keeps a pixel `width` while wrap margins sit outside the box —\n * `max-width: 100%` alone still overflows. Cap the border box so width + margins\n * fit the column.\n */\nexport function maxWidthForFloatedMedia(margin: string | null | undefined): string {\n const sum = horizontalMarginExpression(margin)\n return sum ? `calc(100% - (${sum}))` : '100%'\n}\n\nexport function isFloatedMedia(float: string | null | undefined): boolean {\n return float === 'left' || float === 'right'\n}\n","import { getKitStorage } from '../kitStorage'\nimport * as Icons from '../utils/icons'\nimport { getCurrentMediaPlacement, type MediaPlacementId } from '../utils/media-placement'\nimport type { MediaActionContext } from './types'\n\ntype BuiltinIconKey =\n 'caption' | 'view-original' | 'download' | 'replace' | 'copy' | 'delete' | 'more'\n\ntype PlacementIconKey = `align:${MediaPlacementId}`\n\n/** A built-in slot, an `align:` slot, or a custom action id from `mediaActions`. */\nexport type MediaToolbarIconKey = BuiltinIconKey | PlacementIconKey | (string & {})\n\n/** Everything a host needs to pick an icon — the key encodes the dynamic part. */\nexport interface MediaToolbarIconContext {\n key: MediaToolbarIconKey\n nodeType: string\n}\n\n/** Host hook: return SVG markup for a slot, or nullish to keep the built-in icon. */\nexport type MediaToolbarIconsResolver = (ctx: MediaToolbarIconContext) => string | null | undefined\n\nexport type MediaToolbarIconScope = Pick & {\n /** Required for the inline align button (`align:`). */\n attrs?: Record\n}\n\nconst ICON_SIZE = 18\n\nconst ALIGN_MATERIAL: Record = {\n inline: 'AlignLeft',\n center: 'AlignCenter',\n right: 'AlignRight',\n 'float-left': 'ImageLeft',\n 'float-right': 'ImageRight'\n}\n\nconst BUILTIN_MATERIAL: Record string> = {\n caption: () => Icons.Caption({ size: ICON_SIZE }),\n 'view-original': () => Icons.ExternalLink({ size: ICON_SIZE }),\n download: () => Icons.Download({ size: ICON_SIZE }),\n replace: () => Icons.Replace({ size: ICON_SIZE }),\n copy: () => Icons.Copy({ size: ICON_SIZE }),\n delete: () => Icons.Trash({ size: ICON_SIZE }),\n more: () => Icons.More({ size: ICON_SIZE })\n}\n\nfunction materialPlacementIcon(key: PlacementIconKey): string | null {\n const id = key.slice('align:'.length) as MediaPlacementId\n const icon = ALIGN_MATERIAL[id]\n return icon ? Icons[icon]({ size: ICON_SIZE }) : null\n}\n\nfunction normalizeIconKey(\n key: MediaToolbarIconKey,\n attrs?: Record\n): MediaToolbarIconKey {\n if (key === 'align' && attrs) {\n return `align:${getCurrentMediaPlacement(attrs)}`\n }\n return key\n}\n\nfunction defaultMaterialIcon(key: MediaToolbarIconKey): string | null {\n if (key.startsWith('align:')) return materialPlacementIcon(key as PlacementIconKey)\n if (key in BUILTIN_MATERIAL) return BUILTIN_MATERIAL[key as BuiltinIconKey]()\n return null\n}\n\n/** Host override → built-in Material icon → null (text button or host-only custom id). */\nexport function resolveMediaToolbarIcon(\n scope: MediaToolbarIconScope,\n key: MediaToolbarIconKey,\n icons?: MediaToolbarIconsResolver | null\n): string | null {\n const resolvedKey = normalizeIconKey(key, scope.attrs)\n const iconCtx = { key: resolvedKey, nodeType: scope.nodeType }\n const override = (icons ?? getKitStorage(scope.editor).mediaToolbarIcons)?.(iconCtx)\n if (override) return override\n return defaultMaterialIcon(resolvedKey)\n}\n","import { createPopover, DEFAULT_OFFSET, getDefaultController } from '@docs.plus/floating-popover'\nimport { attachTooltip } from '@docs.plus/floating-tooltip'\n\nimport { type MediaToolbarIconsResolver, resolveMediaToolbarIcon } from './resolveIcon'\nimport type { MediaAction, MediaActionContext } from './types'\n\n/** Tuck menus under the bar — DEFAULT_OFFSET (8) leaves a visible gutter. */\nconst TOOLBAR_MENU_OFFSET = 2\n\nconst POPOVER_BY_VARIANT = {\n menu: {\n placement: 'bottom-end' as const,\n offset: TOOLBAR_MENU_OFFSET,\n crossAxisShift: false\n },\n dialog: {\n placement: 'bottom' as const,\n offset: DEFAULT_OFFSET\n }\n} as const\n\nconst toolbarTooltipDetaches = new WeakMap void)[]>()\n\nexport function bindToolbarTooltips(bar: HTMLElement, detaches: (() => void)[]): void {\n toolbarTooltipDetaches.set(bar, detaches)\n}\n\nexport function releaseToolbarTooltips(bar: HTMLElement): void {\n toolbarTooltipDetaches.get(bar)?.forEach((detach) => detach())\n toolbarTooltipDetaches.delete(bar)\n}\n\nexport function actionButton(\n action: MediaAction,\n ctx: MediaActionContext,\n variant: 'inline' | 'row',\n icons?: MediaToolbarIconsResolver | null,\n tooltipDetaches?: (() => void)[]\n): HTMLButtonElement {\n const btn = document.createElement('button')\n btn.type = 'button'\n btn.dataset.actionId = action.id\n const active = action.isActive?.(ctx) ?? false\n // Only toggle-semantics actions (those declaring isActive) announce a pressed state.\n if (action.isActive) btn.setAttribute('aria-pressed', active ? 'true' : 'false')\n const iconMarkup = action.icon?.(ctx) ?? resolveMediaToolbarIcon(ctx, action.id, icons) ?? null\n const label = action.label(ctx)\n\n // A label can carry a document-controlled attribute (the margin action reports\n // a non-preset value verbatim), so it is written as text, never interpolated.\n const labelSpan = (): HTMLSpanElement => {\n const span = document.createElement('span')\n span.textContent = label\n return span\n }\n\n if (variant === 'inline') {\n btn.className = 'media-toolbar__button' + (active ? ' media-toolbar__button--active' : '')\n if (iconMarkup) btn.innerHTML = iconMarkup\n else {\n btn.append(labelSpan())\n btn.classList.add('media-toolbar__button--text')\n }\n btn.setAttribute('aria-label', label)\n // Icon-only buttons get the floating tooltip; text labels self-describe.\n if (iconMarkup) {\n const detach = attachTooltip(btn, label)\n tooltipDetaches?.push(detach)\n }\n } else {\n btn.className = 'media-toolbar__menu-item' + (active ? ' media-toolbar__menu-item--active' : '')\n if (iconMarkup) btn.innerHTML = iconMarkup\n btn.append(labelSpan())\n }\n return btn\n}\n\nexport type OpenMediaPopoverOptions = {\n kind: string\n content: HTMLElement\n /** Click target — ignored for light-dismiss so toggle works. */\n trigger: HTMLElement\n /** Position surface; defaults to `trigger`. Overflow menus pass the toolbar bar. */\n positionReference?: HTMLElement\n variant?: 'menu' | 'dialog'\n role?: string\n ariaLabel?: string\n /** When false, skip toggle-close if the same kind is already open (dialogs). Default true for menu. */\n toggle?: boolean\n}\n\n/**\n * Media toolbar popover adapter — owns toggle, menu offset/shift, and dismiss-ignore.\n * Callers pass content + kind + anchors only.\n */\nexport function openMediaPopover(options: OpenMediaPopoverOptions): void {\n const {\n kind,\n content,\n trigger,\n positionReference = trigger,\n variant = 'menu',\n role,\n ariaLabel,\n toggle = variant === 'menu'\n } = options\n\n const controller = getDefaultController()\n if (toggle) {\n const state = controller.getState()\n if (state.kind === 'mounted' && state.popoverKind === kind) {\n controller.close()\n return\n }\n }\n\n const popover = createPopover({\n referenceElement: positionReference,\n content,\n ...POPOVER_BY_VARIANT[variant],\n role,\n ariaLabel,\n ignoreOutsideClickOn: trigger\n })\n\n controller.adopt(popover, kind, {\n element: popover.element,\n referenceElement: positionReference\n })\n popover.show()\n}\n\nexport type OpenToolbarPopoverOptions = {\n /** Position against this surface; defaults to `trigger`. Overflow menus pass the toolbar bar. */\n positionReference?: HTMLElement\n}\n\n/** Toggle an anchored menu popover on the shared controller; one open at a time. */\nexport function openToolbarPopover(\n trigger: HTMLElement,\n body: HTMLElement,\n kind: string,\n options?: OpenToolbarPopoverOptions\n): void {\n openMediaPopover({\n kind,\n content: body,\n trigger,\n positionReference: options?.positionReference,\n variant: 'menu'\n })\n}\n\n/** Close the popover opened by `openToolbarPopover` / `openMediaPopover`, if any. */\nexport function closeToolbarPopover(): void {\n getDefaultController().close()\n}\n\n/** Vertical overflow menu: action rows + inline-expanded submenu sections. */\nexport function buildOverflowMenu(\n ctx: MediaActionContext,\n menuActions: MediaAction[],\n icons?: MediaToolbarIconsResolver | null\n): HTMLElement {\n const menu = document.createElement('div')\n menu.className = 'media-toolbar__menu'\n for (const action of menuActions) {\n if (action.renderSubmenu) {\n const section = document.createElement('div')\n section.className = 'media-toolbar__menu-section'\n const heading = document.createElement('p')\n heading.className = 'media-toolbar__menu-heading'\n heading.textContent = action.label(ctx)\n section.append(heading, action.renderSubmenu(ctx))\n menu.append(section)\n continue\n }\n const row = actionButton(action, ctx, 'row', icons)\n row.onclick = () => action.run?.(ctx)\n menu.append(row)\n }\n return menu\n}\n","export type XEmbedSizeId = 'compact' | 'standard' | 'wide'\nexport type XEmbedTheme = 'light' | 'dark'\n\nexport const X_EMBED_DEFAULT_MAXWIDTH = 400\n\nexport const X_EMBED_SIZE_OPTIONS: ReadonlyArray<{\n id: XEmbedSizeId\n label: string\n maxwidth: number\n}> = [\n { id: 'compact', label: 'Compact', maxwidth: 280 },\n { id: 'standard', label: 'Standard', maxwidth: 400 },\n { id: 'wide', label: 'Wide', maxwidth: 550 }\n]\n\nexport const X_EMBED_THEME_OPTIONS: ReadonlyArray<{ id: XEmbedTheme; label: string }> = [\n { id: 'light', label: 'Light' },\n { id: 'dark', label: 'Dark' }\n]\n\nexport const resolveXEmbedSizeId = (maxwidth: number | null | undefined): XEmbedSizeId => {\n const width = maxwidth ?? X_EMBED_DEFAULT_MAXWIDTH\n return X_EMBED_SIZE_OPTIONS.find((option) => option.maxwidth === width)?.id ?? 'standard'\n}\n\nexport interface XOEmbedKitOptions {\n theme: XEmbedTheme\n lang: string\n dnt: boolean\n hide_media: boolean\n hide_thread: boolean\n}\n\nexport const buildXOEmbedParams = (\n attrs: Record,\n options: XOEmbedKitOptions\n): Record => {\n const params: Record = {\n url: String(attrs.src ?? ''),\n theme: (attrs.theme as XEmbedTheme | undefined) ?? options.theme,\n maxwidth: Number(attrs.maxwidth ?? X_EMBED_DEFAULT_MAXWIDTH),\n lang: String(attrs.lang ?? options.lang),\n dnt: attrs.dnt === false ? 0 : 1,\n omit_script: 1\n }\n\n if (attrs.hide_media ?? options.hide_media) {\n params.hide_media = 1\n }\n\n if (attrs.hide_thread ?? options.hide_thread) {\n params.hide_thread = 1\n }\n\n if (typeof attrs.align === 'string' && attrs.align !== 'none') {\n params.align = attrs.align\n }\n\n return params\n}\n","import { Fragment, Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { Transaction } from '@tiptap/pm/state'\nimport { ReplaceAroundStep, ReplaceStep } from '@tiptap/pm/transform'\nimport { DecorationSet } from '@tiptap/pm/view'\n\nexport const HIDE_RESIZE_GRIPPER_META = 'hideResizeGripper'\n\nexport type BuildDecorationsFunction = (doc: ProseMirrorNode) => DecorationSet\n\nexport function shouldHideResizeGripper(tr: Transaction): boolean {\n return tr.getMeta(HIDE_RESIZE_GRIPPER_META) === true\n}\n\nfunction fragmentHasTrackedType(fragment: Fragment, targetNodeTypes: string[]): boolean {\n let found = false\n fragment.descendants((node) => {\n if (found) return false\n if (targetNodeTypes.includes(node.type.name)) found = true\n return !found\n })\n return found\n}\n\nfunction rangeHasTrackedType(\n doc: ProseMirrorNode,\n from: number,\n to: number,\n targetNodeTypes: string[]\n): boolean {\n if (from >= to) return false\n let found = false\n doc.nodesBetween(from, to, (node) => {\n if (found) return false\n if (targetNodeTypes.includes(node.type.name)) found = true\n return !found\n })\n return found\n}\n\n/**\n * O(k) replacement for a whole-doc count diff: a tracked node added, removed, or\n * replaced shows up in some step's changed range or inserted slice. Scans each\n * step against its own before-doc (`tr.docs[i]`); mark/attr steps can't change\n * node structure, so they're skipped.\n */\nexport function transactionAffectsTrackedNodes(\n tr: Transaction,\n targetNodeTypes: string[]\n): boolean {\n if (!tr.docChanged) return false\n for (let i = 0; i < tr.steps.length; i++) {\n const step = tr.steps[i]\n if (!(step instanceof ReplaceStep) && !(step instanceof ReplaceAroundStep)) continue\n if (fragmentHasTrackedType(step.slice.content, targetNodeTypes)) return true\n // tr.docs[i] is the doc before step i (PM keeps docs.length === steps.length),\n // so step.from/to are in its coordinate space — never tr.before's.\n if (rangeHasTrackedType(tr.docs[i], step.from, step.to, targetNodeTypes)) return true\n }\n return false\n}\n","import type { StyleLayoutOptions } from './layoutStyle'\n\nexport type { StyleLayoutOptions } from './layoutStyle'\n\nexport const applyStyles = (dom: HTMLElement, styles: StyleLayoutOptions): void => {\n const style = dom.style as unknown as Record\n for (const [key, value] of Object.entries(styles)) {\n if (value !== undefined && value !== null) {\n style[key] = typeof value === 'number' ? `${value}px` : value\n }\n }\n}\n\nexport const generateShortId = (): string => {\n const randomPart = Math.random().toString(36).slice(2, 7) // 5 random characters\n const timePart = Date.now().toString(36).slice(-5) // last 5 characters of the current time\n return `${randomPart}-${timePart}`\n}\n\n/** Drops null/false entries before writing boolean HTML attributes onto media tags. */\nexport function omitNullishAndFalse(attrs: Record): Record {\n const result: Record = {}\n for (const [key, value] of Object.entries(attrs)) {\n if (value !== null && value !== false) result[key] = value\n }\n return result\n}\n","import type { Editor } from '@tiptap/core'\n\nimport { HIDE_RESIZE_GRIPPER_META } from '../extensions/decorationHelpers'\nimport { generateShortId } from './utils'\n\n/**\n * Gripper and toolbar resolve a node by first-match `[data-key-id]`, so parsing\n * mints a fresh id: pasted HTML would otherwise aim them at the original node.\n */\nexport const keyIdAttribute = (): { default: string | null; parseHTML: () => string } => ({\n default: null,\n parseHTML: () => generateShortId()\n})\n\nexport const applyNodeAttributes = (\n editor: Editor,\n nodePos: number,\n attributes: Record\n): void => {\n if (!editor.isEditable) return\n const { state, dispatch } = editor.view\n const transaction = state.tr\n const node = transaction.doc.nodeAt(nodePos)\n\n if (!node) return\n\n Object.entries(attributes).forEach(([key, value]) => {\n transaction.setNodeAttribute(nodePos, key, value)\n })\n transaction.setMeta(HIDE_RESIZE_GRIPPER_META, true)\n dispatch(transaction)\n}\n\n/** Commit caption text without the hide-gripper meta — typing must not tear down the shell. */\nexport const setMediaCaption = (editor: Editor, nodePos: number, caption: string | null): void => {\n if (!editor.isEditable) return\n const { state, dispatch } = editor.view\n if (!state.doc.nodeAt(nodePos)) return\n dispatch(state.tr.setNodeAttribute(nodePos, 'caption', caption))\n}\n","import { DOMSerializer } from '@tiptap/pm/model'\n\nimport { getKitStorage } from '../kitStorage'\nimport { isDownloadableMedia, mediaKind } from '../utils/media-target'\nimport type { MediaActionContext } from './types'\n\n/** Downloadable local-asset kinds (image/audio/video); see `media-target.mediaKind`. */\nexport function isDownloadable(nodeType: string): boolean {\n return isDownloadableMedia(nodeType)\n}\n\n/** Provider embeds (youtube/vimeo/soundcloud/loom/x) whose `src` is an external URL. */\nexport function isEmbedNode(nodeType: string): boolean {\n return mediaKind(nodeType) === 'embed'\n}\n\nexport function isUploadedMedia(ctx: MediaActionContext): boolean {\n return getKitStorage(ctx.editor).isUploadedMedia?.(ctx) ?? false\n}\n\n/** View Original: embeds always; uploaded image/video/audio hidden. */\nexport function canViewOriginal(ctx: MediaActionContext): boolean {\n if (!ctx.attrs.src) return false\n if (isEmbedNode(ctx.nodeType)) return true\n return !isUploadedMedia(ctx)\n}\n\n/**\n * Guards the `window.open` sink. Not `isSafeMediaSrc`: that rejects `blob:`, a\n * legitimate src for uploaded media. Collab attrs are never re-validated.\n */\nconst isOpenableSrc = (src: string): boolean => /^(https?:|blob:|\\/)/i.test(src)\n\nexport function viewOriginalMedia(ctx: MediaActionContext): void {\n const src = String(ctx.attrs.src ?? '')\n if (isOpenableSrc(src)) window.open(src, '_blank', 'noopener,noreferrer')\n ctx.close()\n}\n\nexport function removeMediaNode(ctx: MediaActionContext): void {\n const node = ctx.editor.state.doc.nodeAt(ctx.nodePos)\n if (!node || node.type.name !== ctx.nodeType) return\n ctx.editor.view.dispatch(ctx.editor.state.tr.delete(ctx.nodePos, ctx.nodePos + node.nodeSize))\n ctx.close()\n}\n\nfunction serializeNodeHTML(ctx: MediaActionContext): string | null {\n const node = ctx.editor.state.doc.nodeAt(ctx.nodePos)\n if (!node) return null\n const serializer = DOMSerializer.fromSchema(ctx.editor.schema)\n const wrapper = document.createElement('div')\n wrapper.append(serializer.serializeNode(node))\n return wrapper.innerHTML\n}\n\nexport async function copyMediaNode(ctx: MediaActionContext): Promise {\n const html = serializeNodeHTML(ctx)\n const src = String(ctx.attrs.src ?? '')\n try {\n if (html && typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write) {\n await navigator.clipboard.write([\n new ClipboardItem({\n 'text/html': new Blob([html], { type: 'text/html' }),\n 'text/plain': new Blob([src], { type: 'text/plain' })\n })\n ])\n } else {\n await navigator.clipboard.writeText(src)\n }\n } catch {\n if (src) await navigator.clipboard?.writeText(src).catch(() => {})\n }\n ctx.close()\n}\n\nfunction filenameFromSrc(src: string): string {\n try {\n const name = new URL(src, window.location.href).pathname.split('/').pop()\n return name && name.includes('.') ? name : 'media'\n } catch {\n return 'media'\n }\n}\n\n/** Same-origin / blob URLs download; cross-origin without CORS falls back to opening a tab. */\nexport async function downloadMedia(ctx: MediaActionContext): Promise {\n const src = String(ctx.attrs.src ?? '')\n if (!src) return\n try {\n const res = await fetch(src)\n if (!res.ok) throw new Error(`download failed: ${res.status}`)\n const blob = await res.blob()\n const objectUrl = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = objectUrl\n a.download = filenameFromSrc(src)\n document.body.append(a)\n a.click()\n a.remove()\n URL.revokeObjectURL(objectUrl)\n } catch {\n if (isOpenableSrc(src)) window.open(src, '_blank', 'noopener,noreferrer')\n }\n ctx.close()\n}\n\n/** Reveal + focus the inline caption editor (created by the node view). */\nexport function focusCaption(ctx: MediaActionContext): void {\n const caption = ctx.wrapper.querySelector('.hm-caption')\n if (!caption) return\n caption.classList.remove('hm-caption--empty')\n caption.focus()\n const range = document.createRange()\n range.selectNodeContents(caption)\n range.collapse(false)\n const sel = window.getSelection()\n sel?.removeAllRanges()\n sel?.addRange(range)\n}\n","const CONTENT_CLASS = /hypermultimedia--([a-z]+)__content/\nconst GRIPPER_CLASS = 'hypermultimedia__resize-gripper'\nconst GRIPPER_SELECTOR = `.${GRIPPER_CLASS}`\n\nfunction queryHTMLElement(root: ParentNode, selector: string): HTMLElement | null {\n const el = root.querySelector(selector)\n return el instanceof HTMLElement ? el : null\n}\n\nfunction queryGripperByKeyId(keyId: string, root: ParentNode): HTMLElement | null {\n return queryHTMLElement(root, `${GRIPPER_SELECTOR}[data-media-key-id=\"${CSS.escape(keyId)}\"]`)\n}\n\nfunction queryMediaByKeyId(keyId: string, root: ParentNode): HTMLElement | null {\n return queryHTMLElement(root, `[data-key-id=\"${CSS.escape(keyId)}\"]`)\n}\n\nfunction isGripper(el: Element | null): el is HTMLElement {\n return el instanceof HTMLElement && el.classList.contains(GRIPPER_CLASS)\n}\n\nfunction isMediaWrapper(el: Element | null): el is HTMLElement {\n // Inline the gripper class check: isGripper's type predicate would narrow `el` to never.\n if (!(el instanceof HTMLElement) || el.classList.contains(GRIPPER_CLASS)) return false\n if (el.classList.contains('hypermultimedia--image__content')) return true\n if (el.hasAttribute('data-key-id')) return true\n return CONTENT_CLASS.test(el.className)\n}\n\n/** Gripper widget for a media wrapper — keyId link first, validated sibling fallback. */\nexport function findGripperForMedia(\n target: HTMLElement,\n root: ParentNode = document\n): HTMLElement | null {\n const keyId = target.getAttribute('data-key-id')\n if (keyId) {\n const linked = queryGripperByKeyId(keyId, root)\n if (linked) return linked\n }\n const prev = target.previousElementSibling\n return isGripper(prev) ? prev : null\n}\n\n/** Media wrapper for a gripper widget — keyId link first, validated sibling fallback. */\nexport function resolveMediaFromGripper(\n gripper: HTMLElement,\n root: ParentNode\n): HTMLElement | null {\n const keyId = gripper.dataset.mediaKeyId\n if (keyId) {\n const linked = queryMediaByKeyId(keyId, root)\n if (linked) return linked\n }\n const next = gripper.nextElementSibling\n return isMediaWrapper(next) ? next : null\n}\n\n/** Block wrapper or image element that owns resize controls. */\nexport function findMediaTarget(\n el: HTMLElement | null,\n root: ParentNode = document\n): HTMLElement | null {\n if (!el) return null\n\n const gripper = el.closest(GRIPPER_SELECTOR)\n if (gripper instanceof HTMLElement) {\n const media = resolveMediaFromGripper(gripper, root)\n if (media) return media\n }\n\n const imageRoot = el.closest('.hypermultimedia--image__content')\n if (imageRoot instanceof HTMLElement) return imageRoot\n\n const wrapper = el.closest('[class*=\"hypermultimedia--\"][class*=\"__content\"]')\n return wrapper instanceof HTMLElement ? wrapper : null\n}\n\nexport function getMediaNodeType(target: HTMLElement): string | null {\n if (target.closest('.hypermultimedia--image__content')) return 'image'\n const fromClass = target.className.match(CONTENT_CLASS)?.[1]\n if (fromClass) return fromClass\n return target.getAttribute('data-node-name')\n}\n\n/** `asset` = downloadable local media; everything else is a provider embed. */\nconst ASSET_NODE_TYPES = new Set(['image', 'audio', 'video'])\n\nexport type MediaKind = 'asset' | 'embed'\n\nexport function mediaKind(nodeType: string | null): MediaKind {\n return nodeType != null && ASSET_NODE_TYPES.has(nodeType) ? 'asset' : 'embed'\n}\n\nexport function isDownloadableMedia(nodeType: string | null): boolean {\n return mediaKind(nodeType) === 'asset'\n}\n\n/** Embeds with in-frame controls (play, scrub) — provider embeds plus `video`. */\nexport function isInteractiveEmbed(nodeType: string | null): boolean {\n if (!nodeType) return false\n return mediaKind(nodeType) === 'embed' || nodeType === 'video'\n}\n\nexport function isInsideMediaControlsUI(el: HTMLElement | null): boolean {\n // `[data-hm-toolbar]` is the structural lifecycle marker (mount.ts stamps it\n // on built-in and custom bars alike), so custom factories are covered too.\n return !!el?.closest('[data-hm-toolbar], .floating-popover, .hypermultimedia__resize-gripper')\n}\n\n// Cache the query: hover/out/click fire on every element boundary, so a fresh\n// matchMedia() per event is pure waste.\nconst finePointerQuery = typeof matchMedia === 'function' ? matchMedia('(pointer: fine)') : null\n\nexport function hasFinePointer(): boolean {\n return finePointerQuery?.matches ?? false\n}\n","import type { Editor } from '@tiptap/core'\n\nexport interface FitBounds {\n maxWidth: number\n maxHeight?: number\n}\n\nexport function fitDimensionsToBounds(\n width: number,\n height: number,\n bounds: FitBounds\n): { width: number; height: number } {\n if (width <= 0 || height <= 0 || bounds.maxWidth <= 0) {\n return { width, height }\n }\n\n const aspectRatio = width / height\n let targetWidth = width\n let targetHeight = height\n const maxHeight = bounds.maxHeight ?? Number.POSITIVE_INFINITY\n\n if (targetWidth > bounds.maxWidth) {\n targetWidth = bounds.maxWidth\n targetHeight = Math.round(targetWidth / aspectRatio)\n }\n\n if (targetHeight > maxHeight) {\n targetHeight = maxHeight\n targetWidth = Math.round(targetHeight * aspectRatio)\n }\n\n return { width: Math.round(targetWidth), height: Math.round(targetHeight) }\n}\n\n/** ProseMirror content width — caps insert + resize to the editable column. */\nexport function getEditorContentWidth(editor: Editor): number {\n const root = editor.view.dom\n const prose =\n root instanceof HTMLElement && root.classList.contains('ProseMirror')\n ? root\n : (root.querySelector('.ProseMirror') as HTMLElement | null)\n const target = prose ?? (root instanceof HTMLElement ? root : null)\n if (target?.clientWidth) return target.clientWidth\n\n return root.parentElement?.clientWidth ?? 0\n}\n\n/** Scale layout down when width exceeds the editable column (insert + resize). */\nexport function fitLayoutToEditorColumn(\n editor: Editor,\n width: number,\n height: number\n): { width: number; height: number } {\n const maxWidth = getEditorContentWidth(editor)\n if (maxWidth <= 0 || width <= 0 || height <= 0) {\n return { width, height }\n }\n return fitDimensionsToBounds(width, height, { maxWidth })\n}\n","import type { Editor } from '@tiptap/core'\n\nimport { fitLayoutToEditorColumn } from './fitImageDimensions'\nimport type { StyleLayoutOptions } from './utils'\n\nexport interface EmbedNodeOptions {\n inline: boolean\n addPasteHandler: boolean\n HTMLAttributes: Record\n}\n\nexport interface FullscreenIframeKitOptions {\n allow: string\n frameborder: number\n allowfullscreen: boolean\n}\n\nexport const EMBED_BASE_DEFAULTS = {\n justifyContent: 'start',\n margin: 'auto',\n clear: 'none',\n float: null,\n display: 'block',\n inline: false,\n addPasteHandler: true,\n HTMLAttributes: {}\n} as const satisfies StyleLayoutOptions &\n Pick\n\nexport const EMBED_BLOCK_LAYOUT_DEFAULTS = {\n ...EMBED_BASE_DEFAULTS,\n height: 480,\n width: 640\n} as const satisfies StyleLayoutOptions &\n Pick\n\n/** Layout attrs on embed wrappers — shared by schema defaults and iframe node-view diffs. */\nexport const EMBED_LAYOUT_ATTR_KEYS = [\n 'height',\n 'width',\n 'display',\n 'float',\n 'clear',\n 'margin',\n 'justifyContent'\n] as const satisfies readonly (keyof StyleLayoutOptions)[]\n\n/** Live iframe element attrs; remount when these change on the node. */\nexport const FULLSCREEN_IFRAME_DOM_ATTR_KEYS = ['allow', 'frameborder', 'allowfullscreen'] as const\n\nexport const SOUNDCLOUD_IFRAME_DOM_ATTR_KEYS = ['scrolling', 'frameborder', 'allow'] as const\n\nexport function resolveEmbedOption(\n attrs: Record,\n options: TOptions,\n key: TKey\n): TOptions[TKey] | undefined {\n const fromAttrs = attrs[key as string]\n if (fromAttrs !== null && fromAttrs !== undefined) return fromAttrs as TOptions[TKey]\n return options[key]\n}\n\nexport function embedAttrsEqual(\n left: Record,\n right: Record,\n keys: readonly string[]\n): boolean {\n return keys.every((key) => left[key] === right[key])\n}\n\nexport function defaultsFromOptions(\n options: TOptions,\n keys: readonly (keyof TOptions)[]\n): Record {\n const result: Record = {}\n for (const key of keys) {\n result[key as string] = { default: options[key] }\n }\n return result\n}\n\nexport function layoutAttrDefaults(\n options: StyleLayoutOptions\n): Record {\n return defaultsFromOptions(options, EMBED_LAYOUT_ATTR_KEYS)\n}\n\n/** Node schema keys mirror `kitDefaults` — extend the kit interface and its defaults object together. */\nexport function kitAttrDefaults(\n options: TKit,\n kitDefaults: TKit\n): Record {\n return defaultsFromOptions(options, Object.keys(kitDefaults) as (keyof TKit)[])\n}\n\nexport function resolveEmbedLayoutDimensions(\n editor: Editor,\n options: { width?: number | string | null; height?: number | string | null },\n defaults: Pick\n): { width: number; height: number } {\n const width = Number(options.width ?? defaults.width)\n const height = Number(options.height ?? defaults.height)\n return fitLayoutToEditorColumn(editor, width, height)\n}\n\nexport function resolveFullscreenIframeAttributes(\n attrs: Record,\n options: FullscreenIframeKitOptions,\n width: number,\n height: number\n): Record {\n return {\n width,\n height,\n allow: String(resolveEmbedOption(attrs, options, 'allow') ?? options.allow),\n frameborder: Number(resolveEmbedOption(attrs, options, 'frameborder') ?? options.frameborder),\n allowfullscreen: Boolean(\n resolveEmbedOption(attrs, options, 'allowfullscreen') ?? options.allowfullscreen\n )\n }\n}\n","import {\n FULLSCREEN_IFRAME_DOM_ATTR_KEYS,\n resolveEmbedOption,\n resolveFullscreenIframeAttributes\n} from '../../utils/embedKit'\n\nexport interface LoomEmbedKitOptions {\n autoplay: 0 | 1\n muted: 0 | 1\n hideOwner: boolean\n hideShare: boolean\n hideTitle: boolean\n hideEmbedTopBar: boolean\n allow: string\n frameborder: number\n allowfullscreen: boolean\n scrolling: string\n}\n\ntype LoomEmbedParamKey = keyof Pick<\n LoomEmbedKitOptions,\n 'autoplay' | 'muted' | 'hideOwner' | 'hideShare' | 'hideTitle' | 'hideEmbedTopBar'\n>\n\nconst LOOM_QUERY_PARAM: Record = {\n autoplay: 'autoplay',\n muted: 'muted',\n hideOwner: 'hide_owner',\n hideShare: 'hide_share',\n hideTitle: 'hide_title',\n hideEmbedTopBar: 'hideEmbedTopBar'\n}\n\nconst LOOM_EMBED_PARAM_KEYS = Object.keys(LOOM_QUERY_PARAM) as LoomEmbedParamKey[]\n\nexport const LOOM_EMBED_KIT_DEFAULTS: LoomEmbedKitOptions = {\n autoplay: 0,\n muted: 0,\n hideOwner: false,\n hideShare: false,\n hideTitle: false,\n hideEmbedTopBar: false,\n allow: 'fullscreen; picture-in-picture',\n frameborder: 0,\n allowfullscreen: true,\n scrolling: 'no'\n}\n\nconst LOOM_IFRAME_DOM_ATTR_KEYS = ['scrolling', ...FULLSCREEN_IFRAME_DOM_ATTR_KEYS] as const\n\nexport const LOOM_EMBED_ATTR_KEYS = [\n 'src',\n ...LOOM_EMBED_PARAM_KEYS,\n ...LOOM_IFRAME_DOM_ATTR_KEYS\n] as const\n\nexport const buildLoomEmbedUrl = (\n url: string,\n attrs: Record,\n options: LoomEmbedKitOptions,\n normalize: (input: string) => string | null\n): string | null => {\n const base = normalize(url)\n if (!base) return null\n\n const embedUrl = new URL(base)\n\n for (const optionKey of LOOM_EMBED_PARAM_KEYS) {\n const value = resolveEmbedOption(attrs, options, optionKey)\n if (value === undefined || value === null) continue\n\n const formatted =\n optionKey === 'autoplay' || optionKey === 'muted' ? String(value) : value ? 'true' : 'false'\n embedUrl.searchParams.set(LOOM_QUERY_PARAM[optionKey], formatted)\n }\n\n return embedUrl.toString()\n}\n\nexport const resolveLoomIframeAttributes = (\n attrs: Record,\n options: LoomEmbedKitOptions,\n width: number,\n height: number\n): Record => ({\n ...resolveFullscreenIframeAttributes(attrs, options, width, height),\n scrolling: String(resolveEmbedOption(attrs, options, 'scrolling') ?? options.scrolling)\n})\n","const LOOM_REGEX = /https?:\\/\\/(www\\.)?loom\\.com\\/(share|embed)\\/[a-zA-Z0-9]+(?:\\?[^\\s]*)?/\nexport const LOOM_REGEX_GLOBAL = new RegExp(LOOM_REGEX.source, 'g')\n\nexport const isValidLoomUrl = (url: string): boolean => LOOM_REGEX.test(url)\n\nexport const getLoomVideoId = (url: string | null | undefined): string | null => {\n if (!url) return null\n const match = url.match(/loom\\.com\\/(?:share|embed)\\/([a-zA-Z0-9]+)/)\n return match ? match[1] : null\n}\n\n/** Normalize any Loom share/embed URL to the canonical embed form (id only). */\nexport const getLoomEmbedUrl = (url: string | null | undefined): string | null => {\n const id = getLoomVideoId(url)\n return id ? `https://www.loom.com/embed/${id}` : null\n}\n\nexport {\n buildLoomEmbedUrl,\n LOOM_EMBED_ATTR_KEYS,\n LOOM_EMBED_KIT_DEFAULTS,\n type LoomEmbedKitOptions\n} from './embedOptions'\n","const SOUNDCLOUD_URL_PATTERN =\n /^(https?:\\/\\/)?(www\\.)?soundcloud\\.com\\/[A-Za-z0-9_-]+(\\/[A-Za-z0-9_-]+)*(\\/sets)?(\\/[A-Za-z0-9_-]+)?(\\/?)?(\\?[A-Za-z0-9_=&-]+)?$/\n\nexport const SOUNDCLOUD_URL_REGEX_GLOBAL = new RegExp(SOUNDCLOUD_URL_PATTERN.source, 'g')\n\nexport function isValidSoundCloudUrl(url: string): boolean {\n return SOUNDCLOUD_URL_PATTERN.test(url)\n}\n","import { isFloatedMedia, maxWidthForFloatedMedia } from './media-placement'\n\n/** Layout attrs shared by node options, live DOM, and export HTML. */\nexport type StyleLayoutOptions = {\n width?: number | string | null\n height?: number | string | null\n float?: string | null\n clear?: string | null\n margin?: string | null\n display?: string | null\n justifyContent?: string | null\n}\n\nexport type MediaLayoutStyleMode = 'live' | 'export-embed' | 'export-html' | 'export-image-block'\n\n/** CamelCase bag — live DOM assigns directly; CSS export maps to kebab. */\ntype LayoutStyleBag = {\n display: string | null\n width: string | null\n height: string | null\n float: string | null\n clear: string | null\n margin: string | null\n justifyContent: string | null\n maxWidth: string | null\n}\n\nconst CSS_PROP: { [K in keyof LayoutStyleBag]: string } = {\n display: 'display',\n width: 'width',\n height: 'height',\n float: 'float',\n clear: 'clear',\n margin: 'margin',\n justifyContent: 'justify-content',\n maxWidth: 'max-width'\n}\n\nconst EMPTY_BAG: LayoutStyleBag = {\n display: null,\n width: null,\n height: null,\n float: null,\n clear: null,\n margin: null,\n justifyContent: null,\n maxWidth: null\n}\n\nconst pixelOrNull = (value: number | string | null | undefined): string | null => {\n const parsed = parseInt(String(value), 10)\n return Number.isFinite(parsed) ? `${parsed}px` : null\n}\n\nfunction resolvePlacement(attrs: StyleLayoutOptions, defaults?: StyleLayoutOptions) {\n const float = attrs.float ?? defaults?.float ?? null\n const margin = attrs.margin ?? defaults?.margin ?? null\n const clear = attrs.clear ?? defaults?.clear ?? null\n const floated = isFloatedMedia(float)\n return {\n float,\n margin,\n clear,\n floated,\n maxWidth: floated ? maxWidthForFloatedMedia(margin) : null\n }\n}\n\n/** Attrs → layout bag. Float max-width and layout props live here only. */\nexport function mediaLayoutStyleProps(\n attrs: StyleLayoutOptions,\n mode: MediaLayoutStyleMode,\n defaults?: StyleLayoutOptions\n): LayoutStyleBag {\n const placement = resolvePlacement(attrs, defaults)\n\n switch (mode) {\n case 'live':\n return {\n ...EMPTY_BAG,\n display: attrs.display ?? null,\n width: pixelOrNull(attrs.width),\n float: placement.float,\n clear: placement.clear,\n margin: placement.margin,\n justifyContent: attrs.justifyContent ?? null,\n maxWidth: placement.maxWidth\n }\n case 'export-embed':\n return {\n ...EMPTY_BAG,\n display: attrs.display ?? 'block',\n height: pixelOrNull(attrs.height),\n width: pixelOrNull(attrs.width),\n float: placement.float,\n clear: placement.clear,\n margin: placement.margin,\n justifyContent: attrs.justifyContent ?? null,\n maxWidth: placement.maxWidth\n }\n case 'export-html':\n // Attrs come first: a committed per-node width/height must beat the kit default.\n return {\n ...EMPTY_BAG,\n height: pixelOrNull(attrs.height) ?? pixelOrNull(defaults?.height),\n width: pixelOrNull(attrs.width) ?? pixelOrNull(defaults?.width),\n float: placement.float || null,\n clear: placement.clear || null,\n margin: placement.margin || null,\n maxWidth: placement.maxWidth\n }\n case 'export-image-block': {\n // Image block HTML omits unset / default sentinels.\n return {\n ...EMPTY_BAG,\n float: placement.float && placement.float !== 'unset' ? placement.float : null,\n clear: placement.clear && placement.clear !== 'none' ? placement.clear : null,\n margin: placement.margin && placement.margin !== '0in' ? placement.margin : null,\n maxWidth: placement.floated ? placement.maxWidth : null\n }\n }\n default: {\n const _exhaustive: never = mode\n return _exhaustive\n }\n }\n}\n\n// `margin` and friends are read verbatim off pasted elements, so a value carrying\n// `;`, `}` or `url(` would inject extra declarations into the serialized style.\n// No `CSS.supports` here: renderHTML also runs under Node in the export pipeline.\nconst CSS_INJECTION_RE = /[;}]|url\\(/i\n\nexport function formatMediaLayoutCss(props: LayoutStyleBag): string {\n return (Object.keys(CSS_PROP) as Array)\n .filter((key) => props[key] != null && !CSS_INJECTION_RE.test(String(props[key])))\n .map((key) => `${CSS_PROP[key]}:${props[key]};`)\n .join(' ')\n}\n\nexport function mediaLayoutCss(\n attrs: StyleLayoutOptions,\n mode: MediaLayoutStyleMode,\n defaults?: StyleLayoutOptions\n): string {\n return formatMediaLayoutCss(mediaLayoutStyleProps(attrs, mode, defaults))\n}\n\n/**\n * Live node-view wrapper: commit layout attrs.\n * Clear `max-width` when not floated — otherwise wrap→inline keeps the float cap.\n */\nexport function applyMediaLayoutToDom(\n dom: HTMLElement,\n attrs: StyleLayoutOptions,\n dims: { width: number },\n options?: { justifyContent?: string }\n): void {\n const bag = mediaLayoutStyleProps(\n {\n ...attrs,\n width: dims.width,\n justifyContent: options?.justifyContent ?? attrs.justifyContent ?? 'start'\n },\n 'live'\n )\n\n if (bag.display) dom.style.display = bag.display\n if (bag.width) dom.style.width = bag.width\n if (bag.float != null) dom.style.float = bag.float\n if (bag.clear) dom.style.clear = bag.clear\n if (bag.margin) dom.style.margin = bag.margin\n if (bag.justifyContent) dom.style.justifyContent = bag.justifyContent\n\n if (bag.maxWidth) dom.style.maxWidth = bag.maxWidth\n else dom.style.removeProperty('max-width')\n}\n\n/** Pick layout fields from ProseMirror attrs / HTMLAttribute bags. */\nexport function styleLayoutFromAttrs(attrs: Record): StyleLayoutOptions {\n return {\n width: attrs.width as StyleLayoutOptions['width'],\n height: attrs.height as StyleLayoutOptions['height'],\n float: attrs.float as StyleLayoutOptions['float'],\n clear: attrs.clear as StyleLayoutOptions['clear'],\n margin: attrs.margin as StyleLayoutOptions['margin'],\n display: attrs.display as StyleLayoutOptions['display'],\n justifyContent: attrs.justifyContent as StyleLayoutOptions['justifyContent']\n }\n}\n","import { EMBED_LAYOUT_ATTR_KEYS } from '../utils/embedKit'\nimport { applyMediaLayoutToDom, styleLayoutFromAttrs } from '../utils/layoutStyle'\n\nconst DEFAULT_LAYOUT_FALLBACK = { width: 640, height: 480 } as const\nexport const IMAGE_LAYOUT_FALLBACK = { width: 320, height: 240 } as const\nexport const AUDIO_LAYOUT_FALLBACK = { width: 450, height: 120 } as const\n\n/** Loading shell: fill the wrapper up to committed attrs; shrink with the column. */\nexport function syncResponsiveMediaHost(el: HTMLElement, width: number, height: number): void {\n el.style.width = '100%'\n el.style.maxWidth = `${width}px`\n el.style.height = 'auto'\n if (width > 0 && height > 0) {\n el.style.aspectRatio = `${width} / ${height}`\n } else {\n el.style.removeProperty('aspect-ratio')\n }\n}\n\n/** Media surface inside `.hm-media-slot` — host carries aspect-ratio. */\nexport function syncMediaSurfaceFill(el: HTMLElement, width: number, height: number): void {\n el.style.width = '100%'\n el.style.height = '100%'\n el.style.removeProperty('max-width')\n el.style.removeProperty('aspect-ratio')\n if (el instanceof HTMLIFrameElement) {\n el.setAttribute('width', String(width))\n el.setAttribute('height', String(height))\n }\n}\n\nexport function parseLayoutDimensions(\n attrs: Record,\n fallback: { width: number; height: number } = DEFAULT_LAYOUT_FALLBACK\n): { width: number; height: number } {\n const width = parseInt(String(attrs.width), 10)\n const height = parseInt(String(attrs.height), 10)\n return {\n width: Number.isFinite(width) ? width : fallback.width,\n height: Number.isFinite(height) ? height : fallback.height\n }\n}\n\nexport function layoutAttrsChanged(\n left: Record,\n right: Record,\n keys: readonly string[] = EMBED_LAYOUT_ATTR_KEYS\n): boolean {\n return keys.some((key) => left[key] !== right[key])\n}\n\nexport interface SyncResizableMediaLayoutOptions {\n width: number\n height: number\n loadingHost: HTMLElement\n surfaces: HTMLElement[]\n syncLoadingHost?: (el: HTMLElement, width: number, height: number) => void\n syncSurface?: (el: HTMLElement, width: number, height: number) => void\n}\n\n/** Mirror committed layout attrs onto the loading shell and rendered media surfaces. */\nexport function syncResizableMediaLayout(options: SyncResizableMediaLayoutOptions): void {\n const {\n width,\n height,\n loadingHost,\n surfaces,\n syncLoadingHost = syncResponsiveMediaHost,\n syncSurface = syncMediaSurfaceFill\n } = options\n syncLoadingHost(loadingHost, width, height)\n for (const surface of surfaces) {\n syncSurface(surface, width, height)\n }\n}\n\nexport interface SyncMediaNodeLayoutOptions {\n wrapper: HTMLElement\n attrs: Record\n loadingHost: HTMLElement\n surface: HTMLElement\n dims?: { width: number; height: number }\n fallback?: { width: number; height: number }\n justifyContent?: string\n syncLoadingHost?: (el: HTMLElement, width: number, height: number) => void\n syncSurface?: (el: HTMLElement, width: number, height: number) => void\n}\n\n/** Mirror committed attrs onto wrapper, loading shell, and the rendered media surface. */\nexport function syncMediaNodeLayout(options: SyncMediaNodeLayoutOptions): void {\n const dims =\n options.dims ??\n parseLayoutDimensions(options.attrs, options.fallback ?? DEFAULT_LAYOUT_FALLBACK)\n // No fixed `height` on the wrapper: the loading shell + media surface carry the\n // pixel height (syncResizableMediaLayout). The wrapper then grows to fit the\n // caption below the media, instead of clipping the caption into the following\n // paragraph.\n applyMediaLayoutToDom(\n options.wrapper,\n styleLayoutFromAttrs(options.attrs),\n { width: dims.width },\n options.justifyContent ? { justifyContent: options.justifyContent } : undefined\n )\n syncResizableMediaLayout({\n width: dims.width,\n height: dims.height,\n loadingHost: options.loadingHost,\n surfaces: [options.surface],\n syncLoadingHost: options.syncLoadingHost,\n syncSurface: options.syncSurface\n })\n}\n\nexport function syncImageNodeLayout(options: {\n wrapper: HTMLElement\n attrs: Record\n loadingHost: HTMLElement\n img: HTMLImageElement\n dims?: { width: number; height: number }\n}): void {\n syncMediaNodeLayout({\n wrapper: options.wrapper,\n attrs: options.attrs,\n loadingHost: options.loadingHost,\n surface: options.img,\n dims: options.dims,\n fallback: IMAGE_LAYOUT_FALLBACK,\n justifyContent: 'start'\n })\n}\n\nexport function syncIframeNodeLayout(options: {\n wrapper: HTMLElement\n attrs: Record\n loadingHost: HTMLElement\n iframe: HTMLIFrameElement\n dims?: { width: number; height: number }\n syncLoadingHost?: (el: HTMLElement, width: number, height: number) => void\n}): void {\n syncMediaNodeLayout({\n wrapper: options.wrapper,\n attrs: options.attrs,\n loadingHost: options.loadingHost,\n surface: options.iframe,\n dims: options.dims,\n syncLoadingHost: options.syncLoadingHost\n })\n}\n","import type { Editor } from '@tiptap/core'\n\nimport { syncResponsiveMediaHost } from '../../loading/syncLayout'\nimport {\n FULLSCREEN_IFRAME_DOM_ATTR_KEYS,\n type FullscreenIframeKitOptions,\n resolveEmbedOption\n} from '../../utils/embedKit'\nimport { fitLayoutToEditorColumn } from '../../utils/fitImageDimensions'\n\n/** Embeddable Spotify entities — the `{type}` segment of an `open.spotify.com` URL. */\nexport type SpotifyEntityType = 'track' | 'album' | 'playlist' | 'artist' | 'show' | 'episode'\n\nexport const SPOTIFY_ENTITY_TYPES = [\n 'track',\n 'album',\n 'playlist',\n 'artist',\n 'show',\n 'episode'\n] as const satisfies readonly SpotifyEntityType[]\n\n/** Spotify's two embed themes — `0` dark (default), `1` light. No other values exist. */\nexport type SpotifyTheme = 0 | 1\n\nconst SPOTIFY_ID = /^[A-Za-z0-9]+$/\n\nconst isSpotifyEntityType = (value: string): value is SpotifyEntityType =>\n (SPOTIFY_ENTITY_TYPES as readonly string[]).includes(value)\n\n/**\n * Resolve a Spotify share URL or `spotify:` URI to its `{ type, id }`, or null.\n * Accepts `open.spotify.com/{type}/{id}`, localized `intl-xx`, already-`embed`\n * paths, and `spotify:type:id` URIs; rejects every other host (exact match).\n */\nexport const parseSpotifyEntity = (\n input: string\n): { type: SpotifyEntityType; id: string } | null => {\n const trimmed = input.trim()\n if (!trimmed) return null\n\n const uri = /^spotify:(track|album|playlist|artist|show|episode):([A-Za-z0-9]+)$/.exec(trimmed)\n if (uri) return { type: uri[1] as SpotifyEntityType, id: uri[2] }\n\n try {\n const url = new URL(trimmed)\n if (url.hostname.replace(/^www\\./i, '') !== 'open.spotify.com') return null\n\n const segments = url.pathname.split('/').filter(Boolean)\n let i = 0\n if (segments[i] === 'embed') i += 1\n if (segments[i]?.startsWith('intl-')) i += 1\n\n const type = segments[i]\n const id = segments[i + 1]\n if (!type || !id || !isSpotifyEntityType(type) || !SPOTIFY_ID.test(id)) return null\n return { type, id }\n } catch {\n return null\n }\n}\n\n/** Canonical share URL for an entity — the stored `src`, without `/embed` or query. */\nexport const canonicalSpotifyUrl = (entity: { type: SpotifyEntityType; id: string }): string =>\n `https://open.spotify.com/${entity.type}/${entity.id}`\n\nexport interface SpotifyEmbedKitOptions extends FullscreenIframeKitOptions {\n /** `0` dark / `1` light. Unset uses Spotify's default (dark). */\n theme?: SpotifyTheme\n}\n\nexport const SPOTIFY_DEFAULT_WIDTH = 640\n/** Full-art player (album / playlist / artist / show / episode). */\nexport const SPOTIFY_FULL_HEIGHT = 352\n/** Compact single-track player. */\nconst SPOTIFY_TRACK_HEIGHT = 152\n\n/** Spotify's generator uses the compact height for tracks and the full-art height for everything else. */\nexport const defaultSpotifyHeight = (type: SpotifyEntityType): number =>\n type === 'track' ? SPOTIFY_TRACK_HEIGHT : SPOTIFY_FULL_HEIGHT\n\n/** Gripper + layout floor — entity type from stored share URL, else attrs.height, else full-art default. */\nexport function resolveSpotifyLayoutMinHeight(attrs: Record): number {\n const src = typeof attrs.src === 'string' ? attrs.src : ''\n const entity = parseSpotifyEntity(src)\n if (entity) return defaultSpotifyHeight(entity.type)\n\n const height = attrs.height\n if (typeof height === 'number' && height > 0) return height\n return SPOTIFY_FULL_HEIGHT\n}\n\nexport const SPOTIFY_EMBED_KIT_DEFAULTS: SpotifyEmbedKitOptions = {\n theme: undefined,\n allow: 'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',\n frameborder: 0,\n allowfullscreen: true\n}\n\nexport const SPOTIFY_EMBED_ATTR_KEYS = ['src', 'theme', ...FULLSCREEN_IFRAME_DOM_ATTR_KEYS] as const\n\nexport const buildSpotifyEmbedUrl = (\n src: string,\n attrs: Record,\n options: SpotifyEmbedKitOptions\n): string | null => {\n const entity = parseSpotifyEntity(src)\n if (!entity) return null\n\n const embedUrl = new URL(`https://open.spotify.com/embed/${entity.type}/${entity.id}`)\n embedUrl.searchParams.set('utm_source', 'generator')\n\n const theme = resolveEmbedOption(attrs, options, 'theme')\n if (theme !== undefined) {\n embedUrl.searchParams.set('theme', String(theme))\n }\n\n return embedUrl.toString()\n}\n\n/** The player has a fixed height and reflows by width — fit width to the column, keep the height. */\nexport const fitSpotifyLayoutToEditorColumn = (\n editor: Editor,\n width: number,\n height: number\n): { width: number; height: number } => {\n const fitted = fitLayoutToEditorColumn(editor, width, height)\n return { width: fitted.width, height }\n}\n\n/** Spotify's player UI does not scale — pin host height so a narrow column never squashes it. */\nexport const syncSpotifyResponsiveHost = (el: HTMLElement, width: number, height: number): void => {\n syncResponsiveMediaHost(el, width, height)\n el.style.minHeight = `${height}px`\n}\n","import { parseSpotifyEntity } from './embedOptions'\n\nconst SPOTIFY_URL_REGEX =\n /^https?:\\/\\/(www\\.)?open\\.spotify\\.com\\/(embed\\/)?(intl-[a-z-]+\\/)?(track|album|playlist|artist|show|episode)\\/[A-Za-z0-9]+(\\?\\S*)?$/i\nexport const SPOTIFY_URL_REGEX_GLOBAL = new RegExp(SPOTIFY_URL_REGEX.source, 'gi')\n\n/** Matches a pasted Spotify \"Copy embed\" `