@cntrl-site/sdk-nextjs 1.6.8-alpha.0 → 1.6.9

package/lib/components/items/CompoundItem/CompoundItem.js

@@ -34,6 +34,7 @@ const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     }, [isInteractive, onVisibilityChange]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .compound-${item.id} {
+          overflow: ${item.commonParams.overflow};
           position: absolute;
           width: 100%;
           height: 100%;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -7,9 +7,9 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../../components/items/LinkWrapper");
 const getFontFamilyValue_1 = require("../getFontFamilyValue");
 exports.FontStyles = {
-    'normal': {},
-    'bold': { 'font-weight': 'bold' },
-    'italic': { 'font-style': 'italic' }
+    normal: { 'font-style': 'normal' },
+    bold: { 'font-weight': 'bold' },
+    italic: { 'font-style': 'italic' }
 };
 class RichTextConverter {
     toHtml(richText, layouts) {
@@ -20,7 +20,7 @@ class RichTextConverter {
             rec[layout.id] = [];
             return rec;
         }, {});
-        let currentLineHeight = layouts.reduce((rec, layout) => {
+        const currentLineHeight = layouts.reduce((rec, layout) => {
             var _a;
             const styles = richText.layoutParams[layout.id].rangeStyles;
             rec[layout.id] = (_a = styles === null || styles === void 0 ? void 0 : styles.find(s => s.style === 'LINEHEIGHT')) === null || _a === void 0 ? void 0 : _a.value;
@@ -223,18 +223,18 @@ class RichTextConverter {
     static fromRangeStylesToInline(draftStyle, exemplary) {
         const { value, name } = draftStyle;
         const map = {
-            'COLOR': { 'color': getResolvedValue(value, name) },
-            'TYPEFACE': { 'font-family': `${(0, getFontFamilyValue_1.getFontFamilyValue)(value)}` },
-            'FONTSTYLE': value ? Object.assign({}, exports.FontStyles[value]) : {},
-            'FONTWEIGHT': { 'font-weight': value },
-            'FONTSIZE': { 'font-size': `${parseFloat(value) * exemplary}px` },
-            'LINEHEIGHT': { 'line-height': `${parseFloat(value) * exemplary}px` },
-            'LETTERSPACING': { 'letter-spacing': `${parseFloat(value) * exemplary}px` },
-            'WORDSPACING': { 'word-spacing': `${parseFloat(value) * exemplary}px` },
-            'TEXTTRANSFORM': value ? { 'text-transform': value } : { 'text-transform': sdk_1.TextTransform.None },
-            'VERTICALALIGN': value ? { 'vertical-align': value } : { 'vertical-align': sdk_1.VerticalAlign.Unset },
-            'TEXTDECORATION': { 'text-decoration': value },
-            'FONTVARIANT': { 'font-variant': value }
+            COLOR: { color: getResolvedValue(value, name) },
+            TYPEFACE: { 'font-family': `${(0, getFontFamilyValue_1.getFontFamilyValue)(value)}` },
+            FONTSTYLE: value ? Object.assign({}, exports.FontStyles[value]) : {},
+            FONTWEIGHT: { 'font-weight': value },
+            FONTSIZE: { 'font-size': `${Number.parseFloat(value) * exemplary}px` },
+            LINEHEIGHT: { 'line-height': `${Number.parseFloat(value) * exemplary}px` },
+            LETTERSPACING: { 'letter-spacing': `${Number.parseFloat(value) * exemplary}px` },
+            WORDSPACING: { 'word-spacing': `${Number.parseFloat(value) * exemplary}px` },
+            TEXTTRANSFORM: value ? { 'text-transform': value } : { 'text-transform': sdk_1.TextTransform.None },
+            VERTICALALIGN: value ? { 'vertical-align': value } : { 'vertical-align': sdk_1.VerticalAlign.Unset },
+            TEXTDECORATION: { 'text-decoration': value },
+            FONTVARIANT: { 'font-variant': value }
         };
         const css = map[name];
         if (!css) {
@@ -260,8 +260,8 @@ function getResolvedValue(value, name) {
         return value;
     return value ? color_1.CntrlColor.parse(value).toCss() : value;
 }
-function sliceSymbols(text, start, end = NaN) {
-    let startOffset = NaN;
+function sliceSymbols(text, start, end = Number.NaN) {
+    let startOffset = Number.NaN;
     let endOffset = 0;
     let count = -1;
     for (const ch of text) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.6.8-alpha.0",
+  "version": "1.6.9",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/items/CompoundItem/CompoundItem.tsx

@@ -50,6 +50,7 @@ export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, on
         </div>
         <JSXStyle id={id}>{`
         .compound-${item.id} {
+          overflow: ${item.commonParams.overflow};
           position: absolute;
           width: 100%;
           height: 100%;

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -6,7 +6,7 @@ import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useRichTextItemValues } from '../useRichTextItemValues';
-import { useRegisterResize } from "../../../common/useRegisterResize";
+import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getFontFamilyValue } from '../../../utils/getFontFamilyValue';
 import { useExemplary } from '../../../common/useExemplary';
 import { useItemAngle } from '../useItemAngle';

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -32,9 +32,9 @@ interface Style {
 }
 
 export const FontStyles: Record<string, Record<string, string>> = {
-  'normal': {},
-  'bold': { 'font-weight': 'bold' },
-  'italic': { 'font-style': 'italic' }
+  normal: { 'font-style': 'normal' },
+  bold: { 'font-weight': 'bold' },
+  italic: { 'font-style': 'italic' }
 };
 
 export class RichTextConverter {
@@ -48,7 +48,7 @@ export class RichTextConverter {
       rec[layout.id] = [];
       return rec;
     }, {});
-    let currentLineHeight = layouts.reduce<Record<string, string | undefined>>((rec, layout) => {
+    const currentLineHeight = layouts.reduce<Record<string, string | undefined>>((rec, layout) => {
       const styles = richText.layoutParams[layout.id].rangeStyles;
       rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value;
       return rec;
@@ -194,7 +194,7 @@ export class RichTextConverter {
         start,
         end,
         styles: applied.map(s => ({ name: s.style, value: s.value }))
-      })
+      });
     }
 
     return styleGroups;
@@ -262,18 +262,18 @@ export class RichTextConverter {
   private static fromRangeStylesToInline(draftStyle: Style, exemplary: number): string {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
-      'COLOR': { 'color': getResolvedValue(value, name) },
-      'TYPEFACE': { 'font-family': `${getFontFamilyValue(value!)}` },
-      'FONTSTYLE': value ? { ...FontStyles[value] } : {},
-      'FONTWEIGHT': { 'font-weight': value },
-      'FONTSIZE': { 'font-size': `${parseFloat(value!) * exemplary}px` },
-      'LINEHEIGHT': { 'line-height': `${parseFloat(value!) * exemplary}px` },
-      'LETTERSPACING': { 'letter-spacing': `${parseFloat(value!) * exemplary}px` },
-      'WORDSPACING': { 'word-spacing': `${parseFloat(value!) * exemplary}px` },
-      'TEXTTRANSFORM': value ? { 'text-transform': value as TextTransform } : { 'text-transform': TextTransform.None },
-      'VERTICALALIGN': value ? { 'vertical-align': value as VerticalAlign } : { 'vertical-align': VerticalAlign.Unset },
-      'TEXTDECORATION': { 'text-decoration': value },
-      'FONTVARIANT': { 'font-variant': value }
+      COLOR: { color: getResolvedValue(value, name) },
+      TYPEFACE: { 'font-family': `${getFontFamilyValue(value!)}` },
+      FONTSTYLE: value ? { ...FontStyles[value] } : {},
+      FONTWEIGHT: { 'font-weight': value },
+      FONTSIZE: { 'font-size': `${Number.parseFloat(value!) * exemplary}px` },
+      LINEHEIGHT: { 'line-height': `${Number.parseFloat(value!) * exemplary}px` },
+      LETTERSPACING: { 'letter-spacing': `${Number.parseFloat(value!) * exemplary}px` },
+      WORDSPACING: { 'word-spacing': `${Number.parseFloat(value!) * exemplary}px` },
+      TEXTTRANSFORM: value ? { 'text-transform': value as TextTransform } : { 'text-transform': TextTransform.None },
+      VERTICALALIGN: value ? { 'vertical-align': value as VerticalAlign } : { 'vertical-align': VerticalAlign.Unset },
+      TEXTDECORATION: { 'text-decoration': value },
+      FONTVARIANT: { 'font-variant': value }
     };
     const css = map[name];
     if (!css) {
@@ -300,8 +300,8 @@ function getResolvedValue(value: string | undefined, name: string) {
   return value ? CntrlColor.parse(value).toCss() : value;
 }
 
-function sliceSymbols(text: string, start: number, end: number = NaN): string {
-  let startOffset = NaN;
+function sliceSymbols(text: string, start: number, end: number = Number.NaN): string {
+  let startOffset = Number.NaN;
   let endOffset = 0;
   let count = -1;
   for (const ch of text) {