quoin-editor 0.4.1 → 1.0.0

package/dist/chunk-SG37UBDO.js

@@ -0,0 +1,706 @@
+import {
+  domainOf,
+  webAddress
+} from "./chunk-K574XHMM.js";
+import {
+  Button,
+  FLOATING_TOOLBAR,
+  Input,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  bubblePart,
+  focusNode,
+  inlineDirection,
+  insertBlockToWrite,
+  insertBlocks,
+  interceptKeys,
+  keepFocus,
+  linkAddress,
+  preventDefault,
+  selectHandlers,
+  toError,
+  useFocusKey,
+  useNodeKeys,
+  useOutsidePress,
+  useQuoin,
+  useRangeAnchor,
+  useRovingFocus
+} from "./chunk-ZGZEJCRV.js";
+import {
+  isComposingKey,
+  useEditorState,
+  useIsomorphicLayoutEffect,
+  useReadOnly
+} from "./chunk-ZS2WA357.js";
+import {
+  devWarn
+} from "./chunk-XEBWC7ZL.js";
+import {
+  Transaction,
+  createPluginKey,
+  defineExtension,
+  headBlockId,
+  insertSlice,
+  isCollapsed,
+  isParagraph,
+  pastedLink,
+  primaryRegion,
+  regionLength,
+  replaceBlockStep,
+  runCommands,
+  sameSelection,
+  setAttrsStep,
+  sliceFromClipboard,
+  startOf,
+  withContent
+} from "./chunk-HJIQT3S5.js";
+import {
+  EMBED_FRAME,
+  blockById,
+  coreEmbedProviders,
+  embedFrame,
+  sanitizeHref,
+  str
+} from "./chunk-LCQSG4M6.js";
+
+// src/extensions/embed/LinkCard.tsx
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LinkCard({ controller, blockId, url, title, description, image, readOnly, linkRef }) {
+  const card = useRef(null);
+  const [failed, setFailed] = useState(null);
+  const href = sanitizeHref(url);
+  const domain = domainOf(url);
+  const picture = webAddress(image);
+  const name = title || url;
+  return /* @__PURE__ */ jsxs("div", { ref: card, className: "quoin-link-card", ...readOnly ? void 0 : selectHandlers(controller, blockId, card), children: [
+    /* @__PURE__ */ jsxs("div", { className: "quoin-link-card-text", children: [
+      href === null ? /* @__PURE__ */ jsx("span", { className: "quoin-link-card-title", children: name }) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref: linkRef,
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "quoin-link-card-title",
+          tabIndex: readOnly ? void 0 : -1,
+          children: name
+        }
+      ),
+      description && /* @__PURE__ */ jsx("p", { className: "quoin-link-card-description", children: description }),
+      domain !== null && /* @__PURE__ */ jsx("span", { className: "quoin-link-card-domain", children: domain })
+    ] }),
+    picture !== null && picture !== failed && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: picture,
+        alt: "",
+        loading: "lazy",
+        referrerPolicy: "no-referrer",
+        draggable: false,
+        className: "quoin-link-card-image",
+        onError: () => setFailed(picture)
+      }
+    )
+  ] });
+}
+
+// src/extensions/embed/use-link-card-keys.ts
+import { useMemo, useRef as useRef2 } from "react";
+function useLinkCardKeys(controller, blockId, url, editable) {
+  const root = useRef2(null);
+  const link = useRef2(null);
+  const keys = useMemo(() => ({ enter: () => link.current?.focus() }), []);
+  useNodeKeys(controller, blockId, editable, sanitizeHref(url) !== null, root, keys);
+  return { root, link };
+}
+
+// src/extensions/embed/use-unfurl.ts
+import { useEffect } from "react";
+
+// src/extensions/embed/unfurled-patch.ts
+var filled = (value) => typeof value === "string" && value.trim() !== "" ? value : void 0;
+function unfurledPatch(found) {
+  if (typeof found !== "object" || found === null) return null;
+  const { title, description, image } = found;
+  const patch = { title: filled(title), description: filled(description), image: webAddress(image) ?? void 0 };
+  if (patch.title === void 0) return null;
+  return Object.fromEntries(Object.entries(patch).filter(([, value]) => value !== void 0));
+}
+
+// src/extensions/embed/use-unfurl.ts
+var canvases = /* @__PURE__ */ new WeakMap();
+function asksOf(controller) {
+  let asks = canvases.get(controller);
+  if (asks === void 0) {
+    asks = { asked: /* @__PURE__ */ new Set(), drawn: /* @__PURE__ */ new Map() };
+    canvases.set(controller, asks);
+  }
+  return asks;
+}
+var keyOf = (blockId, url) => JSON.stringify([blockId, url]);
+function askFirstTime(controller, blockId, url) {
+  const { asked } = asksOf(controller);
+  const key = keyOf(blockId, url);
+  if (asked.has(key)) return false;
+  asked.add(key);
+  return true;
+}
+function bookmarkAt(controller, blockId, url) {
+  const block = blockById(controller.editor.state.doc, blockId);
+  return block?.type === "BOOKMARK" && str(block.attrs.url) === url ? block : void 0;
+}
+async function unfurlInto(controller, blockId, url, unfurl, onError) {
+  const { asked, drawn } = asksOf(controller);
+  let found;
+  try {
+    found = await unfurl(url);
+  } catch (cause) {
+    if (bookmarkAt(controller, blockId, url) && drawn.get(blockId)) onError(toError(cause));
+    return;
+  }
+  const patch = unfurledPatch(found);
+  if (patch === null) return;
+  const block = bookmarkAt(controller, blockId, url);
+  if (block === void 0 || !drawn.get(blockId) || controller.readOnly) {
+    asked.delete(keyOf(blockId, url));
+    return;
+  }
+  if (str(block.attrs.title) !== "") return;
+  const { editor } = controller;
+  editor.dispatch(editor.createTransaction().step(setAttrsStep(blockId, patch)).setMeta("addToHistory", false));
+}
+function useUnfurl(controller, blockId, url, unfurl) {
+  const { onError } = useQuoin();
+  useEffect(() => {
+    const { drawn } = asksOf(controller);
+    drawn.set(blockId, (drawn.get(blockId) ?? 0) + 1);
+    return () => {
+      const left = (drawn.get(blockId) ?? 1) - 1;
+      if (left > 0) drawn.set(blockId, left);
+      else drawn.delete(blockId);
+    };
+  }, [controller, blockId]);
+  useEffect(() => {
+    if (unfurl === void 0 || url === "" || !askFirstTime(controller, blockId, url)) return;
+    void unfurlInto(controller, blockId, url, unfurl, onError);
+  }, [controller, blockId, url, unfurl, onError]);
+}
+
+// src/extensions/embed/BookmarkBlock.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function BookmarkBlock({ block, controller, feature }) {
+  const readOnly = useReadOnly(controller);
+  const { attrs } = block;
+  const url = str(attrs.url);
+  const title = str(attrs.title);
+  const { root, link } = useLinkCardKeys(controller, block.id, url, !readOnly);
+  useUnfurl(controller, block.id, url, title === "" && !readOnly ? feature.unfurl : void 0);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: root,
+      role: "group",
+      "aria-label": feature.labels.bookmark,
+      contentEditable: false,
+      className: "quoin-bookmark",
+      children: /* @__PURE__ */ jsx2(
+        LinkCard,
+        {
+          controller,
+          blockId: block.id,
+          url,
+          title,
+          description: str(attrs.description),
+          image: str(attrs.image),
+          readOnly,
+          linkRef: link
+        }
+      )
+    }
+  );
+}
+
+// src/extensions/embed/EmbedBlock.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/extensions/embed/EmbedFrame.tsx
+import { useCallback, useMemo as useMemo2, useRef as useRef3 } from "react";
+
+// src/extensions/embed/embed-player.ts
+var PLAYER_HEIGHTS = { spotify: 352, soundcloud: 166 };
+var playerHeight = (provider) => Object.hasOwn(PLAYER_HEIGHTS, provider) ? PLAYER_HEIGHTS[provider] : void 0;
+
+// src/extensions/embed/use-cover-press.ts
+import { useState as useState2 } from "react";
+function useCoverPress(controller) {
+  const [pressing, setPressing] = useState2(false);
+  useIsomorphicLayoutEffect(() => {
+    const doc = controller.root?.ownerDocument;
+    if (!pressing || doc === void 0) return;
+    const release = () => setPressing(false);
+    doc.addEventListener("click", release);
+    doc.addEventListener("pointercancel", release);
+    doc.addEventListener("dragend", release);
+    return () => {
+      doc.removeEventListener("click", release);
+      doc.removeEventListener("pointercancel", release);
+      doc.removeEventListener("dragend", release);
+    };
+  }, [controller, pressing]);
+  const onPress = (event) => {
+    if (event.button === 0) setPressing(true);
+  };
+  return { pressing, onPress };
+}
+
+// src/extensions/embed/EmbedFrame.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function EmbedFrame({ blockId, controller, match, labels, readOnly }) {
+  const root = useRef3(null);
+  const frame = useRef3(null);
+  const selected = useEditorState(
+    controller,
+    useCallback(({ selection }) => selection?.kind === "node" && selection.block === blockId, [blockId])
+  );
+  const cover = useCoverPress(controller);
+  const keys = useMemo2(() => ({ enter: () => void setTimeout(() => frame.current?.focus()) }), []);
+  useNodeKeys(controller, blockId, !readOnly, true, root, keys);
+  const height = playerHeight(match.provider);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: root,
+      className: "quoin-embed-frame",
+      ...height === void 0 ? void 0 : { "data-player": "", style: { height } },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "iframe",
+          {
+            ref: frame,
+            src: match.src,
+            title: labels.frameTitle(match.provider),
+            sandbox: EMBED_FRAME.sandbox,
+            loading: EMBED_FRAME.loading,
+            referrerPolicy: EMBED_FRAME.referrerpolicy,
+            tabIndex: readOnly ? void 0 : -1
+          }
+        ),
+        !readOnly && (!selected || cover.pressing) && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "quoin-embed-cover",
+            onPointerDownCapture: cover.onPress,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => focusNode(controller, blockId)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/extensions/embed/providers.ts
+function frameOf(url, provider) {
+  try {
+    return embedFrame(url, [provider])?.src ?? null;
+  } catch {
+    devWarn(`the embed provider "${provider.name}" threw, so it frames nothing.`);
+    return null;
+  }
+}
+function matchEmbed(url, hostProviders = []) {
+  for (const provider of [...hostProviders, ...coreEmbedProviders]) {
+    const src = frameOf(url, provider);
+    if (src !== null) return { provider: provider.name, src };
+  }
+  return null;
+}
+
+// src/extensions/embed/EmbedBlock.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function EmbedBlock({ block, controller, feature }) {
+  const { labels, providers } = feature;
+  const readOnly = useReadOnly(controller);
+  const url = str(block.attrs.url);
+  const match = useMemo3(() => matchEmbed(url, providers), [url, providers]);
+  const { root, link } = useLinkCardKeys(controller, block.id, url, !readOnly && match === null);
+  return /* @__PURE__ */ jsx4("div", { ref: root, role: "group", "aria-label": labels.embed, contentEditable: false, className: "quoin-embed", children: match === null ? /* @__PURE__ */ jsx4(LinkCard, { controller, blockId: block.id, url, readOnly, linkRef: link }) : /* @__PURE__ */ jsx4(EmbedFrame, { blockId: block.id, controller, match, labels, readOnly }) });
+}
+
+// src/extensions/embed/embed-labels.ts
+var PROVIDER_FRAMES = {
+  youtube: "YouTube video",
+  vimeo: "Vimeo video",
+  loom: "Loom video",
+  figma: "Figma design",
+  codepen: "CodePen pen",
+  spotify: "Spotify player",
+  soundcloud: "SoundCloud player"
+};
+var englishEmbedLabels = {
+  embed: "Embed",
+  embedDescription: "A video, design or player from a link",
+  bookmark: "Bookmark",
+  bookmarkDescription: "A card that links to a page",
+  frameTitle: (provider) => Object.hasOwn(PROVIDER_FRAMES, provider) ? PROVIDER_FRAMES[provider] : `${provider} embed`,
+  linkOptions: "Link options",
+  keepAsLink: "Keep as link",
+  embedLink: "Link to embed",
+  bookmarkLink: "Link to bookmark",
+  notALink: "Enter a web address, such as https://example.com",
+  cannotEmbed: "This link cannot be embedded.",
+  bookmarkInstead: "Bookmark instead"
+};
+function resolveEmbedLabels(overrides) {
+  const given = Object.entries(overrides ?? {}).filter(([, value]) => value !== void 0);
+  return given.length === 0 ? englishEmbedLabels : { ...englishEmbedLabels, ...Object.fromEntries(given) };
+}
+
+// src/extensions/embed/embed-slash-items.ts
+import { AppWindow, Bookmark } from "lucide-react";
+
+// src/extensions/embed/link-request.ts
+import { useCallback as useCallback2, useSyncExternalStore } from "react";
+var stores = /* @__PURE__ */ new WeakMap();
+function storeOf(controller) {
+  let store = stores.get(controller);
+  if (store === void 0) {
+    store = { request: null, listeners: /* @__PURE__ */ new Set() };
+    stores.set(controller, store);
+  }
+  return store;
+}
+function requestLink(controller, request) {
+  const store = storeOf(controller);
+  if (store.request === request) return;
+  store.request = request;
+  for (const listener of [...store.listeners]) listener();
+}
+function useLinkRequest(controller) {
+  const subscribe = useCallback2(
+    (notify) => {
+      const { listeners } = storeOf(controller);
+      listeners.add(notify);
+      return () => void listeners.delete(notify);
+    },
+    [controller]
+  );
+  const read = useCallback2(() => storeOf(controller).request, [controller]);
+  return useSyncExternalStore(subscribe, read, read);
+}
+
+// src/extensions/embed/embed-slash-items.ts
+var embedSlashItems = (labels) => [
+  {
+    id: "embed",
+    title: labels.embed,
+    description: labels.embedDescription,
+    group: "embeds",
+    icon: AppWindow,
+    keywords: ["iframe", "video", "youtube", "vimeo", "loom", "figma", "codepen", "spotify", "soundcloud"],
+    run: ({ controller, range }) => requestLink(controller, { kind: "embed", at: range })
+  },
+  {
+    id: "bookmark",
+    title: labels.bookmark,
+    description: labels.bookmarkDescription,
+    group: "embeds",
+    icon: Bookmark,
+    keywords: ["link", "url", "card", "preview", "web"],
+    run: ({ controller, range }) => requestLink(controller, { kind: "bookmark", at: range })
+  }
+];
+
+// src/extensions/embed/link-choice.ts
+var linkChoiceKey = createPluginKey("linkChoice");
+var linkChoicePlugin = {
+  key: linkChoiceKey,
+  init: () => null,
+  apply(tr, value, before, after) {
+    const pasted = tr.getMeta(linkChoiceKey.name);
+    if (pasted !== void 0) return pasted;
+    if (value === null) return null;
+    const moved = tr.selectionSet && !sameSelection(tr.before.selection, tr.selection);
+    const lineChanged = blockById(before.doc, value.block) !== blockById(after.doc, value.block);
+    return moved || lineChanged ? null : value;
+  }
+};
+var linkChoice = (state) => state.pluginState.get(linkChoiceKey.name) ?? null;
+function onEmptyLine({ doc, schema, selection }) {
+  if (doc.blocks.length === 0) return true;
+  if (selection?.kind !== "text" || !isCollapsed(selection)) return false;
+  const block = blockById(doc, selection.head.block);
+  return block !== void 0 && isParagraph(block) && regionLength(block, primaryRegion(schema, block) ?? "") === 0;
+}
+var pasteLinkChoice = {
+  name: "link-choice",
+  match(text, state) {
+    const link = pastedLink(text);
+    const slice = link === null || link.rest !== "" || !onEmptyLine(state) ? null : sliceFromClipboard({ text });
+    if (link === null || slice === null) return null;
+    const paste = insertSlice(slice);
+    return (before, dispatch) => paste(before, dispatch && ((tr) => dispatch(tr.setMeta(linkChoiceKey.name, choiceAfter(tr, link.href)))));
+  }
+};
+function choiceAfter(tr, href) {
+  const { selection } = tr;
+  return selection?.kind === "text" ? { block: selection.head.block, href } : null;
+}
+function emptyParagraph(blockId) {
+  return (state, dispatch) => {
+    const line = blockById(state.doc, blockId);
+    if (line === void 0 || !isParagraph(line)) return false;
+    const tr = new Transaction(state).step(replaceBlockStep(withContent(state.schema, line, [])));
+    dispatch?.(tr.setSelection(startOf(tr.doc, state.schema, blockId)));
+    return true;
+  };
+}
+function replaceLink(blockId, block) {
+  return (state, dispatch) => {
+    const { ok, tr } = runCommands(state, [emptyParagraph(blockId), insertBlocks([block], "line", blockId)]);
+    if (!ok || tr === null) return false;
+    dispatch?.(tr);
+    return true;
+  };
+}
+
+// src/extensions/embed/LinkChoicePopover.tsx
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef4, useState as useState3 } from "react";
+
+// src/extensions/embed/link-blocks.ts
+function embedOf(href, providers) {
+  const match = matchEmbed(href, providers);
+  return match === null ? null : { type: "EMBED", attrs: { url: href, provider: match.provider } };
+}
+var bookmarkOf = (href) => ({ type: "BOOKMARK", attrs: { url: href } });
+function typedLink(kind, typed, providers) {
+  const href = webAddress(linkAddress(typed));
+  if (href === null) return { href, block: null, problem: "notALink" };
+  const block = kind === "embed" ? embedOf(href, providers) : bookmarkOf(href);
+  return { href, block, problem: block === null ? "cannotEmbed" : null };
+}
+
+// src/extensions/embed/LinkChoicePopover.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var plainKey = (event) => !event.altKey && !event.ctrlKey && !event.metaKey;
+function linkEnd({ doc, schema }, blockId) {
+  const block = blockById(doc, blockId);
+  const region = block && primaryRegion(schema, block);
+  const end = block && region ? regionLength(block, region) : 0;
+  return block && region ? { block: blockId, region, from: end, to: end } : null;
+}
+function LinkChoicePopover({ controller, feature }) {
+  const readOnly = useReadOnly(controller);
+  const choice = useEditorState(controller, linkChoice);
+  const [dismissed, setDismissed] = useState3(null);
+  const dismiss = useCallback3(() => setDismissed(choice), [choice]);
+  if (readOnly || choice === null || choice === dismissed) return null;
+  return /* @__PURE__ */ jsx5(LinkChoiceToolbar, { controller, feature, choice, onDismiss: dismiss });
+}
+function useEscapeInText(controller, onEscape) {
+  useEffect2(() => {
+    const intercept = (event) => {
+      if (event.key !== "Escape" || !plainKey(event) || event.shiftKey) return false;
+      event.preventDefault();
+      onEscape();
+      return true;
+    };
+    return interceptKeys(controller, intercept);
+  }, [controller, onEscape]);
+}
+function LinkChoiceToolbar({ controller, feature: { labels, providers }, choice, onDismiss }) {
+  const embed = useMemo4(() => embedOf(choice.href, providers), [choice.href, providers]);
+  const range = useMemo4(() => linkEnd(controller.editor.state, choice.block), [controller, choice.block]);
+  const { anchor } = useRangeAnchor(controller, range);
+  const after = useMemo4(() => {
+    const host = range && controller.registry.get(range.block, range.region);
+    return host && inlineDirection(host) === "rtl" ? "left" : "right";
+  }, [controller, range]);
+  const roving = useRovingFocus();
+  const rovingRef = roving.ref;
+  const content = useRef4(null);
+  const ref = useCallback3(
+    (element) => {
+      content.current = element;
+      rovingRef(element);
+    },
+    [rovingRef]
+  );
+  const ownerDocument = useCallback3(() => controller.root?.ownerDocument ?? document, [controller]);
+  useFocusKey(controller, roving.focusCurrent);
+  useEscapeInText(controller, onDismiss);
+  useOutsidePress(content, ownerDocument, onDismiss);
+  const choose = (block) => {
+    if (block === null) onDismiss();
+    else controller.run(replaceLink(choice.block, block));
+    controller.focus();
+  };
+  const onKeyDown = (event) => {
+    if (!roving.owns(event.target) || isComposingKey(controller, event.nativeEvent)) return;
+    if (event.key === "Escape") onDismiss();
+    if (event.key === "Escape" || event.key === "Tab" && plainKey(event)) {
+      event.preventDefault();
+      controller.focus();
+    } else roving.onKeyDown(event);
+  };
+  const button = (label, block) => /* @__PURE__ */ jsx5(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => choose(block), children: label });
+  return /* @__PURE__ */ jsxs3(Popover, { open: true, modal: false, children: [
+    /* @__PURE__ */ jsx5(PopoverAnchor, { virtualRef: anchor }),
+    /* @__PURE__ */ jsxs3(
+      PopoverContent,
+      {
+        ref,
+        role: "toolbar",
+        "aria-label": labels.linkOptions,
+        side: after,
+        align: "end",
+        sideOffset: 8,
+        className: FLOATING_TOOLBAR,
+        onOpenAutoFocus: preventDefault,
+        onCloseAutoFocus: preventDefault,
+        onPointerDown: keepFocus,
+        onMouseDown: keepFocus,
+        onFocus: roving.onFocus,
+        onKeyDown,
+        ...bubblePart(controller),
+        children: [
+          embed !== null && button(labels.embed, embed),
+          button(labels.bookmark, bookmarkOf(choice.href)),
+          button(labels.keepAsLink, null)
+        ]
+      }
+    )
+  ] });
+}
+
+// src/extensions/embed/LinkInputOverlay.tsx
+import { useCallback as useCallback4, useEffect as useEffect3, useId, useRef as useRef5, useState as useState4 } from "react";
+
+// src/extensions/embed/store-after-press.ts
+function storeAfterPress(controller, request, block) {
+  const { editor } = controller;
+  if (controller.readOnly || controller.root === null) return;
+  controller.readSelectionFromDom();
+  const line = request.at.block;
+  const onLine = headBlockId(editor.state.selection) === line;
+  const place = onLine ? insertBlockToWrite(block, false, line) : insertBlocks([block], "stay", line);
+  place(editor.state, (tr) => editor.dispatch(tr));
+}
+
+// src/extensions/embed/LinkInputOverlay.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function LinkInputOverlay({ controller, feature }) {
+  const readOnly = useReadOnly(controller);
+  const request = useLinkRequest(controller);
+  const close = useCallback4(() => requestLink(controller, null), [controller]);
+  useEffect3(() => {
+    if (readOnly) close();
+  }, [readOnly, close]);
+  if (readOnly || request === null) return null;
+  return /* @__PURE__ */ jsx6(LinkInputPopover, { controller, feature, request, onClose: close });
+}
+function LinkInputPopover({ controller, feature: { labels, providers }, request, onClose }) {
+  const [address, setAddress] = useState4("");
+  const [problem, setProblem] = useState4(null);
+  const messageId = useId();
+  const content = useRef5(null);
+  const { anchor, side } = useRangeAnchor(controller, request.at);
+  const name = request.kind === "embed" ? labels.embedLink : labels.bookmarkLink;
+  const typed = () => typedLink(request.kind, address, providers);
+  const finish = (block) => {
+    onClose();
+    if (block !== null && !controller.readOnly) controller.run(insertBlockToWrite(block, false, request.at.block));
+    controller.focus();
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    const { block, problem: refused } = typed();
+    if (block === null) setProblem(refused);
+    else finish(block);
+  };
+  const bookmarkInstead = () => finish(typedLink("bookmark", address, providers).block);
+  const ownerDocument = useCallback4(() => controller.root?.ownerDocument ?? document, [controller]);
+  useOutsidePress(content, ownerDocument, () => {
+    onClose();
+    const { block } = typed();
+    if (block !== null) setTimeout(() => storeAfterPress(controller, request, block));
+  });
+  const onKeyDown = (event) => {
+    if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+    if (isComposingKey(controller, event.nativeEvent)) return;
+    const controls = [...event.currentTarget.querySelectorAll("input, button")];
+    const next = controls.indexOf(event.target) + (event.shiftKey ? -1 : 1);
+    event.preventDefault();
+    if (next >= 0 && next < controls.length) controls[next].focus();
+    else finish(typed().block);
+  };
+  return /* @__PURE__ */ jsxs4(Popover, { open: true, modal: false, children: [
+    /* @__PURE__ */ jsx6(PopoverAnchor, { virtualRef: anchor }),
+    /* @__PURE__ */ jsx6(
+      PopoverContent,
+      {
+        ref: content,
+        "aria-label": name,
+        side,
+        align: "start",
+        className: "w-80 p-2 shadow-md",
+        onCloseAutoFocus: preventDefault,
+        onEscapeKeyDown: (event) => {
+          event.preventDefault();
+          if (!isComposingKey(controller, event)) finish(null);
+        },
+        ...bubblePart(controller),
+        children: /* @__PURE__ */ jsxs4("form", { noValidate: true, className: "quoin-embed-ask", onSubmit: submit, onKeyDown, children: [
+          /* @__PURE__ */ jsx6(
+            Input,
+            {
+              type: "url",
+              className: "h-8",
+              "aria-label": name,
+              "aria-invalid": problem !== null || void 0,
+              "aria-describedby": problem === null ? void 0 : messageId,
+              value: address,
+              onChange: (event) => {
+                setAddress(event.target.value);
+                setProblem(null);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(Button, { type: "submit", size: "sm", children: request.kind === "embed" ? labels.embed : labels.bookmark }),
+          problem !== null && /* @__PURE__ */ jsx6("p", { id: messageId, role: "alert", className: "quoin-embed-ask-message", children: labels[problem] }),
+          problem === "cannotEmbed" && /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", size: "sm", onClick: bookmarkInstead, children: labels.bookmarkInstead })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/extensions/embed/embed-extension.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function embedExtension(options = {}) {
+  const feature = {
+    labels: resolveEmbedLabels(options.labels),
+    providers: options.providers ?? [],
+    unfurl: options.unfurl
+  };
+  const EmbedRenderer = (props) => /* @__PURE__ */ jsx7(EmbedBlock, { ...props, feature });
+  const BookmarkRenderer = (props) => /* @__PURE__ */ jsx7(BookmarkBlock, { ...props, feature });
+  const ChoiceOverlay = ({ controller }) => /* @__PURE__ */ jsx7(LinkChoicePopover, { controller, feature });
+  const InputOverlay = ({ controller }) => /* @__PURE__ */ jsx7(LinkInputOverlay, { controller, feature });
+  const ui = {
+    slashItems: embedSlashItems(feature.labels),
+    renderers: { EMBED: EmbedRenderer, BOOKMARK: BookmarkRenderer },
+    blockNames: { EMBED: feature.labels.embed, BOOKMARK: feature.labels.bookmark },
+    overlays: [ChoiceOverlay, InputOverlay]
+  };
+  return defineExtension({ name: "embed", plugins: [linkChoicePlugin], pasteRules: [pasteLinkChoice], ui });
+}
+
+export {
+  englishEmbedLabels,
+  embedExtension
+};
+//# sourceMappingURL=chunk-SG37UBDO.js.map