@cntrl-site/sdk-nextjs 0.0.5 → 0.0.8

package/lib/components/Article.js

@@ -8,7 +8,7 @@ const Article = ({ article, layouts }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "article", children: article.sections.map((section, i) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, layouts: layouts, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { layouts: layouts, item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
           .article {
             position: relative;
-            overflow-x: hidden;
+            overflow: hidden;
           }
       ` })] }));
 };

package/lib/components/LayoutStyle.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutStyle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@cntrl-site/core");
+// @ts-ignore
+const style_1 = __importDefault(require("styled-jsx/style"));
+const LayoutStyle = ({ id, layouts, layoutId, children }) => {
+    const layout = layouts.find(l => l.id === layoutId);
+    return ((0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      ${(0, core_1.getLayoutMediaQuery)(layoutId, layouts)} {
+        ${children?.(layout)}
+      }
+    ` }));
+};
+exports.LayoutStyle = LayoutStyle;

package/lib/index.js

@@ -1,6 +1,22 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter = void 0;
+exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter = void 0;
+__exportStar(require("@cntrl-site/core"), exports);
+__exportStar(require("@cntrl-site/sdk"), exports);
 var RichTextConverter_1 = require("./utils/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
 var Page_1 = require("./components/Page");
@@ -19,3 +35,5 @@ var RichTextItem_1 = require("./components/items/RichTextItem");
 Object.defineProperty(exports, "RichTextItem", { enumerable: true, get: function () { return RichTextItem_1.RichTextItem; } });
 var VideoItem_1 = require("./components/items/VideoItem");
 Object.defineProperty(exports, "VideoItem", { enumerable: true, get: function () { return VideoItem_1.VideoItem; } });
+var LayoutStyle_1 = require("./components/LayoutStyle");
+Object.defineProperty(exports, "LayoutStyle", { enumerable: true, get: function () { return LayoutStyle_1.LayoutStyle; } });

package/lib/utils/RichTextConverter.js

@@ -10,7 +10,8 @@ exports.FontStyles = {
 };
 class RichTextConverter {
     toHtml(richText, layouts) {
-        const { text, blocks = [] } = richText.commonParams;
+        const { text: rawText, blocks = [] } = richText.commonParams;
+        const text = Array.from(rawText); // because of emoji
         const root = [];
         const styleRules = layouts.reduce((rec, layout) => {
             rec[layout.id] = [];
@@ -65,18 +66,18 @@ class RichTextConverter {
                 for (const entity of entitiesGroups) {
                     const entityKids = [];
                     if (offset < entity.start) {
-                        kids.push(content.slice(offset, entity.start));
+                        kids.push(content.slice(offset, entity.start).join(''));
                         offset = entity.start;
                     }
                     for (const style of entity.stylesGroup) {
                         if (offset < style.start) {
-                            entityKids.push(content.slice(offset, style.start));
+                            entityKids.push(content.slice(offset, style.start).join(''));
                         }
-                        entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: content.slice(style.start, style.end) }, style.start));
+                        entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: content.slice(style.start, style.end).join('') }, style.start));
                         offset = style.end;
                     }
                     if (offset < entity.end) {
-                        entityKids.push(content.slice(offset, entity.end));
+                        entityKids.push(content.slice(offset, entity.end).join(''));
                         offset = entity.end;
                     }
                     if (entity.link) {
@@ -86,7 +87,7 @@ class RichTextConverter {
                     kids.push(...entityKids);
                 }
                 if (offset < content.length) {
-                    kids.push(content.slice(offset));
+                    kids.push(content.slice(offset).join(''));
                 }
                 for (const item of group) {
                     const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];

package/package.json

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

package/src/components/Article.tsx

@@ -23,7 +23,7 @@ export const Article: FC<Props> = ({ article, layouts }) => {
       <style jsx>{`
           .article {
             position: relative;
-            overflow-x: hidden;
+            overflow: hidden;
           }
       `}</style>
     </>

package/src/components/LayoutStyle.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { getLayoutMediaQuery, TLayout } from '@cntrl-site/core';
+// @ts-ignore
+import JSXStyle from 'styled-jsx/style';
+
+export interface LayoutStyleProps {
+  id: string;
+  layouts: TLayout[];
+  layoutId: string;
+  children?: (layout: TLayout) => string;
+}
+
+export const LayoutStyle: FC<LayoutStyleProps> = ({ id, layouts, layoutId, children }) => {
+  const layout = layouts.find(l => l.id === layoutId)!;
+  return (
+    <JSXStyle id={id}>{`
+      ${getLayoutMediaQuery(layoutId, layouts)} {
+        ${children?.(layout)}
+      }
+    `}</JSXStyle>
+  );
+};

package/src/index.ts

@@ -1,5 +1,7 @@
-export { RichTextConverter } from './utils/RichTextConverter';
+export * from '@cntrl-site/core';
+export * from '@cntrl-site/sdk';
 
+export { RichTextConverter } from './utils/RichTextConverter';
 export { Page } from './components/Page';
 export { Article } from './components/Article';
 export { Section } from './components/Section';
@@ -8,3 +10,4 @@ export { ImageItem } from './components/items/ImageItem';
 export { RectangleItem } from './components/items/RectangleItem';
 export { RichTextItem } from './components/items/RichTextItem';
 export { VideoItem } from './components/items/VideoItem';
+export { LayoutStyle } from './components/LayoutStyle';

package/src/utils/RichTextConverter.tsx

@@ -38,7 +38,8 @@ export class RichTextConverter {
     richText: TRichTextItem,
     layouts: TLayout[]
   ): [ReactNode[], string] {
-    const { text, blocks = [] } = richText.commonParams;
+    const { text: rawText, blocks = [] } = richText.commonParams;
+    const text = Array.from(rawText); // because of emoji
     const root: ReactElement[] = [];
     const styleRules = layouts.reduce<Record<string, string[]>>((rec, layout) => {
       rec[layout.id] = [];
@@ -94,18 +95,18 @@ export class RichTextConverter {
         for (const entity of entitiesGroups) {
           const entityKids: ReactNode[] = [];
           if (offset < entity.start) {
-            kids.push(content.slice(offset, entity.start));
+            kids.push(content.slice(offset, entity.start).join(''));
             offset = entity.start;
           }
           for (const style of entity.stylesGroup) {
             if (offset < style.start) {
-              entityKids.push(content.slice(offset, style.start));
+              entityKids.push(content.slice(offset, style.start).join(''));
             }
-            entityKids.push(<span key={style.start} className={`s-${style.start}-${style.end}`}>{content.slice(style.start, style.end)}</span>);
+            entityKids.push(<span key={style.start} className={`s-${style.start}-${style.end}`}>{content.slice(style.start, style.end).join('')}</span>);
             offset = style.end;
           }
           if (offset < entity.end) {
-            entityKids.push(content.slice(offset, entity.end));
+            entityKids.push(content.slice(offset, entity.end).join(''));
             offset = entity.end;
           }
           if (entity.link) {
@@ -115,7 +116,7 @@ export class RichTextConverter {
           kids.push(...entityKids);
         }
         if (offset < content.length) {
-          kids.push(content.slice(offset));
+          kids.push(content.slice(offset).join(''));
         }
         for (const item of group) {
           const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];