@cntrl-site/sdk-nextjs 0.16.12 → 0.16.14

package/lib/components/items/RichTextItem.js

@@ -13,6 +13,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRichTextItemValues_1 = require("./useRichTextItemValues");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
+const getFontFamilyValue_1 = require("../../utils/getFontFamilyValue");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
@@ -40,7 +41,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
                 line-height: ${layoutParams.lineHeight * exemplary}px;
                 letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
                 word-spacing: ${layoutParams.wordSpacing * exemplary}px;
-                font-family: "${layoutParams.typeFace}";
+                font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
                 font-weight: ${layoutParams.fontWeight};
                 font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
                 text-decoration: ${layoutParams.textDecoration};

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -4,6 +4,7 @@ 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 getFontFamilyValue_1 = require("../getFontFamilyValue");
 exports.FontStyles = {
     'normal': {},
     'bold': { 'font-weight': 'bold' },
@@ -199,7 +200,7 @@ class RichTextConverter {
         const { value, name } = draftStyle;
         const map = {
             'COLOR': { 'color': getResolvedValue(value, name) },
-            'TYPEFACE': { 'font-family': `"${value}"` },
+            '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` },

package/lib/utils/getFontFamilyValue.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontFamilyValue = void 0;
+function getFontFamilyValue(value) {
+    return value && value.includes('"') ? value : `"${value}"`;
+}
+exports.getFontFamilyValue = getFontFamilyValue;

package/package.json

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

package/src/components/items/RichTextItem.tsx

@@ -7,6 +7,7 @@ import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRichTextItemValues } from './useRichTextItemValues';
 import { useRegisterResize } from "../../common/useRegisterResize";
+import { getFontFamilyValue } from '../../utils/getFontFamilyValue';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles] = useRichTextItem(item);
@@ -48,7 +49,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
                 line-height: ${layoutParams.lineHeight * exemplary}px;
                 letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
                 word-spacing: ${layoutParams.wordSpacing * exemplary}px;
-                font-family: "${layoutParams.typeFace}";
+                font-family: ${getFontFamilyValue(layoutParams.typeFace)};
                 font-weight: ${layoutParams.fontWeight};
                 font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
                 text-decoration: ${layoutParams.textDecoration};

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -10,6 +10,7 @@ import {
   TextAlign
 } from '@cntrl-site/sdk';
 import { LinkWrapper } from '../../components/LinkWrapper';
+import { getFontFamilyValue } from '../getFontFamilyValue';
 
 interface StyleGroup {
   start: number;
@@ -237,7 +238,7 @@ export class RichTextConverter {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
       'COLOR': { 'color': getResolvedValue(value, name) },
-      'TYPEFACE': { 'font-family': `"${value}"` },
+      'TYPEFACE': { 'font-family': `${getFontFamilyValue(value!)}` },
       'FONTSTYLE': value ? { ...FontStyles[value] } : {},
       'FONTWEIGHT': { 'font-weight': value },
       'FONTSIZE': { 'font-size': `${parseFloat(value!) * exemplary}px` },

package/src/utils/getFontFamilyValue.ts

@@ -0,0 +1,3 @@
+export function getFontFamilyValue(value: string | undefined) {
+  return value && value.includes('"') ? value : `"${value}"`;
+}