@roottale/cms-renderer-next 0.59.0 → 0.61.0

package/dist/server.js

@@ -883,6 +883,10 @@ import {
 // src/server/tiptap-node-renderer.tsx
 import { Fragment as Fragment4 } from "react";
 import {
+  cmsLineHeight,
+  cmsParagraphSpacing,
+  cmsImageStyle,
+  cmsImageWidth,
   bindingSrcValue,
   bindingTextValue,
   boundFieldValue,
@@ -937,6 +941,7 @@ function renderEmbedNode(node, key) {
 
 // src/server/tiptap-inline-renderer.tsx
 import {
+  cmsFontSize,
   findInternalContentLinkTokens,
   INTERNAL_CONTENT_LINK_CLASS,
   INTERNAL_CONTENT_LINK_PENDING_ATTR,
@@ -995,10 +1000,12 @@ function applyMark(mark, child) {
     }
     case "textStyle": {
       const color = mark.attrs?.color;
-      if (typeof color !== "string" || color.length === 0) {
-        return /* @__PURE__ */ jsx10(Fragment3, { children: child });
-      }
-      return /* @__PURE__ */ jsx10("span", { style: { color }, children: child });
+      const fontSize = cmsFontSize(mark.attrs?.fontSize);
+      const style = {
+        ...typeof color === "string" && color ? { color } : {},
+        ...fontSize ? { fontSize } : {}
+      };
+      return Object.keys(style).length ? /* @__PURE__ */ jsx10("span", { style, children: child }) : /* @__PURE__ */ jsx10(Fragment3, { children: child });
     }
     case "link": {
       const rawHref = mark.attrs?.href;
@@ -1066,13 +1073,14 @@ function boundContentText(node, fields) {
 }
 function alignStyle(node) {
   const align = node.attrs?.textAlign;
-  if (typeof align !== "string" || align === "" || align === "left") {
-    return void 0;
-  }
-  if (align === "center" || align === "right" || align === "justify") {
-    return { textAlign: align };
-  }
-  return void 0;
+  const lineHeight = cmsLineHeight(node.attrs?.lineHeight);
+  const marginBottom = cmsParagraphSpacing(node.attrs?.paragraphSpacing);
+  const style = {
+    ...align === "left" || align === "center" || align === "right" || align === "justify" ? { textAlign: align } : {},
+    ...lineHeight !== null ? { lineHeight } : {},
+    ...marginBottom !== null ? { marginBottom } : {}
+  };
+  return Object.keys(style).length ? style : void 0;
 }
 function tableCellSpans(node) {
   const colspan = Number(node.attrs?.colspan);
@@ -1135,7 +1143,9 @@ function renderTiptapNode(value, key, context) {
       const title = typeof node.attrs?.title === "string" ? node.attrs.title : void 0;
       const width = typeof node.attrs?.width === "number" && node.attrs.width > 0 ? node.attrs.width : void 0;
       const height = typeof node.attrs?.height === "number" && node.attrs.height > 0 ? node.attrs.height : void 0;
-      return /* @__PURE__ */ jsx11(
+      const caption = typeof node.attrs?.caption === "string" ? node.attrs.caption : "";
+      const layout = cmsImageStyle(node.attrs ?? {});
+      const image = /* @__PURE__ */ jsx11(
         "img",
         {
           src,
@@ -1143,10 +1153,15 @@ function renderTiptapNode(value, key, context) {
           title,
           width,
           height,
+          style: caption ? cmsImageWidth(node.attrs?.displayWidth) ? { width: "100%", maxWidth: "100%", height: "auto" } : void 0 : layout,
           loading: "lazy"
         },
         key
       );
+      return caption ? /* @__PURE__ */ jsxs8("figure", { "data-cms-image": "", style: layout, children: [
+        image,
+        /* @__PURE__ */ jsx11("figcaption", { children: caption })
+      ] }, key) : image;
     }
     case "importedHtml": {
       const rawHtml = node.attrs?.html;
@@ -1714,11 +1729,6 @@ function readEditorialReview(metaJson) {
   }
   return { reviewerName: value.reviewerName, reviewedAt: value.reviewedAt };
 }
-function authorImageRadiusCss(radius) {
-  if (radius === "circle") return "999px";
-  if (radius === "rounded") return "0.875rem";
-  return "0";
-}
 async function lookupPost(input) {
   if (input.previewToken) {
     try {
@@ -1821,8 +1831,7 @@ async function RootTaleBlogPost(props) {
   const authorImageUrl = post.authorImageUrl;
   const authorImageAlt = `${authorName ?? ""} \uD504\uB85C\uD544 \uC0AC\uC9C4`.trim();
   const authorImageStyle = {
-    borderRadius: authorImageRadiusCss(display.authorProfileImageRadius),
-    objectPosition: `${display.authorProfileImagePositionX}% ${display.authorProfileImagePositionY}%`
+    objectPosition: `${post.authorImagePositionX ?? display.authorProfileImagePositionX}% ${post.authorImagePositionY ?? display.authorProfileImagePositionY}%`
   };
   const showAuthorCard = display.showAuthorCard && Boolean(authorName);
   const editorialReview = readEditorialReview(post.metaJson);
@@ -1911,6 +1920,7 @@ async function RootTaleBlogPost(props) {
           }
         ),
         renderPostPattern(footerPattern, POST_FOOTER_PATTERN_SLOT2, { apiKey, baseUrl }),
+        footerPattern ? null : renderPostCta(blogSettings.postCta),
         showAuthorCard && authorName ? /* @__PURE__ */ jsxs13("section", { className: "rt-cms-author-card", "aria-label": "\uC791\uC131\uC790", children: [
           authorImageUrl ? /* @__PURE__ */ jsx18(
             "img",
@@ -1932,7 +1942,6 @@ async function RootTaleBlogPost(props) {
           editorPicked.length > 0 ? editorPicked : relatedCardsFromPosts(autoRelated, relatedHref),
           relatedPostsTitle
         ),
-        renderPostCta(blogSettings.postCta),
         renderFaqJsonLd(post.bodyJson)
       ]
     }