edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/media/media.js

@@ -1,31 +1,60 @@
+import { attach } from '../chrome.js';
+import { mediaKinds } from '../../crdt/semantics.js';
 import { sanitizeLinkHref } from '../richtext/richTextOperations.js';
-import { fileUploads } from '../uploads.svelte.js';
-import { viewLabels } from '../../labels.js';
+import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+import { keywordsOf, labelsOf, mediaEnglish } from '../../labels.js';
+import { MEDIA_ICONS } from './empty.svelte.js';
+export { MEDIA_ICONS };
+/** A media block's link opens a new tab without the opener (and tells the target nothing). */
+export const LINK_REL = 'noopener noreferrer nofollow';
 /**
- * Each view's media labels, by kind: the first plugin of a kind listed in a
- * view claims them, as its kind record (first wins).
+ * A media block's link's attachment: a new tab without the opener
+ * (`target`, `rel`), and `own` (`draggable="false"`: no drag of its own; a
+ * file's `download` name). The default markup writes the same, so a server
+ * render's link is safe too; its `href` is the markup's.
  */
-export const mediaLabels = {
-    embed: viewLabels('media'),
-    bookmark: viewLabels('media'),
-    file: viewLabels('media'),
-    video: viewLabels('media'),
-    audio: viewLabels('media')
-};
-const empties = new WeakMap();
+export const mediaLink = (own = {}) => attach({ target: '_blank', rel: LINK_REL, ...own });
+/** The app's markup for a media kind's own control in `view`, if any. */
+export const mediaControl = (kind, control) => (view) => mediaView(view, kind)?.[control];
+const views = new WeakMap();
+/** The view's media kind, when a plugin of it is listed there. */
+export const mediaView = (edytor, kind) => edytor && views.get(edytor)?.[kind];
 /**
- * Each view's `empty` snippet, by kind: the first plugin of a kind listed in
- * a view claims it (with none, the built-in markup), as its kind record.
+ * A media kind's plugin (Notion's): a void `figure` with an editable
+ * caption, its preset (its icon, `keywords`, its name in the view's
+ * `media` labels), and its view
+ * (`MediaView`), which the first plugin of the kind listed claims. `own`
+ * answers the kind's own parts: how it stores a source, its hooks and its
+ * record (its snippet, its export and import); `claims` says whether this
+ * plugin claimed the kind in `edytor`.
  */
-export const mediaEmpty = {
-    claim(edytor, kind, snippet) {
-        if (!edytor)
-            return;
-        const own = empties.get(edytor) ?? {};
-        own[kind] ??= { snippet };
-        empties.set(edytor, own);
-    },
-    of: (edytor, kind) => edytor ? empties.get(edytor)?.[kind]?.snippet : undefined
+export const mediaPlugin = (kind, keywords, own) => (edytor) => {
+    const kinds = edytor && (views.get(edytor) ?? {});
+    const claims = !!kinds && !kinds[kind];
+    const { hooks, record, ...view } = own(edytor, claims);
+    if (claims)
+        views.set(edytor, {
+            ...kinds,
+            [kind]: view
+        });
+    return {
+        ...hooks,
+        blocks: {
+            [kind]: {
+                ...mediaKinds[kind],
+                element: 'figure',
+                presets: [
+                    {
+                        label: labelsOf(edytor, 'media', mediaEnglish)[kind],
+                        icon: MEDIA_ICONS[kind],
+                        keywords: keywordsOf(edytor, `block.${kind}`, keywords),
+                        group: 'Media'
+                    }
+                ],
+                ...record
+            }
+        }
+    };
 };
 /**
  * A web page's URL a media block may store or render: the link sanitizer's
@@ -61,10 +90,9 @@ export const EMBED_SANDBOX = 'allow-scripts allow-same-origin allow-popups allow
 /** The frame's permissions (`allow`): what a player needs, nothing that reads the viewer. */
 export const EMBED_ALLOW = 'fullscreen; picture-in-picture; encrypted-media; clipboard-write';
 const ID = /^[\w-]{1,128}$/;
-const hostIs = (...hosts) => (url) => hosts.includes(url.hostname.toLowerCase());
-/** `segments` of `url`'s path, empty ones dropped. */
-const path = (url) => url.pathname.split('/').filter(Boolean);
-const youtubeHost = hostIs('youtube.com', 'www.youtube.com', 'm.youtube.com', 'music.youtube.com', 'www.youtube-nocookie.com');
+const HASH = /^[\da-f]{1,32}$/i;
+/** `url`'s path segments (empty ones dropped) when its host is one of `hosts`, else none. */
+const on = (url, ...hosts) => hosts.includes(url.hostname.toLowerCase()) ? url.pathname.split('/').filter(Boolean) : [];
 /** A YouTube start time (`t=42`, `t=42s`, `start=42`) in seconds. */
 const youtubeStart = (url) => {
     const t = url.searchParams.get('t') ?? url.searchParams.get('start');
@@ -73,16 +101,14 @@ const youtubeStart = (url) => {
 const youtube = {
     name: 'YouTube',
     embed: (url) => {
-        const [first, second] = path(url);
+        const [first, second] = on(url, 'youtu.be', 'youtube.com', 'www.youtube.com', 'm.youtube.com', 'music.youtube.com', 'www.youtube-nocookie.com');
         const id = url.hostname.toLowerCase() === 'youtu.be'
             ? first
-            : !youtubeHost(url)
-                ? undefined
-                : first === 'watch'
-                    ? url.searchParams.get('v')
-                    : first && ['shorts', 'embed', 'live'].includes(first)
-                        ? second
-                        : undefined;
+            : first === 'watch'
+                ? url.searchParams.get('v')
+                : first && ['shorts', 'embed', 'live'].includes(first)
+                    ? second
+                    : undefined;
         return id && /^[\w-]{11}$/.test(id)
             ? `https://www.youtube-nocookie.com/embed/${id}${youtubeStart(url)}`
             : null;
@@ -91,26 +117,19 @@ const youtube = {
 const vimeo = {
     name: 'Vimeo',
     embed: (url) => {
-        const parts = path(url);
-        const [id, hash] = hostIs('vimeo.com', 'www.vimeo.com')(url)
-            ? parts
-            : hostIs('player.vimeo.com')(url) && parts[0] === 'video'
-                ? parts.slice(1)
-                : [];
+        const [player, ...video] = on(url, 'player.vimeo.com');
+        const [id, hash] = player === 'video' ? video : on(url, 'vimeo.com', 'www.vimeo.com');
         if (!id || !/^\d{1,12}$/.test(id))
             return null;
-        const h = hash && /^[\da-f]{1,32}$/i.test(hash) ? hash : url.searchParams.get('h');
-        return `https://player.vimeo.com/video/${id}${h && /^[\da-f]{1,32}$/i.test(h) ? `?h=${h}` : ''}`;
+        const h = hash && HASH.test(hash) ? hash : url.searchParams.get('h');
+        return `https://player.vimeo.com/video/${id}${h && HASH.test(h) ? `?h=${h}` : ''}`;
     }
 };
 const loom = {
     name: 'Loom',
     embed: (url) => {
-        const [kind, id] = path(url);
-        return hostIs('loom.com', 'www.loom.com')(url) &&
-            (kind === 'share' || kind === 'embed') &&
-            id &&
-            /^[\da-f]{32}$/i.test(id)
+        const [kind, id] = on(url, 'loom.com', 'www.loom.com');
+        return (kind === 'share' || kind === 'embed') && id && /^[\da-f]{32}$/i.test(id)
             ? `https://www.loom.com/embed/${id}`
             : null;
     }
@@ -118,24 +137,19 @@ const loom = {
 const figma = {
     name: 'Figma',
     embed: (url) => {
-        const [kind, key] = path(url);
-        if (!hostIs('figma.com', 'www.figma.com')(url) || !key || !ID.test(key))
-            return null;
-        if (!['file', 'design', 'proto', 'board', 'slides', 'deck'].includes(kind))
-            return null;
-        return `https://www.figma.com/embed?embed_host=edytor&url=${encodeURIComponent(url.href)}`;
+        const [kind, key] = on(url, 'figma.com', 'www.figma.com');
+        return key &&
+            ID.test(key) &&
+            ['file', 'design', 'proto', 'board', 'slides', 'deck'].includes(kind)
+            ? `https://www.figma.com/embed?embed_host=edytor&url=${encodeURIComponent(url.href)}`
+            : null;
     }
 };
 const codepen = {
     name: 'CodePen',
     embed: (url) => {
-        const [user, kind, id] = path(url);
-        return hostIs('codepen.io')(url) &&
-            user &&
-            ID.test(user) &&
-            (kind === 'pen' || kind === 'embed') &&
-            id &&
-            ID.test(id)
+        const [user, kind, id] = on(url, 'codepen.io');
+        return user && ID.test(user) && (kind === 'pen' || kind === 'embed') && id && ID.test(id)
             ? `https://codepen.io/${user}/embed/${id}?default-tab=result`
             : null;
     },
@@ -144,9 +158,7 @@ const codepen = {
 const spotify = {
     name: 'Spotify',
     embed: (url) => {
-        let parts = path(url);
-        if (!hostIs('open.spotify.com')(url))
-            return null;
+        let parts = on(url, 'open.spotify.com');
         if (parts[0] === 'embed' || /^intl-[a-z-]+$/i.test(parts[0] ?? ''))
             parts = parts.slice(1);
         const [kind, id] = parts;
@@ -237,38 +249,4 @@ export const claimed = (element, tag) => {
 };
 /** An imported `video`'s or `audio`'s source: its `src`, else its first `source`'s. */
 export const mediaSourceOf = (element) => safeMediaSrc(element?.getAttribute('src') ?? element?.querySelector('source[src]')?.getAttribute('src'));
-/** HTML-escape `value` for an attribute or text of an export. */
-export const escapeHtml = (value) => value.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
-/** The files each media kind takes: a video, an audio track, any other file. */
-const ACCEPTS = {
-    video: (file) => /^video\//i.test(file.type),
-    audio: (file) => /^audio\//i.test(file.type),
-    file: () => true
-};
-/**
- * Register `type`'s uploads on the view's (`media.files`): with an
- * `upload`, the files it takes (the file kind: any no other kind takes)
- * become its blocks. Answers the paste hook to list, or `undefined`
- * without an `upload` or a view.
- */
-export const mediaUploads = (edytor, type, upload) => {
-    const uploads = upload ? fileUploads(edytor) : undefined;
-    if (!uploads || !upload)
-        return undefined;
-    uploads.register({
-        type,
-        accepts: ACCEPTS[type],
-        fallback: type === 'file',
-        upload,
-        data: (file, answer) => {
-            const src = safeMediaSrc(answer);
-            if (!src)
-                return null;
-            return type === 'file'
-                ? { src, name: file.name || fileNameOf(src), size: file.size }
-                : { src };
-        },
-        filled: (data) => safeMediaSrc(data.src) !== null
-    });
-    return uploads.paste;
-};
+export { escapeHtml };

package/dist/plugins/media/upload.css

@@ -0,0 +1,23 @@
+/* Loaded by the preview's module: a file uploading, drawn by the plugin when
+   the view has no empty markup (`createMediaEmptyPlugin`). */
+[data-edytor-upload] {
+	display: flex;
+	position: relative;
+	flex-direction: column;
+	gap: 6px;
+}
+[data-edytor-upload] img {
+	display: block;
+	max-width: 100%;
+}
+[data-edytor-upload] progress {
+	width: 100%;
+	height: 4px;
+}
+[data-edytor-upload-image] progress {
+	position: absolute;
+	right: 8px;
+	bottom: 8px;
+	left: 8px;
+	width: auto;
+}

package/dist/plugins/media/urlPaste.svelte.d.ts

@@ -1,27 +1,22 @@
 import type { Snippet } from 'svelte';
-import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../../edytor.svelte.js';
 import type { Block } from '../../block/block.svelte.js';
 import type { PluginDefinitions, PluginOperations } from '../../plugins.js';
 import type { SerializableContent } from '../../utils/json.js';
-import { type MediaLabels } from '../../labels.js';
-import { type OptionAttributes } from '../chrome.js';
+import { ChromeList } from '../list.svelte.js';
 /** A kind a pasted URL can turn its line into (the embed's, the bookmark's). */
 export type UrlPasteOffer = {
     /** The kind the line becomes. */
     type: string;
-    /** The menu row. */
-    label: string;
     icon: string;
     /** The block's data for `url`, or `null` when this kind takes no such URL (no provider plays it). */
     data: (url: string) => Record<string, SerializableContent> | null;
     /** After the line became the kind (a bookmark's unfurl). */
     created?: (block: Block, url: string) => void;
 };
-/** One row of the menu: keep the link, or an offer. */
+/** One row of the menu: keep the link (`link`), or an offer (its kind). */
 export type UrlPasteOption = {
     id: string;
-    label: string;
     icon: string;
     offer?: UrlPasteOffer;
 };
@@ -37,11 +32,8 @@ export type UrlPasteOption = {
  * One controller per view, shared by the plugins that make offers: the
  * first one listed carries its hooks (`urlPaste`).
  */
-export declare class UrlPasteController {
+export declare class UrlPasteController extends ChromeList {
     #private;
-    readonly edytor: Edytor;
-    /** The words the menu shows: the labels of the plugin that made the first offer. */
-    readonly labels: MediaLabels;
     readonly offers: UrlPasteOffer[];
     /** The open menu: the line, the URL, the rows. */
     open: {
@@ -49,33 +41,10 @@ export declare class UrlPasteController {
         url: string;
         options: UrlPasteOption[];
     } | null;
-    /** The keyboard's row. */
-    index: number;
-    constructor(edytor: Edytor, 
-    /** The words the menu shows: the labels of the plugin that made the first offer. */
-    labels?: MediaLabels);
+    constructor(edytor: Edytor);
+    protected get count(): number;
     get readonly(): boolean;
-    /** The listbox's element id (page-unique), for `aria-controls`. */
-    get listId(): string;
-    /** The element id of the row at `index` (page-unique), for `aria-activedescendant`. */
-    optionId: (index: number) => string;
-    /**
-     * The attributes of the row at `index`: spread them on its element
-     * (`{...controller.option(index)}`): its id, `role="option"`,
-     * `aria-selected` and `data-selected` for the keyboard's row.
-     */
-    option: (index: number) => OptionAttributes;
-    /**
-     * The listbox (`{@attach controller.popup}`): it takes the menu's id, its
-     * `listbox` role and name unless it has its own, keeps the editor's focus
-     * on a press, and is published to the view's root (`edytor.popups`) with
-     * its highlighted row while the menu is open: the editor keeps the
-     * keyboard (its keys move and pick).
-     */
-    popup: Attachment<HTMLElement>;
     close: () => void;
-    /** Move the keyboard's row; answers whether the menu took the key. */
-    move: (step: number) => boolean;
     /** Pick a row: keep the link, or turn the line into the offer's kind. */
     pick: (option?: UrlPasteOption | undefined) => void;
 }
@@ -86,4 +55,4 @@ export declare class UrlPasteController {
  * per kind: the first listed wins, as its definition does (a plugin listed
  * twice offers once). The menu's markup is the first `menu` passed.
  */
-export declare const urlPaste: (edytor: Edytor, offer: UrlPasteOffer, labels?: MediaLabels, menu?: Snippet<[UrlPasteController]>) => PluginOperations & PluginDefinitions;
+export declare const urlPaste: (edytor: Edytor, offer: UrlPasteOffer, menu?: Snippet<[UrlPasteController]>) => PluginOperations & PluginDefinitions;

package/dist/plugins/media/urlPaste.svelte.js

@@ -1,12 +1,10 @@
-import { dispatchPlan } from '../../block/block.utils.js';
+import { placeNear } from '../../surface/overlay.js';
 import { onPress } from '../../events/onFocus.js';
-import { holdsNothing, lineage, placing } from '../../kinds.js';
-import { id } from '../../utils.js';
+import { convertToKind, holdsNothing } from '../../kinds.js';
 import { pastedLink } from '../richtext/richTextOperations.js';
 import { safeWebUrl } from './media.js';
-import UrlPasteMenu from './UrlPasteMenu.svelte';
-import { englishLabels } from '../../labels.js';
-import { identify, inPage, keepFocus, optionAttributes } from '../chrome.js';
+import { mountChrome } from '../chrome.js';
+import { ChromeList, inPage, listHotkeys } from '../list.svelte.js';
 /**
  * Pasting a bare URL on an empty line (Notion): the URL lands as a link at
  * once (one `insertFromPaste` step, its own undo step) and a menu under the
@@ -19,19 +17,15 @@ import { identify, inPage, keepFocus, optionAttributes } from '../chrome.js';
  * One controller per view, shared by the plugins that make offers: the
  * first one listed carries its hooks (`urlPaste`).
  */
-export class UrlPasteController {
-    edytor;
-    labels;
+export class UrlPasteController extends ChromeList {
     offers = [];
     /** The open menu: the line, the URL, the rows. */
     open = $state(null);
-    /** The keyboard's row. */
-    index = $state(0);
-    constructor(edytor, 
-    /** The words the menu shows: the labels of the plugin that made the first offer. */
-    labels = englishLabels.media) {
-        this.edytor = edytor;
-        this.labels = labels;
+    constructor(edytor) {
+        super(edytor, 'url-paste', 'listbox', (node) => this.open && { active: inPage(node, this.rowId(this.index)) });
+    }
+    get count() {
+        return this.open?.options.length ?? 0;
     }
     get readonly() {
         return this.edytor.readonly;
@@ -42,41 +36,10 @@ export class UrlPasteController {
     claimMenu(menu) {
         this.#menu ??= menu;
     }
-    /** The listbox's element id (page-unique), for `aria-controls`. */
-    get listId() {
-        return this.edytor.popups.idOf('url-paste');
-    }
-    /** The element id of the row at `index` (page-unique), for `aria-activedescendant`. */
-    optionId = (index) => this.edytor.popups.idOf(`url-paste-option-${index}`);
-    /**
-     * The attributes of the row at `index`: spread them on its element
-     * (`{...controller.option(index)}`): its id, `role="option"`,
-     * `aria-selected` and `data-selected` for the keyboard's row.
-     */
-    option = (index) => optionAttributes(this.optionId(index), 'option', index === this.index);
-    /**
-     * The listbox (`{@attach controller.popup}`): it takes the menu's id, its
-     * `listbox` role and name unless it has its own, keeps the editor's focus
-     * on a press, and is published to the view's root (`edytor.popups`) with
-     * its highlighted row while the menu is open: the editor keeps the
-     * keyboard (its keys move and pick).
-     */
-    popup = (node) => {
-        identify(node, this.listId, 'listbox', this.labels.pasteAs);
-        node.addEventListener('mousedown', keepFocus);
-        $effect(() => {
-            if (!this.open)
-                return;
-            const active = inPage(node, this.optionId(this.index));
-            this.edytor.popups.set('url-paste', { id: this.listId, haspopup: 'listbox', active });
-            return () => this.edytor.popups.set('url-paste', null);
-        });
-        return () => node.removeEventListener('mousedown', keepFocus);
-    };
     /** The rows for `url`: Link, then each offer that takes it. @internal */
-    optionsFor = (url) => [
-        { id: 'link', label: this.labels.pasteLink, icon: '🔗' },
-        ...this.offers.flatMap((offer) => offer.data(url) ? [{ id: offer.type, label: offer.label, icon: offer.icon, offer }] : [])
+    #optionsFor = (url) => [
+        { id: 'link', icon: '🔗' },
+        ...this.offers.flatMap((offer) => offer.data(url) ? [{ id: offer.type, icon: offer.icon, offer }] : [])
     ];
     /**
      * The paste (plugin `onPaste`, so a Shift+paste never reaches it): a
@@ -87,16 +50,17 @@ export class UrlPasteController {
     paste = ({ e, prevent }) => {
         const { edytor } = this;
         const { selection } = edytor;
-        if (selection.value.kind !== 'text' || !selection.state.isCollapsed)
+        if (selection.value.kind !== 'text' || !selection.projection.isCollapsed)
             return;
         const { projection } = selection;
         if (projection.islandRoot !== null || projection.voidRoot !== null)
             return;
-        const { startBlock: block, startText: text } = selection.state;
+        const { startText: text } = selection.textRange();
+        const block = text?.parent;
         if (!block?.convertible || !text || !holdsNothing(edytor, block))
             return;
         const url = safeWebUrl(pastedLink(e.clipboardData?.getData('text/plain')));
-        const options = url ? this.optionsFor(url) : [];
+        const options = url ? this.#optionsFor(url) : [];
         if (!url || options.length < 2)
             return;
         prevent(() => {
@@ -105,7 +69,7 @@ export class UrlPasteController {
                 ? { link: { href: url } }
                 : {};
             edytor.dispatcher.run('insertFromPaste', () => {
-                text.insertText({ value: url, start: 0, end: 0, marks });
+                edytor.insertText(block.id, text.segStart, url, marks);
                 edytor.dispatcher.caret(edytor.idToBlock.get(block.id)?.firstText, url.length);
             });
             if (edytor.dispatcher.last?.status !== 'applied')
@@ -119,23 +83,15 @@ export class UrlPasteController {
         if (this.open)
             this.open = null;
     };
-    /** Move the keyboard's row; answers whether the menu took the key. */
-    move = (step) => {
-        if (!this.open)
-            return false;
-        const count = this.open.options.length;
-        this.index = (this.index + step + count) % count;
-        return true;
-    };
     /** The caret still rests at the end of the pasted URL, in its line. @internal */
     stays = () => {
         const { open, edytor } = this;
-        const { value, state } = edytor.selection;
+        const { value, projection } = edytor.selection;
         return Boolean(open &&
             value.kind === 'text' &&
-            state.isCollapsed &&
-            state.startBlock?.id === open.block &&
-            (state.startText?.segStart ?? 0) + state.yStart === open.url.length);
+            projection.isCollapsed &&
+            projection.start?.block === open.block &&
+            projection.start.offset === open.url.length);
     };
     /** Pick a row: keep the link, or turn the line into the offer's kind. */
     pick = (option = this.open?.options[this.index]) => {
@@ -149,35 +105,17 @@ export class UrlPasteController {
         const data = offer.data(open.url);
         if (!block?.isInTree || !block.convertible || !data)
             return;
+        // Turn into the offer's kind, the caret at its start (the URL is the block's whole text).
         const value = { type: offer.type, data, content: [] };
-        const applied = dispatchPlan(block, 'setBlock', { value }, (p) => placing(block, p.value, false, id('b')), lineage(block));
-        const converted = applied && edytor.idToBlock.get(block.id);
-        if (!converted)
-            return;
-        edytor.dispatcher.caret(converted.firstText, 0);
-        offer.created?.(converted, open.url);
+        const converted = convertToKind(edytor, block, { value, replaces: false }, true) &&
+            edytor.idToBlock.get(block.id);
+        if (converted)
+            offer.created?.(converted, open.url);
     };
     /** The hooks of the plugin carrying the menu. @internal */
     hooks = () => ({
         onPaste: this.paste,
-        hotkeys: {
-            arrowdown: ({ prevent }) => {
-                if (this.move(1))
-                    prevent();
-            },
-            arrowup: ({ prevent }) => {
-                if (this.move(-1))
-                    prevent();
-            },
-            enter: ({ prevent }) => {
-                if (this.open)
-                    prevent(() => this.pick());
-            },
-            escape: ({ prevent }) => {
-                if (this.open)
-                    prevent(() => this.close());
-            }
-        },
+        hotkeys: listHotkeys(() => this.open !== null && { move: this.move, pick: () => this.pick(), close: this.close }),
         onAfterOperation: () => this.close(),
         onSelectionChange: () => {
             if (this.open && !this.stays())
@@ -190,7 +128,7 @@ export class UrlPasteController {
                     this.close();
             };
             const offPress = onPress(this.edytor, node.ownerDocument, outside, true);
-            const unmount = this.edytor.overlay.mount(UrlPasteMenu, { controller: this, menu: this.#menu }, 'edytor-url-paste-host', 50, this.measure);
+            const unmount = mountChrome(this.edytor, this.#menu, this, () => this.open, { name: 'edytor-url-paste-host', zIndex: 50, measure: this.measure }, this.close);
             return () => {
                 offPress();
                 unmount();
@@ -206,16 +144,8 @@ export class UrlPasteController {
         const block = edytor.idToBlock.get(open.block);
         if (!block?.isInTree)
             return () => this.close();
-        const view = host.ownerDocument.defaultView;
         const rect = (block.firstText?.node ?? block.node)?.getBoundingClientRect();
-        if (!view || !rect)
-            return;
-        const width = host.firstElementChild?.getBoundingClientRect().width || 220;
-        const height = host.firstElementChild?.getBoundingClientRect().height || 120;
-        const left = `${Math.max(8, Math.min(rect.left, view.innerWidth - width - 8))}px`;
-        const below = rect.bottom + height + 8 < view.innerHeight;
-        const top = `${Math.max(8, below ? rect.bottom + 4 : rect.top - height - 4)}px`;
-        return () => Object.assign(host.style, { left, top });
+        return rect && placeNear(host, rect, [220, 120], { gap: 4 });
     };
 }
 const controllers = new WeakMap();
@@ -226,7 +156,7 @@ const controllers = new WeakMap();
  * per kind: the first listed wins, as its definition does (a plugin listed
  * twice offers once). The menu's markup is the first `menu` passed.
  */
-export const urlPaste = (edytor, offer, labels, menu) => {
+export const urlPaste = (edytor, offer, menu) => {
     const known = controllers.get(edytor);
     if (known) {
         if (!known.offers.some(({ type }) => type === offer.type))
@@ -234,7 +164,7 @@ export const urlPaste = (edytor, offer, labels, menu) => {
         known.claimMenu(menu);
         return {};
     }
-    const controller = new UrlPasteController(edytor, labels);
+    const controller = new UrlPasteController(edytor);
     controllers.set(edytor, controller);
     controller.offers.push(offer);
     controller.claimMenu(menu);