@haklex/rich-compose 0.39.7 → 0.40.0

package/README.md

@@ -177,6 +177,42 @@ composeRenderer({
 
 The lazy chunk is still emitted but never fetched at runtime.
 
+## Platform-agnostic rendering
+
+`RichRenderer` (and `composeRenderer`) emit DOM by default, but every DOM touchpoint is injectable so the same tree walk can target another React renderer (React Native, ink, a test harness):
+
+| Hook                            | Covers                                                                                        |
+| ------------------------------- | --------------------------------------------------------------------------------------------- |
+| `builtinNodeOverrides[type]`    | Element nodes (`paragraph`, `heading`, `list`, …) and decorator nodes (`image`, `mermaid`, …) |
+| `builtinNodeOverrides.text`     | Text leaves — receives the serialized text node (`text`, `format`, `style`)                   |
+| `blockAnchor(el, blockId, key)` | Root-level block wrapper carrying `$.blockId`; defaults to a `data-block-id` div              |
+| `as`                            | Host container — any `ElementType`; non-string hosts receive only `style` and `children`      |
+
+A decorator override receives the default decoration as its single child and may drop it:
+
+```tsx
+<RichRenderer
+  as={View}
+  blockAnchor={(el, blockId, key) => (
+    <View key={key} nativeID={blockId}>
+      {el}
+    </View>
+  )}
+  builtinNodeOverrides={{
+    text: (node, key) => (
+      <Text key={key} style={textStyle(node.format)}>
+        {node.text}
+      </Text>
+    ),
+    paragraph: (_node, key, children) => <Text key={key}>{children}</Text>,
+    mermaid: (node, key) => <NativeMermaid key={key} diagram={node.diagram} />,
+  }}
+  value={state}
+/>
+```
+
+Decorator slots (`rendererConfig` / module `renderers`) accept any React component, so `Image`, `CodeBlock`, `LinkCard` etc. can be replaced the same way.
+
 ## Module catalog
 
 | Module         | Base Klass        | Edit Klass            | Mode                            | Source                    |

package/dist/{compose-BC3hv8cT.js → compose-7SEahaEz.js}

@@ -320,8 +320,7 @@ function wrapDecoration(serialized, key, decoration) {
 			return decoration;
 	}
 }
-function applyBlockId(element, blockId, nodeKey) {
-	if (!blockId) return element;
+function domBlockAnchor(element, blockId, nodeKey) {
 	if (isValidElement(element) && typeof element.type === "string") return cloneElement(element, { "data-block-id": blockId });
 	return /* @__PURE__ */ jsx("div", {
 		className: "rich-block-anchor",
@@ -329,27 +328,43 @@ function applyBlockId(element, blockId, nodeKey) {
 		children: element
 	}, `${nodeKey}-block-anchor`);
 }
-function renderTree(node, editor, editorConfig, headingSlugs, key, blockId, builtinNodeOverrides) {
+function applyBlockId(element, blockId, nodeKey, options) {
+	if (!blockId) return element;
+	return (options.blockAnchor ?? domBlockAnchor)(element, blockId, nodeKey);
+}
+function renderTree(node, editor, editorConfig, headingSlugs, key, blockId, options) {
 	const nodeKey = node.getKey ? node.getKey() : key;
-	if (typeof node.decorate === "function") try {
-		const decoration = node.decorate(editor, editorConfig);
-		if (decoration != null) return applyBlockId(wrapDecoration(node.exportJSON ? node.exportJSON() : {}, nodeKey, decoration), blockId, nodeKey);
-	} catch {}
+	const { builtinNodeOverrides } = options;
+	if (typeof node.decorate === "function") {
+		let decoration = null;
+		try {
+			decoration = node.decorate(editor, editorConfig);
+		} catch {}
+		if (decoration != null) {
+			const serialized = node.exportJSON ? node.exportJSON() : {};
+			const override = builtinNodeOverrides?.[serialized.type];
+			return applyBlockId(override ? override(serialized, nodeKey, [decoration], () => wrapDecoration(serialized, nodeKey, decoration)) : wrapDecoration(serialized, nodeKey, decoration), blockId, nodeKey, options);
+		}
+	}
 	const serialized = node.exportJSON ? node.exportJSON() : {};
-	if (serialized.type === "text") return renderTextNode(serialized, nodeKey);
+	if (serialized.type === "text") {
+		const override = builtinNodeOverrides?.text;
+		if (override) return override(serialized, nodeKey, null, () => renderTextNode(serialized, nodeKey));
+		return renderTextNode(serialized, nodeKey);
+	}
 	const childNodes = typeof node.getChildren === "function" ? node.getChildren() : [];
 	if (Array.isArray(serialized.children) && serialized.children.length === 0 && childNodes.length > 0) serialized.children = childNodes.map((c) => ({ type: typeof c.getType === "function" ? c.getType() : c.__type }));
 	let children = null;
-	if (childNodes.length > 0) children = childNodes.map((child, i) => renderTree(child, editor, editorConfig, headingSlugs, `${nodeKey}-${i}`, void 0, builtinNodeOverrides));
+	if (childNodes.length > 0) children = childNodes.map((child, i) => renderTree(child, editor, editorConfig, headingSlugs, `${nodeKey}-${i}`, void 0, options));
 	const textContent = node.getTextContent ? node.getTextContent() : void 0;
 	const override = builtinNodeOverrides?.[serialized.type];
 	if (override) {
 		const defaultRenderer = () => renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent);
-		return applyBlockId(override(serialized, nodeKey, children, defaultRenderer), blockId, nodeKey);
+		return applyBlockId(override(serialized, nodeKey, children, defaultRenderer), blockId, nodeKey, options);
 	}
-	return applyBlockId(renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent), blockId, nodeKey);
+	return applyBlockId(renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent), blockId, nodeKey, options);
 }
-function renderEditorToReact(value, nodes, builtinNodeOverrides) {
+function renderEditorToReact(value, nodes, options) {
 	const editor = createHeadlessEditor({
 		nodes,
 		theme: editorTheme,
@@ -371,7 +386,7 @@ function renderEditorToReact(value, nodes, builtinNodeOverrides) {
 	editorState.read(() => {
 		const root = $getRoot();
 		const headingSlugs = /* @__PURE__ */ new Map();
-		const children = root.getChildren().map((child, i) => renderTree(child, editor, editorConfig, headingSlugs, `ssr-${i}`, rawRootChildren?.[i]?.$?.blockId, builtinNodeOverrides));
+		const children = root.getChildren().map((child, i) => renderTree(child, editor, editorConfig, headingSlugs, `ssr-${i}`, rawRootChildren?.[i]?.$?.blockId, options));
 		content = /* @__PURE__ */ jsx(Fragment$1, { children });
 	});
 	const renderNestedContent = (state) => {
@@ -395,7 +410,7 @@ function renderEditorToReact(value, nodes, builtinNodeOverrides) {
 		nestedState.read(() => {
 			const root = $getRoot();
 			const headingSlugs = /* @__PURE__ */ new Map();
-			const ch = root.getChildren().map((child, i) => renderTree(child, nestedEditor, nestedEditorConfig, headingSlugs, `nested-${i}`, nestedRawChildren?.[i]?.$?.blockId, builtinNodeOverrides));
+			const ch = root.getChildren().map((child, i) => renderTree(child, nestedEditor, nestedEditorConfig, headingSlugs, `nested-${i}`, nestedRawChildren?.[i]?.$?.blockId, options));
 			nested = /* @__PURE__ */ jsx(Fragment$1, { children: ch });
 		});
 		return nested;
@@ -406,12 +421,16 @@ function renderEditorToReact(value, nodes, builtinNodeOverrides) {
 		renderNestedContent
 	};
 }
-function RichRenderer({ value, variant = "article", theme = "light", className, style, as: Component = "div", nested = false, rendererConfig, extraNodes, builtinNodeOverrides }) {
+function RichRenderer({ value, variant = "article", theme = "light", className, style, as: Component = "div", nested = false, rendererConfig, extraNodes, builtinNodeOverrides, blockAnchor }) {
 	const variantClass = getVariantClass(variant);
 	const outerRenderNestedContent = useOptionalNestedContentRenderer();
 	const { content, footnoteData, renderNestedContent } = useMemo(() => {
-		return renderEditorToReact(value, extraNodes ? [...allNodes, ...extraNodes] : allNodes, builtinNodeOverrides);
+		return renderEditorToReact(value, extraNodes ? [...allNodes, ...extraNodes] : allNodes, {
+			blockAnchor,
+			builtinNodeOverrides
+		});
 	}, [
+		blockAnchor,
 		builtinNodeOverrides,
 		extraNodes,
 		value
@@ -421,6 +440,12 @@ function RichRenderer({ value, variant = "article", theme = "light", className,
 		variantClass,
 		className
 	].filter(Boolean).join(" ");
+	const hostProps = typeof Component === "string" ? {
+		"suppressHydrationWarning": true,
+		"className": classes,
+		"data-rich-nested": nested ? "true" : void 0,
+		"data-theme": theme
+	} : {};
 	return /* @__PURE__ */ jsx(PortalThemeProvider, {
 		className: variantClass,
 		theme,
@@ -436,10 +461,7 @@ function RichRenderer({ value, variant = "article", theme = "light", className,
 					children: /* @__PURE__ */ jsx(NestedContentRendererProvider, {
 						value: outerRenderNestedContent ?? renderNestedContent,
 						children: /* @__PURE__ */ jsx(Component, {
-							suppressHydrationWarning: true,
-							className: classes,
-							"data-rich-nested": nested ? "true" : void 0,
-							"data-theme": theme,
+							...hostProps,
 							style,
 							children: content
 						})
@@ -578,6 +600,7 @@ function composeRenderer(opts) {
 	};
 	const ComposedProviders = composeProviders(merged);
 	const builtinNodeOverrides = opts.builtinNodeOverrides;
+	const blockAnchor = opts.blockAnchor;
 	function ComposedRenderer(props) {
 		const { theme, variant } = props;
 		const renderNested = useCallback((value, overrideVariant) => /* @__PURE__ */ jsx(ComposedRenderer, {
@@ -590,6 +613,7 @@ function composeRenderer(opts) {
 			value: renderNested,
 			children: /* @__PURE__ */ jsx(ComposedProviders, { children: /* @__PURE__ */ jsx(RichRenderer, {
 				as: props.as,
+				blockAnchor,
 				builtinNodeOverrides,
 				className: props.className,
 				extraNodes: allNodes,

package/dist/core/compose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../../src/core/compose.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAA+C,MAAM,OAAO,CAAC;AAKxF,OAAO,KAAK,EAAE,sBAAsB,EAAE,qBAAqB,EAAsB,MAAM,SAAS,CAAC;AAkCjG,wBAAgB,eAAe,CAC7B,IAAI,EAAE,sBAAsB,GAC3B,aAAa,CAAC,qBAAqB,CAAC,CA4CtC"}
+{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../../src/core/compose.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAA+C,MAAM,OAAO,CAAC;AAKxF,OAAO,KAAK,EAAE,sBAAsB,EAAE,qBAAqB,EAAsB,MAAM,SAAS,CAAC;AAkCjG,wBAAgB,eAAe,CAC7B,IAAI,EAAE,sBAAsB,GAC3B,aAAa,CAAC,qBAAqB,CAAC,CA8CtC"}

package/dist/core/types.d.ts

@@ -1,7 +1,7 @@
 import { RendererConfig, RichEditorVariant } from '@haklex/rich-editor/static';
 import { Klass, LexicalNode, SerializedEditorState } from 'lexical';
-import { ComponentType, CSSProperties, ReactNode } from 'react';
-import { BuiltinNodeRenderer } from '../static-renderer/types';
+import { ComponentType, CSSProperties, ElementType, ReactNode } from 'react';
+import { BlockAnchorRenderer, BuiltinNodeRenderer } from '../static-renderer/types';
 export type RendererKey = keyof RendererConfig;
 export interface RichRendererModule {
     lazyRenderers?: Partial<{
@@ -28,6 +28,7 @@ export interface RichEditorModule extends RichRendererModule {
     plugins?: ReactNode;
 }
 export interface ComposeRendererOptions {
+    blockAnchor?: BlockAnchorRenderer;
     builtinNodeOverrides?: Record<string, BuiltinNodeRenderer>;
     modules?: RichRendererModule[];
     overrides?: Partial<RendererConfig>;
@@ -39,7 +40,7 @@ export interface ComposeEditorOptions {
     preset?: RichEditorModule[];
 }
 export interface RichRendererBaseProps {
-    as?: keyof React.JSX.IntrinsicElements;
+    as?: ElementType;
     className?: string;
     nested?: boolean;
     style?: CSSProperties;

package/dist/core/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEpE,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;SACrB,CAAC,IAAI,WAAW,GAAG,MAAM,OAAO,CAAC;YAAE,OAAO,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;SAAE,CAAC;KAC/E,CAAC,CAAC;IACH,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;CACvD;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IACjC,cAAc,CAAC,EAAE,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACxC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC3D,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,EAAE,qBAAqB,CAAC;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEzF,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;SACrB,CAAC,IAAI,WAAW,GAAG,MAAM,OAAO,CAAC;YAAE,OAAO,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;SAAE,CAAC;KAC/E,CAAC,CAAC;IACH,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;CACvD;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IACjC,cAAc,CAAC,EAAE,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACxC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC3D,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,EAAE,qBAAqB,CAAC;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B"}

package/dist/core-entry.d.ts

@@ -2,6 +2,6 @@ export { composeRenderer } from './core/compose';
 export { dedupNodes, mergeModules } from './core/dedup';
 export { wrapLazy } from './core/lazy';
 export type { ComposeRendererOptions, RendererKey, RichRendererBaseProps, RichRendererModule, } from './core/types';
-export type { BuiltinNodeRenderer, RichRendererProps } from './static-renderer';
+export type { BlockAnchorRenderer, BuiltinNodeRenderer, RichRendererProps, } from './static-renderer';
 export { RichRenderer } from './static-renderer';
 //# sourceMappingURL=core-entry.d.ts.map

package/dist/core-entry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-entry.d.ts","sourceRoot":"","sources":["../src/core-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EACV,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"core-entry.d.ts","sourceRoot":"","sources":["../src/core-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EACV,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/core.mjs

@@ -1,2 +1,2 @@
-import { a as RichRenderer, i as mergeModules, n as wrapLazy, r as dedupNodes, t as composeRenderer } from "./compose-BC3hv8cT.js";
+import { a as RichRenderer, i as mergeModules, n as wrapLazy, r as dedupNodes, t as composeRenderer } from "./compose-7SEahaEz.js";
 export { RichRenderer, composeRenderer, dedupNodes, mergeModules, wrapLazy };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { ComposeEditorOptions, ComposeRendererOptions, ConfigurableModule, DefineConfigurableModuleResult, RendererKey, RichEditorModule, RichRendererBaseProps, RichRendererModule, } from './core';
 export { composeEditor, composeRenderer, dedupNodes, defineConfigurableModule, mergeModules, wrapLazy, } from './core';
 export type { ImageClickPayload, ImageModuleConfig, OnImageClick, RichImageInfo, } from './modules/image/types';
-export type { BuiltinNodeRenderer, RichRendererProps } from './static-renderer';
+export type { BlockAnchorRenderer, BuiltinNodeRenderer, RichRendererProps, } from './static-renderer';
 export { RichRenderer } from './static-renderer';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,8BAA8B,EAC9B,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,QAAQ,CAAC;AAChB,OAAO,EACL,aAAa,EACb,eAAe,EACf,UAAU,EACV,wBAAwB,EACxB,YAAY,EACZ,QAAQ,GACT,MAAM,QAAQ,CAAC;AAChB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,8BAA8B,EAC9B,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,QAAQ,CAAC;AAChB,OAAO,EACL,aAAa,EACb,eAAe,EACf,UAAU,EACV,wBAAwB,EACxB,YAAY,EACZ,QAAQ,GACT,MAAM,QAAQ,CAAC;AAChB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as RichRenderer, i as mergeModules, n as wrapLazy, r as dedupNodes, t as composeRenderer } from "./compose-BC3hv8cT.js";
+import { a as RichRenderer, i as mergeModules, n as wrapLazy, r as dedupNodes, t as composeRenderer } from "./compose-7SEahaEz.js";
 import { t as defineConfigurableModule } from "./configurable-module-Bur4JaI3.js";
 import { Fragment, memo, useCallback, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/litexml-html-preview-client.js

@@ -32618,8 +32618,7 @@
 				return decoration;
 		}
 	}
-	function applyBlockId(element, blockId, nodeKey) {
-		if (!blockId) return element;
+	function domBlockAnchor(element, blockId, nodeKey) {
 		if ((0, import_react$182.isValidElement)(element) && typeof element.type === "string") return (0, import_react$182.cloneElement)(element, { "data-block-id": blockId });
 		return /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)("div", {
 			className: "rich-block-anchor",
@@ -32627,27 +32626,43 @@
 			children: element
 		}, `${nodeKey}-block-anchor`);
 	}
-	function renderTree(node, editor, editorConfig, headingSlugs, key, blockId, builtinNodeOverrides) {
+	function applyBlockId(element, blockId, nodeKey, options) {
+		if (!blockId) return element;
+		return (options.blockAnchor ?? domBlockAnchor)(element, blockId, nodeKey);
+	}
+	function renderTree(node, editor, editorConfig, headingSlugs, key, blockId, options) {
 		const nodeKey = node.getKey ? node.getKey() : key;
-		if (typeof node.decorate === "function") try {
-			const decoration = node.decorate(editor, editorConfig);
-			if (decoration != null) return applyBlockId(wrapDecoration(node.exportJSON ? node.exportJSON() : {}, nodeKey, decoration), blockId, nodeKey);
-		} catch {}
+		const { builtinNodeOverrides } = options;
+		if (typeof node.decorate === "function") {
+			let decoration = null;
+			try {
+				decoration = node.decorate(editor, editorConfig);
+			} catch {}
+			if (decoration != null) {
+				const serialized = node.exportJSON ? node.exportJSON() : {};
+				const override = builtinNodeOverrides?.[serialized.type];
+				return applyBlockId(override ? override(serialized, nodeKey, [decoration], () => wrapDecoration(serialized, nodeKey, decoration)) : wrapDecoration(serialized, nodeKey, decoration), blockId, nodeKey, options);
+			}
+		}
 		const serialized = node.exportJSON ? node.exportJSON() : {};
-		if (serialized.type === "text") return renderTextNode(serialized, nodeKey);
+		if (serialized.type === "text") {
+			const override = builtinNodeOverrides?.text;
+			if (override) return override(serialized, nodeKey, null, () => renderTextNode(serialized, nodeKey));
+			return renderTextNode(serialized, nodeKey);
+		}
 		const childNodes = typeof node.getChildren === "function" ? node.getChildren() : [];
 		if (Array.isArray(serialized.children) && serialized.children.length === 0 && childNodes.length > 0) serialized.children = childNodes.map((c) => ({ type: typeof c.getType === "function" ? c.getType() : c.__type }));
 		let children = null;
-		if (childNodes.length > 0) children = childNodes.map((child, i) => renderTree(child, editor, editorConfig, headingSlugs, `${nodeKey}-${i}`, void 0, builtinNodeOverrides));
+		if (childNodes.length > 0) children = childNodes.map((child, i) => renderTree(child, editor, editorConfig, headingSlugs, `${nodeKey}-${i}`, void 0, options));
 		const textContent = node.getTextContent ? node.getTextContent() : void 0;
 		const override = builtinNodeOverrides?.[serialized.type];
 		if (override) {
 			const defaultRenderer = () => renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent);
-			return applyBlockId(override(serialized, nodeKey, children, defaultRenderer), blockId, nodeKey);
+			return applyBlockId(override(serialized, nodeKey, children, defaultRenderer), blockId, nodeKey, options);
 		}
-		return applyBlockId(renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent), blockId, nodeKey);
+		return applyBlockId(renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent), blockId, nodeKey, options);
 	}
-	function renderEditorToReact(value, nodes, builtinNodeOverrides) {
+	function renderEditorToReact(value, nodes, options) {
 		const editor = t$42({
 			nodes,
 			theme: editorTheme,
@@ -32669,7 +32684,7 @@
 		editorState.read(() => {
 			const root = nl$1();
 			const headingSlugs = /* @__PURE__ */ new Map();
-			const children = root.getChildren().map((child, i) => renderTree(child, editor, editorConfig, headingSlugs, `ssr-${i}`, rawRootChildren?.[i]?.$?.blockId, builtinNodeOverrides));
+			const children = root.getChildren().map((child, i) => renderTree(child, editor, editorConfig, headingSlugs, `ssr-${i}`, rawRootChildren?.[i]?.$?.blockId, options));
 			content = /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)(import_jsx_runtime$222.Fragment, { children });
 		});
 		const renderNestedContent = (state) => {
@@ -32693,7 +32708,7 @@
 			nestedState.read(() => {
 				const root = nl$1();
 				const headingSlugs = /* @__PURE__ */ new Map();
-				const ch = root.getChildren().map((child, i) => renderTree(child, nestedEditor, nestedEditorConfig, headingSlugs, `nested-${i}`, nestedRawChildren?.[i]?.$?.blockId, builtinNodeOverrides));
+				const ch = root.getChildren().map((child, i) => renderTree(child, nestedEditor, nestedEditorConfig, headingSlugs, `nested-${i}`, nestedRawChildren?.[i]?.$?.blockId, options));
 				nested = /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)(import_jsx_runtime$222.Fragment, { children: ch });
 			});
 			return nested;
@@ -32704,12 +32719,16 @@
 			renderNestedContent
 		};
 	}
-	function RichRenderer({ value, variant = "article", theme = "light", className, style, as: Component = "div", nested = false, rendererConfig, extraNodes, builtinNodeOverrides }) {
+	function RichRenderer({ value, variant = "article", theme = "light", className, style, as: Component = "div", nested = false, rendererConfig, extraNodes, builtinNodeOverrides, blockAnchor }) {
 		const variantClass = getVariantClass(variant);
 		const outerRenderNestedContent = useOptionalNestedContentRenderer();
 		const { content, footnoteData, renderNestedContent } = (0, import_react$182.useMemo)(() => {
-			return renderEditorToReact(value, extraNodes ? [...allNodes, ...extraNodes] : allNodes, builtinNodeOverrides);
+			return renderEditorToReact(value, extraNodes ? [...allNodes, ...extraNodes] : allNodes, {
+				blockAnchor,
+				builtinNodeOverrides
+			});
 		}, [
+			blockAnchor,
 			builtinNodeOverrides,
 			extraNodes,
 			value
@@ -32719,6 +32738,12 @@
 			variantClass,
 			className
 		].filter(Boolean).join(" ");
+		const hostProps = typeof Component === "string" ? {
+			"suppressHydrationWarning": true,
+			"className": classes,
+			"data-rich-nested": nested ? "true" : void 0,
+			"data-theme": theme
+		} : {};
 		return /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)(PortalThemeProvider, {
 			className: variantClass,
 			theme,
@@ -32734,10 +32759,7 @@
 						children: /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)(NestedContentRendererProvider, {
 							value: outerRenderNestedContent ?? renderNestedContent,
 							children: /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)(Component, {
-								suppressHydrationWarning: true,
-								className: classes,
-								"data-rich-nested": nested ? "true" : void 0,
-								"data-theme": theme,
+								...hostProps,
 								style,
 								children: content
 							})
@@ -32878,6 +32900,7 @@
 		};
 		const ComposedProviders = composeProviders(merged);
 		const builtinNodeOverrides = opts.builtinNodeOverrides;
+		const blockAnchor = opts.blockAnchor;
 		function ComposedRenderer(props) {
 			const { theme, variant } = props;
 			const renderNested = (0, import_react$182.useCallback)((value, overrideVariant) => /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)(ComposedRenderer, {
@@ -32890,6 +32913,7 @@
 				value: renderNested,
 				children: /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)(ComposedProviders, { children: /* @__PURE__ */ (0, import_jsx_runtime$222.jsx)(RichRenderer, {
 					as: props.as,
+					blockAnchor,
 					builtinNodeOverrides,
 					className: props.className,
 					extraNodes: allNodes,

package/dist/static-renderer/RichRenderer.d.ts

@@ -1,3 +1,3 @@
 import { RichRendererProps } from './types';
-export declare function RichRenderer({ value, variant, theme, className, style, as: Component, nested, rendererConfig, extraNodes, builtinNodeOverrides, }: RichRendererProps): import("react").JSX.Element;
+export declare function RichRenderer({ value, variant, theme, className, style, as: Component, nested, rendererConfig, extraNodes, builtinNodeOverrides, blockAnchor, }: RichRendererProps): import("react").JSX.Element;
 //# sourceMappingURL=RichRenderer.d.ts.map

package/dist/static-renderer/RichRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichRenderer.d.ts","sourceRoot":"","sources":["../../src/static-renderer/RichRenderer.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAuB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAiOtE,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAmB,EACnB,KAAe,EACf,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAiB,EACrB,MAAc,EACd,cAAc,EACd,UAAU,EACV,oBAAoB,GACrB,EAAE,iBAAiB,+BAoCnB"}
+{"version":3,"file":"RichRenderer.d.ts","sourceRoot":"","sources":["../../src/static-renderer/RichRenderer.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAA4C,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwP3F,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAmB,EACnB,KAAe,EACf,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAiB,EACrB,MAAc,EACd,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,WAAW,GACZ,EAAE,iBAAiB,+BAuCnB"}

package/dist/static-renderer/index.d.ts

@@ -1,3 +1,3 @@
 export { RichRenderer } from './RichRenderer';
-export type { BuiltinNodeRenderer, RichRendererProps } from './types';
+export type { BlockAnchorRenderer, BuiltinNodeRenderer, RichRendererProps } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/static-renderer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/static-renderer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/static-renderer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/static-renderer/types.d.ts

@@ -1,9 +1,11 @@
 import { ColorScheme, RendererConfig, RichEditorVariant } from '@haklex/rich-editor/static';
 import { Klass, LexicalNode, SerializedEditorState } from 'lexical';
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ElementType, ReactNode } from 'react';
 export type BuiltinNodeRenderer = (node: any, key: string, children: ReactNode[] | null, defaultRenderer: () => ReactNode) => ReactNode;
+export type BlockAnchorRenderer = (element: ReactNode, blockId: string, nodeKey: string) => ReactNode;
 export interface RichRendererProps {
-    as?: keyof React.JSX.IntrinsicElements;
+    as?: ElementType;
+    blockAnchor?: BlockAnchorRenderer;
     builtinNodeOverrides?: Record<string, BuiltinNodeRenderer>;
     className?: string;
     extraNodes?: Array<Klass<LexicalNode>>;

package/dist/static-renderer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/static-renderer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACjG,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,CAChC,IAAI,EAAE,GAAG,EACT,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAC5B,eAAe,EAAE,MAAM,SAAS,KAC7B,SAAS,CAAC;AAEf,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,qBAAqB,CAAC;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/static-renderer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACjG,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,MAAM,MAAM,mBAAmB,GAAG,CAChC,IAAI,EAAE,GAAG,EACT,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAC5B,eAAe,EAAE,MAAM,SAAS,KAC7B,SAAS,CAAC;AAEf,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,KACZ,SAAS,CAAC;AAEf,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,qBAAqB,CAAC;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-compose",
-  "version": "0.39.7",
+  "version": "0.40.0",
   "description": "Compose primitives for haklex rich content renderers — Gundam-style assembly of Lexical nodes, sync/lazy renderers, and Provider stacks.",
   "repository": {
     "type": "git",
@@ -293,28 +293,28 @@
   ],
   "dependencies": {
     "@lexical/headless": "^0.49.0",
-    "@haklex/rich-ext-dynamic": "0.39.7",
-    "@haklex/rich-ext-code-snippet": "0.39.7",
-    "@haklex/rich-ext-embed": "0.39.7",
-    "@haklex/rich-ext-excalidraw": "0.39.7",
-    "@haklex/rich-ext-poll": "0.39.7",
-    "@haklex/rich-ext-gallery": "0.39.7",
-    "@haklex/rich-litexml": "0.39.7",
-    "@haklex/rich-renderer-banner": "0.39.7",
-    "@haklex/rich-renderer-alert": "0.39.7",
-    "@haklex/rich-ext-chat": "0.39.7",
-    "@haklex/rich-renderer-codeblock": "0.39.7",
-    "@haklex/rich-renderer-image": "0.39.7",
-    "@haklex/rich-ext-nested-doc": "0.39.7",
-    "@haklex/rich-renderer-katex": "0.39.7",
-    "@haklex/rich-renderer-linkcard": "0.39.7",
-    "@haklex/rich-renderer-mermaid": "0.39.7",
-    "@haklex/rich-renderer-mention": "0.39.7",
-    "@haklex/rich-renderer-file": "0.39.7",
-    "@haklex/rich-renderer-ruby": "0.39.7",
-    "@haklex/rich-renderer-video": "0.39.7",
-    "@haklex/rich-style-token": "0.39.7",
-    "@haklex/rich-plugin-slash-menu": "0.39.7"
+    "@haklex/rich-ext-chat": "0.40.0",
+    "@haklex/rich-ext-code-snippet": "0.40.0",
+    "@haklex/rich-ext-nested-doc": "0.40.0",
+    "@haklex/rich-ext-excalidraw": "0.40.0",
+    "@haklex/rich-ext-dynamic": "0.40.0",
+    "@haklex/rich-ext-gallery": "0.40.0",
+    "@haklex/rich-ext-embed": "0.40.0",
+    "@haklex/rich-litexml": "0.40.0",
+    "@haklex/rich-ext-poll": "0.40.0",
+    "@haklex/rich-plugin-slash-menu": "0.40.0",
+    "@haklex/rich-renderer-alert": "0.40.0",
+    "@haklex/rich-renderer-codeblock": "0.40.0",
+    "@haklex/rich-renderer-banner": "0.40.0",
+    "@haklex/rich-renderer-image": "0.40.0",
+    "@haklex/rich-renderer-mermaid": "0.40.0",
+    "@haklex/rich-renderer-file": "0.40.0",
+    "@haklex/rich-renderer-video": "0.40.0",
+    "@haklex/rich-renderer-katex": "0.40.0",
+    "@haklex/rich-renderer-linkcard": "0.40.0",
+    "@haklex/rich-renderer-ruby": "0.40.0",
+    "@haklex/rich-renderer-mention": "0.40.0",
+    "@haklex/rich-style-token": "0.40.0"
   },
   "devDependencies": {
     "@lexical/react": "^0.49.0",
@@ -330,7 +330,7 @@
     "unplugin-dts": "^1.0.3",
     "vite": "^8.2.2",
     "vitest": "^4.1.11",
-    "@haklex/rich-editor": "0.39.7"
+    "@haklex/rich-editor": "0.40.0"
   },
   "peerDependencies": {
     "@lexical/react": "^0.49.0",
@@ -338,7 +338,7 @@
     "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "@haklex/rich-editor": "^0.39.7"
+    "@haklex/rich-editor": "^0.40.0"
   },
   "publishConfig": {
     "access": "public"