@keboola/design 13.0.1 → 13.1.0

package/dist/markdown-editor.js

@@ -3,7 +3,7 @@ import { Tooltip } from "./utils-Bd28bWgm.js";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronDown, Code, Heading1, Heading2, Heading3, Italic, Link, List, ListOrdered, Quote, SquareCode, Strikethrough, Type, Underline } from "./icons-wcA70iQx.js";
 import { Button } from "./Button-B21oVcPU.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { DropdownMenu } from "./DropdownMenu-C5FLPkvR.js";
+import { DropdownMenu } from "./DropdownMenu-BJGLjpVc.js";
 import { Label } from "./internal/components/Label.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
 import { TextInput } from "./TextInput-BWYXbfs4.js";
@@ -14,27 +14,28 @@ import { Suspense, createContext, lazy, use, useCallback, useEffect, useRef, use
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { $createCodeNode, $isCodeNode, CodeNode } from "@lexical/code";
-import { $createLinkNode, $isLinkNode, LinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
-import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode, REMOVE_LIST_COMMAND } from "@lexical/list";
-import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, TRANSFORMERS } from "@lexical/markdown";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
 import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
 import { ClickableLinkPlugin } from "@lexical/react/LexicalClickableLinkPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
-import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { $createParagraphNode, $createTextNode, $getNodeByKey, $getSelection, $insertNodes, $isRangeSelection, $setSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, DROP_COMMAND, DecoratorNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, KEY_DOWN_COMMAND, PASTE_COMMAND } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getNearestBlockElementAncestorOrThrow } from "@lexical/utils";
+import { $addUpdateTag, $createParagraphNode, $createTextNode, $getNodeByKey, $getSelection, $insertNodes, $isParagraphNode, $isRangeSelection, $isTextNode, $parseSerializedNode, $setSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DROP_COMMAND, DecoratorNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, HISTORY_PUSH_TAG, KEY_DOWN_COMMAND, PASTE_COMMAND, PASTE_TAG, createEditor } from "lexical";
+import { $findMatchingParent, $getNearestBlockElementAncestorOrThrow } from "@lexical/utils";
+import { $createLinkNode, $isAutoLinkNode, $isLinkNode, AutoLinkNode, LinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode, REMOVE_LIST_COMMAND } from "@lexical/list";
+import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, TRANSFORMERS } from "@lexical/markdown";
 //#region src/blocks/MarkdownEditor/context.ts
 const ImageRendererContext = createContext(null);
 const ImageRendererProvider = ImageRendererContext;
@@ -140,73 +141,6 @@ const $isImageNode = (node) => {
 	return node instanceof ImageNode;
 };
 //#endregion
-//#region src/blocks/MarkdownEditor/nodes/MermaidNodeComponent.tsx
-const MermaidDiagram = lazy(() => import("./MermaidDiagram-B30x2yV7.js").then((n) => n.MermaidDiagram_exports).then((m) => ({ default: m.MermaidDiagram }), (error) => {
-	console.error("[MarkdownEditor] failed to load MermaidDiagram chunk", error);
-	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
-}));
-const MermaidNodeComponent = ({ code }) => {
-	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx("div", {
-			className: "tw:my-3 tw:overflow-hidden tw:rounded-card tw:border tw:border-neutral-150 tw:bg-neutral-50 tw:p-6",
-			children: /* @__PURE__ */ jsx(Skeleton, { className: "tw:h-40" })
-		}),
-		children: /* @__PURE__ */ jsx(MermaidDiagram, { code })
-	});
-};
-//#endregion
-//#region src/blocks/MarkdownEditor/nodes/MermaidNode.tsx
-var MermaidNode = class MermaidNode extends DecoratorNode {
-	__code;
-	static getType() {
-		return "mermaid";
-	}
-	static clone(node) {
-		return new MermaidNode(node.__code, node.__key);
-	}
-	constructor(code, key) {
-		super(key);
-		this.__code = code;
-	}
-	getCode() {
-		return this.__code;
-	}
-	setCode(code) {
-		const writable = this.getWritable();
-		writable.__code = code;
-	}
-	createDOM() {
-		const div = document.createElement("div");
-		div.setAttribute("data-lexical-mermaid", "true");
-		return div;
-	}
-	updateDOM() {
-		return false;
-	}
-	decorate() {
-		return /* @__PURE__ */ jsx(MermaidNodeComponent, { code: this.__code });
-	}
-	isInline() {
-		return false;
-	}
-	static importJSON(serializedNode) {
-		return $createMermaidNode(serializedNode.code);
-	}
-	exportJSON() {
-		return {
-			type: "mermaid",
-			version: 1,
-			code: this.__code
-		};
-	}
-};
-const $createMermaidNode = (code) => {
-	return new MermaidNode(code);
-};
-const $isMermaidNode = (node) => {
-	return node instanceof MermaidNode;
-};
-//#endregion
 //#region src/blocks/MarkdownEditor/plugins/ImagePastePlugin.tsx
 const ACCEPTED_IMAGE_TYPES = [
 	"image/png",
@@ -339,6 +273,186 @@ const KeyboardPlugin = ({ onSave, onCancel, singleLine, blurOnEscape, skipBlurSa
 	]);
 	return null;
 };
+//#endregion
+//#region src/blocks/MarkdownEditor/nodes/MermaidNodeComponent.tsx
+const MermaidDiagram = lazy(() => import("./MermaidDiagram-B30x2yV7.js").then((n) => n.MermaidDiagram_exports).then((m) => ({ default: m.MermaidDiagram }), (error) => {
+	console.error("[MarkdownEditor] failed to load MermaidDiagram chunk", error);
+	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
+}));
+const MermaidNodeComponent = ({ code }) => {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", {
+			className: "tw:my-3 tw:overflow-hidden tw:rounded-card tw:border tw:border-neutral-150 tw:bg-neutral-50 tw:p-6",
+			children: /* @__PURE__ */ jsx(Skeleton, { className: "tw:h-40" })
+		}),
+		children: /* @__PURE__ */ jsx(MermaidDiagram, { code })
+	});
+};
+//#endregion
+//#region src/blocks/MarkdownEditor/nodes/MermaidNode.tsx
+var MermaidNode = class MermaidNode extends DecoratorNode {
+	__code;
+	static getType() {
+		return "mermaid";
+	}
+	static clone(node) {
+		return new MermaidNode(node.__code, node.__key);
+	}
+	constructor(code, key) {
+		super(key);
+		this.__code = code;
+	}
+	getCode() {
+		return this.__code;
+	}
+	setCode(code) {
+		const writable = this.getWritable();
+		writable.__code = code;
+	}
+	createDOM() {
+		const div = document.createElement("div");
+		div.setAttribute("data-lexical-mermaid", "true");
+		return div;
+	}
+	updateDOM() {
+		return false;
+	}
+	decorate() {
+		return /* @__PURE__ */ jsx(MermaidNodeComponent, { code: this.__code });
+	}
+	isInline() {
+		return false;
+	}
+	static importJSON(serializedNode) {
+		return $createMermaidNode(serializedNode.code);
+	}
+	exportJSON() {
+		return {
+			type: "mermaid",
+			version: 1,
+			code: this.__code
+		};
+	}
+};
+const $createMermaidNode = (code) => {
+	return new MermaidNode(code);
+};
+const $isMermaidNode = (node) => {
+	return node instanceof MermaidNode;
+};
+//#endregion
+//#region src/blocks/MarkdownEditor/editorNodes.ts
+/**
+* Every node the editor registers, shared by the composer and the paste parser.
+*
+* - `AutoLinkNode` is registered always; only `autoLink` mounts the plugin that creates one.
+*/
+const EDITOR_NODES = [
+	ImageNode,
+	MermaidNode,
+	HeadingNode,
+	QuoteNode,
+	ListNode,
+	ListItemNode,
+	CodeNode,
+	LinkNode,
+	AutoLinkNode,
+	HorizontalRuleNode
+];
+//#endregion
+//#region src/blocks/MarkdownEditor/bareUrls.ts
+const DOMAIN_CHAR = String.raw`(?:[^\s\p{P}\p{S}]|-)`;
+const DOMAIN = String.raw`${DOMAIN_CHAR}+(?:[._]${DOMAIN_CHAR}+)*`;
+const URL_START = String.raw`(?:[hH][tT][tT][pP][sS]?:\/\/|[wW][wW][wW]\.)`;
+const URL_BODY = String.raw`${URL_START}${DOMAIN}[^\s<]*`;
+const EMAIL_BODY = String.raw`[\w.+-]+@[\w-]+(?:\.[\w-]+)+`;
+const CANDIDATE = new RegExp(String.raw`(?<![a-zA-Z])(?=[hH])${URL_BODY}|(?<=^|[\s(*_[\]~])(?=[wW])${URL_BODY}|(?<![\w.+/-])${EMAIL_BODY}`, "gu");
+const URL_DOMAIN = new RegExp(String.raw`^${URL_START}(${DOMAIN})`, "u");
+const TRAILING_PUNCTUATION = /[!"'*,.:;?_~\]]$/;
+const TRAILING_ENTITY = /&[a-zA-Z][a-zA-Z0-9]*;$/;
+const count = (text, char) => text.split(char).length - 1;
+const trimTrailing = (candidate) => {
+	let text = candidate;
+	for (;;) {
+		const entity = TRAILING_ENTITY.exec(text);
+		if (entity) text = text.slice(0, -entity[0].length);
+		else if (TRAILING_PUNCTUATION.test(text)) text = text.slice(0, -1);
+		else if (text.endsWith(")") && count(text, ")") > count(text, "(")) text = text.slice(0, -1);
+		else return text;
+	}
+};
+const hasLinkableDomain = (url) => {
+	const domain = URL_DOMAIN.exec(url)?.[1];
+	return domain !== void 0 && !domain.split(".").slice(-2).some((part) => part.includes("_"));
+};
+/**
+* The bare URLs and email addresses in `text`, as GFM's autolink extension finds them.
+*
+* - `http://`, `https://` or `www.` and a domain, then anything up to whitespace or `<`.
+* - Trailing `!"'*,.:;?_~]`, an unbalanced `)` and an entity like `&amp;` stay outside.
+* - `http(s)://` starts after anything but a letter, `www.` only after whitespace or `(*_[]~`.
+* - An email ending in `-` or `_` is not one.
+*/
+const findBareUrls = (text, limit = Infinity) => {
+	const found = [];
+	for (const match of text.matchAll(CANDIDATE)) {
+		const source = match[0];
+		if (/^(?:https?:\/\/|www\.)/i.test(source)) {
+			const trimmed = trimTrailing(source);
+			if (!hasLinkableDomain(trimmed)) continue;
+			const url = /^www\./i.test(trimmed) ? `https://${trimmed}` : trimmed;
+			found.push({
+				index: match.index,
+				text: trimmed,
+				url
+			});
+		} else if (!/[-_]$/.test(source)) found.push({
+			index: match.index,
+			text: source,
+			url: `mailto:${source}`
+		});
+		if (found.length >= limit) break;
+	}
+	return found;
+};
+/**
+* Every stretch of `text` GFM starts scanning as a URL or email, linked in the end or not.
+*
+* - Export writes these raw: GFM scans the run before trimming its end, and an escape moves where
+*   it ends a domain, so `https://a\_b.c\_d` is linked with its backslashes, `https://a_b.c_d` is not.
+*/
+const findUrlRuns = (text) => Array.from(text.matchAll(CANDIDATE), (match) => ({
+	index: match.index,
+	source: match[0]
+}));
+/**
+* A `RegExp` whose `String#match` is the first URL `findBareUrls` finds, for Lexical's `importRegExp`.
+*
+* - Lexical's markdown import reads `importRegExp` only through `text.match(importRegExp)`.
+* - So a candidate GFM rejects (`https://a_b.c_d`) never hides a valid URL after it.
+*/
+var FirstBareUrl = class extends RegExp {
+	[Symbol.match](text) {
+		const [url] = findBareUrls(text, 1);
+		if (!url) return null;
+		const match = [url.text];
+		return Object.assign(match, {
+			index: url.index,
+			input: text
+		});
+	}
+};
+const FIRST_BARE_URL = new FirstBareUrl(CANDIDATE.source, "u");
+/** Lexical `AutoLinkPlugin` matcher: the first bare URL in the text, as `findBareUrls` reads it. */
+const matchBareUrl = (text) => {
+	const [first] = findBareUrls(text, 1);
+	return first ? {
+		index: first.index,
+		length: first.text.length,
+		text: first.text,
+		url: first.url
+	} : null;
+};
 /**
 * Our transformers plus Lexical's built-ins; order matters.
 *
@@ -409,6 +523,44 @@ const CUSTOM_TRANSFORMERS = [
 	},
 	...TRANSFORMERS
 ];
+const urlPlaceholder = (index) => `\uE000${index}\uE001`;
+const URL_PLACEHOLDER = /\uE000(\d+)\uE001/g;
+/** `CUSTOM_TRANSFORMERS` plus bare URLs, for `autoLink`. */
+const AUTO_LINK_TRANSFORMERS = [{
+	dependencies: [],
+	importRegExp: FIRST_BARE_URL,
+	replace: (node) => {
+		const literal = $createTextNode(unescapeMarkdownText(node.getTextContent()));
+		literal.setFormat(node.getFormat());
+		node.replace(literal);
+	},
+	export: (node, _exportChildren, exportFormat) => {
+		if (!$isTextNode(node) || node.hasFormat("code")) return null;
+		const parent = node.getParent();
+		if ($isLinkNode(parent) && !$isAutoLinkNode(parent)) return null;
+		const text = node.getTextContent();
+		if (text.includes("")) return null;
+		const lead = $isAutoLinkNode(node.getPreviousSibling()) ? /^[^\s<]+/.exec(text)?.[0] ?? "" : "";
+		const urls = $isAutoLinkNode(parent) ? [{
+			index: 0,
+			source: text
+		}] : [...lead ? [{
+			index: 0,
+			source: lead
+		}] : [], ...findUrlRuns(text).filter((url) => url.index >= lead.length)];
+		if (urls.length === 0) return null;
+		let masked = "";
+		let end = 0;
+		urls.forEach((url, i) => {
+			masked += text.slice(end, url.index) + urlPlaceholder(i);
+			end = url.index + url.source.length;
+		});
+		masked += text.slice(end);
+		return exportFormat(node, masked).replace(URL_PLACEHOLDER, (_, i) => urls[Number(i)]?.source ?? "");
+	},
+	regExp: /(?!)/,
+	type: "text-match"
+}, ...CUSTOM_TRANSFORMERS];
 /**
 * No transformers: `singleLine` mode edits plain-text entity names, not markdown.
 *
@@ -456,6 +608,10 @@ const preprocessMarkdown = (markdown) => {
 	if (tableLines.length > 0) flushTable();
 	return result.join("\n");
 };
+/** Replaces the root with `markdown`: the one import a load, a `value` change and a paste share. */
+const $importMarkdown = (markdown, transformers) => {
+	$convertFromMarkdownString(preprocessMarkdown(markdown), transformers);
+};
 /** Unwrap code-fenced tables back to raw GFM table markdown. */
 const postprocessMarkdown = (markdown) => {
 	const regex = new RegExp(`\`\`\`${TABLE_FENCE_LANG}\\n([\\s\\S]*?)\\n\`\`\``, "g");
@@ -464,6 +620,81 @@ const postprocessMarkdown = (markdown) => {
 /** Reverses Lexical's export escaping of `* _ ` ~ \`, for `singleLine` plain-text names. */
 const unescapeMarkdownText = (markdown) => markdown.replace(/\\([*_`~\\])/g, "$1");
 //#endregion
+//#region src/blocks/MarkdownEditor/plugins/MarkdownPastePlugin.tsx
+/**
+* `markdown` as the top-level nodes the editor's own import makes of it.
+*
+* - Runs in a scratch editor: `$importMarkdown` replaces the root it imports into,
+*   and only nodes attached to a root get their lines merged into one paragraph.
+*/
+const parseMarkdown = (markdown, transformers) => {
+	const scratch = createEditor({
+		namespace: "MarkdownEditorPaste",
+		nodes: EDITOR_NODES,
+		onError: (error) => {
+			throw error;
+		}
+	});
+	scratch.update(() => {
+		$importMarkdown(markdown, transformers);
+	}, { discrete: true });
+	return scratch.getEditorState().toJSON().root.children;
+};
+/**
+* Inserts parsed blocks at the selection, keeping a first or last block that is not a paragraph whole.
+*
+* - `insertNodes` merges the first block into a non-empty line and the rest of the line into the
+*   last block, which would flatten a fence pasted after `Logs:` into plain text.
+* - An empty paragraph first is never merged, so the block after it goes in whole; it is then removed.
+* - An empty paragraph last takes the rest of the line, and is removed when there was none.
+*/
+const $insertBlocks = (selection, nodes) => {
+	const first = nodes[0];
+	const last = nodes.at(-1);
+	if (!first || !last) return;
+	const head = $isParagraphNode(first) ? null : $createParagraphNode();
+	const tail = $isParagraphNode(last) ? null : $createParagraphNode();
+	selection.insertNodes([
+		head,
+		...nodes,
+		tail
+	].filter((node) => node !== null));
+	head?.remove();
+	if (!tail) return;
+	if (tail.isEmpty()) {
+		tail.remove();
+		last.selectEnd();
+	} else tail.selectStart();
+};
+/**
+* Parses a plain-text paste as markdown and inserts the result at the selection.
+*
+* - Only for a clipboard with `text/plain` and neither `text/html` nor files; those keep
+*   Lexical's own paste, and files stay for the image uploader or the consumer.
+* - Inside a code block the text goes in literally, through the same fallback.
+* - One undo step: the update is tagged `history-push`.
+*/
+const MarkdownPastePlugin = ({ transformers }) => {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => {
+		return editor.registerCommand(PASTE_COMMAND, (event) => {
+			const data = "clipboardData" in event ? event.clipboardData : null;
+			if (!data || data.files.length > 0 || data.types.includes("text/html")) return false;
+			const text = data.getData("text/plain").replace(/\r\n?/g, "\n");
+			if (!text) return false;
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection)) return false;
+			if ([selection.anchor, selection.focus].some((point) => $findMatchingParent(point.getNode(), $isCodeNode))) return false;
+			event.preventDefault();
+			$addUpdateTag(PASTE_TAG);
+			$addUpdateTag(HISTORY_PUSH_TAG);
+			$insertBlocks(selection, parseMarkdown(text, transformers).map($parseSerializedNode));
+			return true;
+		}, COMMAND_PRIORITY_LOW);
+	}, [editor, transformers]);
+	return null;
+};
+//#endregion
 //#region src/blocks/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx
 const IMPORT_TAG = "markdown-import";
 const MarkdownSyncPlugin = ({ value, editable, onChange, transformers = CUSTOM_TRANSFORMERS, singleLine = false }) => {
@@ -481,7 +712,7 @@ const MarkdownSyncPlugin = ({ value, editable, onChange, transformers = CUSTOM_T
 		if (value === lastExportedRef.current) return;
 		lastExportedRef.current = value;
 		editor.update(() => {
-			$convertFromMarkdownString(preprocessMarkdown(value), transformersRef.current);
+			$importMarkdown(value, transformersRef.current);
 		}, { tag: IMPORT_TAG });
 	}, [editor, value]);
 	useEffect(() => {
@@ -822,7 +1053,8 @@ const ELEMENT_FORMAT_TYPES = [
 ];
 const isElementFormatType = (value) => ELEMENT_FORMAT_TYPES.includes(value);
 const toElementFormatType = (value) => isElementFormatType(value) ? value : "left";
-const ToolbarPlugin = () => {
+const TOOLBAR_BASE_CLASS = "tw:flex tw:items-center tw:gap-0.5 tw:rounded-lg tw:border tw:border-border tw:px-1.5 tw:py-1";
+const ToolbarPlugin = ({ mode = "floating" }) => {
 	const [editor] = useLexicalComposerContext();
 	const [isBold, setIsBold] = useState(false);
 	const [isItalic, setIsItalic] = useState(false);
@@ -837,6 +1069,7 @@ const ToolbarPlugin = () => {
 	const toolbarRef = useRef(null);
 	const isMouseDownRef = useRef(false);
 	const hasSelectionRef = useRef(false);
+	const isFloating = mode === "floating";
 	const updatePosition = useCallback(() => {
 		const nativeSelection = window.getSelection();
 		if (!nativeSelection || nativeSelection.rangeCount === 0) return;
@@ -850,6 +1083,7 @@ const ToolbarPlugin = () => {
 		}
 	}, []);
 	useEffect(() => {
+		if (!isFloating) return;
 		const handleMouseDown = () => {
 			isMouseDownRef.current = true;
 		};
@@ -863,7 +1097,7 @@ const ToolbarPlugin = () => {
 			document.removeEventListener("mousedown", handleMouseDown);
 			document.removeEventListener("mouseup", handleMouseUp);
 		};
-	}, []);
+	}, [isFloating]);
 	const updateToolbar = useCallback(() => {
 		const selection = $getSelection();
 		if (!$isRangeSelection(selection)) {
@@ -904,116 +1138,124 @@ const ToolbarPlugin = () => {
 			unregisterUpdate();
 		};
 	}, [editor, updateToolbar]);
-	if (!isVisible || !position) return null;
-	return createPortal(/* @__PURE__ */ jsxs("div", {
+	if (isFloating && (!isVisible || !position)) return null;
+	const buttons = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(BlockTypeDropdown, {
+			editor,
+			blockType
+		}),
+		/* @__PURE__ */ jsx(ToolbarDivider, {}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: isBold,
+			onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"),
+			tooltip: "Bold (Ctrl+B)",
+			children: /* @__PURE__ */ jsx(Bold, { className: "tw:size-4" })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: isItalic,
+			onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"),
+			tooltip: "Italic (Ctrl+I)",
+			children: /* @__PURE__ */ jsx(Italic, { className: "tw:size-4" })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: isUnderline,
+			onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"),
+			tooltip: "Underline (Ctrl+U)",
+			children: /* @__PURE__ */ jsx(Underline, { className: "tw:size-4" })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: isStrikethrough,
+			onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"),
+			tooltip: "Strikethrough",
+			children: /* @__PURE__ */ jsx(Strikethrough, { className: "tw:size-4" })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: isCode,
+			onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code"),
+			tooltip: "Inline Code",
+			children: /* @__PURE__ */ jsx(Code, { className: "tw:size-4" })
+		}),
+		/* @__PURE__ */ jsx(ToolbarDivider, {}),
+		/* @__PURE__ */ jsx(LinkPanel, {
+			editor,
+			isLink
+		}),
+		/* @__PURE__ */ jsx(ToolbarDivider, {}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: blockType === "bullet",
+			onClick: () => {
+				if (blockType === "bullet") editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+				else editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+			},
+			tooltip: "Bullet List",
+			children: /* @__PURE__ */ jsx(List, { className: "tw:size-4" })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: blockType === "number",
+			onClick: () => {
+				if (blockType === "number") editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+				else editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+			},
+			tooltip: "Numbered List",
+			children: /* @__PURE__ */ jsx(ListOrdered, { className: "tw:size-4" })
+		}),
+		/* @__PURE__ */ jsx(ToolbarDivider, {}),
+		/* @__PURE__ */ jsx(AlignmentDropdown, {
+			editor,
+			alignment
+		}),
+		/* @__PURE__ */ jsx(ToolbarDivider, {}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: blockType === "quote",
+			onClick: () => {
+				editor.update(() => {
+					const selection = $getSelection();
+					if (!$isRangeSelection(selection)) return;
+					const anchorNode = selection.anchor.getNode();
+					const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
+					const newNode = blockType === "quote" ? $createParagraphNode() : $createQuoteNode();
+					element.getChildren().forEach((child) => newNode.append(child));
+					element.replace(newNode);
+				});
+			},
+			tooltip: "Quote",
+			children: /* @__PURE__ */ jsx(Quote, { className: "tw:size-4" })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: blockType === "code",
+			onClick: () => {
+				editor.update(() => {
+					const selection = $getSelection();
+					if (!$isRangeSelection(selection)) return;
+					const anchorNode = selection.anchor.getNode();
+					const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
+					const newNode = blockType === "code" ? $createParagraphNode() : $createCodeNode();
+					element.getChildren().forEach((child) => newNode.append(child));
+					element.replace(newNode);
+				});
+			},
+			tooltip: "Code Block",
+			children: /* @__PURE__ */ jsx(SquareCode, { className: "tw:size-4" })
+		})
+	] });
+	if (!isFloating) return /* @__PURE__ */ jsx("div", {
+		role: "toolbar",
+		"aria-label": "Formatting options",
+		onMouseDown: (event) => event.preventDefault(),
+		className: cn(TOOLBAR_BASE_CLASS, "tw:mb-1 tw:flex-wrap tw:bg-background"),
+		children: buttons
+	});
+	return createPortal(/* @__PURE__ */ jsx("div", {
 		ref: toolbarRef,
 		role: "toolbar",
 		"aria-label": "Formatting options",
-		onMouseDown: (e) => e.preventDefault(),
+		onMouseDown: (event) => event.preventDefault(),
 		style: {
-			top: position.top,
-			left: position.left
+			top: position?.top,
+			left: position?.left
 		},
-		className: "tw:absolute tw:z-[1060] tw:flex tw:-translate-y-full tw:items-center tw:gap-0.5 tw:rounded-lg tw:border tw:border-border tw:bg-popover tw:px-1.5 tw:py-1 tw:text-popover-foreground tw:shadow-lg",
-		children: [
-			/* @__PURE__ */ jsx(BlockTypeDropdown, {
-				editor,
-				blockType
-			}),
-			/* @__PURE__ */ jsx(ToolbarDivider, {}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: isBold,
-				onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"),
-				tooltip: "Bold (Ctrl+B)",
-				children: /* @__PURE__ */ jsx(Bold, { className: "tw:size-4" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: isItalic,
-				onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"),
-				tooltip: "Italic (Ctrl+I)",
-				children: /* @__PURE__ */ jsx(Italic, { className: "tw:size-4" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: isUnderline,
-				onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"),
-				tooltip: "Underline (Ctrl+U)",
-				children: /* @__PURE__ */ jsx(Underline, { className: "tw:size-4" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: isStrikethrough,
-				onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"),
-				tooltip: "Strikethrough",
-				children: /* @__PURE__ */ jsx(Strikethrough, { className: "tw:size-4" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: isCode,
-				onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code"),
-				tooltip: "Inline Code",
-				children: /* @__PURE__ */ jsx(Code, { className: "tw:size-4" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarDivider, {}),
-			/* @__PURE__ */ jsx(LinkPanel, {
-				editor,
-				isLink
-			}),
-			/* @__PURE__ */ jsx(ToolbarDivider, {}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: blockType === "bullet",
-				onClick: () => {
-					if (blockType === "bullet") editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
-					else editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
-				},
-				tooltip: "Bullet List",
-				children: /* @__PURE__ */ jsx(List, { className: "tw:size-4" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: blockType === "number",
-				onClick: () => {
-					if (blockType === "number") editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
-					else editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
-				},
-				tooltip: "Numbered List",
-				children: /* @__PURE__ */ jsx(ListOrdered, { className: "tw:size-4" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarDivider, {}),
-			/* @__PURE__ */ jsx(AlignmentDropdown, {
-				editor,
-				alignment
-			}),
-			/* @__PURE__ */ jsx(ToolbarDivider, {}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: blockType === "quote",
-				onClick: () => {
-					editor.update(() => {
-						const selection = $getSelection();
-						if (!$isRangeSelection(selection)) return;
-						const anchorNode = selection.anchor.getNode();
-						const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
-						const newNode = blockType === "quote" ? $createParagraphNode() : $createQuoteNode();
-						element.getChildren().forEach((child) => newNode.append(child));
-						element.replace(newNode);
-					});
-				},
-				tooltip: "Quote",
-				children: /* @__PURE__ */ jsx(Quote, { className: "tw:size-4" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: blockType === "code",
-				onClick: () => {
-					editor.update(() => {
-						const selection = $getSelection();
-						if (!$isRangeSelection(selection)) return;
-						const anchorNode = selection.anchor.getNode();
-						const element = $getNearestBlockElementAncestorOrThrow(anchorNode);
-						const newNode = blockType === "code" ? $createParagraphNode() : $createCodeNode();
-						element.getChildren().forEach((child) => newNode.append(child));
-						element.replace(newNode);
-					});
-				},
-				tooltip: "Code Block",
-				children: /* @__PURE__ */ jsx(SquareCode, { className: "tw:size-4" })
-			})
-		]
+		className: cn(TOOLBAR_BASE_CLASS, "tw:absolute tw:z-[1060] tw:-translate-y-full tw:bg-popover tw:text-popover-foreground tw:shadow-lg"),
+		children: buttons
 	}), document.body);
 };
 //#endregion
@@ -1057,21 +1299,15 @@ const editorTheme = {
 };
 //#endregion
 //#region src/blocks/MarkdownEditor/MarkdownEditor.tsx
-const EDITOR_NODES = [
-	ImageNode,
-	MermaidNode,
-	HeadingNode,
-	QuoteNode,
-	ListNode,
-	ListItemNode,
-	CodeNode,
-	LinkNode,
-	HorizontalRuleNode
-];
-const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFocus = false, disabled = false, onSave, onCancel, onImageUpload, className, imageRenderer, showToolbar = false, compact = false, saveOnBlur = false, singleLine = false, clampDisplay = false, minRows }) => {
+const AUTO_LINK_MATCHERS = [matchBareUrl];
+const AUTO_LINK_EXCLUDED_PARENTS = [$isCodeNode];
+const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFocus = false, disabled = false, onSave, onCancel, onImageUpload, className, imageRenderer, showToolbar = false, toolbarMode = "floating", compact = false, saveOnBlur = false, singleLine = false, clampDisplay = false, minRows, autoLink = false, pasteMarkdown = false }) => {
 	const editable = !readOnly && !disabled;
-	const transformers = singleLine ? SINGLE_LINE_TRANSFORMERS : CUSTOM_TRANSFORMERS;
+	const linkify = autoLink && !singleLine;
+	const markdownPaste = pasteMarkdown && !singleLine;
+	const transformers = singleLine ? SINGLE_LINE_TRANSFORMERS : linkify ? AUTO_LINK_TRANSFORMERS : CUSTOM_TRANSFORMERS;
 	const useDefaultMinHeight = !compact && minRows === void 0;
+	const contentPadding = compact ? "tw:px-1.5 tw:py-0.5" : "tw:p-2";
 	const customMinHeight = !compact && minRows !== void 0 ? { minHeight: `${minRows * 1.75}em` } : void 0;
 	const [initialConfig] = useState(() => ({
 		namespace: "MarkdownEditor",
@@ -1082,7 +1318,7 @@ const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFo
 		},
 		editable,
 		editorState: () => {
-			$convertFromMarkdownString(preprocessMarkdown(value), transformers);
+			$importMarkdown(value, transformers);
 		}
 	}));
 	const skipBlurSaveRef = useRef(false);
@@ -1101,16 +1337,17 @@ const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFo
 				className: cn(!compact && "tw:prose", compact && "tw:[&_p]:m-0 tw:[&_p+p]:mt-2", clampDisplay && "tw:[&:not(:focus-within)]:line-clamp-2", className),
 				onBlur: handleBlur,
 				children: [
-					showToolbar && editable && /* @__PURE__ */ jsx(ToolbarPlugin, {}),
+					showToolbar && editable && /* @__PURE__ */ jsx(ToolbarPlugin, { mode: toolbarMode }),
 					/* @__PURE__ */ jsx("div", {
-						className: cn("tw:relative tw:rounded-md tw:transition-colors", compact ? "tw:px-1.5 tw:py-0.5 tw:-mx-1.5 tw:-my-0.5" : "tw:p-2", editable && "tw:cursor-text tw:hover:bg-muted tw:focus-within:ring-2 tw:focus-within:ring-ring/40"),
+						className: cn("tw:relative tw:rounded-md tw:transition-colors", contentPadding, compact && "tw:-mx-1.5 tw:-my-0.5", editable && "tw:cursor-text tw:hover:bg-muted tw:focus-within:ring-2 tw:focus-within:ring-ring/40"),
 						children: /* @__PURE__ */ jsx(RichTextPlugin, {
 							contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
-								className: cn("tw:outline-hidden", useDefaultMinHeight && "tw:min-h-[100px]"),
+								className: cn("tw:outline-hidden", !compact && "tw:[&>*:first-child]:mt-0 tw:[&>*:last-child]:mb-0", useDefaultMinHeight && "tw:min-h-[100px]"),
 								style: customMinHeight,
 								"aria-placeholder": placeholder ?? "",
 								placeholder: placeholder ? /* @__PURE__ */ jsx("div", {
-									className: cn("tw:pointer-events-none tw:absolute tw:select-none tw:text-muted-foreground", compact ? "tw:left-1.5 tw:top-0.5" : "tw:left-2 tw:top-[calc(0.5rem+0.35em)]"),
+									"data-testid": "markdown-editor-placeholder",
+									className: cn("tw:pointer-events-none tw:absolute tw:inset-0 tw:select-none tw:text-muted-foreground", contentPadding),
 									children: placeholder
 								}) : /* @__PURE__ */ jsx("div", {})
 							}),
@@ -1133,6 +1370,11 @@ const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFo
 						singleLine
 					}),
 					/* @__PURE__ */ jsx(ImagePastePlugin, { onImageUpload }),
+					linkify && /* @__PURE__ */ jsx(AutoLinkPlugin, {
+						matchers: AUTO_LINK_MATCHERS,
+						excludeParents: AUTO_LINK_EXCLUDED_PARENTS
+					}),
+					markdownPaste && /* @__PURE__ */ jsx(MarkdownPastePlugin, { transformers }),
 					/* @__PURE__ */ jsx(KeyboardPlugin, {
 						onSave,
 						onCancel,