@haklex/rich-editor 0.1.1 → 0.3.0

package/dist/AlertQuoteEditNode-C55sxsR3.js

@@ -0,0 +1,267 @@
+import { A as AlertQuoteNode, D as $isAlertQuoteNode, E as FootnoteNode, N as AlertRenderer, _ as KaTeXInlineNode, c as SpoilerNode, i as TagNode, j as _defineProperty, m as MentionNode, t as editorTheme } from "./theme-B5B2EOWM.js";
+import { l as RendererWrapper } from "./KaTeXRenderer-CQQT3BMw.js";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { createElement, useCallback, useEffect } from "react";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { $createParagraphNode, $getNodeByKey, $getRoot, $getSelection, $insertNodes, $isParagraphNode, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ENTER_COMMAND, createEditor } from "lexical";
+import { HorizontalRuleNode } from "@lexical/extension";
+import { CodeNode } from "@lexical/code-core";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Info, Lightbulb, TriangleAlert } from "lucide-react";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+//#region src/components/decorators/AlertEditDecorator.tsx
+function ExitBlockPlugin({ parentEditor, nodeKey }) {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => {
+		const focusParent = () => {
+			parentEditor.focus(() => {
+				parentEditor.update(() => {
+					const alertNode = $getNodeByKey(nodeKey);
+					if (alertNode) {
+						const next = alertNode.getNextSibling();
+						if (next) next.selectStart();
+					}
+				});
+			});
+		};
+		const exitAlert = (removeEmpty) => {
+			const root = $getRoot();
+			const lastChild = root.getLastChild();
+			const shouldRemoveAlert = removeEmpty && root.getChildrenSize() <= 1;
+			if (removeEmpty && lastChild) lastChild.remove();
+			if (shouldRemoveAlert) parentEditor.update(() => {
+				const alertNode = $getNodeByKey(nodeKey);
+				if (alertNode) {
+					const paragraph = $createParagraphNode();
+					alertNode.insertAfter(paragraph);
+					alertNode.remove();
+					paragraph.selectStart();
+				}
+			}, { onUpdate: focusParent });
+			else parentEditor.update(() => {
+				const alertNode = $getNodeByKey(nodeKey);
+				if (alertNode) {
+					let next = alertNode.getNextSibling();
+					if (!next || !$isParagraphNode(next)) {
+						next = $createParagraphNode();
+						alertNode.insertAfter(next);
+					}
+					next.selectStart();
+				}
+			}, { onUpdate: focusParent });
+		};
+		const isAtLastEmptyParagraph = () => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
+			const topLevelElement = selection.anchor.getNode().getTopLevelElement();
+			return topLevelElement && $isParagraphNode(topLevelElement) && topLevelElement.getTextContent() === "" && topLevelElement.getNextSibling() === null;
+		};
+		const unregisterEnter = editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+			if (event?.metaKey || event?.ctrlKey) {
+				event.preventDefault();
+				exitAlert(false);
+				return true;
+			}
+			if (!isAtLastEmptyParagraph()) return false;
+			event?.preventDefault();
+			exitAlert(true);
+			return true;
+		}, COMMAND_PRIORITY_CRITICAL);
+		const unregisterArrowDown = editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (event) => {
+			if (!isAtLastEmptyParagraph()) return false;
+			event?.preventDefault();
+			exitAlert(false);
+			return true;
+		}, COMMAND_PRIORITY_HIGH);
+		return () => {
+			unregisterEnter();
+			unregisterArrowDown();
+		};
+	}, [
+		editor,
+		parentEditor,
+		nodeKey
+	]);
+	return null;
+}
+function AlertEditDecorator({ nodeKey, alertType, contentEditor }) {
+	const [editor] = useLexicalComposerContext();
+	const editable = editor.isEditable();
+	const handleTypeChange = useCallback((newType) => {
+		editor.update(() => {
+			const node = $getNodeByKey(nodeKey);
+			if ($isAlertQuoteNode(node)) node.setAlertType(newType);
+		});
+	}, [editor, nodeKey]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RendererWrapper, {
+		defaultRenderer: AlertRenderer,
+		rendererKey: "Alert",
+		props: {
+			type: alertType,
+			editable,
+			onTypeChange: editable ? handleTypeChange : void 0
+		}
+	}), /* @__PURE__ */ jsx("div", {
+		className: "rich-alert-content",
+		children: /* @__PURE__ */ jsxs(LexicalNestedComposer, {
+			initialEditor: contentEditor,
+			children: [
+				/* @__PURE__ */ jsx(RichTextPlugin, {
+					ErrorBoundary: LexicalErrorBoundary,
+					contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
+						"aria-placeholder": "",
+						className: "rich-alert-content-editable",
+						placeholder: /* @__PURE__ */ jsx("span", { style: { display: "none" } }),
+						style: { outline: "none" }
+					})
+				}),
+				/* @__PURE__ */ jsx(ListPlugin, {}),
+				/* @__PURE__ */ jsx(LinkPlugin, {}),
+				/* @__PURE__ */ jsx(ExitBlockPlugin, {
+					nodeKey,
+					parentEditor: editor
+				})
+			]
+		})
+	})] });
+}
+//#endregion
+//#region src/nodes/shared.ts
+var NESTED_EDITOR_NODES = [
+	HeadingNode,
+	QuoteNode,
+	ListNode,
+	ListItemNode,
+	LinkNode,
+	AutoLinkNode,
+	HorizontalRuleNode,
+	CodeNode,
+	TableNode,
+	TableCellNode,
+	TableRowNode,
+	SpoilerNode,
+	MentionNode,
+	FootnoteNode,
+	KaTeXInlineNode,
+	TagNode
+];
+//#endregion
+//#region src/nodes/AlertQuoteEditNode.ts
+function createContentEditor() {
+	return createEditor({
+		namespace: "AlertContent",
+		nodes: NESTED_EDITOR_NODES,
+		theme: editorTheme,
+		onError: (error) => {
+			console.error("[AlertContent]", error);
+		}
+	});
+}
+var AlertQuoteEditNode = class AlertQuoteEditNode extends AlertQuoteNode {
+	static clone(node) {
+		const cloned = new AlertQuoteEditNode(node.__alertType, node.__contentState, node.__key);
+		cloned.__contentEditor = node.__contentEditor;
+		return cloned;
+	}
+	constructor(alertType, contentState, key) {
+		super(alertType, contentState, key);
+		_defineProperty(this, "__contentEditor", void 0);
+		this.__contentEditor = createContentEditor();
+		if (contentState) {
+			const editorState = this.__contentEditor.parseEditorState(contentState);
+			this.__contentEditor.setEditorState(editorState);
+		}
+	}
+	getContentEditor() {
+		return this.__contentEditor;
+	}
+	static importJSON(serializedNode) {
+		return new AlertQuoteEditNode(serializedNode.alertType, serializedNode.content);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "alert-quote",
+			alertType: this.__alertType,
+			content: this.__contentEditor.getEditorState().toJSON(),
+			version: 1
+		};
+	}
+	decorate(_editor, _config) {
+		return createElement(AlertEditDecorator, {
+			nodeKey: this.__key,
+			alertType: this.__alertType,
+			contentEditor: this.__contentEditor
+		});
+	}
+};
+_defineProperty(AlertQuoteEditNode, "commandItems", [
+	{
+		title: "Callout",
+		icon: createElement(Info, { size: 20 }),
+		description: "Info callout block",
+		keywords: [
+			"alert",
+			"note",
+			"info",
+			"callout"
+		],
+		section: "ADVANCED",
+		placement: ["slash", "toolbar"],
+		group: "insert",
+		onSelect: (editor) => {
+			editor.update(() => {
+				$insertNodes([$createAlertQuoteEditNode("note")]);
+			});
+		}
+	},
+	{
+		title: "Tip",
+		icon: createElement(Lightbulb, { size: 20 }),
+		description: "Highlight a useful tip",
+		keywords: [
+			"alert",
+			"tip",
+			"hint"
+		],
+		section: "ADVANCED",
+		placement: ["slash", "toolbar"],
+		group: "insert",
+		onSelect: (editor) => {
+			editor.update(() => {
+				$insertNodes([$createAlertQuoteEditNode("tip")]);
+			});
+		}
+	},
+	{
+		title: "Warning",
+		icon: createElement(TriangleAlert, { size: 20 }),
+		description: "Warn about something",
+		keywords: [
+			"alert",
+			"warning",
+			"caution"
+		],
+		section: "ADVANCED",
+		placement: ["slash", "toolbar"],
+		group: "insert",
+		onSelect: (editor) => {
+			editor.update(() => {
+				$insertNodes([$createAlertQuoteEditNode("warning")]);
+			});
+		}
+	}
+]);
+function $createAlertQuoteEditNode(alertType, contentState) {
+	return new AlertQuoteEditNode(alertType, contentState);
+}
+//#endregion
+export { AlertQuoteEditNode as n, NESTED_EDITOR_NODES as r, $createAlertQuoteEditNode as t };

package/dist/KaTeXRenderer-CQQT3BMw.js

@@ -0,0 +1,215 @@
+import { l as semanticClassNames, n as katexStyles, r as clsx, t as katexClassNames, u as sharedStyles } from "./katex.css-CIOEOXyd.js";
+import { createContext, createElement, use, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { rgbaToThumbHash, thumbHashToDataURL } from "thumbhash";
+//#region src/context/RendererConfigContext.tsx
+var RendererConfigContext = createContext({
+	config: void 0,
+	mode: "renderer",
+	variant: "article"
+});
+function RendererConfigProvider({ config, mode, variant, children }) {
+	const value = useMemo(() => ({
+		config,
+		mode,
+		variant
+	}), [
+		config,
+		mode,
+		variant
+	]);
+	return /* @__PURE__ */ jsx(RendererConfigContext.Provider, {
+		value,
+		children
+	});
+}
+function useRendererConfig() {
+	return use(RendererConfigContext).config;
+}
+function useRendererMode() {
+	return use(RendererConfigContext).mode;
+}
+function useVariant() {
+	return use(RendererConfigContext).variant;
+}
+//#endregion
+//#region src/components/RendererWrapper.tsx
+/**
+* Wrapper component that allows overriding default renderers with custom ones.
+* Uses RendererConfig from context to determine which renderer to use.
+*/
+function RendererWrapper({ rendererKey, defaultRenderer: DefaultRenderer, props }) {
+	return /* @__PURE__ */ jsx(useRendererConfig()?.[rendererKey] ?? DefaultRenderer, { ...props });
+}
+/**
+* Type-safe helper for creating RendererWrapper elements from .ts node files.
+* Avoids the createElement + discriminated-union typing limitation.
+*/
+function createRendererDecoration(rendererKey, defaultRenderer, props) {
+	return createElement(RendererWrapper, {
+		rendererKey,
+		defaultRenderer,
+		props
+	});
+}
+//#endregion
+//#region src/context/FootnoteDefinitionsContext.tsx
+var FootnoteDefinitionsContext = createContext({
+	definitions: {},
+	displayNumberMap: {}
+});
+function FootnoteDefinitionsProvider({ definitions, displayNumberMap, children }) {
+	return /* @__PURE__ */ jsx(FootnoteDefinitionsContext, {
+		value: useMemo(() => ({
+			definitions,
+			displayNumberMap
+		}), [definitions, displayNumberMap]),
+		children
+	});
+}
+function useFootnoteDefinitions() {
+	return use(FootnoteDefinitionsContext);
+}
+function useFootnoteContent(identifier) {
+	const { definitions } = use(FootnoteDefinitionsContext);
+	return definitions[identifier];
+}
+function useFootnoteDisplayNumber(identifier) {
+	const { displayNumberMap } = use(FootnoteDefinitionsContext);
+	return displayNumberMap[identifier];
+}
+//#endregion
+//#region src/components/renderers/FootnoteStaticRenderer.tsx
+function FootnoteStaticRenderer({ identifier }) {
+	const content = useFootnoteContent(identifier);
+	const displayNumber = useFootnoteDisplayNumber(identifier);
+	const referenceId = `footnote-ref-${identifier}`;
+	const targetId = `footnote-${identifier}`;
+	const handleClick = useCallback((e) => {
+		const target = document.getElementById(targetId) || document.getElementById(`fn-${identifier}`);
+		if (!target) return;
+		e.preventDefault();
+		target.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		});
+		target.classList.add(semanticClassNames.footnoteHighlight, sharedStyles.footnoteHighlight);
+		window.setTimeout(() => {
+			target.classList.remove(semanticClassNames.footnoteHighlight, sharedStyles.footnoteHighlight);
+		}, 1200);
+	}, [identifier, targetId]);
+	const label = displayNumber ?? identifier;
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx(semanticClassNames.footnoteRefWrapper, sharedStyles.footnoteRefWrapper),
+		children: /* @__PURE__ */ jsx("a", {
+			"aria-label": content ? `Footnote ${label}: ${content}` : `Footnote ${label}`,
+			className: clsx(semanticClassNames.footnoteRef, sharedStyles.footnoteRef),
+			"data-footnote-ref": identifier,
+			href: `#${targetId}`,
+			id: referenceId,
+			role: "doc-noteref",
+			onClick: handleClick,
+			children: label
+		})
+	});
+}
+//#endregion
+//#region src/utils/thumbhash.ts
+var MAX_DIM = 100;
+async function computeImageMeta(file) {
+	const url = URL.createObjectURL(file);
+	try {
+		const img = await loadImage(url);
+		const { naturalWidth: w, naturalHeight: h } = img;
+		const scale = Math.min(MAX_DIM / w, MAX_DIM / h, 1);
+		const sw = Math.round(w * scale);
+		const sh = Math.round(h * scale);
+		const canvas = document.createElement("canvas");
+		canvas.width = sw;
+		canvas.height = sh;
+		const ctx = canvas.getContext("2d");
+		ctx.drawImage(img, 0, 0, sw, sh);
+		const { data } = ctx.getImageData(0, 0, sw, sh);
+		return {
+			width: w,
+			height: h,
+			thumbhash: uint8ToBase64(rgbaToThumbHash(sw, sh, data))
+		};
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+}
+function decodeThumbHash(hash) {
+	try {
+		return thumbHashToDataURL(base64ToUint8(hash));
+	} catch {
+		return;
+	}
+}
+function loadImage(src) {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		img.onload = () => resolve(img);
+		img.onerror = reject;
+		img.src = src;
+	});
+}
+function uint8ToBase64(bytes) {
+	let bin = "";
+	for (const b of bytes) bin += String.fromCodePoint(b);
+	return btoa(bin);
+}
+function base64ToUint8(str) {
+	const bin = atob(str);
+	const bytes = new Uint8Array(bin.length);
+	for (let i = 0; i < bin.length; i++) bytes[i] = bin.codePointAt(i);
+	return bytes;
+}
+//#endregion
+//#region src/components/renderers/KaTeXRenderer.tsx
+var katexModule = null;
+var katexLoadPromise = null;
+function loadKaTeX() {
+	if (katexModule) return Promise.resolve(katexModule);
+	if (!katexLoadPromise) katexLoadPromise = import("katex").then((mod) => {
+		katexModule = mod;
+		return katexModule;
+	});
+	return katexLoadPromise;
+}
+function KaTeXRenderer({ equation, displayMode }) {
+	const [html, setHtml] = useState(null);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		loadKaTeX().then((katex) => {
+			if (cancelled) return;
+			setHtml(katex.default.renderToString(equation, {
+				displayMode,
+				throwOnError: false
+			}));
+			setError(null);
+		}).catch(() => {
+			if (cancelled) return;
+			setHtml(null);
+			setError("KaTeX is not available");
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [equation, displayMode]);
+	if (error) return /* @__PURE__ */ jsx("code", {
+		className: clsx(katexClassNames.fallback, katexStyles.fallback),
+		children: equation
+	});
+	if (html) return /* @__PURE__ */ jsx("span", {
+		dangerouslySetInnerHTML: { __html: html },
+		className: displayMode ? clsx(katexClassNames.block, katexStyles.block) : clsx(katexClassNames.inline, katexStyles.inline)
+	});
+	return /* @__PURE__ */ jsx("code", {
+		className: clsx(katexClassNames.fallback, katexStyles.fallback),
+		children: equation
+	});
+}
+//#endregion
+export { FootnoteDefinitionsProvider as a, useFootnoteDisplayNumber as c, RendererConfigProvider as d, useRendererConfig as f, FootnoteStaticRenderer as i, RendererWrapper as l, useVariant as m, computeImageMeta as n, useFootnoteContent as o, useRendererMode as p, decodeThumbHash as r, useFootnoteDefinitions as s, KaTeXRenderer as t, createRendererDecoration as u };

package/dist/LinkCardRenderer-CigqFwCv.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/renderers/LinkCardRenderer.tsx
+function LinkCardRenderer({ url, title, description, favicon, image }) {
+	return /* @__PURE__ */ jsxs("a", {
+		className: "rich-link-card",
+		href: url,
+		rel: "noopener noreferrer",
+		target: "_blank",
+		children: [image && /* @__PURE__ */ jsx("span", {
+			className: "rich-link-card-image",
+			children: /* @__PURE__ */ jsx("img", {
+				alt: "",
+				loading: "lazy",
+				src: image
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "rich-link-card-content",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "rich-link-card-title",
+					children: [favicon && /* @__PURE__ */ jsx("img", {
+						alt: "",
+						className: "rich-link-card-favicon",
+						height: 16,
+						src: favicon,
+						width: 16,
+						onError: (e) => {
+							e.target.style.display = "none";
+						}
+					}), title || url]
+				}),
+				description && /* @__PURE__ */ jsx("span", {
+					className: "rich-link-card-description",
+					children: description
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "rich-link-card-url",
+					children: url
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { LinkCardRenderer as t };

package/dist/MermaidPlugin-BrOr-wQi.js

@@ -0,0 +1,67 @@
+import { h as $createKaTeXInlineNode, l as $createMermaidNode, v as $createKaTeXBlockNode, x as $createImageNode } from "./theme-B5B2EOWM.js";
+import { t as $createAlertQuoteEditNode } from "./AlertQuoteEditNode-C55sxsR3.js";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+import { $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+//#region src/plugins/AlertPlugin.tsx
+var INSERT_ALERT_COMMAND = createCommand("INSERT_ALERT");
+function AlertPlugin() {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => {
+		return editor.registerCommand(INSERT_ALERT_COMMAND, (alertType) => {
+			$insertNodes([$createAlertQuoteEditNode(alertType)]);
+			return true;
+		}, COMMAND_PRIORITY_EDITOR);
+	}, [editor]);
+	return null;
+}
+//#endregion
+//#region src/plugins/ImagePlugin.tsx
+var INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
+function ImagePlugin() {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => {
+		return editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
+			$insertNodes([$createImageNode(payload)]);
+			return true;
+		}, COMMAND_PRIORITY_EDITOR);
+	}, [editor]);
+	return null;
+}
+//#endregion
+//#region src/plugins/KaTeXPlugin.tsx
+var INSERT_KATEX_INLINE_COMMAND = createCommand("INSERT_KATEX_INLINE");
+var INSERT_KATEX_BLOCK_COMMAND = createCommand("INSERT_KATEX_BLOCK");
+function KaTeXPlugin() {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => {
+		const unregisterInline = editor.registerCommand(INSERT_KATEX_INLINE_COMMAND, (equation) => {
+			$insertNodes([$createKaTeXInlineNode(equation, { autoOpenOnMount: !equation.trim() })]);
+			return true;
+		}, COMMAND_PRIORITY_EDITOR);
+		const unregisterBlock = editor.registerCommand(INSERT_KATEX_BLOCK_COMMAND, (equation) => {
+			$insertNodes([$createKaTeXBlockNode(equation, { autoOpenOnMount: !equation.trim() })]);
+			return true;
+		}, COMMAND_PRIORITY_EDITOR);
+		return () => {
+			unregisterInline();
+			unregisterBlock();
+		};
+	}, [editor]);
+	return null;
+}
+//#endregion
+//#region src/plugins/MermaidPlugin.tsx
+var INSERT_MERMAID_COMMAND = createCommand("INSERT_MERMAID");
+function MermaidPlugin() {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => {
+		return editor.registerCommand(INSERT_MERMAID_COMMAND, (diagram) => {
+			$insertNodes([$createMermaidNode(diagram)]);
+			return true;
+		}, COMMAND_PRIORITY_EDITOR);
+	}, [editor]);
+	return null;
+}
+//#endregion
+export { KaTeXPlugin as a, AlertPlugin as c, INSERT_KATEX_INLINE_COMMAND as i, INSERT_ALERT_COMMAND as l, MermaidPlugin as n, INSERT_IMAGE_COMMAND as o, INSERT_KATEX_BLOCK_COMMAND as r, ImagePlugin as s, INSERT_MERMAID_COMMAND as t };

package/dist/RubyRenderer-jOkydJHg.js

@@ -0,0 +1,15 @@
+import { l as semanticClassNames, r as clsx, u as sharedStyles } from "./katex.css-CIOEOXyd.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/renderers/RubyRenderer.tsx
+function RubyRenderer({ reading, children }) {
+	if (!reading) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs("ruby", {
+		className: clsx(semanticClassNames.ruby, sharedStyles.ruby),
+		children: [children, /* @__PURE__ */ jsx("rt", {
+			className: clsx(semanticClassNames.rubyRt, sharedStyles.rubyRt),
+			children: reading
+		})]
+	});
+}
+//#endregion
+export { RubyRenderer as t };