Tiptap extension for embedding media in the editor: images, audio, video, and provider embeds (YouTube, Vimeo, SoundCloud, Spotify, X, Loom).
One `HyperMultimediaKit.configure` call adds all nine nodes. Every node gets a media toolbar in its top-right corner, an editable caption, and a loading shell. Eight of the nine also get drag-to-resize; the `x` node sizes through toolbar `maxwidth` presets instead. Toolbar popovers position through [`@docs.plus/floating-popover`](https://github.com/docs-plus/docs.plus/tree/main/packages/floating-popover) and tooltips through [`@docs.plus/floating-tooltip`](https://github.com/docs-plus/docs.plus/tree/main/packages/floating-tooltip). Both are bundled into `dist` — no tippy.js.
## Install
```sh
bun add @docs.plus/extension-hypermultimedia
```
Requires **`@tiptap/core` ^3.22.3** and **`@tiptap/pm` ^3.22.3** (Tiptap 3.x).
Installs one runtime dependency, `@floating-ui/dom`. The popover engine and the tooltip engine ship inside `dist`, so they add no further install.
The Quickstart also imports `@tiptap/starter-kit`. Add it with `bun add @tiptap/starter-kit` when your app has none yet.
Markdown round-trip is optional and needs `bun add @tiptap/markdown` — see [Markdown import/export](#markdown-importexport).
Co-install [`@docs.plus/extension-hyperlink`](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hyperlink) when marks and media share one editor, then read [Paste precedence](#paste-precedence).
Upgrading from `1.x`? Version 2.0.0 renames the stored node types to camelCase and renames `Twitter` to `x` — see [Migrating from 1.x](#migrating-from-1x).
## Quickstart
The host page needs one mount point: ``. The snippet then renders one image node you can hover.
```ts
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { HyperMultimediaKit } from '@docs.plus/extension-hypermultimedia'
// Required. Without it the toolbar, gripper, caption and loading shell render unstyled.
// The gripper is the drag-handle overlay the kit draws on the media node.
import '@docs.plus/extension-hypermultimedia/styles.css'
const editor = new Editor({
element: document.querySelector('#editor')!,
content: '',
extensions: [
StarterKit,
HyperMultimediaKit.configure({
// `inline: true` moves the node into the inline group, so it flows in a paragraph.
// `allowBase64: true` admits `data:image/*` sources on paste and on parse.
Image: { inline: true, allowBase64: true },
Vimeo: { inline: true },
// `false` drops the node. Do not set `resizeGripper: false` instead:
// that removes the whole media toolbar for the node, not only the drag handles.
SoundCloud: false
})
]
})
```
The snippet drops SoundCloud on purpose, to show what `false` does. Hover the rendered image to reach the [Media toolbar](#media-toolbar). The snippet has no host wiring for pasted image files, and no veto for a link extension. [Paste and import](#paste-and-import) covers both: [Image file paste (`editorFileUpload`)](#image-file-paste-editorfileupload) owns the file path, and [Paste precedence](#paste-precedence) owns the link veto. [Styling](#styling) owns the visual contract.
## Options
Every option below goes inside one `HyperMultimediaKit.configure({ … })` call. The kit declares no `addOptions`. Every key starts as `undefined`, except `loadingShell`, which kit storage reads as `true`.
| Option | Type | Default | Description |
| ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `Image`, `Audio`, `Video`, `Youtube`, `Vimeo`, `SoundCloud`, `Spotify`, `Loom` | `Partial`, `Partial`, `Partial`, `Partial`, `Partial`, `Partial`, `Partial` or `Partial`, each `& { resizeGripper?: boolean }`, or `true`, or `false` | `undefined` | Per-node options object. `true` keeps the node defaults, `false` drops the node. See [`resizeGripper`](#resizegripper). |
| `X` | `Partial \| true \| false` | `undefined` | Same shape, without `resizeGripper`. The `x` node never gets drag handles. |
| `mediaToolbar` | `MediaToolbarFactory` | `undefined` | Media toolbar factory. Return an element, or `null` so the host renders its own surface. Falls back to `createMediaToolbar`. See [Bring your own toolbar](#bring-your-own-toolbar). |
| `mediaActions` | `MediaActionsResolver` | `undefined` | Rewrites the resolved action list per node. Falls back to the base actions plus the per-node recipe. See [Customizing actions](#customizing-actions). |
| `mediaToolbarIcons` | `MediaToolbarIconsResolver` | `undefined` | Swaps toolbar and menu SVG markup by icon key. Falls back to the Google Material Symbols set. See [Customizing actions](#customizing-actions). |
| `replaceUrlPopover` | `ReplaceUrlPopoverFactory` | `undefined` | Replace URL form factory. Return an element, or `null` for a host surface. Falls back to `createReplaceUrlPopover`. See [Customizing actions](#customizing-actions). |
| `isUploadedMedia` | `(ctx: MediaActionContext) => boolean` | `undefined` | Marks `image`, `video` and `audio` nodes as host uploads, so View original stays hidden. An absent hook reads as `false`. |
| `loadingShell` | `MediaLoadingShellOption` | `true` | `true` for the built-in shell, `false` for none, or a factory that replaces the shell overlay. An unset value falls back to the built-in shell. See [Loading shell](#loading-shell). |
The nine per-node interfaces are not exported from the package entry. Reach the kit shape through the exported `HyperMultimediaKitOptions`.
### `resizeGripper`
`resizeGripper: false` removes the whole media toolbar for that node, not only the drag handles. The kit drops the node from its resizable list, so it builds no gripper widget. The hover controls layer then returns before it mounts the toolbar, because only the `x` node may run toolbar-only. That node loses Align, Margin, Caption, View original, Download, Replace URL, Copy and Delete as well.
Keep the gripper on when you want the toolbar. To remove the drag handles alone, replace the media toolbar with [`mediaToolbar`](#bring-your-own-toolbar).
### Per-node options
Each node slot accepts these keys. They are node options, not kit keys, so they go inside the node's own object.
| Option | Type | Default | Nodes |
| ----------------- | -------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `resizeGripper` | `boolean` | `undefined` | All except `x`. An unset value reads as `true`. Only an explicit `false` drops the node from the resizable list — see [`resizeGripper`](#resizegripper). |
| `width` | `number \| null` | per node | `image`, `video`, `youtube`, `vimeo`, `soundcloud`, `spotify`, `loom` — see [Default sizes](#default-sizes). |
| `height` | `number \| null` | per node | `image`, `video`, `youtube`, `vimeo`, `soundcloud`, `spotify`, `loom` — see [Default sizes](#default-sizes). |
| `inline` | `boolean` | `false` | All nine. `true` moves the node from the `block` group to `inline`. |
| `addPasteHandler` | `boolean` | `true` | `youtube`, `vimeo`, `soundcloud`, `spotify`, `loom`, `x`. `false` stops a pasted provider URL from becoming a node. |
| `HTMLAttributes` | `Record` | `{}` | All nine. The node merges it into the rendered element. |
| `margin` | `string \| null` | `'auto'` | All nine. |
| `float` | `string \| null` | `null` | All nine. |
| `clear` | `string` | `'none'` | All nine. |
| `display` | `string` | `'block'` | All nine. |
| `justifyContent` | `string \| null` | `'start'` | Every node except `image`, which has no such attribute. |
| `allowBase64` | `boolean` | `false` | `image` only. Gates the parse rule and the paste plugin. |
| `controls` | `boolean` | `true` | `video`, `audio`. |
| `autoplay` | `boolean` | `false` | `video`, `audio`. |
| `loop` | `boolean` | `false` | `video`, `audio`. |
| `muted` | `boolean` | `false` | `video`, `audio`. |
| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | `video`, `audio`. |
| `poster` | `string \| null` | `null` | `video` only. |
Player parameters are per node — see [Embeds](#embeds) for the provider keys, and [Nodes](#nodes) for each node's full table.
### Default sizes
`width` and `height` are node attributes, and seven of the nine also expose them as node options. A provider insert command fills a missing value from the table below, then fits the result to the editor content column. `setImage` fits only when you pass both. `setAudio` never fits.
| Node | `width` default | `height` default |
| ------------ | --------------- | ------------------------------------------------------------ |
| `image` | `null` | `null` — the node view lays the shell out at 320 × 240 |
| `audio` | `null` | `null` — the node view lays the shell out at 450 × 120 |
| `video` | `640` | `480` |
| `youtube` | `640` | `480` |
| `vimeo` | `640` | `480` |
| `loom` | `640` | `480` |
| `spotify` | `640` | `352`, and `152` when the URL is a track |
| `soundcloud` | `450` | `120` |
| `x` | no attribute | no attribute — the node sizes from `maxwidth`, default `400` |
## Commands
Ten commands land on `editor.commands`. Each provider insert command returns `false` for a `src` that fails its provider check. `setImage`, `setVideo` and `setAudio` return `false` only for an empty `src`. No insert command runs the scheme gate — see [Security](#security).
```ts
editor.commands.setImage({ src: 'https://example.com/photo.png', alt: 'Example' })
editor.commands.setVideo({ src: 'https://example.com/clip.mp4' })
editor.commands.setAudio({ src: 'https://example.com/track.mp3' })
editor.commands.setYoutubeVideo({ src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' })
editor.commands.setVimeo({ src: 'https://vimeo.com/123456789' })
editor.commands.setSoundCloud({ src: 'https://soundcloud.com/artist/track' })
editor.commands.setSpotify({ src: 'https://open.spotify.com/track/11dFghVXANMlKmJXsNCbNl' })
editor.commands.setX({ src: 'https://x.com/user/status/123' })
editor.commands.setLoom({ src: 'https://www.loom.com/share/abcdef1234567890' })
editor.commands.updateImageDimensions({ keyId: 'abc123', width: 480, height: 320 })
```
`updateImageDimensions` edits an image that already sits in the document. It finds the node by its `keyId` attribute and writes `width` and `height`. It returns `false` when no image carries that `keyId`, so `editor.can()` reports a miss. `setImage` writes a fresh `keyId` on every insert, and a host reads it back with `node.attrs.keyId`.
Chain any of them like a normal Tiptap command:
```ts
editor.chain().focus().setYoutubeVideo({ src: 'https://youtu.be/dQw4w9WgXcQ', start: 42 }).run()
```
Every insert command accepts the layout options `width`, `height`, `margin`, `float`, `clear` and `display`. Every command except `setImage` also accepts `justifyContent`. `setX` is the exception on size: the `x` node declares no `width` and no `height` attribute, so both values type-check and then do nothing. Size an X post through `maxwidth`:
```ts
editor
.chain()
.focus()
.setX({
src: 'https://x.com/user/status/123',
maxwidth: 550,
theme: 'dark'
})
.run()
```
`setImage` also accepts `caption`. The other eight nodes carry the same `caption` attribute and no `caption` insert option. Set one from the media toolbar, or select the node and write the attribute. Read a caption back with `node.attrs.caption`:
```ts
editor.commands.setImage({ src: 'https://example.com/photo.png', caption: 'Figure 1' })
// Select the node first. The other seven non-image nodes take the same shape.
editor.commands.updateAttributes('video', { caption: 'Figure 2' })
```
Pass provider player options on the insert call — see [Embeds](#embeds).
## Keyboard shortcuts
The kit declares no `addKeyboardShortcuts`. A `keydown` listener binds every key below, on the caption element, the Replace URL field, the resize drag, or the document.
| Shortcut | Context | Action |
| ---------------------- | ------------------ | ------------------------------------------------------------------------------------ |
| `Enter` | `media caption` | Commits the caption text, blurs the field, and returns focus to the editor. |
| `Enter` | `replace-URL form` | Submits the URL. An invalid URL shows an inline error and the form stays open. |
| `Escape` | `media toolbar` | Dismisses the toolbar and refocuses the editor, once focus sits on a toolbar button. |
| `Escape` | `resize drag` | Cancels the drag. The node keeps the size it had before the drag started. |
| `Shift` (held) | `resize drag` | Locks the aspect ratio while a corner handle moves. |
| `Backspace` / `Delete` | `document` | Deletes the media node under the active hover controls. |
Hover opens the media toolbar and moves no focus. So `Escape` acts only after a click or a tab into a toolbar button. The `Escape` handler also skips the key when focus sits inside a `.floating-popover`, because the popover closes itself first. The delete-key handler ignores `Backspace` and `Delete` with `Meta`, `Control` or `Alt`, and during IME composition. It also ignores them inside a media form control, inside the caption, and while the focused editor holds a text selection.
The `x` node sets `priority: 101`, above the Tiptap default of `100`. That number decides parse-rule order, not key order: it lets `blockquote.twitter-tweet` parse as an X embed before the StarterKit blockquote rule claims it. No extension in the kit contests a key with another.
## Caveats
The media toolbar, the paste path, the insert commands and the caption each carry a limit the Quickstart does not show.
- **`resizeGripper: false` removes the whole media toolbar for that node.** The kit drops the node from its resizable list, and the hover controls layer then returns before it mounts the toolbar. Only the `x` node may run toolbar-only. Keep the gripper on, or replace the media toolbar with [`mediaToolbar`](#bring-your-own-toolbar).
- **Without `styles.css` the toolbar, gripper, caption and loading shell render unstyled.** With the stylesheet loaded, the shell holds `.hm-media-slot` at `opacity: 0` until it settles. A shell that never settles then renders an invisible player. Import the stylesheet — see [Styling](#styling).
- **A tap opens the media toolbar for `image` and `audio` only.** The click path returns early on every provider embed and on `video`, so their in-frame play and scrub controls keep working. Those nodes have no touch entry point to the toolbar today. Return `null` from `mediaToolbar` on mobile and render your own surface.
- **Hover controls need a fine pointer.** The kit reads `matchMedia('(pointer: fine)')` once and gates hover on it. A coarse-pointer device reaches the toolbar through the click path above.
- **A link extension can claim a media URL before the kit sees it.** Veto media URLs in the link extension: `Hyperlink.configure({ shouldAutoLink: (url) => !isMediaUrl(url) })`. See [Paste precedence](#paste-precedence).
- **`isMediaUrl` matches every provider, whatever the kit configuration says.** A host that disables providers then vetoes URLs nothing will claim. Compose the veto from the per-provider validators you enabled.
- **`setImage`, `setVideo` and `setAudio` accept any non-empty `src` string.** The scheme gate runs on `parseHTML`, on markdown import, and in the Replace URL form, never in the commands. Validate host-supplied URLs before you call them. See [Security](#security).
- **`setX` types `width` and `height` but the `x` node stores neither.** `setX` accepts both values, and the node then ignores them. Size an X post with `maxwidth`.
- **`dnt` cannot be set per node.** It is a kit option and a node attribute, but `AddXOptions` omits it, so `setX` cannot write it in a type-safe way. Set it on the kit.
- **A drag can appear to stop early.** Resize clamps to a 160 × 80 minimum, and `soundcloud` and `spotify` raise the height floor further. See [Resize](#resize).
- **A caption survives HTML round-trip for `image` only.** Every other node keeps the editable caption and the attribute, but emits no ``, so clipboard copy and the toolbar Copy action drop the text. Markdown export drops every caption. See [Caption](#caption).
- **The paste handler drops pasted image files silently without a listener.** Add an `editorFileUpload` listener and insert the nodes yourself — see [Image file paste (`editorFileUpload`)](#image-file-paste-editorfileupload).
## Styling
The package ships one stylesheet. It carries the resize gripper, the loading shell, the media toolbar, the caption, and the `x`, `loom` and `spotify` embed styles.
```ts
import '@docs.plus/extension-hypermultimedia/styles.css'
```
### Theming
Every visual token is a `--hm-*` CSS custom property, declared with `light-dark()`. The toolbar, loading shell, gripper and caption follow the nearest ancestor's `color-scheme`. Set `color-scheme: light | dark` on `` or any ancestor and they flip with it. Under the default `color-scheme: normal` they follow the OS `prefers-color-scheme`.
The X embed plate keys on the node's own `theme` attribute instead, so the plate matches what the embedded widget renders.
| Token | Description |
| ----------------------------- | ------------------------------------------ |
| `--hm-toolbar-bg` | Toolbar and menu background |
| `--hm-toolbar-fg` | Toolbar icon and menu text color |
| `--hm-toolbar-border` | Toolbar and menu borders |
| `--hm-toolbar-hover` | Toolbar button / menu row hover background |
| `--hm-toolbar-active` | Active (toggled) action background |
| `--hm-toolbar-active-fg` | Active action icon/text color |
| `--hm-toolbar-shadow` | Toolbar and menu drop shadow |
| `--hm-caption-fg` | Caption text |
| `--hm-caption-placeholder` | Empty-caption placeholder text |
| `--hm-loading-bg` | Loading shell background |
| `--hm-loading-shimmer` | Loading shimmer sweep |
| `--hm-loading-provider` | Provider label ("YouTube", …) |
| `--hm-loading-message` | Loading status message |
| `--hm-loading-error` | Error-state message color |
| `--hm-loading-spinner-track` | Spinner track ring |
| `--hm-loading-spinner-active` | Spinner active arc |
| `--hm-resize-border` | Gripper selection border |
| `--hm-resize-handle-bg` | Gripper handle fill |
Override any token to retheme:
```css
:root {
--hm-toolbar-active: #ecfdf5;
--hm-resize-border: #059669;
}
```
The shimmer and spinner animations are disabled under `prefers-reduced-motion: reduce`.
### Class names
These names are the stable styling contract. A custom toolbar, a custom action and a custom loading overlay all hook into the same class names.
| Class or attribute | Element |
| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `.media-toolbar` | Toolbar root, in the built-in top-right skin. |
| `[data-hm-toolbar]` | Lifecycle marker. The kit stamps this on every mounted toolbar, built-in or custom. |
| `.hm-has-toolbar` | On the media wrapper while a toolbar is mounted. |
| `.media-toolbar__button` | Inline action button. Adds `--active` when toggled. |
| `.media-toolbar__button--text` | Inline button with a text label, used when no icon resolves for the id. |
| `.media-toolbar__more` | The `…` overflow trigger. |
| `.media-toolbar__divider` | Separator grouping inline actions. |
| `.media-toolbar__menu` | Overflow menu body. Rows are `__menu-item`, plus `--active`. |
| `.media-toolbar__menu-section` / `.media-toolbar__menu-heading` | Expanded submenu block inside the overflow menu, and its title. |
| `.media-toolbar__submenu` | Submenu body. Rows are `__submenu-item`, plus `--active`. |
| `.media-toolbar__submenu-section` / `.media-toolbar__submenu-heading` | Grouped rows inside a submenu, and the group title (X Size and Theme). |
| `.media-toolbar__input` | URL field in the Replace URL form. |
| `.media-toolbar__error` | Validation message under the URL field. |
| `.floating-tooltip` | Shared hover and focus tooltip bubble on icon buttons. |
| `.floating-popover` | Positioning container for every menu and form the toolbar opens. |
| `.hm-caption` | Editable ``. Adds `--empty` when the text is blank. |
| `.hypermultimedia--figure` | The node emits this `` wrapper for a captioned image. |
| `.hypermultimedia--__content` | Media wrapper per node, for example `.hypermultimedia--youtube__content`. |
| `.hypermultimedia__resize-gripper` | Gripper widget. Adds `--active` on hover and `--dragging` during a drag. |
| `.hypermultimedia--resize-dragging` | On `` for the duration of a drag. |
| `.hm-media-host` / `[data-hm-loading]` | Loading shell host, and its `pending` / `ready` / `error` state. |
| `.hm-media-host--plain` / `.hm-media-host--fluid` | Host with the shell disabled, and host after an X embed settles. |
| `.hm-media-slot` | Holds the real media. Stays at `opacity: 0` until the shell settles. |
| `.hm-loading-shell` / `.hm-loading-shell__overlay` | Overlay root. The kit stamps this on the built-in overlay and on a custom one. |
| `.hm-loading-shell__body` | Row holding the provider label, message and spinner. |
| `.hm-loading-shell__provider` / `__message` / `__shimmer` / `__spinner` | Provider label, status text, shimmer sweep, spinner. |
## Nodes
The kit ships nine nodes. Each one has its own README with the full option table and the paste rules.
| Node | Embeds | Docs |
| ------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `image` | images (+ markdown) | [image](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/image) |
| `audio` | audio files (+ markdown) | [audio](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/audio) |
| `video` | video files (+ markdown) | [video](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/video) |
| `youtube` | YouTube videos (+ markdown) | [youtube](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/youtube) |
| `vimeo` | Vimeo videos (+ markdown) | [vimeo](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/vimeo) |
| `soundcloud` | SoundCloud audio (+ markdown) | [soundcloud](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/soundcloud) |
| `spotify` | Spotify player (+ markdown) | [spotify](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/spotify) |
| `x` | X / Twitter (+ markdown) | [x](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/x) |
| `loom` | Loom recordings (+ markdown) | [loom](https://github.com/docs-plus/docs.plus/tree/main/extensions/extension-hypermultimedia/src/nodes/loom) |
### Gallery
The shots below show every node the kit ships: the local asset files `image`, `video` and `audio`, and the six provider embeds. Each shot pairs a light capture and a dark capture, and your system preference picks one. Every shot hovers the node, so the media toolbar and the gripper both show. The `x` node has no gripper, so its shot shows the media toolbar alone.
Image — local file
Video — local file
Audio — local file
YouTube
Vimeo
SoundCloud
Spotify
Loom
X — post embed (per-node light/dark theme)
## Embeds
Provider embeds resolve options in two layers. Kit defaults come from `HyperMultimediaKit.configure({ Youtube: { … } })`, node attributes come from the insert call such as `setYoutubeVideo({ … })`, and node attributes win. The option key you write and the query name the kit emits are not always the same word, so both are named below.
**YouTube** maps camelCase option keys to the official iframe query names: `ccLanguage` → `cc_lang_pref`, `disableKBcontrols` → `disablekb`, `ivLoadPolicy` → `iv_load_policy`, `endTime` → `end`, `interfaceLanguage` → `hl`, `enableIFrameApi` → `enablejsapi`. Defaults: `controls: 1`, `modestbranding: 0`, `loop: 0`, `rel: 1`, `fs: 1`, `autoplay: 0`, `playsinline: 0`, `nocookie: false`, `ccLanguage: undefined`. Paste reads `start` from `?t=`, `?start=` or `#t=`. `loop: 1` auto-fills `playlist` with the video id. `nocookie: true` embeds from `youtube-nocookie.com`.
**Vimeo** writes the option key `start` as the query name `start_time`, and defaults to `0`. Player defaults include `controls: true`, `title: true`, `byline: true`, `portrait: true`, `quality: 'auto'`, `transparent: true`, `dnt: false`. A `color` value drops a leading `#` before it reaches the query. An unlisted video keeps its `?h=` access token through both parse and render.
**Loom** writes the option keys `hideOwner`, `hideShare`, `hideTitle` and `hideEmbedTopBar` as the query names `hide_owner`, `hide_share`, `hide_title` and `hideEmbedTopBar`. All four default to `false`. `autoplay` and `muted` default to `0`. A host that writes `hide_title` gets a type error and no effect.
**SoundCloud** passes the HTML5 widget parameters straight through, so the option key and the query name match: `auto_play`, `show_comments`, `show_user`, `show_reposts`, `show_artwork`, `show_playcount`, `hide_related`, `buying`, `sharing`, `download`, `single_active`, `start_track`, `color`. `visual` defaults to `false` and also drives the resize height floor: `166` when visual, `120` when compact. A stored `height` above `130` turns the visual player on by itself.
**Spotify** builds `open.spotify.com/embed/{type}/{id}` from any `track`, `album`, `playlist`, `artist`, `show` or `episode` URL. The Spotify node also accepts a `spotify:type:id` URI, an `intl-xx` path, an already-`embed` path, and the "Copy embed" `
',
extensions: [
StarterKit,
HyperMultimediaKit.configure({
// `inline: true` moves the node into the inline group, so it flows in a paragraph.
// `allowBase64: true` admits `data:image/*` sources on paste and on parse.
Image: { inline: true, allowBase64: true },
Vimeo: { inline: true },
// `false` drops the node. Do not set `resizeGripper: false` instead:
// that removes the whole media toolbar for the node, not only the drag handles.
SoundCloud: false
})
]
})
```
The snippet drops SoundCloud on purpose, to show what `false` does. Hover the rendered image to reach the [Media toolbar](#media-toolbar). The snippet has no host wiring for pasted image files, and no veto for a link extension. [Paste and import](#paste-and-import) covers both: [Image file paste (`editorFileUpload`)](#image-file-paste-editorfileupload) owns the file path, and [Paste precedence](#paste-precedence) owns the link veto. [Styling](#styling) owns the visual contract.
## Options
Every option below goes inside one `HyperMultimediaKit.configure({ … })` call. The kit declares no `addOptions`. Every key starts as `undefined`, except `loadingShell`, which kit storage reads as `true`.
| Option | Type | Default | Description |
| ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `Image`, `Audio`, `Video`, `Youtube`, `Vimeo`, `SoundCloud`, `Spotify`, `Loom` | `Partial
