@haklex/rich-static-renderer 0.0.42 → 0.0.44

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;AA+JhD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAmB,EACnB,KAAe,EACf,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAiB,EACrB,cAAc,EACd,UAAU,GACX,EAAE,iBAAiB,2CAmCnB"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"renderBuiltinNode.d.ts","sourceRoot":"","sources":["../../src/engine/renderBuiltinNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAmBtC,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,CAwLX"}
+{"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"}

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { getVariantClass, allNodes, ColorSchemeProvider, RendererConfigProvider, FootnoteDefinitionsProvider, NestedContentRendererProvider, editorTheme } from "@haklex/rich-editor/static";
+import { RendererWrapper, RubyRenderer, 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 { isValidElement, cloneElement, createElement } from "react";
+import { createElement, isValidElement, cloneElement } from "react";
 var tableWrapper = "_1v9yxw30";
 var table = "_1v9yxw31";
 var tableHead = "_1v9yxw32";
@@ -155,6 +155,16 @@ function renderBuiltinNode(node, key, children, headingSlugs) {
     }
     case "spoiler":
       return /* @__PURE__ */ jsx("span", { className: "rich-spoiler", role: "button", tabIndex: 0, children }, key);
+    case "ruby":
+      return createElement(RendererWrapper, {
+        key,
+        rendererKey: "Ruby",
+        defaultRenderer: RubyRenderer,
+        props: {
+          reading: node.reading ?? "",
+          children
+        }
+      });
     case "code":
       return /* @__PURE__ */ jsx("pre", { className: "rich-code-block", children: /* @__PURE__ */ jsx("code", { children }) }, key);
     case "code-highlight":
@@ -270,14 +280,33 @@ function wrapDecoration(serialized, key, decoration) {
       return decoration;
   }
 }
-function renderTree(node, editor, editorConfig, headingSlugs, key) {
+function applyBlockId(element, blockId, nodeKey) {
+  if (!blockId) return element;
+  if (isValidElement(element) && typeof element.type === "string") {
+    return cloneElement(element, { "data-block-id": blockId });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rich-block-anchor",
+      "data-block-id": blockId,
+      children: element
+    },
+    `${nodeKey}-block-anchor`
+  );
+}
+function renderTree(node, editor, editorConfig, headingSlugs, key, blockId) {
   const nodeKey = node.getKey ? node.getKey() : key;
   if (typeof node.decorate === "function") {
     try {
       const decoration = node.decorate(editor, editorConfig);
       if (decoration != null) {
         const serialized2 = node.exportJSON ? node.exportJSON() : {};
-        return wrapDecoration(serialized2, nodeKey, decoration);
+        return applyBlockId(
+          wrapDecoration(serialized2, nodeKey, decoration),
+          blockId,
+          nodeKey
+        );
       }
     } catch {
     }
@@ -301,7 +330,11 @@ function renderTree(node, editor, editorConfig, headingSlugs, key) {
       );
     }
   }
-  return renderBuiltinNode(serialized, nodeKey, children, headingSlugs);
+  return applyBlockId(
+    renderBuiltinNode(serialized, nodeKey, children, headingSlugs),
+    blockId,
+    nodeKey
+  );
 }
 function renderEditorToReact(value, nodes) {
   const editor = createHeadlessEditor({
@@ -316,12 +349,20 @@ function renderEditorToReact(value, nodes) {
   const editorState = editor.parseEditorState(value);
   editor.setEditorState(editorState);
   const footnoteData = preprocessFootnotes(value);
+  const rawRootChildren = value.root?.children;
   let content = null;
   editorState.read(() => {
     const root = $getRoot();
     const headingSlugs = /* @__PURE__ */ new Map();
     const children = root.getChildren().map(
-      (child, i) => renderTree(child, editor, editorConfig, headingSlugs, `ssr-${i}`)
+      (child, i) => renderTree(
+        child,
+        editor,
+        editorConfig,
+        headingSlugs,
+        `ssr-${i}`,
+        rawRootChildren?.[i]?.$?.blockId
+      )
     );
     content = /* @__PURE__ */ jsx(Fragment, { children });
   });
@@ -341,6 +382,7 @@ function renderEditorToReact(value, nodes) {
     const nestedState = nestedEditor.parseEditorState(state);
     nestedEditor.setEditorState(nestedState);
     let nested = null;
+    const nestedRawChildren = state.root?.children;
     nestedState.read(() => {
       const root = $getRoot();
       const headingSlugs = /* @__PURE__ */ new Map();
@@ -350,7 +392,8 @@ function renderEditorToReact(value, nodes) {
           nestedEditor,
           nestedEditorConfig,
           headingSlugs,
-          `nested-${i}`
+          `nested-${i}`,
+          nestedRawChildren?.[i]?.$?.blockId
         )
       );
       nested = /* @__PURE__ */ jsx(Fragment, { children: ch });
@@ -387,7 +430,16 @@ function RichRenderer({
         {
           definitions: footnoteData.definitions,
           displayNumberMap: footnoteData.displayNumberMap,
-          children: /* @__PURE__ */ jsx(NestedContentRendererProvider, { value: renderNestedContent, children: /* @__PURE__ */ jsx(Component, { className: classes, style, "data-theme": theme, children: content }) })
+          children: /* @__PURE__ */ jsx(NestedContentRendererProvider, { value: renderNestedContent, children: /* @__PURE__ */ jsx(
+            Component,
+            {
+              className: classes,
+              style,
+              "data-theme": theme,
+              suppressHydrationWarning: true,
+              children: content
+            }
+          ) })
         }
       )
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-static-renderer",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "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.42",
-    "@haklex/rich-style-token": "0.0.42"
+    "@haklex/rich-editor": "0.0.44",
+    "@haklex/rich-style-token": "0.0.44"
   },
   "devDependencies": {
     "@lexical/code": "^0.41.0",