@cntrl-site/sdk-nextjs 0.2.13 → 0.3.0

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="jsx" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

package/lib/components/Article.js

@@ -4,8 +4,8 @@ exports.Article = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Section_1 = require("./Section");
 const Item_1 = require("./Item");
-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: `
+const Article = ({ article }) => {
+    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, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
        .article {
             position: relative;
             overflow: hidden;

package/lib/components/Item.js

@@ -10,6 +10,7 @@ const RichTextItem_1 = require("./items/RichTextItem");
 const VimeoEmbed_1 = require("./items/VimeoEmbed");
 const YoutubeEmbed_1 = require("./items/YoutubeEmbed");
 const CustomItem_1 = require("./items/CustomItem");
+const useCntrlContext_1 = require("../provider/useCntrlContext");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -20,14 +21,15 @@ const itemsMap = {
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem
 };
 const noop = () => null;
-const Item = ({ item, layouts }) => {
+const Item = ({ item }) => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutValues = [item.area];
     if (item.layoutParams) {
         layoutValues.push(item.layoutParams);
     }
     const sizingAxis = parseSizing(item.commonParams.sizing);
     const ItemComponent = itemsMap[item.type] || noop;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-${item.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item, layouts: layouts }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-${item.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;

package/lib/components/Page.js

@@ -8,9 +8,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const Article_1 = require("./Article");
 const Head_1 = require("./Head");
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const generateTypePresetStyles_1 = require("../utils/generateTypePresetStyles/generateTypePresetStyles");
 const Page = ({ article, project, meta }) => {
     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.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, layouts: project.layouts }), beforeBodyClose] }));
+    const { typePresets, layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article }), beforeBodyClose, typePresets && typePresets.presets.length > 0 && ((0, jsx_runtime_1.jsx)("style", { children: (0, generateTypePresetStyles_1.generateTypePresetStyles)(typePresets, layouts) }))] }));
 };
 exports.Page = Page;

package/lib/components/Section.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
-const Section = ({ section, layouts, children }) => {
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const Section = ({ section, children }) => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const getSectionVisibilityStyles = () => {
         return layouts
             .sort((a, b) => a.startsWith - b.startsWith)

package/lib/components/items/ImageItem.js

@@ -4,7 +4,10 @@ exports.ImageItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
-const ImageItem = ({ item, layouts }) => ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const ImageItem = ({ item }) => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
            .image-wrapper-${item.id} {
               position: absolute;
@@ -26,4 +29,5 @@ const ImageItem = ({ item, layouts }) => ((0, jsx_runtime_1.jsx)(LinkWrapper_1.L
           pointer-events: none;
         }
       ` })] }) }));
+};
 exports.ImageItem = ImageItem;

package/lib/components/items/RectangleItem.js

@@ -4,7 +4,10 @@ exports.RectangleItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
-const RectangleItem = ({ item, layouts }) => ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}` }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const RectangleItem = ({ item }) => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}` }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, fillColor, radius, strokeWidth }]) => (`
          .rectangle-${item.id} {
             position: absolute;
@@ -18,4 +21,5 @@ const RectangleItem = ({ item, layouts }) => ((0, jsx_runtime_1.jsx)(LinkWrapper
             border-width: ${strokeWidth * 100}vw;
           }`))}
       ` })] }) }));
+};
 exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem.js

@@ -5,12 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 //@ts-ignore
 const style_1 = __importDefault(require("styled-jsx/style"));
-const RichTextConverter_1 = require("../../utils/RichTextConverter");
+const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
 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 })] }));
+const RichTextItem = ({ item }) => {
+    const { layouts, typePresets } = (0, useCntrlContext_1.useCntrlContext)();
+    const preset = item.commonParams.preset
+        ? typePresets?.presets.find(p => p.id === item.commonParams.preset)
+        : null;
+    const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+    return (0, react_1.createElement)(preset?.tag ?? 'div', {
+        className: preset ? `cntrl-preset-${preset.id}` : undefined
+    }, ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] })));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/VideoItem.js

@@ -4,26 +4,30 @@ exports.VideoItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LinkWrapper_1 = require("../LinkWrapper");
 const sdk_1 = require("@cntrl-site/sdk");
-const VideoItem = ({ item, layouts }) => ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
-           .video-wrapper-${item.id} {
-              position: absolute;
-              overflow: hidden;
-              width: 100%;
-              height: 100%;
-              border-style: solid;
-              box-sizing: border-box;
-              border-color: ${strokeColor};
-              border-radius: ${radius * 100}vw;
-              border-width: ${strokeWidth * 100}vw;
-              opacity: ${opacity};
-            }`))}
-        .video {
-          width: 100%;
-          height: 100%;
-          opacity: 1;
-          object-fit: cover;
-          pointer-events: none;
-        }
-      ` })] }) }));
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const VideoItem = ({ item }) => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+         .video-wrapper-${item.id} {
+            position: absolute;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            border-style: solid;
+            box-sizing: border-box;
+            border-color: ${strokeColor};
+            border-radius: ${radius * 100}vw;
+            border-width: ${strokeWidth * 100}vw;
+            opacity: ${opacity};
+          }`))}
+      .video {
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        object-fit: cover;
+        pointer-events: none;
+      }
+    ` })] }));
+};
 exports.VideoItem = VideoItem;

package/lib/components/items/VimeoEmbed.js

@@ -4,7 +4,9 @@ exports.VimeoEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
-const VimeoEmbedItem = ({ item, layouts }) => {
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const VimeoEmbedItem = ({ item }) => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);

package/lib/components/items/YoutubeEmbed.js

@@ -5,7 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
-const YoutubeEmbedItem = ({ item, layouts }) => {
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const YoutubeEmbedItem = ({ item }) => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { autoplay, controls, url } = item.commonParams;
     const getValidYoutubeUrl = (url) => {
         const newUrl = new URL(url);

package/lib/index.js

@@ -14,10 +14,11 @@ 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.CustomItems = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = void 0;
-const defaultContext_1 = require("./provider/defaultContext");
+exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = exports.cntrlSdkContext = void 0;
+var defaultContext_1 = require("./provider/defaultContext");
+Object.defineProperty(exports, "cntrlSdkContext", { enumerable: true, get: function () { return defaultContext_1.cntrlSdkContext; } });
 __exportStar(require("@cntrl-site/sdk"), exports);
-var RichTextConverter_1 = require("./utils/RichTextConverter");
+var RichTextConverter_1 = require("./utils/RichTextConverter/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; } });
@@ -46,4 +47,3 @@ Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: func
 // custom items
 var CntrlProvider_1 = require("./provider/CntrlProvider");
 Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
-exports.CustomItems = defaultContext_1.cntrlSdkContext.customItems;

package/lib/provider/CntrlSdkContext.js

@@ -4,6 +4,13 @@ exports.CntrlSdkContext = void 0;
 class CntrlSdkContext {
     constructor(customItems) {
         this.customItems = customItems;
+        this.layouts = [];
+    }
+    setTypePresets(typePresets) {
+        this.typePresets = typePresets;
+    }
+    setLayouts(layouts) {
+        this.layouts = layouts;
     }
 }
 exports.CntrlSdkContext = CntrlSdkContext;

package/lib/utils/{RichTextConverter.js → RichTextConverter/RichTextConverter.js}

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextConverter = exports.FontStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
-const LinkWrapper_1 = require("../components/LinkWrapper");
+const LinkWrapper_1 = require("../../components/LinkWrapper");
 exports.FontStyles = {
     'normal': {},
     'bold': { 'font-weight': 'bold' },
     'italic': { 'font-style': 'italic' }
 };
 class RichTextConverter {
-    toHtml(richText, layouts) {
+    toHtml(richText, layouts, hasPreset) {
         const { text: rawText, blocks = [] } = richText.commonParams;
         const text = Array.from(rawText); // because of emoji
         const root = [];
@@ -58,7 +58,7 @@ class RichTextConverter {
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
               text-align: ${ta};
-              line-height: 0;
+              ${hasPreset ? '' : 'line-height: 0;'}
               white-space: normal;
               overflow-wrap: break-word;
             }

package/lib/utils/generateTypePresetStyles/generateTypePresetStyles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTypePresetStyles = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const reEmptyLines = /^\s*\n/gm;
+function generateTypePresetStyles(preset, layouts) {
+    const sorted = layouts.slice().sort((a, b) => a.startsWith - b.startsWith);
+    const stylesStr = (`
+    ${preset.presets.map(p => (`
+.cntrl-preset-${p.id} {
+  font-family: ${p.fontFamily};
+  ${p.fontStyle.length > 0 ? `font-style: ${p.fontStyle};` : ''}
+  font-weight: ${p.fontWeight};
+}
+  ${sorted.map(l => (`
+${(0, sdk_1.getLayoutMediaQuery)(l.id, sorted)} {
+  .cntrl-preset-${p.id} {
+    font-size: ${p.layoutParams[l.id].fontSize * 100}vw;
+    line-height: ${p.layoutParams[l.id].lineHeight * 100}vw;
+    letter-spacing: ${p.layoutParams[l.id].letterSpacing * 100}vw;
+    word-spacing: ${p.layoutParams[l.id].wordSpacing * 100}vw;
+    color: ${p.layoutParams[l.id].color};
+  }
+}`)).join('\n')}`)).join('\n')}`);
+    return stylesStr.replace(reEmptyLines, '');
+}
+exports.generateTypePresetStyles = generateTypePresetStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.2.13",
+  "version": "0.3.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.2.13",
+    "@cntrl-site/sdk": "^0.3.0",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
@@ -33,8 +33,11 @@
   "devDependencies": {
     "@tsconfig/node16": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
+    "@types/jest": "^29.2.5",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
+    "jest": "^29.3.1",
+    "ts-jest": "^29.0.3",
     "typescript": "^4.7.4"
   },
   "directories": {

package/src/components/Article.tsx

@@ -1,21 +1,20 @@
 import { FC } from 'react';
-import { TArticle, TLayout, getLayoutStyles } from '@cntrl-site/sdk';
+import { TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
 
 interface Props {
   article: TArticle;
-  layouts: TLayout[];
 }
 
-export const Article: FC<Props> = ({ article, layouts }) => {
+export const Article: FC<Props> = ({ article }) => {
   return (
     <>
       <div className="article">
         {article.sections.map((section, i) => (
-          <Section section={section} key={section.id} layouts={layouts}>
+          <Section section={section} key={section.id}>
             {article.sections[i].items.map(item => (
-              <Item layouts={layouts} item={item} key={item.id} />
+              <Item item={item} key={item.id} />
             ))}
           </Section>
         ))}

package/src/components/Item.tsx

@@ -4,7 +4,6 @@ import {
   ArticleItemType,
   ArticleItemSizingType as SizingType,
   TArticleItemAny,
-  TLayout,
   AnchorSide
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
@@ -14,9 +13,9 @@ import { RichTextItem } from './items/RichTextItem';
 import { VimeoEmbedItem } from './items/VimeoEmbed';
 import { YoutubeEmbedItem } from './items/YoutubeEmbed';
 import { CustomItem } from './items/CustomItem';
+import { useCntrlContext } from '../provider/useCntrlContext';
 
 export interface ItemProps<I extends TArticleItemAny> {
-  layouts: TLayout[];
   item: I;
 }
 
@@ -32,7 +31,8 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
 
 const noop = () => null;
 
-export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
+export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
   const layoutValues: Record<string, any>[] = [item.area];
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
@@ -43,7 +43,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
 
   return (
     <div className={`item-${item.id}`}>
-      <ItemComponent item={item} layouts={layouts} />
+      <ItemComponent item={item} />
       <style jsx>{`
         ${getLayoutStyles(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {

package/src/components/Page.tsx

@@ -3,6 +3,8 @@ import HTMLReactParser from 'html-react-parser';
 import { TArticle, TProject, TMeta } from '@cntrl-site/sdk';
 import { Article } from './Article';
 import { CNTRLHead } from './Head';
+import { useCntrlContext } from '../provider/useCntrlContext';
+import { generateTypePresetStyles } from '../utils/generateTypePresetStyles/generateTypePresetStyles';
 
 interface Props {
   article: TArticle;
@@ -13,12 +15,16 @@ interface Props {
 export const Page: FC<Props> = ({ article, project, meta }) => {
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
+  const { typePresets, layouts } = useCntrlContext();
   return (
     <>
       <CNTRLHead project={project} meta={meta} />
       {afterBodyOpen}
-      <Article article={article} layouts={project.layouts} />
+      <Article article={article} />
       {beforeBodyClose}
+      {typePresets && typePresets.presets.length > 0 && (
+        <style>{generateTypePresetStyles(typePresets, layouts)}</style>
+      )}
     </>
   );
 };

package/src/components/Section.tsx

@@ -1,15 +1,16 @@
 import { FC, ReactElement } from 'react';
-import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout, TSectionHeight, SectionHeightMode } from '@cntrl-site/sdk';
+import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TSectionHeight, SectionHeightMode } from '@cntrl-site/sdk';
+import { useCntrlContext } from '../provider/useCntrlContext';
 
 type SectionChild = ReactElement<any, any>;
 
 interface Props {
   section: TArticleSection;
-  layouts: TLayout[];
   children: SectionChild[];
 }
 
-export const Section: FC<Props> = ({ section, layouts, children }) => {
+export const Section: FC<Props> = ({ section, children }) => {
+  const { layouts } = useCntrlContext();
   const getSectionVisibilityStyles = () => {
     return layouts
       .sort((a, b) => a.startsWith - b.startsWith)

package/src/components/items/ImageItem.tsx

@@ -2,14 +2,17 @@ import { FC } from 'react';
 import { getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 
-export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, layouts }) => (
-  <LinkWrapper url={item.link?.url}>
-    <>
-      <div className={`image-wrapper-${item.id}`}>
-        <img className="image" src={item.commonParams.url} />
-      </div>
-      <style jsx>{`
+export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
+  return (
+    <LinkWrapper url={item.link?.url}>
+      <>
+        <div className={`image-wrapper-${item.id}`}>
+          <img className="image" src={item.commonParams.url} />
+        </div>
+        <style jsx>{`
         ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
            .image-wrapper-${item.id} {
               position: absolute;
@@ -23,7 +26,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, layouts }) => (
               opacity: ${opacity};
               border-width: ${strokeWidth * 100}vw;
             }`
-          ))
+        ))
         }
         .image {
           width: 100%;
@@ -33,6 +36,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, layouts }) => (
           pointer-events: none;
         }
       `}</style>
-    </>
-  </LinkWrapper>
-);
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/RectangleItem.tsx

@@ -2,12 +2,15 @@ import { FC } from 'react';
 import { TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 
-export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, layouts }) => (
-  <LinkWrapper url={item.link?.url}>
-    <>
-      <div className={`rectangle-${item.id}`} />
-      <style jsx>{`
+export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
+  return (
+    <LinkWrapper url={item.link?.url}>
+      <>
+        <div className={`rectangle-${item.id}`} />
+        <style jsx>{`
       ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, fillColor, radius, strokeWidth }]) => (`
          .rectangle-${item.id} {
             position: absolute;
@@ -22,6 +25,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, layouts })
           }`
         ))}
       `}</style>
-    </>
-  </LinkWrapper>
-);
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/RichTextItem.tsx

@@ -1,20 +1,31 @@
-import { FC } from 'react';
+import { FC, createElement } from 'react';
 import { TRichTextItem } from '@cntrl-site/sdk';
 //@ts-ignore
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
-import { RichTextConverter } from '../../utils/RichTextConverter';
+import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 
 const richTextConv = new RichTextConverter();
 
-export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, layouts }) => {
-  const [content, styles] = richTextConv.toHtml(item, layouts);
-  return (
-    <>
-      <div className="rich-text">{content}</div>
-      <JSXStyle id={item.id}>
-        {styles}
-      </JSXStyle>
-    </>
+export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item }) => {
+  const { layouts, typePresets } = useCntrlContext();
+  const preset = item.commonParams.preset
+    ? typePresets?.presets.find(p => p.id === item.commonParams.preset)
+    : null;
+  const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+  return createElement(
+    preset?.tag ?? 'div',
+    {
+      className: preset ? `cntrl-preset-${preset.id}` : undefined
+    },
+    (
+      <>
+        {content}
+        <JSXStyle id={item.id}>
+          {styles}
+        </JSXStyle>
+      </>
+    )
   );
 };