@haklex/rich-static-renderer 0.0.44 → 0.0.46

package/README.md

@@ -43,7 +43,15 @@ interface RichRendererProps {
   as?: keyof React.JSX.IntrinsicElements
   rendererConfig?: RendererConfig
   extraNodes?: Array<Klass<LexicalNode>>
+  builtinNodeOverrides?: Record<string, BuiltinNodeRenderer>
 }
+
+type BuiltinNodeRenderer = (
+  node: any,
+  key: string,
+  children: ReactNode[] | null,
+  defaultRenderer: () => ReactNode,
+) => ReactNode
 ```
 
 字段说明：
@@ -52,6 +60,7 @@ interface RichRendererProps {
 - `as`：渲染容器标签，默认 `div`
 - `rendererConfig`：覆写某些节点的渲染组件（Image/CodeBlock/...）
 - `extraNodes`：注册扩展节点（如 Tldraw、Embed、Gallery、CodeSnippet）
+- `builtinNodeOverrides`：覆写内置节点的渲染（paragraph/heading/link/...），按 `node.type` 匹配
 
 ## 与增强渲染器一起用
 
@@ -86,6 +95,32 @@ const extraNodes = [
 />
 ```
 
+## 覆写内置节点渲染
+
+通过 `builtinNodeOverrides` 可按 `node.type` 覆写 paragraph、heading、link 等内置节点的渲染逻辑。回调提供 `defaultRenderer` 用于回退默认渲染。
+
+```tsx
+<RichRenderer
+  value={value}
+  builtinNodeOverrides={{
+    link: (node, key, children) => (
+      <a key={key} href={node.url} className="custom-link" target="_blank">
+        {children}
+      </a>
+    ),
+    heading: (node, key, children, defaultRenderer) => {
+      // 仅覆写 h1，其余回退默认
+      if (node.tag === 'h1') {
+        return <h1 key={key} className="custom-h1">{children}</h1>
+      }
+      return defaultRenderer()
+    },
+  }}
+/>
+```
+
+支持的 type：`root`、`paragraph`、`heading`、`quote`、`list`、`listitem`、`link`、`autolink`、`horizontalrule`、`table`、`tablerow`、`tablecell`、`details`、`spoiler`、`ruby`、`code`、`code-highlight`、`linebreak`、`tab`。
+
 ## 渲染行为说明
 
 - 内部使用 `@lexical/headless` 构建只读 editor，再将节点树转为 React

package/dist/RichRenderer.d.ts

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

package/dist/RichRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichRenderer.d.ts","sourceRoot":"","sources":["../src/RichRenderer.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAyMhD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAmB,EACnB,KAAe,EACf,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAiB,EACrB,cAAc,EACd,UAAU,GACX,EAAE,iBAAiB,2CAwCnB"}
+{"version":3,"file":"RichRenderer.d.ts","sourceRoot":"","sources":["../src/RichRenderer.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAuB,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAkOrE,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAmB,EACnB,KAAe,EACf,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAiB,EACrB,cAAc,EACd,UAAU,EACV,oBAAoB,GACrB,EAAE,iBAAiB,2CAuCnB"}

package/dist/engine/renderBuiltinNode.d.ts

@@ -1,3 +1,3 @@
 import { ReactNode } from 'react';
-export declare function renderBuiltinNode(node: any, key: string, children: ReactNode[] | null, headingSlugs: Map<string, number>): ReactNode;
+export declare function renderBuiltinNode(node: any, key: string, children: ReactNode[] | null, headingSlugs: Map<string, number>, textContent?: string): ReactNode;
 //# sourceMappingURL=renderBuiltinNode.d.ts.map

package/dist/engine/renderBuiltinNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderBuiltinNode.d.ts","sourceRoot":"","sources":["../../src/engine/renderBuiltinNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAmBrD,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,GAAG,EACT,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAC5B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,SAAS,CAkMX"}
+{"version":3,"file":"renderBuiltinNode.d.ts","sourceRoot":"","sources":["../../src/engine/renderBuiltinNode.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAmBrD,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,GAAG,EACT,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAC5B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EACjC,WAAW,CAAC,EAAE,MAAM,GACnB,SAAS,CA+LX"}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { RichRenderer } from './RichRenderer';
-export type { RichRendererProps } from './types';
+export type { BuiltinNodeRenderer, RichRendererProps } from './types';
 //# 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,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA"}

package/dist/index.mjs

@@ -1,22 +1,22 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { RendererWrapper, RubyRenderer, getVariantClass, allNodes, ColorSchemeProvider, RendererConfigProvider, FootnoteDefinitionsProvider, NestedContentRendererProvider, editorTheme } from "@haklex/rich-editor/static";
+import { RendererWrapper, RubyRenderer, LinkFavicon, getVariantClass, allNodes, ColorSchemeProvider, RendererConfigProvider, FootnoteDefinitionsProvider, NestedContentRendererProvider, editorTheme } from "@haklex/rich-editor/static";
 import { PortalThemeProvider } from "@haklex/rich-style-token";
 import { createHeadlessEditor } from "@lexical/headless";
 import { $getRoot } from "lexical";
-import { createElement, isValidElement, cloneElement } from "react";
+import { createElement, useMemo, isValidElement, cloneElement } from "react";
 var tableWrapper = "_1v9yxw30";
 var table = "_1v9yxw31";
 var tableHead = "_1v9yxw32";
 var tableCell = "_1v9yxw33";
 function textToSlug(text) {
-  return text.toLowerCase().trim().replaceAll(/[^\w\s\u3001-\u9fff\uac00-\ud7af\uff00-\uffef-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
+  return text.toLowerCase().trim().replaceAll(/[^\w\s\u3000-\u9fff\uac00-\ud7af\uff00-\uffef-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
 }
 function extractText(node) {
   if (node.text) return node.text;
   if (node.children) return node.children.map(extractText).join("");
   return "";
 }
-function renderBuiltinNode(node, key, children, headingSlugs) {
+function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
   switch (node.type) {
     case "root":
       return /* @__PURE__ */ jsx(Fragment, { children });
@@ -26,7 +26,7 @@ function renderBuiltinNode(node, key, children, headingSlugs) {
     }
     case "heading": {
       const Tag = node.tag;
-      const text = extractText(node);
+      const text = textContent || extractText(node);
       const baseSlug = textToSlug(text);
       let slug = baseSlug;
       if (baseSlug) {
@@ -39,15 +39,7 @@ function renderBuiltinNode(node, key, children, headingSlugs) {
         }
       }
       return /* @__PURE__ */ jsxs(Tag, { id: slug || void 0, className: `rich-heading-${Tag}`, children: [
-        slug && /* @__PURE__ */ jsx(
-          "a",
-          {
-            className: "rich-heading-anchor",
-            "aria-hidden": "true",
-            tabIndex: -1,
-            href: `#${slug}`
-          }
-        ),
+        slug && /* @__PURE__ */ jsx("a", { className: "rich-heading-anchor", tabIndex: 0, href: `#${slug}` }),
         children
       ] }, key);
     }
@@ -80,26 +72,32 @@ function renderBuiltinNode(node, key, children, headingSlugs) {
       return /* @__PURE__ */ jsx("li", { className: cls, value: node.value, children }, key);
     }
     case "link":
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs(
         "a",
         {
           className: "rich-link",
           href: node.url,
-          target: node.target,
-          rel: node.rel,
-          children
+          target: node.target || "_blank",
+          rel: node.rel || "noopener",
+          children: [
+            /* @__PURE__ */ jsx(LinkFavicon, { href: node.url }),
+            children
+          ]
         },
         key
       );
     case "autolink":
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs(
         "a",
         {
           className: "rich-link",
           href: node.url,
           target: "_blank",
-          rel: "noopener noreferrer",
-          children
+          rel: "noopener",
+          children: [
+            /* @__PURE__ */ jsx(LinkFavicon, { href: node.url }),
+            children
+          ]
         },
         key
       );
@@ -295,7 +293,7 @@ function applyBlockId(element, blockId, nodeKey) {
     `${nodeKey}-block-anchor`
   );
 }
-function renderTree(node, editor, editorConfig, headingSlugs, key, blockId) {
+function renderTree(node, editor, editorConfig, headingSlugs, key, blockId, builtinNodeOverrides) {
   const nodeKey = node.getKey ? node.getKey() : key;
   if (typeof node.decorate === "function") {
     try {
@@ -325,18 +323,36 @@ function renderTree(node, editor, editorConfig, headingSlugs, key, blockId) {
           editor,
           editorConfig,
           headingSlugs,
-          `${nodeKey}-${i}`
+          `${nodeKey}-${i}`,
+          void 0,
+          builtinNodeOverrides
         )
       );
     }
   }
+  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(
-    renderBuiltinNode(serialized, nodeKey, children, headingSlugs),
+    renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent),
     blockId,
     nodeKey
   );
 }
-function renderEditorToReact(value, nodes) {
+function renderEditorToReact(value, nodes, builtinNodeOverrides) {
   const editor = createHeadlessEditor({
     nodes,
     theme: editorTheme,
@@ -361,7 +377,8 @@ function renderEditorToReact(value, nodes) {
         editorConfig,
         headingSlugs,
         `ssr-${i}`,
-        rawRootChildren?.[i]?.$?.blockId
+        rawRootChildren?.[i]?.$?.blockId,
+        builtinNodeOverrides
       )
     );
     content = /* @__PURE__ */ jsx(Fragment, { children });
@@ -393,7 +410,8 @@ function renderEditorToReact(value, nodes) {
           nestedEditorConfig,
           headingSlugs,
           `nested-${i}`,
-          nestedRawChildren?.[i]?.$?.blockId
+          nestedRawChildren?.[i]?.$?.blockId,
+          builtinNodeOverrides
         )
       );
       nested = /* @__PURE__ */ jsx(Fragment, { children: ch });
@@ -410,14 +428,14 @@ function RichRenderer({
   style,
   as: Component = "div",
   rendererConfig,
-  extraNodes
+  extraNodes,
+  builtinNodeOverrides
 }) {
   const variantClass = getVariantClass(variant);
-  const nodes = extraNodes ? [...allNodes, ...extraNodes] : allNodes;
-  const { content, footnoteData, renderNestedContent } = renderEditorToReact(
-    value,
-    nodes
-  );
+  const { content, footnoteData, renderNestedContent } = useMemo(() => {
+    const nodes = extraNodes ? [...allNodes, ...extraNodes] : allNodes;
+    return renderEditorToReact(value, nodes, builtinNodeOverrides);
+  }, [builtinNodeOverrides, extraNodes, value]);
   const classes = ["rich-content", variantClass, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(PortalThemeProvider, { className: variantClass, theme, children: /* @__PURE__ */ jsx(ColorSchemeProvider, { colorScheme: theme, children: /* @__PURE__ */ jsx(
     RendererConfigProvider,

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import { ColorScheme, RendererConfig, RichEditorVariant } from '@haklex/rich-editor/static';
 import { Klass, LexicalNode, SerializedEditorState } from 'lexical';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+export type BuiltinNodeRenderer = (node: any, key: string, children: ReactNode[] | null, defaultRenderer: () => ReactNode) => ReactNode;
 export interface RichRendererProps {
     value: SerializedEditorState;
     variant?: RichEditorVariant;
@@ -10,5 +11,6 @@ export interface RichRendererProps {
     as?: keyof React.JSX.IntrinsicElements;
     rendererConfig?: RendererConfig;
     extraNodes?: Array<Klass<LexicalNode>>;
+    builtinNodeOverrides?: Record<string, BuiltinNodeRenderer>;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,cAAc,EACd,iBAAiB,EAClB,MAAM,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,qBAAqB,CAAA;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAA;IACtC,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;CACvC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,cAAc,EACd,iBAAiB,EAClB,MAAM,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,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,CAAA;AAEd,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,qBAAqB,CAAA;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAA;IACtC,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAA;CAC3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-static-renderer",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "Headless SSR engine for Lexical rich content",
   "license": "MIT",
   "type": "module",
@@ -16,8 +16,8 @@
   ],
   "dependencies": {
     "@lexical/headless": "^0.41.0",
-    "@haklex/rich-editor": "0.0.44",
-    "@haklex/rich-style-token": "0.0.44"
+    "@haklex/rich-editor": "0.0.46",
+    "@haklex/rich-style-token": "0.0.46"
   },
   "devDependencies": {
     "@lexical/code": "^0.41.0",