@cntrl-site/sdk-nextjs 0.0.3 → 0.0.6

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 (9) hide show
  1. package/lib/components/Article.js +1 -1
  2. package/lib/components/Page.js +3 -3
  3. package/lib/components/items/RichTextItem.js +1 -1
  4. package/lib/utils/RichTextConverter.js +22 -3
  5. package/package.json +1 -1
  6. package/src/components/Article.tsx +1 -1
  7. package/src/components/Page.tsx +2 -3
  8. package/src/components/items/RichTextItem.tsx +1 -1
  9. package/src/utils/RichTextConverter.tsx +22 -3
package/lib/components/Article.js CHANGED
@@ -8,7 +8,7 @@ const Article = ({ article, layouts }) => {
8
8
  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: `
9
9
  .article {
10
10
  position: relative;
11
- overflow-x: hidden;
11
+ overflow: hidden;
12
12
  }
13
13
  ` })] }));
14
14
  };
package/lib/components/Page.js CHANGED
@@ -27,11 +27,11 @@ const Page = ({ article, project, meta }) => {
27
27
  src: ${font.files.map(file => `url('${file.url}') format('${file.type}')`).join(', ')};
28
28
  }
29
29
  `)).join('\n')
30
- } })), project.fonts.adobe, Object.values(parsedFonts).map((value, i) => {
30
+ } })), Object.values(parsedFonts).map((value, i) => {
31
31
  if (!value)
32
32
  return undefined;
33
- const rel = value.props?.rel;
34
- const href = value.props?.href;
33
+ const rel = value?.rel || value.props?.rel;
34
+ const href = value?.href || value.props?.href;
35
35
  if (!rel || !href)
36
36
  return undefined;
37
37
  return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, i));
package/lib/components/items/RichTextItem.js CHANGED
@@ -11,6 +11,6 @@ const RichTextConverter_1 = require("../../utils/RichTextConverter");
11
11
  const richTextConv = new RichTextConverter_1.RichTextConverter();
12
12
  const RichTextItem = ({ item, layouts }) => {
13
13
  const [content, styles] = richTextConv.toHtml(item, layouts);
14
- 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 })] }));
14
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "rich-text", style: { whiteSpace: 'pre-wrap' }, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
15
15
  };
16
16
  exports.RichTextItem = RichTextItem;
package/lib/utils/RichTextConverter.js CHANGED
@@ -16,12 +16,24 @@ class RichTextConverter {
16
16
  rec[layout.id] = [];
17
17
  return rec;
18
18
  }, {});
19
+ let currentLineHeight = layouts.reduce((rec, layout) => {
20
+ const styles = (0, core_1.getClosestLayoutValue)(richText.layoutParams, layouts, layout.id)?.styles;
21
+ rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
22
+ return rec;
23
+ }, {});
19
24
  for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
20
25
  const block = blocks[blockIndex];
21
26
  const content = text.slice(block.start, block.end);
22
27
  const entities = block.entities.sort((a, b) => a.start - b.start) ?? [];
23
28
  if (content.length === 0) {
24
- root.push((0, jsx_runtime_1.jsx)("div", { style: { lineHeight: 0 }, children: (0, jsx_runtime_1.jsx)("br", {}) }));
29
+ root.push((0, jsx_runtime_1.jsx)("div", { className: `rt_${richText.id}_br_${blockIndex}`, children: (0, jsx_runtime_1.jsx)("br", {}) }));
30
+ layouts.forEach(l => {
31
+ const lh = RichTextConverter.fromDraftToInline({
32
+ name: 'LINEHEIGHT',
33
+ value: currentLineHeight[l.id]
34
+ });
35
+ styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
36
+ });
25
37
  continue;
26
38
  }
27
39
  const newStylesGroup = layouts.map(({ id: layoutId }) => {
@@ -34,7 +46,7 @@ class RichTextConverter {
34
46
  styles: this.normalizeStyles(styles, entities)
35
47
  });
36
48
  });
37
- const sameLayouts = groupBy(newStylesGroup, (item) => RichTextConverter.serializeRanges(item.styles ?? []));
49
+ const sameLayouts = groupBy(newStylesGroup, (item) => this.serializeRanges(item.styles ?? []));
38
50
  for (const group of Object.values(sameLayouts)) {
39
51
  const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
40
52
  const kids = [];
@@ -82,6 +94,10 @@ class RichTextConverter {
82
94
  if (!entitiesGroup.stylesGroup)
83
95
  continue;
84
96
  for (const styleGroup of entitiesGroup.stylesGroup) {
97
+ const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
98
+ if (lineHeight?.value) {
99
+ currentLineHeight[item.layout] = lineHeight.value;
100
+ }
85
101
  styleRules[item.layout].push(`
86
102
  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
87
103
  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
@@ -103,7 +119,7 @@ class RichTextConverter {
103
119
  styles
104
120
  ];
105
121
  }
106
- static serializeRanges(ranges) {
122
+ serializeRanges(ranges) {
107
123
  return ranges.map(r => `${r.start},${r.end}`).join(' ');
108
124
  }
109
125
  normalizeStyles(styles, entities) {
@@ -179,6 +195,9 @@ class RichTextConverter {
179
195
  'TEXTDECORATION': { 'text-decoration': value }
180
196
  };
181
197
  const css = map[name];
198
+ if (!css) {
199
+ return '';
200
+ }
182
201
  return Object.entries(css).filter(([, value]) => !!value).map(([prop, value]) => `${prop}: ${value};`).join('\n');
183
202
  }
184
203
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "0.0.3",
3
+ "version": "0.0.6",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.js",
package/src/components/Article.tsx CHANGED
@@ -23,7 +23,7 @@ export const Article: FC<Props> = ({ article, layouts }) => {
23
23
  <style jsx>{`
24
24
  .article {
25
25
  position: relative;
26
- overflow-x: hidden;
26
+ overflow: hidden;
27
27
  }
28
28
  `}</style>
29
29
  </>
package/src/components/Page.tsx CHANGED
@@ -44,11 +44,10 @@ export const Page: FC<Props> = ({ article, project, meta }) => {
44
44
  }}
45
45
  />
46
46
  )}
47
- {project.fonts.adobe}
48
47
  {Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value, i) => {
49
48
  if (!value) return undefined;
50
- const rel = value.props?.rel;
51
- const href = value.props?.href;
49
+ const rel = value?.rel || value.props?.rel;
50
+ const href = value?.href || value.props?.href;
52
51
  if (!rel || !href) return undefined;
53
52
  return (
54
53
  <link key={i} rel={rel} href={href} />
package/src/components/items/RichTextItem.tsx CHANGED
@@ -11,7 +11,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, layouts }) =>
11
11
  const [content, styles] = richTextConv.toHtml(item, layouts);
12
12
  return (
13
13
  <>
14
- <div className="rich-text">{content}</div>
14
+ <div className="rich-text" style={{ whiteSpace: 'pre-wrap' }}>{content}</div>
15
15
  <JSXStyle id={item.id}>
16
16
  {styles}
17
17
  </JSXStyle>
package/src/utils/RichTextConverter.tsx CHANGED
@@ -44,13 +44,25 @@ export class RichTextConverter {
44
44
  rec[layout.id] = [];
45
45
  return rec;
46
46
  }, {});
47
+ let currentLineHeight = layouts.reduce<Record<string, string>>((rec, layout) => {
48
+ const styles = getClosestLayoutValue(richText.layoutParams, layouts, layout.id)?.styles;
49
+ rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
50
+ return rec;
51
+ }, {});
47
52
 
48
53
  for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
49
54
  const block = blocks[blockIndex];
50
55
  const content = text.slice(block.start, block.end);
51
56
  const entities = block.entities!.sort((a, b) => a.start - b.start) ?? [];
52
57
  if (content.length === 0) {
53
- root.push(<div style={{ lineHeight: 0 }}><br /></div>);
58
+ root.push(<div className={`rt_${richText.id}_br_${blockIndex}`}><br /></div>);
59
+ layouts.forEach(l => {
60
+ const lh = RichTextConverter.fromDraftToInline({
61
+ name: 'LINEHEIGHT',
62
+ value: currentLineHeight[l.id]
63
+ });
64
+ styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
65
+ });
54
66
  continue;
55
67
  }
56
68
  const newStylesGroup = layouts.map(({ id: layoutId }) => {
@@ -63,7 +75,7 @@ export class RichTextConverter {
63
75
  styles: this.normalizeStyles(styles, entities)
64
76
  });
65
77
  });
66
- const sameLayouts = groupBy(newStylesGroup, (item) => RichTextConverter.serializeRanges(item.styles ?? []));
78
+ const sameLayouts = groupBy(newStylesGroup, (item) => this.serializeRanges(item.styles ?? []));
67
79
  for (const group of Object.values(sameLayouts)) {
68
80
  const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
69
81
  const kids: ReactNode[] = [];
@@ -110,6 +122,10 @@ export class RichTextConverter {
110
122
  for (const entitiesGroup of entitiesGroups) {
111
123
  if (!entitiesGroup.stylesGroup) continue;
112
124
  for (const styleGroup of entitiesGroup.stylesGroup) {
125
+ const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
126
+ if (lineHeight?.value) {
127
+ currentLineHeight[item.layout] = lineHeight.value;
128
+ }
113
129
  styleRules[item.layout].push(`
114
130
  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
115
131
  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
@@ -132,7 +148,7 @@ export class RichTextConverter {
132
148
  ];
133
149
  }
134
150
 
135
- private static serializeRanges(ranges: { start: number; end: number; }[]): string {
151
+ private serializeRanges(ranges: { start: number; end: number; }[]): string {
136
152
  return ranges.map(r => `${r.start},${r.end}`).join(' ');
137
153
  }
138
154
 
@@ -211,6 +227,9 @@ export class RichTextConverter {
211
227
  'TEXTDECORATION': { 'text-decoration': value }
212
228
  };
213
229
  const css = map[name];
230
+ if (!css) {
231
+ return '';
232
+ }
214
233
  return Object.entries(css).filter(([, value]) => !!value).map(([prop, value]) => `${prop}: ${value};`).join('\n');
215
234
  }
216
235
  }