@haklex/rich-ext-embed 0.1.1 → 0.2.0

package/dist/EmbedLinkRenderer-c7CLy9Mi.js

@@ -0,0 +1,690 @@
+import { $getNodeByKey, DecoratorNode } from "lexical";
+import { Component, Suspense, createContext, createElement, lazy, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useColorScheme } from "@haklex/rich-editor";
+import { SiGithub } from "@icons-pack/react-simple-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink, Trash2 } from "lucide-react";
+import { ActionBar, ActionButton } from "@haklex/rich-editor-ui";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+//#region src/styles.css.ts
+var semanticClassNames$1 = {
+	wrapper: "rich-embed-link-wrapper",
+	embed: "rich-embed",
+	embedGeneric: "rich-embed--generic",
+	embedTweet: "rich-embed--tweet",
+	embedYoutube: "rich-embed--youtube",
+	embedCodesandbox: "rich-embed--codesandbox",
+	embedBilibili: "rich-embed--bilibili",
+	embedGithubFile: "rich-embed--github-file",
+	embedGithubGist: "rich-embed--github-gist",
+	embedThinking: "rich-embed--thinking",
+	badge: "rich-embed__badge",
+	dot: "rich-embed__dot",
+	divider: "rich-embed__divider",
+	input: "rich-embed__input"
+};
+var semanticEmbedModifierClass = {
+	generic: "rich-embed--generic",
+	tweet: "rich-embed--tweet",
+	youtube: "rich-embed--youtube",
+	codesandbox: "rich-embed--codesandbox",
+	bilibili: "rich-embed--bilibili",
+	"github-file": "rich-embed--github-file",
+	"github-gist": "rich-embed--github-gist",
+	thinking: "rich-embed--thinking"
+};
+var wrapper = "_1qucygc1";
+var embed = "_1qucygc2";
+var embedType = {
+	generic: "_1qucygc3",
+	tweet: "_1qucygc4",
+	youtube: "_1qucygc5",
+	codesandbox: "_1qucygc6",
+	bilibili: "_1qucygc7",
+	"github-file": "_1qucygc8",
+	"github-gist": "_1qucygc9",
+	thinking: "_1qucygca"
+};
+var badge = "_1qucygcb";
+var dot = "_1qucygcc";
+var divider = "_1qucygcd";
+var input = "_1qucygce";
+//#endregion
+//#region src/context/EmbedRendererContext.tsx
+var EmbedRendererCtx = createContext({});
+var EmbedRendererProvider = EmbedRendererCtx.Provider;
+function useEmbedRenderers() {
+	return use(EmbedRendererCtx);
+}
+//#endregion
+//#region src/styles-static.css.ts
+var semanticClassNames = {
+	ratioContainer: "embed-static-ratio-container",
+	ratioInner: "embed-static-ratio-inner",
+	iframe: "embed-static-iframe",
+	gist: "embed-static-gist",
+	gistIframe: "embed-static-gist__iframe",
+	sourceLink: "embed-static-source-link",
+	githubFile: "embed-static-github-file",
+	githubFileCode: "embed-static-github-file__code",
+	githubFileCodeLong: "embed-static-github-file__code--long",
+	githubFileLine: "embed-static-github-file__line",
+	githubFileLineNum: "embed-static-github-file__line-num",
+	shiki: "embed-static-shiki",
+	fallback: "embed-static-fallback",
+	fallbackGeneric: "embed-static-fallback--generic",
+	fallbackTweet: "embed-static-fallback--tweet",
+	fallbackYoutube: "embed-static-fallback--youtube",
+	fallbackCodesandbox: "embed-static-fallback--codesandbox",
+	fallbackBilibili: "embed-static-fallback--bilibili",
+	fallbackGithubFile: "embed-static-fallback--github-file",
+	fallbackGithubGist: "embed-static-fallback--github-gist",
+	fallbackThinking: "embed-static-fallback--thinking",
+	fallbackBadge: "embed-static-fallback__badge",
+	fallbackDot: "embed-static-fallback__dot",
+	fallbackLink: "embed-static-fallback__link",
+	tweet: "embed-static-tweet",
+	loading: "embed-static-loading"
+};
+var semanticFallbackModifierClass = {
+	generic: "embed-static-fallback--generic",
+	tweet: "embed-static-fallback--tweet",
+	youtube: "embed-static-fallback--youtube",
+	codesandbox: "embed-static-fallback--codesandbox",
+	bilibili: "embed-static-fallback--bilibili",
+	"github-file": "embed-static-fallback--github-file",
+	"github-gist": "embed-static-fallback--github-gist",
+	thinking: "embed-static-fallback--thinking"
+};
+var ratioContainer = "_1xclnej1";
+var ratioInner = "_1xclnej2";
+var iframe = "_1xclnej3";
+var gist = "_1xclnej4";
+var gistIframe = "_1xclnej5";
+var sourceLink = "_1xclnej6";
+var githubFile = "_1xclnej7";
+var githubFileCode = "_1xclnej8";
+var githubFileCodeLong = "_1xclnej9";
+var githubFileLine = "_1xclneja";
+var githubFileLineNum = "_1xclnejb";
+var shiki = "_1xclnejc";
+var fallback = "_1xclnejd";
+var fallbackType = {
+	generic: "_1xclneje",
+	tweet: "_1xclnejf",
+	youtube: "_1xclnejg",
+	codesandbox: "_1xclnejh",
+	bilibili: "_1xclneji",
+	"github-file": "_1xclnejj",
+	"github-gist": "_1xclnejk",
+	thinking: "_1xclnejl"
+};
+var fallbackBadge = "_1xclnejm";
+var fallbackDot = "_1xclnejn";
+var fallbackLink = "_1xclnejo";
+var tweet = "_1xclnejp";
+var loading = "_1xclnejq";
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region src/renderers/EmbedStaticRenderer.tsx
+var extToLang = {
+	".js": "javascript",
+	".ts": "typescript",
+	".mjs": "javascript",
+	".cjs": "javascript",
+	".mts": "typescript",
+	".cts": "typescript",
+	".jsx": "jsx",
+	".tsx": "tsx",
+	".md": "markdown",
+	".css": "css",
+	".scss": "scss",
+	".html": "html",
+	".json": "json",
+	".yml": "yaml",
+	".yaml": "yaml",
+	".toml": "toml",
+	".xml": "xml",
+	".sh": "bash",
+	".bash": "bash",
+	".zsh": "bash",
+	".go": "go",
+	".py": "python",
+	".rb": "ruby",
+	".java": "java",
+	".c": "c",
+	".cpp": "cpp",
+	".cs": "csharp",
+	".rs": "rust",
+	".swift": "swift",
+	".kt": "kotlin",
+	".lua": "lua",
+	".sql": "sql",
+	".graphql": "graphql",
+	".scala": "scala",
+	".dart": "dart",
+	".vue": "vue",
+	".h": "c",
+	".hpp": "cpp",
+	".m": "objectivec",
+	".ex": "elixir",
+	".r": "r"
+};
+function getLangFromPath(path) {
+	const dot = path.lastIndexOf(".");
+	if (dot === -1) return "text";
+	return extToLang[path.slice(dot).toLowerCase()] || "text";
+}
+var shikiPromise = import("shiki/bundle/web").catch(() => null);
+var typeLabels$1 = {
+	"tweet": "X / Twitter",
+	"youtube": "YouTube",
+	"codesandbox": "CodeSandbox",
+	"bilibili": "Bilibili",
+	"github-file": "GitHub File",
+	"github-gist": "GitHub Gist",
+	"thinking": "Thinking"
+};
+var LazyTweet = lazy(() => import("react-tweet").then((mod) => ({ default: mod.IsolatedTweet })));
+var EmbedErrorBoundary = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "state", { hasError: false });
+	}
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	render() {
+		return this.state.hasError ? this.props.fallback : this.props.children;
+	}
+};
+function GitHubSvg() {
+	return /* @__PURE__ */ jsx(SiGithub, { size: 16 });
+}
+function FixedRatioContainer({ children, ratio = 58 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `${ratioContainer} ${semanticClassNames.ratioContainer}`,
+		children: /* @__PURE__ */ jsx("div", {
+			className: `${ratioInner} ${semanticClassNames.ratioInner}`,
+			style: { paddingBottom: `${ratio}%` },
+			children
+		})
+	});
+}
+function FallbackLink({ url, type }) {
+	const label = type ? typeLabels$1[type] : "Embed";
+	const cssModifier = type || "generic";
+	const fallbackTypeClass = fallbackType[cssModifier];
+	const semanticModifierClass = semanticFallbackModifierClass[cssModifier];
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${fallback} ${fallbackTypeClass} ${semanticClassNames.fallback} ${semanticModifierClass}`.trim(),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: `${fallbackBadge} ${semanticClassNames.fallbackBadge}`,
+			children: [/* @__PURE__ */ jsx("span", { className: `${fallbackDot} ${semanticClassNames.fallbackDot}` }), label]
+		}), /* @__PURE__ */ jsx("a", {
+			className: `${fallbackLink} ${semanticClassNames.fallbackLink}`,
+			href: url,
+			rel: "noreferrer",
+			target: "_blank",
+			children: url
+		})]
+	});
+}
+function TweetRenderer({ url }) {
+	const colorScheme = useColorScheme();
+	let parsedUrl;
+	try {
+		parsedUrl = new URL(url);
+	} catch {
+		return /* @__PURE__ */ jsx(FallbackLink, {
+			type: "tweet",
+			url
+		});
+	}
+	const id = parsedUrl.pathname.split("/").pop();
+	if (!id) return /* @__PURE__ */ jsx(FallbackLink, {
+		type: "tweet",
+		url
+	});
+	return /* @__PURE__ */ jsx(EmbedErrorBoundary, {
+		fallback: /* @__PURE__ */ jsx(FallbackLink, {
+			type: "tweet",
+			url
+		}),
+		children: /* @__PURE__ */ jsx("div", {
+			className: `${tweet} ${semanticClassNames.tweet}`,
+			children: /* @__PURE__ */ jsx(Suspense, {
+				fallback: /* @__PURE__ */ jsx("div", {
+					className: `${loading} ${semanticClassNames.loading}`,
+					children: "Loading tweet..."
+				}),
+				children: /* @__PURE__ */ jsx(LazyTweet, {
+					id,
+					style: { width: "100%" },
+					theme: colorScheme === "dark" ? "dark" : "light"
+				})
+			})
+		})
+	});
+}
+function GithubFileEmbed({ url, href }) {
+	const shikiTheme = useColorScheme() === "dark" ? "github-dark" : "github-light";
+	const [, owner, repo, , ...rest] = url.pathname.split("/");
+	const ref = rest[0];
+	const path = ref ? rest.slice(1).join("/") : rest.join("/");
+	const matchResult = url.hash.match(/L\d+/g);
+	let startLine = 0;
+	let endLine;
+	if (matchResult) if (matchResult.length === 1) {
+		startLine = Number.parseInt(matchResult[0].slice(1)) - 1;
+		endLine = startLine + 1;
+	} else {
+		startLine = Number.parseInt(matchResult[0].slice(1)) - 1;
+		endLine = Number.parseInt(matchResult[1].slice(1));
+	}
+	const [content, setContent] = useState(null);
+	const [highlightedHtml, setHighlightedHtml] = useState(null);
+	const [loading$1, setLoading] = useState(true);
+	const [error, setError] = useState(false);
+	const lang = useMemo(() => getLangFromPath(path), [path]);
+	useEffect(() => {
+		let cancelled = false;
+		setContent(null);
+		setHighlightedHtml(null);
+		setLoading(true);
+		setError(false);
+		const fetchPromise = fetch(`https://cdn.jsdelivr.net/gh/${owner}/${repo}${ref ? `@${ref}` : ""}/${path}`).then((res) => {
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			return res.text();
+		});
+		Promise.all([fetchPromise, shikiPromise]).then(([text, shikiMod]) => {
+			if (cancelled) return;
+			setContent(text);
+			const lines = text.split("\n");
+			const end = endLine ?? lines.length;
+			const displayCode = lines.slice(startLine, end).join("\n");
+			if (!shikiMod) {
+				setLoading(false);
+				return;
+			}
+			shikiMod.codeToHtml(displayCode, {
+				lang,
+				theme: shikiTheme
+			}).then((html) => {
+				if (!cancelled) {
+					setHighlightedHtml(html);
+					setLoading(false);
+				}
+			}).catch(() => {
+				if (!cancelled) setLoading(false);
+			});
+		}).catch(() => {
+			if (!cancelled) {
+				setError(true);
+				setLoading(false);
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		owner,
+		repo,
+		ref,
+		path,
+		lang,
+		startLine,
+		endLine,
+		shikiTheme
+	]);
+	if (loading$1) return /* @__PURE__ */ jsx("div", {
+		className: `${loading} ${semanticClassNames.loading}`,
+		children: "Loading GitHub File Preview..."
+	});
+	if (error || content === null) return /* @__PURE__ */ jsx(FallbackLink, {
+		type: "github-file",
+		url: href
+	});
+	const lines = content.split("\n");
+	const end = endLine ?? lines.length;
+	const isLong = end - startLine > 20;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${githubFile} ${semanticClassNames.githubFile}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `${githubFileCode} ${semanticClassNames.githubFileCode} ${isLong ? `${githubFileCodeLong} ${semanticClassNames.githubFileCodeLong}` : ""}`.trim(),
+			children: highlightedHtml ? /* @__PURE__ */ jsx("div", {
+				className: `${shiki} ${semanticClassNames.shiki}`,
+				dangerouslySetInnerHTML: { __html: highlightedHtml },
+				style: { "--start-line": startLine }
+			}) : /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: lines.slice(startLine, end).map((line, i) => /* @__PURE__ */ jsxs("span", {
+				className: `${githubFileLine} ${semanticClassNames.githubFileLine}`,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: `${githubFileLineNum} ${semanticClassNames.githubFileLineNum}`,
+						children: startLine + i + 1
+					}),
+					line,
+					"\n"
+				]
+			}, i)) }) })
+		}), /* @__PURE__ */ jsxs("a", {
+			className: `${sourceLink} ${semanticClassNames.sourceLink}`,
+			href,
+			rel: "noreferrer",
+			target: "_blank",
+			children: [/* @__PURE__ */ jsx(GitHubSvg, {}), /* @__PURE__ */ jsx("span", { children: href })]
+		})]
+	});
+}
+function EmbedStaticRenderer({ type, url }) {
+	const customRenderers = useEmbedRenderers();
+	if (!url) return null;
+	if (type && customRenderers[type]) {
+		const Custom = customRenderers[type];
+		return /* @__PURE__ */ jsx(Custom, {
+			type,
+			url
+		});
+	}
+	let parsedUrl;
+	try {
+		parsedUrl = new URL(url);
+	} catch {
+		return /* @__PURE__ */ jsx(FallbackLink, {
+			type,
+			url
+		});
+	}
+	switch (type) {
+		case "tweet": return /* @__PURE__ */ jsx(TweetRenderer, { url });
+		case "youtube": {
+			const id = parsedUrl.searchParams.get("v");
+			if (!id) return /* @__PURE__ */ jsx(FallbackLink, {
+				type,
+				url
+			});
+			return /* @__PURE__ */ jsx(FixedRatioContainer, { children: /* @__PURE__ */ jsx("iframe", {
+				allowFullScreen: true,
+				allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+				className: `${iframe} ${semanticClassNames.iframe}`,
+				src: `https://www.youtube.com/embed/${id}`,
+				title: "YouTube video player"
+			}) });
+		}
+		case "bilibili": {
+			const id = parsedUrl.pathname.split("/")[2];
+			if (!id) return /* @__PURE__ */ jsx(FallbackLink, {
+				type,
+				url
+			});
+			return /* @__PURE__ */ jsx(FixedRatioContainer, { children: /* @__PURE__ */ jsx("iframe", {
+				allowFullScreen: true,
+				className: `${iframe} ${semanticClassNames.iframe}`,
+				scrolling: "no",
+				src: `//player.bilibili.com/player.html?bvid=${id}&autoplay=0`
+			}) });
+		}
+		case "codesandbox": {
+			const path = parsedUrl.pathname.slice(2);
+			return /* @__PURE__ */ jsx(FixedRatioContainer, { children: /* @__PURE__ */ jsx("iframe", {
+				className: `${iframe} ${semanticClassNames.iframe}`,
+				src: `https://codesandbox.io/embed/${path}?fontsize=14&hidenavigation=1&theme=dark${parsedUrl.search}`
+			}) });
+		}
+		case "github-gist": {
+			const [, owner, id] = parsedUrl.pathname.split("/");
+			if (!owner || !id) return /* @__PURE__ */ jsx(FallbackLink, {
+				type,
+				url
+			});
+			return /* @__PURE__ */ jsxs("div", {
+				className: `${gist} ${semanticClassNames.gist}`,
+				children: [/* @__PURE__ */ jsx("iframe", {
+					className: `${gistIframe} ${semanticClassNames.gistIframe}`,
+					src: `https://gist.github.com/${owner}/${id}.pibb`
+				}), /* @__PURE__ */ jsxs("a", {
+					className: `${sourceLink} ${semanticClassNames.sourceLink}`,
+					href: url,
+					rel: "noreferrer",
+					target: "_blank",
+					children: [/* @__PURE__ */ jsx(GitHubSvg, {}), /* @__PURE__ */ jsx("span", { children: url })]
+				})]
+			});
+		}
+		case "github-file": return /* @__PURE__ */ jsx(GithubFileEmbed, {
+			href: url,
+			url: parsedUrl
+		});
+		default: return /* @__PURE__ */ jsx(FallbackLink, {
+			type,
+			url
+		});
+	}
+}
+//#endregion
+//#region src/nodes/EmbedNode.ts
+var EmbedNode = class EmbedNode extends DecoratorNode {
+	static getType() {
+		return "embed";
+	}
+	static clone(node) {
+		return new EmbedNode(node.__url, node.__source, node.__key);
+	}
+	constructor(url, source, key) {
+		super(key);
+		_defineProperty(this, "__url", void 0);
+		_defineProperty(this, "__source", void 0);
+		this.__url = url;
+		this.__source = source;
+	}
+	createDOM(_config) {
+		const div = document.createElement("div");
+		div.className = `${wrapper} ${semanticClassNames$1.wrapper}`;
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createEmbedNode(serializedNode.url, serializedNode.source);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "embed",
+			url: this.__url,
+			source: this.__source,
+			version: 1
+		};
+	}
+	getUrl() {
+		return this.getLatest().__url;
+	}
+	setUrl(url) {
+		const writable = this.getWritable();
+		writable.__url = url;
+	}
+	getSource() {
+		return this.getLatest().__source;
+	}
+	setSource(source) {
+		const writable = this.getWritable();
+		writable.__source = source;
+	}
+	decorate(_editor, _config) {
+		return createElement(EmbedStaticRenderer, {
+			type: this.__source,
+			url: this.__url
+		});
+	}
+};
+function $createEmbedNode(url, source) {
+	return new EmbedNode(url, source);
+}
+function $isEmbedNode(node) {
+	return node instanceof EmbedNode;
+}
+//#endregion
+//#region src/url-matchers.ts
+var isTweetUrl = (url) => (url.hostname === "twitter.com" || url.hostname === "x.com") && url.pathname.startsWith("/");
+var isYoutubeUrl = (url) => url.hostname === "www.youtube.com" && url.pathname.startsWith("/watch");
+var isCodesandboxUrl = (url) => url.hostname === "codesandbox.io" && url.pathname.split("/").length === 3;
+var isBilibiliVideoUrl = (url) => url.hostname.includes("bilibili.com") && url.pathname.startsWith("/video/BV");
+var isGithubFilePreviewUrl = (url) => {
+	const [, , , type] = url.pathname.split("/");
+	return url.hostname === "github.com" && type === "blob";
+};
+var isGistUrl = (url) => url.hostname === "gist.github.com";
+function createSelfThinkingMatcher(hostnames) {
+	return (url) => hostnames.includes(url.hostname) && url.pathname.startsWith("/thinking/");
+}
+function matchEmbedUrl(url, selfThinkingMatcher) {
+	if (isTweetUrl(url)) return "tweet";
+	if (isYoutubeUrl(url)) return "youtube";
+	if (isCodesandboxUrl(url)) return "codesandbox";
+	if (isBilibiliVideoUrl(url)) return "bilibili";
+	if (isGithubFilePreviewUrl(url)) return "github-file";
+	if (isGistUrl(url)) return "github-gist";
+	if (selfThinkingMatcher?.(url)) return "thinking";
+	return null;
+}
+//#endregion
+//#region src/renderers/EmbedLinkRenderer.tsx
+var typeLabels = {
+	"tweet": "X / Twitter",
+	"youtube": "YouTube",
+	"codesandbox": "CodeSandbox",
+	"bilibili": "Bilibili",
+	"github-file": "GitHub File",
+	"github-gist": "GitHub Gist",
+	"thinking": "Thinking"
+};
+function EmbedLinkRenderer({ type, url, nodeKey }) {
+	const [editor] = useLexicalComposerContext();
+	const [editUrl, setEditUrl] = useState(url);
+	const inputRef = useRef(null);
+	useEffect(() => {
+		setEditUrl(url);
+	}, [url]);
+	useEffect(() => {
+		if (!url) inputRef.current?.focus();
+	}, [url]);
+	const commitUrl = useCallback(() => {
+		const trimmed = editUrl.trim();
+		if (!trimmed) return;
+		editor.update(() => {
+			const node = $getNodeByKey(nodeKey);
+			if (!node || !("setUrl" in node)) return;
+			const n = node;
+			if (n.getUrl?.() !== trimmed) n.setUrl(trimmed);
+			if (n.setSource) try {
+				n.setSource(matchEmbedUrl(new URL(trimmed)));
+			} catch {}
+		});
+	}, [
+		editor,
+		nodeKey,
+		editUrl
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			commitUrl();
+			inputRef.current?.blur();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			setEditUrl(url);
+			inputRef.current?.blur();
+		}
+	}, [commitUrl, url]);
+	const handleDelete = useCallback(() => {
+		editor.update(() => {
+			const node = $getNodeByKey(nodeKey);
+			if (node) node.remove();
+		});
+	}, [editor, nodeKey]);
+	const handleOpen = useCallback(() => {
+		if (url) window.open(url, "_blank", "noopener,noreferrer");
+	}, [url]);
+	const label = type ? typeLabels[type] : "Embed";
+	const cssModifier = type || "generic";
+	const embedModifierClass = embedType[cssModifier];
+	const semanticModifierClass = semanticEmbedModifierClass[cssModifier];
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${embed} ${embedModifierClass} ${semanticClassNames$1.embed} ${semanticModifierClass}`.trim(),
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: `${badge} ${semanticClassNames$1.badge}`,
+				children: [/* @__PURE__ */ jsx("span", { className: `${dot} ${semanticClassNames$1.dot}` }), label]
+			}),
+			/* @__PURE__ */ jsx("span", { className: `${divider} ${semanticClassNames$1.divider}` }),
+			/* @__PURE__ */ jsx("input", {
+				className: `${input} ${semanticClassNames$1.input}`,
+				placeholder: "https://...",
+				ref: inputRef,
+				type: "url",
+				value: editUrl,
+				onBlur: commitUrl,
+				onChange: (e) => setEditUrl(e.target.value),
+				onKeyDown: handleKeyDown
+			}),
+			/* @__PURE__ */ jsxs(ActionBar, { children: [/* @__PURE__ */ jsx(ActionButton, {
+				icon: true,
+				disabled: !url,
+				size: "md",
+				title: "Open in new tab",
+				onClick: handleOpen,
+				children: /* @__PURE__ */ jsx(ExternalLink, {})
+			}), /* @__PURE__ */ jsx(ActionButton, {
+				danger: true,
+				icon: true,
+				size: "md",
+				title: "Delete",
+				onClick: handleDelete,
+				children: /* @__PURE__ */ jsx(Trash2, {})
+			})] })
+		]
+	});
+}
+//#endregion
+export { isGistUrl as a, isYoutubeUrl as c, $isEmbedNode as d, EmbedNode as f, useEmbedRenderers as g, EmbedRendererProvider as h, isCodesandboxUrl as i, matchEmbedUrl as l, _defineProperty as m, createSelfThinkingMatcher as n, isGithubFilePreviewUrl as o, EmbedStaticRenderer as p, isBilibiliVideoUrl as r, isTweetUrl as s, EmbedLinkRenderer as t, $createEmbedNode as u };