@haklex/rich-static-renderer 0.0.65 → 0.0.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +30 -141
  2. package/dist/RichRenderer.d.ts.map +1 -1
  3. package/dist/engine/renderBuiltinNode.d.ts.map +1 -1
  4. package/dist/engine/renderTextNode.d.ts.map +1 -1
  5. package/dist/index.mjs +85 -138
  6. package/dist/types.d.ts +7 -7
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +20 -15
package/README.md CHANGED
@@ -1,167 +1,56 @@
1
1
  # @haklex/rich-static-renderer
2
2
 
3
- Lexical 富文本的只读渲染引擎（Headless + React 输出）。
4
- 用于把 `SerializedEditorState` 渲染成可展示的 React 内容。
3
+ SSR-ready renderer engine for Lexical rich content. Renders Lexical editor state JSON to React without loading the full editor runtime.
5
4
 
6
- ## 包定位
7
-
8
- - 不提供编辑能力
9
- - 适合文章详情页、评论展示、SSR 输出
10
- - 默认支持 `@haklex/rich-editor` 内置节点（`allNodes`）
11
-
12
- ## 安装
5
+ ## Installation
13
6
 
14
7
  ```bash
15
- pnpm add @haklex/rich-static-renderer @haklex/rich-editor lexical react react-dom
16
- ```
17
-
18
- ## 快速开始
19
-
20
- ```tsx
21
- import { RichRenderer } from '@haklex/rich-static-renderer'
22
- import type { SerializedEditorState } from 'lexical'
23
- import '@haklex/rich-editor/style.css'
24
-
25
- export function Article({
26
- value,
27
- }: {
28
- value: SerializedEditorState
29
- }) {
30
- return <RichRenderer value={value} variant="article" theme="light" />
31
- }
32
- ```
33
-
34
- ## API
35
-
36
- ```ts
37
- interface RichRendererProps {
38
- value: SerializedEditorState
39
- variant?: 'article' | 'comment' | 'note'
40
- theme?: 'light' | 'dark'
41
- className?: string
42
- style?: CSSProperties
43
- as?: keyof React.JSX.IntrinsicElements
44
- rendererConfig?: RendererConfig
45
- extraNodes?: Array<Klass<LexicalNode>>
46
- builtinNodeOverrides?: Record<string, BuiltinNodeRenderer>
47
- }
48
-
49
- type BuiltinNodeRenderer = (
50
- node: any,
51
- key: string,
52
- children: ReactNode[] | null,
53
- defaultRenderer: () => ReactNode,
54
- ) => ReactNode
8
+ pnpm add @haklex/rich-static-renderer
55
9
  ```
56
10
 
57
- 字段说明：
11
+ ## Peer Dependencies
58
12
 
59
- - `value`：Lexical JSON（必填）
60
- - `as`：渲染容器标签，默认 `div`
61
- - `rendererConfig`：覆写某些节点的渲染组件（Image/CodeBlock/...）
62
- - `extraNodes`：注册扩展节点（如 Tldraw、Embed、Gallery、CodeSnippet）
63
- - `builtinNodeOverrides`：覆写内置节点的渲染（paragraph/heading/link/...），按 `node.type` 匹配
13
+ | Package | Version |
14
+ | --- | --- |
15
+ | `@lexical/code` | `^0.41.0` |
16
+ | `@lexical/extension` | `^0.41.0` |
17
+ | `@lexical/link` | `^0.41.0` |
18
+ | `@lexical/list` | `^0.41.0` |
19
+ | `@lexical/rich-text` | `^0.41.0` |
20
+ | `@lexical/table` | `^0.41.0` |
21
+ | `lexical` | `^0.41.0` |
22
+ | `react` | `>=19` |
23
+ | `react-dom` | `>=19` |
64
24
 
65
- ## 与增强渲染器一起用
25
+ ## Usage
66
26
 
67
27
  ```tsx
68
28
  import { RichRenderer } from '@haklex/rich-static-renderer'
69
- import {
70
- codeSnippetNodes,
71
- embedNodes,
72
- enhancedRendererConfig,
73
- galleryNodes,
74
- TldrawNode,
75
- } from '@haklex/rich-renderers'
76
-
77
29
  import '@haklex/rich-editor/style.css'
78
- import '@haklex/rich-renderers/style.css'
79
- import '@haklex/rich-ext-code-snippet/style.css'
80
- import '@haklex/rich-ext-embed/style.css'
81
- import 'katex/dist/katex.min.css'
82
- import 'tldraw/tldraw.css'
83
-
84
- const extraNodes = [
85
- TldrawNode,
86
- ...embedNodes,
87
- ...galleryNodes,
88
- ...codeSnippetNodes,
89
- ]
90
-
91
- <RichRenderer
92
- value={value}
93
- rendererConfig={enhancedRendererConfig}
94
- extraNodes={extraNodes}
95
- />
96
- ```
97
-
98
- ## 覆写内置节点渲染
99
30
 
100
- 通过 `builtinNodeOverrides` 可按 `node.type` 覆写 paragraph、heading、link 等内置节点的渲染逻辑。回调提供 `defaultRenderer` 用于回退默认渲染。
101
-
102
- ```tsx
103
- <RichRenderer
104
- value={value}
105
- builtinNodeOverrides={{
106
- link: (node, key, children) => (
107
- <a key={key} href={node.url} className="custom-link" target="_blank">
108
- {children}
109
- </a>
110
- ),
111
- heading: (node, key, children, defaultRenderer) => {
112
- // 仅覆写 h1，其余回退默认
113
- if (node.tag === 'h1') {
114
- return <h1 key={key} className="custom-h1">{children}</h1>
115
- }
116
- return defaultRenderer()
117
- },
118
- }}
119
- />
31
+ <RichRenderer value={editorState} variant="article" theme="light" />
120
32
  ```
121
33
 
122
- 支持的 type：`root`、`paragraph`、`heading`、`quote`、`list`、`listitem`、`link`、`autolink`、`horizontalrule`、`table`、`tablerow`、`tablecell`、`details`、`spoiler`、`ruby`、`code`、`code-highlight`、`linebreak`、`tab`。
123
-
124
- ## 渲染行为说明
125
-
126
- - 内部使用 `@lexical/headless` 构建只读 editor，再将节点树转为 React
127
- - 标题会自动生成 slug 与锚点（重复标题自动去重）
128
- - 脚注会先预处理编号，再统一渲染引用与定义
129
- - `Alert/Banner/Grid` 等嵌套内容通过 `NestedContentRendererProvider` 递归渲染
130
-
131
- ## 设计模式
132
-
133
- ### 1) 节点注册与渲染器覆写解耦
134
-
135
- - 节点协议（JSON 结构）由 Node class 决定
136
- - 显示层由 `rendererConfig` 决定
137
- - 扩展节点只需通过 `extraNodes` 注册，不要求侵入核心渲染器
34
+ The `value` prop accepts a Lexical `SerializedEditorState` JSON object. The renderer parses it into React elements without instantiating a Lexical editor, making it suitable for SSR and static rendering.
138
35
 
139
- ### 2) Static / Edit 拆分协作
36
+ ## Exports
140
37
 
141
- `@haklex/rich-static-renderer` 只消费静态节点。
142
- 编辑态重依赖（Popover、Dialog 等）应该放在 edit 节点/编辑包里，不进入只读包。
38
+ ### Components
143
39
 
144
- ## 常见问题
40
+ | Export | Description |
41
+ | --- | --- |
42
+ | `RichRenderer` | Main static renderer component |
145
43
 
146
- ### Q1: 为什么有些节点不显示？
44
+ ### Types
147
45
 
148
- 通常是忘了注册扩展节点（`extraNodes`），例如 `embed`、`tldraw`、`gallery`、`code-snippet`。
46
+ | Export | Description |
47
+ | --- | --- |
48
+ | `RichRendererProps` | Props for `RichRenderer` |
49
+ | `BuiltinNodeRenderer` | Type for builtin node renderer functions |
149
50
 
150
- ### Q2: 为什么公式样式不对？
51
+ ## Part of Haklex
151
52
 
152
- 需要手动引入：
153
-
154
- ```ts
155
- import 'katex/dist/katex.min.css'
156
- ```
157
-
158
- ### Q3: 为什么 tldraw 画布样式错乱？
159
-
160
- 需要手动引入：
161
-
162
- ```ts
163
- import 'tldraw/tldraw.css'
164
- ```
53
+ This package is part of the [Haklex](../../README.md) rich editor ecosystem.
165
54
 
166
55
  ## License
167
56
 
package/dist/RichRenderer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"version":3,"file":"RichRenderer.d.ts","sourceRoot":"","sources":["../src/RichRenderer.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAuB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwMtE,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,2CAiCnB"}
package/dist/engine/renderBuiltinNode.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"renderBuiltinNode.d.ts","sourceRoot":"","sources":["../../src/engine/renderBuiltinNode.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAsBrD,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,CAiMX"}
1
+ {"version":3,"file":"renderBuiltinNode.d.ts","sourceRoot":"","sources":["../../src/engine/renderBuiltinNode.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBtD,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,CAyLX"}
package/dist/engine/renderTextNode.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"renderTextNode.d.ts","sourceRoot":"","sources":["../../src/engine/renderTextNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AA6BrD,wBAAgB,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAuBhE"}
1
+ {"version":3,"file":"renderTextNode.d.ts","sourceRoot":"","sources":["../../src/engine/renderTextNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AA2BtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAuBhE"}
package/dist/index.mjs CHANGED
@@ -10,7 +10,7 @@ var table = "_1v9yxw31";
10
10
  var tableHead = "_1v9yxw32";
11
11
  var tableCell = "_1v9yxw33";
12
12
  function textToSlug(text) {
13
- return text.toLowerCase().trim().replaceAll(/[^\w\s\u3000-\u9FFF\uAC00-\uD7AF\uFF00-\uFFEF-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
13
+ return text.toLowerCase().trim().replaceAll(/[^\s\w\u3000-\u9FFF\uAC00-\uD7AF\uFF00-\uFFEF-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
14
14
  }
15
15
  function extractText(node) {
16
16
  if (node.text) return node.text;
@@ -19,8 +19,9 @@ function extractText(node) {
19
19
  }
20
20
  function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
21
21
  switch (node.type) {
22
- case "root":
22
+ case "root": {
23
23
  return /* @__PURE__ */ jsx(Fragment, { children });
24
+ }
24
25
  case "paragraph": {
25
26
  const align = node.format ? { textAlign: node.format } : void 0;
26
27
  return /* @__PURE__ */ jsx("p", { className: "rich-paragraph", style: align, children }, key);
@@ -39,25 +40,18 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
39
40
  headingSlugs.set(baseSlug, 1);
40
41
  }
41
42
  }
42
- return /* @__PURE__ */ jsxs(Tag, { id: slug || void 0, className: `rich-heading-${Tag}`, children: [
43
- slug && /* @__PURE__ */ jsx("a", { className: "rich-heading-anchor", tabIndex: 0, href: `#${slug}`, children: /* @__PURE__ */ jsx(Link, { size: 14, strokeWidth: 2, "aria-hidden": true }) }),
43
+ return /* @__PURE__ */ jsxs(Tag, { className: `rich-heading-${Tag}`, id: slug || void 0, children: [
44
+ slug && /* @__PURE__ */ jsx("a", { className: "rich-heading-anchor", href: `#${slug}`, tabIndex: 0, children: /* @__PURE__ */ jsx(Link, { "aria-hidden": true, size: 14, strokeWidth: 2 }) }),
44
45
  children
45
46
  ] }, key);
46
47
  }
47
- case "quote":
48
+ case "quote": {
48
49
  return /* @__PURE__ */ jsx("blockquote", { className: "rich-quote", children }, key);
50
+ }
49
51
  case "list": {
50
52
  const Tag = node.listType === "number" ? "ol" : "ul";
51
53
  const cls = node.listType === "number" ? "rich-list-ol" : node.listType === "check" ? "rich-checklist rich-list-ul" : "rich-list-ul";
52
- return /* @__PURE__ */ jsx(
53
- Tag,
54
- {
55
- className: cls,
56
- start: node.start !== 1 ? node.start : void 0,
57
- children
58
- },
59
- key
60
- );
54
+ return /* @__PURE__ */ jsx(Tag, { className: cls, start: node.start !== 1 ? node.start : void 0, children }, key);
61
55
  }
62
56
  case "listitem": {
63
57
  const isChecklist = node.checked !== void 0;
@@ -72,14 +66,14 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
72
66
  }
73
67
  return /* @__PURE__ */ jsx("li", { className: cls, value: node.value, children }, key);
74
68
  }
75
- case "link":
69
+ case "link": {
76
70
  return /* @__PURE__ */ jsxs(
77
71
  "a",
78
72
  {
79
73
  className: "rich-link",
80
74
  href: node.url,
81
- target: node.target || "_blank",
82
75
  rel: node.rel || "noopener",
76
+ target: node.target || "_blank",
83
77
  children: [
84
78
  /* @__PURE__ */ jsx(LinkFavicon, { href: node.url }),
85
79
  children
@@ -87,74 +81,54 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
87
81
  },
88
82
  key
89
83
  );
90
- case "autolink":
91
- return /* @__PURE__ */ jsxs(
92
- "a",
93
- {
94
- className: "rich-link",
95
- href: node.url,
96
- target: "_blank",
97
- rel: "noopener",
98
- children: [
99
- /* @__PURE__ */ jsx(LinkFavicon, { href: node.url }),
100
- children
101
- ]
102
- },
103
- key
104
- );
105
- case "horizontalrule":
84
+ }
85
+ case "autolink": {
86
+ return /* @__PURE__ */ jsxs("a", { className: "rich-link", href: node.url, rel: "noopener", target: "_blank", children: [
87
+ /* @__PURE__ */ jsx(LinkFavicon, { href: node.url }),
88
+ children
89
+ ] }, key);
90
+ }
91
+ case "horizontalrule": {
106
92
  return /* @__PURE__ */ jsx("hr", { className: "rich-hr" }, key);
107
- case "table":
93
+ }
94
+ case "table": {
108
95
  return /* @__PURE__ */ jsx("div", { className: tableWrapper, children: /* @__PURE__ */ jsx("table", { className: table, children }) }, key);
109
- case "tablerow":
96
+ }
97
+ case "tablerow": {
110
98
  return /* @__PURE__ */ jsx("tr", { children }, key);
99
+ }
111
100
  case "tablecell": {
112
101
  const CellTag = node.headerState ? "th" : "td";
113
102
  const cls = node.headerState ? tableHead : tableCell;
114
- return /* @__PURE__ */ jsx(
115
- CellTag,
116
- {
117
- className: cls,
118
- colSpan: node.colSpan > 1 ? node.colSpan : void 0,
119
- children
120
- },
121
- key
122
- );
103
+ return /* @__PURE__ */ jsx(CellTag, { className: cls, colSpan: node.colSpan > 1 ? node.colSpan : void 0, children }, key);
123
104
  }
124
105
  case "details": {
125
106
  const summary = node.summary || "";
126
- return /* @__PURE__ */ jsxs(
127
- "details",
128
- {
129
- className: "rich-details",
130
- open: node.open || void 0,
131
- children: [
132
- /* @__PURE__ */ jsxs("summary", { className: "rich-details-summary", children: [
133
- /* @__PURE__ */ jsx("span", { className: "rich-details-summary-text", children: summary }),
134
- /* @__PURE__ */ jsx("span", { className: "rich-details-chevron", children: /* @__PURE__ */ jsx(
135
- "svg",
136
- {
137
- width: "20",
138
- height: "20",
139
- viewBox: "0 0 20 20",
140
- fill: "none",
141
- stroke: "currentColor",
142
- strokeWidth: "1.5",
143
- strokeLinecap: "round",
144
- strokeLinejoin: "round",
145
- children: /* @__PURE__ */ jsx("path", { d: "M6 8L10 12L14 8" })
146
- }
147
- ) })
148
- ] }),
149
- /* @__PURE__ */ jsx("div", { className: "rich-details-content", children })
150
- ]
151
- },
152
- key
153
- );
107
+ return /* @__PURE__ */ jsxs("details", { className: "rich-details", open: node.open || void 0, children: [
108
+ /* @__PURE__ */ jsxs("summary", { className: "rich-details-summary", children: [
109
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "rich-details-chevron", children: /* @__PURE__ */ jsx(
110
+ "svg",
111
+ {
112
+ fill: "none",
113
+ height: "20",
114
+ stroke: "currentColor",
115
+ strokeLinecap: "round",
116
+ strokeLinejoin: "round",
117
+ strokeWidth: "1.5",
118
+ viewBox: "0 0 20 20",
119
+ width: "20",
120
+ children: /* @__PURE__ */ jsx("path", { d: "M8 6L12 10L8 14" })
121
+ }
122
+ ) }),
123
+ /* @__PURE__ */ jsx("span", { className: "rich-details-summary-text", children: summary })
124
+ ] }),
125
+ /* @__PURE__ */ jsx("div", { className: "rich-details-content", children })
126
+ ] }, key);
154
127
  }
155
- case "spoiler":
128
+ case "spoiler": {
156
129
  return /* @__PURE__ */ jsx("span", { className: "rich-spoiler", role: "button", tabIndex: 0, children }, key);
157
- case "ruby":
130
+ }
131
+ case "ruby": {
158
132
  return createElement(RendererWrapper, {
159
133
  key,
160
134
  rendererKey: "Ruby",
@@ -164,16 +138,22 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
164
138
  children
165
139
  }
166
140
  });
167
- case "code":
141
+ }
142
+ case "code": {
168
143
  return /* @__PURE__ */ jsx("pre", { className: "rich-code-block", children: /* @__PURE__ */ jsx("code", { children }) }, key);
169
- case "code-highlight":
144
+ }
145
+ case "code-highlight": {
170
146
  return /* @__PURE__ */ jsx("span", { children: node.text }, key);
171
- case "linebreak":
147
+ }
148
+ case "linebreak": {
172
149
  return /* @__PURE__ */ jsx("br", {}, key);
173
- case "tab":
150
+ }
151
+ case "tab": {
174
152
  return /* @__PURE__ */ jsx("span", { children: " " }, key);
175
- default:
153
+ }
154
+ default: {
176
155
  return null;
156
+ }
177
157
  }
178
158
  }
179
159
  const FORMAT_FLAGS = [
@@ -194,10 +174,7 @@ function parseCSSText(cssText) {
194
174
  const prop = part.slice(0, colonIndex).trim();
195
175
  const value = part.slice(colonIndex + 1).trim();
196
176
  if (!prop || !value) continue;
197
- const camelProp = prop.replaceAll(
198
- /-([a-z])/g,
199
- (_, c) => c.toUpperCase()
200
- );
177
+ const camelProp = prop.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
201
178
  style[camelProp] = value;
202
179
  }
203
180
  return style;
@@ -254,29 +231,29 @@ function preprocessFootnotes(state) {
254
231
  }
255
232
  function wrapDecoration(serialized, key, decoration) {
256
233
  switch (serialized.type) {
257
- case "alert-quote":
234
+ case "alert-quote": {
258
235
  return createElement(
259
236
  "div",
260
237
  { key, className: `rich-alert rich-alert-${serialized.alertType}` },
261
238
  decoration
262
239
  );
263
- case "banner":
240
+ }
241
+ case "banner": {
264
242
  return createElement(
265
243
  "div",
266
244
  { key, className: `rich-banner rich-banner-${serialized.bannerType}` },
267
245
  decoration
268
246
  );
269
- case "grid-container":
270
- return createElement(
271
- "div",
272
- { key, className: "rich-grid-container" },
273
- decoration
274
- );
275
- default:
247
+ }
248
+ case "grid-container": {
249
+ return createElement("div", { key, className: "rich-grid-container" }, decoration);
250
+ }
251
+ default: {
276
252
  if (isValidElement(decoration)) {
277
253
  return cloneElement(decoration, { key });
278
254
  }
279
255
  return decoration;
256
+ }
280
257
  }
281
258
  }
282
259
  function applyBlockId(element, blockId, nodeKey) {
@@ -284,15 +261,7 @@ function applyBlockId(element, blockId, nodeKey) {
284
261
  if (isValidElement(element) && typeof element.type === "string") {
285
262
  return cloneElement(element, { "data-block-id": blockId });
286
263
  }
287
- return /* @__PURE__ */ jsx(
288
- "div",
289
- {
290
- className: "rich-block-anchor",
291
- "data-block-id": blockId,
292
- children: element
293
- },
294
- `${nodeKey}-block-anchor`
295
- );
264
+ return /* @__PURE__ */ jsx("div", { className: "rich-block-anchor", "data-block-id": blockId, children: element }, `${nodeKey}-block-anchor`);
296
265
  }
297
266
  function renderTree(node, editor, editorConfig, headingSlugs, key, blockId, builtinNodeOverrides) {
298
267
  const nodeKey = node.getKey ? node.getKey() : key;
@@ -301,11 +270,7 @@ function renderTree(node, editor, editorConfig, headingSlugs, key, blockId, buil
301
270
  const decoration = node.decorate(editor, editorConfig);
302
271
  if (decoration != null) {
303
272
  const serialized2 = node.exportJSON ? node.exportJSON() : {};
304
- return applyBlockId(
305
- wrapDecoration(serialized2, nodeKey, decoration),
306
- blockId,
307
- nodeKey
308
- );
273
+ return applyBlockId(wrapDecoration(serialized2, nodeKey, decoration), blockId, nodeKey);
309
274
  }
310
275
  } catch {
311
276
  }
@@ -334,18 +299,8 @@ function renderTree(node, editor, editorConfig, headingSlugs, key, blockId, buil
334
299
  const textContent = node.getTextContent ? node.getTextContent() : void 0;
335
300
  const override = builtinNodeOverrides?.[serialized.type];
336
301
  if (override) {
337
- const defaultRenderer = () => renderBuiltinNode(
338
- serialized,
339
- nodeKey,
340
- children,
341
- headingSlugs,
342
- textContent
343
- );
344
- return applyBlockId(
345
- override(serialized, nodeKey, children, defaultRenderer),
346
- blockId,
347
- nodeKey
348
- );
302
+ const defaultRenderer = () => renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent);
303
+ return applyBlockId(override(serialized, nodeKey, children, defaultRenderer), blockId, nodeKey);
349
304
  }
350
305
  return applyBlockId(
351
306
  renderBuiltinNode(serialized, nodeKey, children, headingSlugs, textContent),
@@ -438,31 +393,23 @@ function RichRenderer({
438
393
  return renderEditorToReact(value, nodes, builtinNodeOverrides);
439
394
  }, [builtinNodeOverrides, extraNodes, value]);
440
395
  const classes = ["rich-content", variantClass, className].filter(Boolean).join(" ");
441
- return /* @__PURE__ */ jsx(PortalThemeProvider, { className: variantClass, theme, children: /* @__PURE__ */ jsx(ColorSchemeProvider, { colorScheme: theme, children: /* @__PURE__ */ jsx(
442
- RendererConfigProvider,
396
+ return /* @__PURE__ */ jsx(PortalThemeProvider, { className: variantClass, theme, children: /* @__PURE__ */ jsx(ColorSchemeProvider, { colorScheme: theme, children: /* @__PURE__ */ jsx(RendererConfigProvider, { config: rendererConfig, mode: "renderer", variant, children: /* @__PURE__ */ jsx(
397
+ FootnoteDefinitionsProvider,
443
398
  {
444
- config: rendererConfig,
445
- mode: "renderer",
446
- variant,
447
- children: /* @__PURE__ */ jsx(
448
- FootnoteDefinitionsProvider,
399
+ definitions: footnoteData.definitions,
400
+ displayNumberMap: footnoteData.displayNumberMap,
401
+ children: /* @__PURE__ */ jsx(NestedContentRendererProvider, { value: renderNestedContent, children: /* @__PURE__ */ jsx(
402
+ Component,
449
403
  {
450
- definitions: footnoteData.definitions,
451
- displayNumberMap: footnoteData.displayNumberMap,
452
- children: /* @__PURE__ */ jsx(NestedContentRendererProvider, { value: renderNestedContent, children: /* @__PURE__ */ jsx(
453
- Component,
454
- {
455
- className: classes,
456
- style,
457
- "data-theme": theme,
458
- suppressHydrationWarning: true,
459
- children: content
460
- }
461
- ) })
404
+ suppressHydrationWarning: true,
405
+ className: classes,
406
+ "data-theme": theme,
407
+ style,
408
+ children: content
462
409
  }
463
- )
410
+ ) })
464
411
  }
465
- ) }) });
412
+ ) }) }) });
466
413
  }
467
414
  export {
468
415
  RichRenderer
package/dist/types.d.ts CHANGED
@@ -3,14 +3,14 @@ import { Klass, LexicalNode, SerializedEditorState } from 'lexical';
3
3
  import { CSSProperties, ReactNode } from 'react';
4
4
  export type BuiltinNodeRenderer = (node: any, key: string, children: ReactNode[] | null, defaultRenderer: () => ReactNode) => ReactNode;
5
5
  export interface RichRendererProps {
6
- value: SerializedEditorState;
7
- variant?: RichEditorVariant;
8
- theme?: ColorScheme;
9
- className?: string;
10
- style?: CSSProperties;
11
6
  as?: keyof React.JSX.IntrinsicElements;
12
- rendererConfig?: RendererConfig;
13
- extraNodes?: Array<Klass<LexicalNode>>;
14
7
  builtinNodeOverrides?: Record<string, BuiltinNodeRenderer>;
8
+ className?: string;
9
+ extraNodes?: Array<Klass<LexicalNode>>;
10
+ rendererConfig?: RendererConfig;
11
+ style?: CSSProperties;
12
+ theme?: ColorScheme;
13
+ value: SerializedEditorState;
14
+ variant?: RichEditorVariant;
15
15
  }
16
16
  //# sourceMappingURL=types.d.ts.map
package/dist/types.d.ts.map CHANGED
@@ -1 +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,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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/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,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 CHANGED
@@ -1,9 +1,14 @@
1
1
  {
2
2
  "name": "@haklex/rich-static-renderer",
3
- "type": "module",
4
- "version": "0.0.65",
3
+ "version": "0.0.67",
5
4
  "description": "Headless SSR engine for Lexical rich content",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/Innei/haklex.git",
8
+ "directory": "packages/rich-static-renderer"
9
+ },
6
10
  "license": "MIT",
11
+ "type": "module",
7
12
  "exports": {
8
13
  ".": {
9
14
  "import": "./dist/index.mjs",
@@ -14,22 +19,11 @@
14
19
  "files": [
15
20
  "dist"
16
21
  ],
17
- "peerDependencies": {
18
- "@lexical/code": "^0.41.0",
19
- "@lexical/extension": "^0.41.0",
20
- "@lexical/link": "^0.41.0",
21
- "@lexical/list": "^0.41.0",
22
- "@lexical/rich-text": "^0.41.0",
23
- "@lexical/table": "^0.41.0",
24
- "lexical": "^0.41.0",
25
- "react": ">=19",
26
- "react-dom": ">=19"
27
- },
28
22
  "dependencies": {
29
23
  "@lexical/headless": "^0.41.0",
30
24
  "lucide-react": "^0.577.0",
31
- "@haklex/rich-style-token": "0.0.65",
32
- "@haklex/rich-editor": "0.0.65"
25
+ "@haklex/rich-style-token": "0.0.67",
26
+ "@haklex/rich-editor": "0.0.67"
33
27
  },
34
28
  "devDependencies": {
35
29
  "@lexical/code": "^0.41.0",
@@ -48,6 +42,17 @@
48
42
  "vite": "^7.3.1",
49
43
  "vite-plugin-dts": "^4.5.4"
50
44
  },
45
+ "peerDependencies": {
46
+ "@lexical/code": "^0.41.0",
47
+ "@lexical/extension": "^0.41.0",
48
+ "@lexical/link": "^0.41.0",
49
+ "@lexical/list": "^0.41.0",
50
+ "@lexical/rich-text": "^0.41.0",
51
+ "@lexical/table": "^0.41.0",
52
+ "lexical": "^0.41.0",
53
+ "react": ">=19",
54
+ "react-dom": ">=19"
55
+ },
51
56
  "publishConfig": {
52
57
  "access": "public"
53
58
  },