@cntrl-site/sdk-nextjs 0.15.5-2 → 0.15.5-4

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/lib/components/Item.js

@@ -35,6 +35,11 @@ const itemsMap = {
     [sdk_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem
 };
+const RichTextWrapper = ({ isRichText, children }) => {
+    if (!isRichText)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' } }, { children: children })));
+};
 const noop = () => null;
 const Item = ({ item, sectionId }) => {
     var _a, _b;
@@ -43,6 +48,7 @@ const Item = ({ item, sectionId }) => {
     const layout = (0, useLayoutContext_1.useLayoutContext)();
     const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
+    const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
     const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
@@ -69,43 +75,45 @@ const Item = ({ item, sectionId }) => {
             return;
         }
         const wrapperHeight = getStickyItemWrapperHeight(sticky, height);
+        setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
-    const scaleIfRichText = isRichText
-        ? { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }
-        : {};
-    const styles = Object.assign(Object.assign({}, scaleIfRichText), { top: stickyTop });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
-                        width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
-                            ? isRichText
-                                ? `${width * exemplary}px`
-                                : `${width * 100}vw`
-                            : 'max-content'}`,
-                        height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
-                        transform: `scale(${scale})`,
-                        transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
-                    } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+    const styles = {
+        top: stickyTop,
+        height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
+                            width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
+                                ? isRichText
+                                    ? `${width * exemplary}px`
+                                    : `${width * 100}vw`
+                                : 'max-content'}`,
+                            height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+                            transform: `scale(${scale})`,
+                            transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
+                        } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) })) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
-              width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
-              height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};
-              transform: scale(${scale});
               top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               pointer-events: auto;
-              --webkit-backface-visibility: hidden;
               cursor: ${hoverParams ? 'pointer' : 'default'};
               visibility: ${hidden ? 'hidden' : 'visible'};
+              height: fit-content;
             }
             .item-${item.id}-inner {
               transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
+              width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
+              height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};
+              transform: scale(${scale});
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
               position: absolute;

package/lib/components/items/RichTextItem.js

@@ -14,11 +14,10 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRichTextItemValues_1 = require("./useRichTextItemValues");
 const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 const RichTextItem = ({ item, sectionId, onResize }) => {
-    const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
+    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const className = preset ? `cntrl-preset-${preset.id}` : undefined;
     const { angle, blur } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
     (0, react_1.useEffect)(() => {
         if (!ref || !onResize)
@@ -32,7 +31,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
             observer.unobserve(ref);
         };
     }, [ref, onResize]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `${className} rich-text-wrapper-${item.id}`, style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
                 } }, { children: content })), (0, jsx_runtime_1.jsxs)(style_1.default, Object.assign({ id: id }, { children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
@@ -44,6 +43,28 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
               ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
             }
           `);
+                    })}`, `${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([layoutParams], exemplary) => {
+                        const color = sdk_1.CntrlColor.parse(layoutParams.color);
+                        return (`
+            .rich-text-wrapper-${item.id} {
+                font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
+                line-height: ${layoutParams.lineHeight * exemplary}px;
+                letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
+                word-spacing: ${layoutParams.wordSpacing * exemplary}px;
+                font-family: ${layoutParams.typeFace};
+                font-weight: ${layoutParams.fontWeight};
+                font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+                text-decoration: ${layoutParams.textDecoration};
+                vertical-align: ${layoutParams.verticalAlign};
+                font-variant: ${layoutParams.fontVariant};
+                color: ${color.toCss()};
+            }
+            @supports not (color: oklch(42% 0.3 90 / 1)) {
+              .rich-text-wrapper-${item.id} {
+                color: ${color.fmt('rgba')};
+              }
+            }
+            `);
                     })}`] }))] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/useRichTextItem.js

@@ -4,7 +4,7 @@ exports.useRichTextItem = void 0;
 const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useLayoutContext_1 = require("../useLayoutContext");
-const richTextConv = new RichTextConverter_1.RichTextConverter();
+const richTextConverter = new RichTextConverter_1.RichTextConverter();
 const useRichTextItem = (item) => {
     var _a;
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -13,7 +13,7 @@ const useRichTextItem = (item) => {
     const preset = presetId
         ? (_a = typePresets === null || typePresets === void 0 ? void 0 : typePresets.presets.find(p => p.id === presetId)) !== null && _a !== void 0 ? _a : null
         : null;
-    const [content, styles] = richTextConv.toHtml(item, layouts);
+    const [content, styles] = richTextConverter.toHtml(item, layouts);
     return [content, styles, preset];
 };
 exports.useRichTextItem = useRichTextItem;

package/lib/components/items/useRichTextItemValues.js

@@ -5,7 +5,7 @@ const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../useLayoutContext");
 const useRichTextItemValues = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
+    const { angle } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -19,9 +19,9 @@ class RichTextConverter {
             return rec;
         }, {});
         let currentLineHeight = layouts.reduce((rec, layout) => {
-            var _a, _b;
-            const styles = richText.layoutParams[layout.id].styles;
-            rec[layout.id] = (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.find(s => s.style === 'LINEHEIGHT')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '0';
+            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;
             return rec;
         }, {});
         for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
@@ -31,9 +31,12 @@ class RichTextConverter {
             if (content.length === 0) {
                 root.push((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rt_${richText.id}_br_${blockIndex}` }, { children: (0, jsx_runtime_1.jsx)("br", {}) })));
                 layouts.forEach(l => {
-                    const lh = RichTextConverter.fromDraftToInline({
+                    const lhForLayout = currentLineHeight[l.id];
+                    if (lhForLayout === undefined)
+                        return;
+                    const lh = RichTextConverter.fromRangeStylesToInline({
                         name: 'LINEHEIGHT',
-                        value: currentLineHeight[l.id]
+                        value: lhForLayout
                     }, l.exemplary);
                     styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
                 });
@@ -41,7 +44,7 @@ class RichTextConverter {
             }
             const newStylesGroup = layouts.map(({ id: layoutId }) => {
                 const params = richText.layoutParams[layoutId];
-                const styles = params.styles
+                const styles = params.rangeStyles
                     .filter(s => s.start >= block.start && s.end <= block.end)
                     .map(s => (Object.assign(Object.assign({}, s), { start: s.start - block.start, end: s.end - block.start })));
                 return ({
@@ -62,7 +65,6 @@ class RichTextConverter {
               text-align: ${ta};
               white-space: ${whiteSpace};
               overflow-wrap: break-word;
-              line-height: 0;
             }
           `);
                 });
@@ -109,7 +111,7 @@ class RichTextConverter {
                             }
                             styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s, exemplary)).join('\n')}
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
                 }
               `);
                             if (color) {
@@ -193,7 +195,7 @@ class RichTextConverter {
         }
         return entitiesGroups;
     }
-    static fromDraftToInline(draftStyle, exemplary) {
+    static fromRangeStylesToInline(draftStyle, exemplary) {
         const { value, name } = draftStyle;
         const map = {
             'COLOR': { 'color': getResolvedValue(value, name) },
@@ -206,7 +208,8 @@ class RichTextConverter {
             '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 }
+            'TEXTDECORATION': { 'text-decoration': value },
+            'FONTVARIANT': { 'font-variant': value }
         };
         const css = map[name];
         if (!css) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.15.5-2",
+  "version": "0.15.5-4",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.1.10",
+    "@cntrl-site/sdk": "^1.1.11-1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/Item.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC, useEffect, useId, useRef, useState } from 'react';
+import { ComponentType, FC, PropsWithChildren, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   AnchorSide,
@@ -45,6 +45,19 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.Custom]: CustomItem
 };
 
+interface RTWrapperProps {
+  isRichText: boolean;
+}
+
+const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children }) => {
+  if (!isRichText) return <>{children}</>;
+  return (
+    <div style={{ transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }}>
+      {children}
+    </div>
+  );
+};
+
 const noop = () => null;
 
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
@@ -53,6 +66,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const layout = useLayoutContext();
   const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
+  const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
   const { top, left } = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
@@ -79,7 +93,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
       setWrapperHeight(undefined);
       return;
     }
-    const wrapperHeight = getStickyItemWrapperHeight(sticky, height)
+    const wrapperHeight = getStickyItemWrapperHeight(sticky, height);
+    setItemHeight(height);
     setWrapperHeight(wrapperHeight);
   };
 
@@ -88,13 +103,10 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   }, []);
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
-  const scaleIfRichText = isRichText
-    ? { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }
-    : {};
 
   const styles = {
-    ...scaleIfRichText,
-    top: stickyTop
+    top: stickyTop,
+    height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
   };
 
   return (
@@ -107,21 +119,23 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
         className={`item-${item.id}`}
         style={isInitialRef.current ? {} : styles }
       >
-        <div
-          className={`item-${item.id}-inner`}
-          style={{
-            width: `${sizingAxis.x === SizingType.Manual
-              ? isRichText
-                ? `${width * exemplary}px`
-                : `${width * 100}vw`
-              : 'max-content'}`,
-            height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
-            transform: `scale(${scale})`,
-            transformOrigin: ScaleAnchorMap[scaleAnchor]
-          }}
-        >
-          <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
-        </div>
+        <RichTextWrapper isRichText={isRichText}>
+          <div
+            className={`item-${item.id}-inner`}
+            style={{
+              width: `${sizingAxis.x === SizingType.Manual
+                ? isRichText
+                  ? `${width * exemplary}px`
+                  : `${width * 100}vw`
+                : 'max-content'}`,
+              height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+              transform: `scale(${scale})`,
+              transformOrigin: ScaleAnchorMap[scaleAnchor]
+            }}
+          >
+            <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
+          </div>
+        </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
@@ -129,18 +143,19 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
-              width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
-              height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'unset'};
-              transform: scale(${scale});
               top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
-              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               pointer-events: auto;
-              --webkit-backface-visibility: hidden;
               cursor: ${hoverParams ? 'pointer' : 'default'};
               visibility: ${hidden ? 'hidden' : 'visible'};
+              height: fit-content;
             }
             .item-${item.id}-inner {
               transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
+              width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
+              height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'unset'};
+              transform: scale(${scale});
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
               position: absolute;

package/src/components/items/RichTextItem.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useId, useState } from 'react';
-import { ArticleItemType, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
+import { ArticleItemType, CntrlColor, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
@@ -9,11 +9,10 @@ import { useRichTextItemValues } from './useRichTextItemValues';
 import ResizeObserver from 'resize-observer-polyfill';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
-  const [content, styles, preset] = useRichTextItem(item);
+  const [content, styles] = useRichTextItem(item);
   const id = useId();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
-  const className = preset ? `cntrl-preset-${preset.id}` : undefined;
   const { angle, blur } = useRichTextItemValues(item, sectionId);
 
   useEffect(() => {
@@ -32,7 +31,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
     <>
       <div
         ref={setRef}
-        className={`${className} rich-text-wrapper-${item.id}`}
+        className={`rich-text-wrapper-${item.id}`}
         style={{
           transform: `rotate(${angle}deg)`,
           filter: `blur(${blur * 100}vw)`
@@ -52,6 +51,29 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
             }
           `);
         })}`}
+        {`${getLayoutStyles(layouts, [item.layoutParams], ([layoutParams], exemplary) => {
+          const color = CntrlColor.parse(layoutParams.color);
+          return (`
+            .rich-text-wrapper-${item.id} {
+                font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
+                line-height: ${layoutParams.lineHeight * exemplary}px;
+                letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
+                word-spacing: ${layoutParams.wordSpacing * exemplary}px;
+                font-family: ${layoutParams.typeFace};
+                font-weight: ${layoutParams.fontWeight};
+                font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+                text-decoration: ${layoutParams.textDecoration};
+                vertical-align: ${layoutParams.verticalAlign};
+                font-variant: ${layoutParams.fontVariant};
+                color: ${color.toCss()};
+            }
+            @supports not (color: oklch(42% 0.3 90 / 1)) {
+              .rich-text-wrapper-${item.id} {
+                color: ${color.fmt('rgba')};
+              }
+            }
+            `);
+        })}`}
       </JSXStyle>
     </>
   );

package/src/components/items/useRichTextItem.ts

@@ -4,7 +4,7 @@ import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ReactNode } from 'react';
 import { useLayoutContext } from '../useLayoutContext';
 
-const richTextConv = new RichTextConverter();
+const richTextConverter = new RichTextConverter();
 
 export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTypePresetEntry | null] => {
   const layoutId = useLayoutContext();
@@ -13,6 +13,6 @@ export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTyp
   const preset = presetId
     ? typePresets?.presets.find(p => p.id === presetId) ?? null
     : null;
-  const [content, styles] = richTextConv.toHtml(item, layouts);
+  const [content, styles] = richTextConverter.toHtml(item, layouts);
   return [content, styles, preset];
 };

package/src/components/items/useRichTextItemValues.ts

@@ -4,7 +4,7 @@ import { useLayoutContext } from '../useLayoutContext';
 
 export const useRichTextItemValues = (item: TRichTextItem, sectionId: string) => {
   const layoutId = useLayoutContext();
-  const angle = useKeyframeValue(
+  const { angle } = useKeyframeValue(
     item,
     (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),
     (animator, scroll, value) => animator.getRotation(value, scroll),

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -46,9 +46,9 @@ export class RichTextConverter {
       rec[layout.id] = [];
       return rec;
     }, {});
-    let currentLineHeight = layouts.reduce<Record<string, string>>((rec, layout) => {
-      const styles = richText.layoutParams[layout.id].styles;
-      rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
+    let 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;
     }, {});
 
@@ -59,9 +59,11 @@ export class RichTextConverter {
       if (content.length === 0) {
         root.push(<div className={`rt_${richText.id}_br_${blockIndex}`}><br /></div>);
         layouts.forEach(l => {
-          const lh = RichTextConverter.fromDraftToInline({
+          const lhForLayout = currentLineHeight[l.id];
+          if (lhForLayout === undefined) return;
+          const lh = RichTextConverter.fromRangeStylesToInline({
             name: 'LINEHEIGHT',
-            value: currentLineHeight[l.id]
+            value: lhForLayout
           }, l.exemplary);
           styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
         });
@@ -69,7 +71,7 @@ export class RichTextConverter {
       }
       const newStylesGroup = layouts.map(({ id: layoutId }) => {
         const params = richText.layoutParams[layoutId];
-        const styles = params.styles!
+        const styles = params.rangeStyles!
           .filter(s => s.start >= block.start && s.end <= block.end)
           .map(s => ({ ...s, start: s.start - block.start, end: s.end - block.start }));
         return ({
@@ -90,7 +92,6 @@ export class RichTextConverter {
               text-align: ${ta};
               white-space: ${whiteSpace};
               overflow-wrap: break-word;
-              line-height: 0;
             }
           `);
         });
@@ -140,7 +141,7 @@ export class RichTextConverter {
               }
               styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s, exemplary)).join('\n')}
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
                 }
               `);
               if (color) {
@@ -232,7 +233,7 @@ export class RichTextConverter {
     return entitiesGroups;
   }
 
-  private static fromDraftToInline(draftStyle: Style, exemplary: number): string {
+  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) },
@@ -245,7 +246,8 @@ export class RichTextConverter {
       '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 }
+      'TEXTDECORATION': { 'text-decoration': value },
+      'FONTVARIANT': { 'font-variant': value }
     };
     const css = map[name];
     if (!css) {