@cntrl-site/sdk-nextjs 0.0.2 → 0.0.5

package/lib/components/Page.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const html_react_parser_1 = __importDefault(require("html-react-parser"));
+const head_1 = __importDefault(require("next/head"));
+const Article_1 = require("./Article");
+const Page = ({ article, project, meta }) => {
+    const googleFonts = (0, html_react_parser_1.default)(project.fonts.google);
+    const adobeFonts = (0, html_react_parser_1.default)(project.fonts.adobe);
+    const parsedFonts = {
+        ...(typeof googleFonts === 'object' ? googleFonts : {}),
+        ...(typeof adobeFonts === 'object' ? adobeFonts : {})
+    };
+    const customFonts = project.fonts.custom;
+    const htmlHead = (0, html_react_parser_1.default)(project.html.head);
+    const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
+    const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: meta.keywords }), (0, jsx_runtime_1.jsx)("meta", { property: "og:url", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: meta.favicon }), customFonts.length > 0 && ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+                            __html: customFonts.map((font) => (`
+                @font-face {
+                  font-family: ${font.name};
+                  font-weight: ${font.weight};
+                  src: ${font.files.map(file => `url('${file.url}') format('${file.type}')`).join(', ')};
+                }
+              `)).join('\n')
+                        } })), Object.values(parsedFonts).map((value, i) => {
+                        if (!value)
+                            return undefined;
+                        const rel = value?.rel || value.props?.rel;
+                        const href = value?.href || value.props?.href;
+                        if (!rel || !href)
+                            return undefined;
+                        return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, i));
+                    }), htmlHead] }), afterBodyOpen, (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, layouts: project.layouts }), beforeBodyClose] }));
+};
+exports.Page = Page;

package/lib/components/items/RichTextItem.js

@@ -11,6 +11,6 @@ const RichTextConverter_1 = require("../../utils/RichTextConverter");
 const richTextConv = new RichTextConverter_1.RichTextConverter();
 const RichTextItem = ({ item, layouts }) => {
     const [content, styles] = richTextConv.toHtml(item, layouts);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "rich-text", children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "rich-text", style: { whiteSpace: 'pre-wrap' }, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.RichTextConverter = void 0;
+exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter = void 0;
 var RichTextConverter_1 = require("./utils/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
+var Page_1 = require("./components/Page");
+Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });
 var Article_1 = require("./components/Article");
 Object.defineProperty(exports, "Article", { enumerable: true, get: function () { return Article_1.Article; } });
 var Section_1 = require("./components/Section");

package/lib/utils/RichTextConverter.js

@@ -16,12 +16,24 @@ class RichTextConverter {
             rec[layout.id] = [];
             return rec;
         }, {});
+        let currentLineHeight = layouts.reduce((rec, layout) => {
+            const styles = (0, core_1.getClosestLayoutValue)(richText.layoutParams, layouts, layout.id)?.styles;
+            rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
+            return rec;
+        }, {});
         for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
             const block = blocks[blockIndex];
             const content = text.slice(block.start, block.end);
             const entities = block.entities.sort((a, b) => a.start - b.start) ?? [];
             if (content.length === 0) {
-                root.push((0, jsx_runtime_1.jsx)("div", { style: { lineHeight: 0 }, children: (0, jsx_runtime_1.jsx)("br", {}) }));
+                root.push((0, jsx_runtime_1.jsx)("div", { className: `rt_${richText.id}_br_${blockIndex}`, children: (0, jsx_runtime_1.jsx)("br", {}) }));
+                layouts.forEach(l => {
+                    const lh = RichTextConverter.fromDraftToInline({
+                        name: 'LINEHEIGHT',
+                        value: currentLineHeight[l.id]
+                    });
+                    styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
+                });
                 continue;
             }
             const newStylesGroup = layouts.map(({ id: layoutId }) => {
@@ -34,7 +46,7 @@ class RichTextConverter {
                     styles: this.normalizeStyles(styles, entities)
                 });
             });
-            const sameLayouts = groupBy(newStylesGroup, (item) => RichTextConverter.serializeRanges(item.styles ?? []));
+            const sameLayouts = groupBy(newStylesGroup, (item) => this.serializeRanges(item.styles ?? []));
             for (const group of Object.values(sameLayouts)) {
                 const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
                 const kids = [];
@@ -82,6 +94,10 @@ class RichTextConverter {
                         if (!entitiesGroup.stylesGroup)
                             continue;
                         for (const styleGroup of entitiesGroup.stylesGroup) {
+                            const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
+                            if (lineHeight?.value) {
+                                currentLineHeight[item.layout] = lineHeight.value;
+                            }
                             styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
                   ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
@@ -103,7 +119,7 @@ class RichTextConverter {
             styles
         ];
     }
-    static serializeRanges(ranges) {
+    serializeRanges(ranges) {
         return ranges.map(r => `${r.start},${r.end}`).join(' ');
     }
     normalizeStyles(styles, entities) {
@@ -179,6 +195,9 @@ class RichTextConverter {
             'TEXTDECORATION': { 'text-decoration': value }
         };
         const css = map[name];
+        if (!css) {
+            return '';
+        }
         return Object.entries(css).filter(([, value]) => !!value).map(([prop, value]) => `${prop}: ${value};`).join('\n');
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",

package/src/components/Page.tsx

@@ -10,7 +10,7 @@ interface Props {
   meta: TMeta;
 }
 
-const Page: FC<Props> = ({ article, project, meta }) => {
+export const Page: FC<Props> = ({ article, project, meta }) => {
   const googleFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.google);
   const adobeFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.adobe);
   const parsedFonts = {
@@ -44,11 +44,10 @@ const Page: FC<Props> = ({ article, project, meta }) => {
             }}
           />
         )}
-        {project.fonts.adobe}
         {Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value, i) => {
           if (!value) return undefined;
-          const rel = value.props?.rel;
-          const href = value.props?.href;
+          const rel = value?.rel || value.props?.rel;
+          const href = value?.href || value.props?.href;
           if (!rel || !href) return undefined;
           return (
             <link key={i} rel={rel} href={href} />
@@ -63,5 +62,3 @@ const Page: FC<Props> = ({ article, project, meta }) => {
     </>
   );
 };
-
-export default Page;

package/src/components/items/RichTextItem.tsx

@@ -11,7 +11,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, layouts }) =>
   const [content, styles] = richTextConv.toHtml(item, layouts);
   return (
     <>
-      <div className="rich-text">{content}</div>
+      <div className="rich-text" style={{ whiteSpace: 'pre-wrap' }}>{content}</div>
       <JSXStyle id={item.id}>
         {styles}
       </JSXStyle>

package/src/index.ts

@@ -1,5 +1,6 @@
 export { RichTextConverter } from './utils/RichTextConverter';
 
+export { Page } from './components/Page';
 export { Article } from './components/Article';
 export { Section } from './components/Section';
 export { Item } from './components/Item';

package/src/utils/RichTextConverter.tsx

@@ -44,13 +44,25 @@ export class RichTextConverter {
       rec[layout.id] = [];
       return rec;
     }, {});
+    let currentLineHeight = layouts.reduce<Record<string, string>>((rec, layout) => {
+      const styles = getClosestLayoutValue(richText.layoutParams, layouts, layout.id)?.styles;
+      rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
+      return rec;
+    }, {});
 
     for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
       const block = blocks[blockIndex];
       const content = text.slice(block.start, block.end);
       const entities = block.entities!.sort((a, b) => a.start - b.start) ?? [];
       if (content.length === 0) {
-        root.push(<div style={{ lineHeight: 0 }}><br /></div>);
+        root.push(<div className={`rt_${richText.id}_br_${blockIndex}`}><br /></div>);
+        layouts.forEach(l => {
+          const lh = RichTextConverter.fromDraftToInline({
+            name: 'LINEHEIGHT',
+            value: currentLineHeight[l.id]
+          });
+          styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
+        });
         continue;
       }
       const newStylesGroup = layouts.map(({ id: layoutId }) => {
@@ -63,7 +75,7 @@ export class RichTextConverter {
           styles: this.normalizeStyles(styles, entities)
         });
       });
-      const sameLayouts = groupBy(newStylesGroup, (item) => RichTextConverter.serializeRanges(item.styles ?? []));
+      const sameLayouts = groupBy(newStylesGroup, (item) => this.serializeRanges(item.styles ?? []));
       for (const group of Object.values(sameLayouts)) {
         const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
         const kids: ReactNode[] = [];
@@ -110,6 +122,10 @@ export class RichTextConverter {
           for (const entitiesGroup of entitiesGroups) {
             if (!entitiesGroup.stylesGroup) continue;
             for (const styleGroup of entitiesGroup.stylesGroup) {
+              const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
+              if (lineHeight?.value) {
+                currentLineHeight[item.layout] = lineHeight.value;
+              }
               styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
                   ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
@@ -132,7 +148,7 @@ export class RichTextConverter {
     ];
   }
 
-  private static serializeRanges(ranges: { start: number; end: number; }[]): string {
+  private serializeRanges(ranges: { start: number; end: number; }[]): string {
     return ranges.map(r => `${r.start},${r.end}`).join(' ');
   }
 
@@ -211,6 +227,9 @@ export class RichTextConverter {
       'TEXTDECORATION': { 'text-decoration': value }
     };
     const css = map[name];
+    if (!css) {
+      return '';
+    }
     return Object.entries(css).filter(([, value]) => !!value).map(([prop, value]) => `${prop}: ${value};`).join('\n');
   }
 }