@cntrl-site/sdk-nextjs 0.15.5-3 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  2. package/lib/components/items/RichTextItem.js +22 -0
  3. package/lib/components/items/useRichTextItem.js +2 -2
  4. package/lib/utils/RichTextConverter/RichTextConverter.js +13 -10
  5. package/package.json +2 -2
  6. package/src/components/items/RichTextItem.tsx +24 -1
  7. package/src/components/items/useRichTextItem.ts +2 -2
  8. package/src/utils/RichTextConverter/RichTextConverter.tsx +12 -10
package/.idea/codeStyles/codeStyleConfig.xml ADDED
@@ -0,0 +1,5 @@
1
+ <component name="ProjectCodeStyleConfiguration">
2
+ <state>
3
+ <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4
+ </state>
5
+ </component>
package/lib/components/items/RichTextItem.js CHANGED
@@ -43,6 +43,28 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
43
43
  ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
44
44
  }
45
45
  `);
46
+ })}`, `${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([layoutParams], exemplary) => {
47
+ const color = sdk_1.CntrlColor.parse(layoutParams.color);
48
+ return (`
49
+ .rich-text-wrapper-${item.id} {
50
+ font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
51
+ line-height: ${layoutParams.lineHeight * exemplary}px;
52
+ letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
53
+ word-spacing: ${layoutParams.wordSpacing * exemplary}px;
54
+ font-family: ${layoutParams.typeFace};
55
+ font-weight: ${layoutParams.fontWeight};
56
+ font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
57
+ text-decoration: ${layoutParams.textDecoration};
58
+ vertical-align: ${layoutParams.verticalAlign};
59
+ font-variant: ${layoutParams.fontVariant};
60
+ color: ${color.toCss()};
61
+ }
62
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
63
+ .rich-text-wrapper-${item.id} {
64
+ color: ${color.fmt('rgba')};
65
+ }
66
+ }
67
+ `);
46
68
  })}`] }))] }));
47
69
  };
48
70
  exports.RichTextItem = RichTextItem;
package/lib/components/items/useRichTextItem.js CHANGED
@@ -4,7 +4,7 @@ exports.useRichTextItem = void 0;
4
4
  const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
5
5
  const useCntrlContext_1 = require("../../provider/useCntrlContext");
6
6
  const useLayoutContext_1 = require("../useLayoutContext");
7
- const richTextConv = new RichTextConverter_1.RichTextConverter();
7
+ const richTextConverter = new RichTextConverter_1.RichTextConverter();
8
8
  const useRichTextItem = (item) => {
9
9
  var _a;
10
10
  const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -13,7 +13,7 @@ const useRichTextItem = (item) => {
13
13
  const preset = presetId
14
14
  ? (_a = typePresets === null || typePresets === void 0 ? void 0 : typePresets.presets.find(p => p.id === presetId)) !== null && _a !== void 0 ? _a : null
15
15
  : null;
16
- const [content, styles] = richTextConv.toHtml(item, layouts);
16
+ const [content, styles] = richTextConverter.toHtml(item, layouts);
17
17
  return [content, styles, preset];
18
18
  };
19
19
  exports.useRichTextItem = useRichTextItem;
package/lib/utils/RichTextConverter/RichTextConverter.js CHANGED
@@ -19,9 +19,9 @@ class RichTextConverter {
19
19
  return rec;
20
20
  }, {});
21
21
  let currentLineHeight = layouts.reduce((rec, layout) => {
22
- var _a, _b;
23
- const styles = richText.layoutParams[layout.id].styles;
24
- 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';
22
+ var _a;
23
+ const styles = richText.layoutParams[layout.id].rangeStyles;
24
+ 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;
25
25
  return rec;
26
26
  }, {});
27
27
  for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
@@ -31,9 +31,12 @@ class RichTextConverter {
31
31
  if (content.length === 0) {
32
32
  root.push((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rt_${richText.id}_br_${blockIndex}` }, { children: (0, jsx_runtime_1.jsx)("br", {}) })));
33
33
  layouts.forEach(l => {
34
- const lh = RichTextConverter.fromDraftToInline({
34
+ const lhForLayout = currentLineHeight[l.id];
35
+ if (lhForLayout === undefined)
36
+ return;
37
+ const lh = RichTextConverter.fromRangeStylesToInline({
35
38
  name: 'LINEHEIGHT',
36
- value: currentLineHeight[l.id]
39
+ value: lhForLayout
37
40
  }, l.exemplary);
38
41
  styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
39
42
  });
@@ -41,7 +44,7 @@ class RichTextConverter {
41
44
  }
42
45
  const newStylesGroup = layouts.map(({ id: layoutId }) => {
43
46
  const params = richText.layoutParams[layoutId];
44
- const styles = params.styles
47
+ const styles = params.rangeStyles
45
48
  .filter(s => s.start >= block.start && s.end <= block.end)
46
49
  .map(s => (Object.assign(Object.assign({}, s), { start: s.start - block.start, end: s.end - block.start })));
47
50
  return ({
@@ -62,7 +65,6 @@ class RichTextConverter {
62
65
  text-align: ${ta};
63
66
  white-space: ${whiteSpace};
64
67
  overflow-wrap: break-word;
65
- line-height: 0;
66
68
  }
67
69
  `);
68
70
  });
@@ -109,7 +111,7 @@ class RichTextConverter {
109
111
  }
110
112
  styleRules[item.layout].push(`
111
113
  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
112
- ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s, exemplary)).join('\n')}
114
+ ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
113
115
  }
114
116
  `);
115
117
  if (color) {
@@ -193,7 +195,7 @@ class RichTextConverter {
193
195
  }
194
196
  return entitiesGroups;
195
197
  }
196
- static fromDraftToInline(draftStyle, exemplary) {
198
+ static fromRangeStylesToInline(draftStyle, exemplary) {
197
199
  const { value, name } = draftStyle;
198
200
  const map = {
199
201
  'COLOR': { 'color': getResolvedValue(value, name) },
@@ -206,7 +208,8 @@ class RichTextConverter {
206
208
  'WORDSPACING': { 'word-spacing': `${parseFloat(value) * exemplary}px` },
207
209
  'TEXTTRANSFORM': value ? { 'text-transform': value } : { 'text-transform': sdk_1.TextTransform.None },
208
210
  'VERTICALALIGN': value ? { 'vertical-align': value } : { 'vertical-align': sdk_1.VerticalAlign.Unset },
209
- 'TEXTDECORATION': { 'text-decoration': value }
211
+ 'TEXTDECORATION': { 'text-decoration': value },
212
+ 'FONTVARIANT': { 'font-variant': value }
210
213
  };
211
214
  const css = map[name];
212
215
  if (!css) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "0.15.5-3",
3
+ "version": "0.16.0",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
23
23
  "dependencies": {
24
- "@cntrl-site/sdk": "^1.1.10",
24
+ "@cntrl-site/sdk": "^1.2.1",
25
25
  "@types/vimeo__player": "^2.18.0",
26
26
  "@vimeo/player": "^2.20.1",
27
27
  "html-react-parser": "^3.0.1",
package/src/components/items/RichTextItem.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FC, useEffect, useId, useState } from 'react';
2
- import { ArticleItemType, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
2
+ import { ArticleItemType, CntrlColor, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
3
3
  import JSXStyle from 'styled-jsx/style';
4
4
  import { ItemProps } from '../Item';
5
5
  import { useRichTextItem } from './useRichTextItem';
@@ -51,6 +51,29 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
51
51
  }
52
52
  `);
53
53
  })}`}
54
+ {`${getLayoutStyles(layouts, [item.layoutParams], ([layoutParams], exemplary) => {
55
+ const color = CntrlColor.parse(layoutParams.color);
56
+ return (`
57
+ .rich-text-wrapper-${item.id} {
58
+ font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
59
+ line-height: ${layoutParams.lineHeight * exemplary}px;
60
+ letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
61
+ word-spacing: ${layoutParams.wordSpacing * exemplary}px;
62
+ font-family: ${layoutParams.typeFace};
63
+ font-weight: ${layoutParams.fontWeight};
64
+ font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
65
+ text-decoration: ${layoutParams.textDecoration};
66
+ vertical-align: ${layoutParams.verticalAlign};
67
+ font-variant: ${layoutParams.fontVariant};
68
+ color: ${color.toCss()};
69
+ }
70
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
71
+ .rich-text-wrapper-${item.id} {
72
+ color: ${color.fmt('rgba')};
73
+ }
74
+ }
75
+ `);
76
+ })}`}
54
77
  </JSXStyle>
55
78
  </>
56
79
  );
package/src/components/items/useRichTextItem.ts CHANGED
@@ -4,7 +4,7 @@ import { useCntrlContext } from '../../provider/useCntrlContext';
4
4
  import { ReactNode } from 'react';
5
5
  import { useLayoutContext } from '../useLayoutContext';
6
6
 
7
- const richTextConv = new RichTextConverter();
7
+ const richTextConverter = new RichTextConverter();
8
8
 
9
9
  export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTypePresetEntry | null] => {
10
10
  const layoutId = useLayoutContext();
@@ -13,6 +13,6 @@ export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTyp
13
13
  const preset = presetId
14
14
  ? typePresets?.presets.find(p => p.id === presetId) ?? null
15
15
  : null;
16
- const [content, styles] = richTextConv.toHtml(item, layouts);
16
+ const [content, styles] = richTextConverter.toHtml(item, layouts);
17
17
  return [content, styles, preset];
18
18
  };
package/src/utils/RichTextConverter/RichTextConverter.tsx CHANGED
@@ -46,9 +46,9 @@ export class RichTextConverter {
46
46
  rec[layout.id] = [];
47
47
  return rec;
48
48
  }, {});
49
- let currentLineHeight = layouts.reduce<Record<string, string>>((rec, layout) => {
50
- const styles = richText.layoutParams[layout.id].styles;
51
- rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
49
+ let currentLineHeight = layouts.reduce<Record<string, string | undefined>>((rec, layout) => {
50
+ const styles = richText.layoutParams[layout.id].rangeStyles;
51
+ rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value;
52
52
  return rec;
53
53
  }, {});
54
54
 
@@ -59,9 +59,11 @@ export class RichTextConverter {
59
59
  if (content.length === 0) {
60
60
  root.push(<div className={`rt_${richText.id}_br_${blockIndex}`}><br /></div>);
61
61
  layouts.forEach(l => {
62
- const lh = RichTextConverter.fromDraftToInline({
62
+ const lhForLayout = currentLineHeight[l.id];
63
+ if (lhForLayout === undefined) return;
64
+ const lh = RichTextConverter.fromRangeStylesToInline({
63
65
  name: 'LINEHEIGHT',
64
- value: currentLineHeight[l.id]
66
+ value: lhForLayout
65
67
  }, l.exemplary);
66
68
  styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
67
69
  });
@@ -69,7 +71,7 @@ export class RichTextConverter {
69
71
  }
70
72
  const newStylesGroup = layouts.map(({ id: layoutId }) => {
71
73
  const params = richText.layoutParams[layoutId];
72
- const styles = params.styles!
74
+ const styles = params.rangeStyles!
73
75
  .filter(s => s.start >= block.start && s.end <= block.end)
74
76
  .map(s => ({ ...s, start: s.start - block.start, end: s.end - block.start }));
75
77
  return ({
@@ -90,7 +92,6 @@ export class RichTextConverter {
90
92
  text-align: ${ta};
91
93
  white-space: ${whiteSpace};
92
94
  overflow-wrap: break-word;
93
- line-height: 0;
94
95
  }
95
96
  `);
96
97
  });
@@ -140,7 +141,7 @@ export class RichTextConverter {
140
141
  }
141
142
  styleRules[item.layout].push(`
142
143
  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
143
- ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s, exemplary)).join('\n')}
144
+ ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
144
145
  }
145
146
  `);
146
147
  if (color) {
@@ -232,7 +233,7 @@ export class RichTextConverter {
232
233
  return entitiesGroups;
233
234
  }
234
235
 
235
- private static fromDraftToInline(draftStyle: Style, exemplary: number): string {
236
+ private static fromRangeStylesToInline(draftStyle: Style, exemplary: number): string {
236
237
  const { value, name } = draftStyle;
237
238
  const map: Record<string, Record<string, string | undefined>> = {
238
239
  'COLOR': { 'color': getResolvedValue(value, name) },
@@ -245,7 +246,8 @@ export class RichTextConverter {
245
246
  'WORDSPACING': { 'word-spacing': `${parseFloat(value!) * exemplary}px` },
246
247
  'TEXTTRANSFORM': value ? { 'text-transform': value as TextTransform } : { 'text-transform': TextTransform.None },
247
248
  'VERTICALALIGN': value ? { 'vertical-align': value as VerticalAlign } : { 'vertical-align': VerticalAlign.Unset },
248
- 'TEXTDECORATION': { 'text-decoration': value }
249
+ 'TEXTDECORATION': { 'text-decoration': value },
250
+ 'FONTVARIANT': { 'font-variant': value }
249
251
  };
250
252
  const css = map[name];
251
253
  if (!css) {