@gravity-ui/page-constructor 4.42.0 → 4.42.1

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 (82) hide show
  1. package/build/cjs/blocks/CardLayout/schema.d.ts +24 -0
  2. package/build/cjs/blocks/ContentLayout/schema.d.ts +12 -0
  3. package/build/cjs/blocks/ExtendedFeatures/schema.d.ts +12 -0
  4. package/build/cjs/blocks/FilterBlock/schema.d.ts +24 -0
  5. package/build/cjs/blocks/Form/schema.d.ts +12 -0
  6. package/build/cjs/blocks/Header/schema.d.ts +12 -0
  7. package/build/cjs/blocks/HeaderSlider/schema.d.ts +12 -0
  8. package/build/cjs/blocks/Icons/schema.d.ts +24 -0
  9. package/build/cjs/blocks/Map/schema.d.ts +12 -0
  10. package/build/cjs/blocks/Media/schema.d.ts +24 -0
  11. package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts +12 -0
  12. package/build/cjs/blocks/Questions/schema.d.ts +12 -0
  13. package/build/cjs/blocks/Slider/schema.d.ts +12 -0
  14. package/build/cjs/blocks/Table/schema.d.ts +12 -0
  15. package/build/cjs/blocks/Tabs/schema.d.ts +12 -0
  16. package/build/cjs/components/Author/Author.css +4 -2
  17. package/build/cjs/components/Author/Author.js +2 -2
  18. package/build/cjs/editor/components/CodeEditor/CodeEditor.css +2 -5
  19. package/build/cjs/editor/components/CodeEditor/CodeEditor.d.ts +2 -2
  20. package/build/cjs/editor/components/CodeEditor/CodeEditor.js +12 -9
  21. package/build/cjs/editor/containers/Editor/Editor.d.ts +1 -1
  22. package/build/cjs/editor/containers/Editor/Editor.js +19 -8
  23. package/build/cjs/editor/containers/Form/Form.js +3 -1
  24. package/build/cjs/editor/containers/Form/hooks.d.ts +8 -0
  25. package/build/cjs/editor/containers/Form/hooks.js +39 -0
  26. package/build/cjs/editor/context.d.ts +2 -0
  27. package/build/cjs/editor/types/index.d.ts +2 -0
  28. package/build/cjs/models/constructor-items/common.d.ts +1 -0
  29. package/build/cjs/models/constructor-items/sub-blocks.d.ts +12 -1
  30. package/build/cjs/schema/constants.d.ts +4 -0
  31. package/build/cjs/schema/validators/common.d.ts +13 -1
  32. package/build/cjs/schema/validators/common.js +8 -1
  33. package/build/cjs/sub-blocks/Divider/schema.d.ts +1 -1
  34. package/build/cjs/sub-blocks/Quote/Quote.css +11 -18
  35. package/build/cjs/sub-blocks/Quote/Quote.js +7 -6
  36. package/build/cjs/sub-blocks/Quote/schema.d.ts +4 -0
  37. package/build/cjs/sub-blocks/Quote/schema.js +4 -1
  38. package/build/cjs/text-transform/config.js +10 -4
  39. package/build/esm/blocks/CardLayout/schema.d.ts +24 -0
  40. package/build/esm/blocks/ContentLayout/schema.d.ts +12 -0
  41. package/build/esm/blocks/ExtendedFeatures/schema.d.ts +12 -0
  42. package/build/esm/blocks/FilterBlock/schema.d.ts +24 -0
  43. package/build/esm/blocks/Form/schema.d.ts +12 -0
  44. package/build/esm/blocks/Header/schema.d.ts +12 -0
  45. package/build/esm/blocks/HeaderSlider/schema.d.ts +12 -0
  46. package/build/esm/blocks/Icons/schema.d.ts +24 -0
  47. package/build/esm/blocks/Map/schema.d.ts +12 -0
  48. package/build/esm/blocks/Media/schema.d.ts +24 -0
  49. package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts +12 -0
  50. package/build/esm/blocks/Questions/schema.d.ts +12 -0
  51. package/build/esm/blocks/Slider/schema.d.ts +12 -0
  52. package/build/esm/blocks/Table/schema.d.ts +12 -0
  53. package/build/esm/blocks/Tabs/schema.d.ts +12 -0
  54. package/build/esm/components/Author/Author.css +4 -2
  55. package/build/esm/components/Author/Author.js +2 -2
  56. package/build/esm/editor/components/CodeEditor/CodeEditor.css +2 -5
  57. package/build/esm/editor/components/CodeEditor/CodeEditor.d.ts +2 -2
  58. package/build/esm/editor/components/CodeEditor/CodeEditor.js +13 -10
  59. package/build/esm/editor/containers/Editor/Editor.d.ts +1 -1
  60. package/build/esm/editor/containers/Editor/Editor.js +19 -8
  61. package/build/esm/editor/containers/Form/Form.js +3 -1
  62. package/build/esm/editor/containers/Form/hooks.d.ts +8 -0
  63. package/build/esm/editor/containers/Form/hooks.js +34 -0
  64. package/build/esm/editor/context.d.ts +2 -0
  65. package/build/esm/editor/types/index.d.ts +2 -0
  66. package/build/esm/models/constructor-items/common.d.ts +1 -0
  67. package/build/esm/models/constructor-items/sub-blocks.d.ts +12 -1
  68. package/build/esm/schema/constants.d.ts +4 -0
  69. package/build/esm/schema/validators/common.d.ts +13 -1
  70. package/build/esm/schema/validators/common.js +8 -1
  71. package/build/esm/sub-blocks/Divider/schema.d.ts +1 -1
  72. package/build/esm/sub-blocks/Quote/Quote.css +11 -18
  73. package/build/esm/sub-blocks/Quote/Quote.js +8 -7
  74. package/build/esm/sub-blocks/Quote/schema.d.ts +4 -0
  75. package/build/esm/sub-blocks/Quote/schema.js +4 -1
  76. package/build/esm/text-transform/config.js +10 -4
  77. package/package.json +1 -1
  78. package/server/models/constructor-items/common.d.ts +1 -0
  79. package/server/models/constructor-items/sub-blocks.d.ts +12 -1
  80. package/server/text-transform/config.js +10 -4
  81. package/styles/variables.scss +2 -0
  82. package/widget/index.js +1 -1
@@ -78,6 +78,18 @@ export declare const CardLayoutProps: {
78
78
  context: {
79
79
  type: string;
80
80
  };
81
+ indent: {
82
+ type: string;
83
+ additionalProperties: boolean;
84
+ properties: {
85
+ top: {
86
+ enum: string[];
87
+ };
88
+ bottom: {
89
+ enum: string[];
90
+ };
91
+ };
92
+ };
81
93
  type: {};
82
94
  when: {
83
95
  type: string;
@@ -165,6 +177,18 @@ export declare const CardLayoutBlock: {
165
177
  context: {
166
178
  type: string;
167
179
  };
180
+ indent: {
181
+ type: string;
182
+ additionalProperties: boolean;
183
+ properties: {
184
+ top: {
185
+ enum: string[];
186
+ };
187
+ bottom: {
188
+ enum: string[];
189
+ };
190
+ };
191
+ };
168
192
  type: {};
169
193
  when: {
170
194
  type: string;
@@ -242,6 +242,18 @@ export declare const ContentLayoutBlock: {
242
242
  context: {
243
243
  type: string;
244
244
  };
245
+ indent: {
246
+ type: string;
247
+ additionalProperties: boolean;
248
+ properties: {
249
+ top: {
250
+ enum: string[];
251
+ };
252
+ bottom: {
253
+ enum: string[];
254
+ };
255
+ };
256
+ };
245
257
  type: {};
246
258
  when: {
247
259
  type: string;
@@ -243,6 +243,18 @@ export declare const ExtendedFeaturesBlock: {
243
243
  context: {
244
244
  type: string;
245
245
  };
246
+ indent: {
247
+ type: string;
248
+ additionalProperties: boolean;
249
+ properties: {
250
+ top: {
251
+ enum: string[];
252
+ };
253
+ bottom: {
254
+ enum: string[];
255
+ };
256
+ };
257
+ };
246
258
  type: {};
247
259
  when: {
248
260
  type: string;
@@ -134,6 +134,18 @@ export declare const FilterProps: {
134
134
  context: {
135
135
  type: string;
136
136
  };
137
+ indent: {
138
+ type: string;
139
+ additionalProperties: boolean;
140
+ properties: {
141
+ top: {
142
+ enum: string[];
143
+ };
144
+ bottom: {
145
+ enum: string[];
146
+ };
147
+ };
148
+ };
137
149
  type: {};
138
150
  when: {
139
151
  type: string;
@@ -250,6 +262,18 @@ export declare const FilterBlock: {
250
262
  context: {
251
263
  type: string;
252
264
  };
265
+ indent: {
266
+ type: string;
267
+ additionalProperties: boolean;
268
+ properties: {
269
+ top: {
270
+ enum: string[];
271
+ };
272
+ bottom: {
273
+ enum: string[];
274
+ };
275
+ };
276
+ };
253
277
  type: {};
254
278
  when: {
255
279
  type: string;
@@ -193,6 +193,18 @@ export declare const FormBlock: {
193
193
  context: {
194
194
  type: string;
195
195
  };
196
+ indent: {
197
+ type: string;
198
+ additionalProperties: boolean;
199
+ properties: {
200
+ top: {
201
+ enum: string[];
202
+ };
203
+ bottom: {
204
+ enum: string[];
205
+ };
206
+ };
207
+ };
196
208
  type: {};
197
209
  when: {
198
210
  type: string;
@@ -1318,6 +1318,18 @@ export declare const HeaderBlock: {
1318
1318
  context: {
1319
1319
  type: string;
1320
1320
  };
1321
+ indent: {
1322
+ type: string;
1323
+ additionalProperties: boolean;
1324
+ properties: {
1325
+ top: {
1326
+ enum: string[];
1327
+ };
1328
+ bottom: {
1329
+ enum: string[];
1330
+ };
1331
+ };
1332
+ };
1321
1333
  type: {};
1322
1334
  when: {
1323
1335
  type: string;
@@ -587,6 +587,18 @@ export declare const HeaderSliderBlock: {
587
587
  context: {
588
588
  type: string;
589
589
  };
590
+ indent: {
591
+ type: string;
592
+ additionalProperties: boolean;
593
+ properties: {
594
+ top: {
595
+ enum: string[];
596
+ };
597
+ bottom: {
598
+ enum: string[];
599
+ };
600
+ };
601
+ };
590
602
  type: {};
591
603
  when: {
592
604
  type: string;
@@ -142,6 +142,18 @@ export declare const IconsProps: {
142
142
  context: {
143
143
  type: string;
144
144
  };
145
+ indent: {
146
+ type: string;
147
+ additionalProperties: boolean;
148
+ properties: {
149
+ top: {
150
+ enum: string[];
151
+ };
152
+ bottom: {
153
+ enum: string[];
154
+ };
155
+ };
156
+ };
145
157
  type: {};
146
158
  when: {
147
159
  type: string;
@@ -293,6 +305,18 @@ export declare const IconsBlock: {
293
305
  context: {
294
306
  type: string;
295
307
  };
308
+ indent: {
309
+ type: string;
310
+ additionalProperties: boolean;
311
+ properties: {
312
+ top: {
313
+ enum: string[];
314
+ };
315
+ bottom: {
316
+ enum: string[];
317
+ };
318
+ };
319
+ };
296
320
  type: {};
297
321
  when: {
298
322
  type: string;
@@ -473,6 +473,18 @@ export declare const MapBlock: {
473
473
  context: {
474
474
  type: string;
475
475
  };
476
+ indent: {
477
+ type: string;
478
+ additionalProperties: boolean;
479
+ properties: {
480
+ top: {
481
+ enum: string[];
482
+ };
483
+ bottom: {
484
+ enum: string[];
485
+ };
486
+ };
487
+ };
476
488
  type: {};
477
489
  when: {
478
490
  type: string;
@@ -637,6 +637,18 @@ export declare const MediaBlockBaseProps: {
637
637
  context: {
638
638
  type: string;
639
639
  };
640
+ indent: {
641
+ type: string;
642
+ additionalProperties: boolean;
643
+ properties: {
644
+ top: {
645
+ enum: string[];
646
+ };
647
+ bottom: {
648
+ enum: string[];
649
+ };
650
+ };
651
+ };
640
652
  type: {};
641
653
  when: {
642
654
  type: string;
@@ -1295,6 +1307,18 @@ export declare const MediaBlock: {
1295
1307
  context: {
1296
1308
  type: string;
1297
1309
  };
1310
+ indent: {
1311
+ type: string;
1312
+ additionalProperties: boolean;
1313
+ properties: {
1314
+ top: {
1315
+ enum: string[];
1316
+ };
1317
+ bottom: {
1318
+ enum: string[];
1319
+ };
1320
+ };
1321
+ };
1298
1322
  type: {};
1299
1323
  when: {
1300
1324
  type: string;
@@ -374,6 +374,18 @@ export declare const PromoFeaturesBlock: {
374
374
  context: {
375
375
  type: string;
376
376
  };
377
+ indent: {
378
+ type: string;
379
+ additionalProperties: boolean;
380
+ properties: {
381
+ top: {
382
+ enum: string[];
383
+ };
384
+ bottom: {
385
+ enum: string[];
386
+ };
387
+ };
388
+ };
377
389
  type: {};
378
390
  when: {
379
391
  type: string;
@@ -115,6 +115,18 @@ export declare const QuestionsBlock: {
115
115
  context: {
116
116
  type: string;
117
117
  };
118
+ indent: {
119
+ type: string;
120
+ additionalProperties: boolean;
121
+ properties: {
122
+ top: {
123
+ enum: string[];
124
+ };
125
+ bottom: {
126
+ enum: string[];
127
+ };
128
+ };
129
+ };
118
130
  type: {};
119
131
  when: {
120
132
  type: string;
@@ -215,6 +215,18 @@ export declare const SliderBlock: {
215
215
  context: {
216
216
  type: string;
217
217
  };
218
+ indent: {
219
+ type: string;
220
+ additionalProperties: boolean;
221
+ properties: {
222
+ top: {
223
+ enum: string[];
224
+ };
225
+ bottom: {
226
+ enum: string[];
227
+ };
228
+ };
229
+ };
218
230
  type: {};
219
231
  when: {
220
232
  type: string;
@@ -81,6 +81,18 @@ export declare const TableBlock: {
81
81
  context: {
82
82
  type: string;
83
83
  };
84
+ indent: {
85
+ type: string;
86
+ additionalProperties: boolean;
87
+ properties: {
88
+ top: {
89
+ enum: string[];
90
+ };
91
+ bottom: {
92
+ enum: string[];
93
+ };
94
+ };
95
+ };
84
96
  type: {};
85
97
  when: {
86
98
  type: string;
@@ -607,6 +607,18 @@ export declare const TabsBlock: {
607
607
  context: {
608
608
  type: string;
609
609
  };
610
+ indent: {
611
+ type: string;
612
+ additionalProperties: boolean;
613
+ properties: {
614
+ top: {
615
+ enum: string[];
616
+ };
617
+ bottom: {
618
+ enum: string[];
619
+ };
620
+ };
621
+ };
610
622
  type: {};
611
623
  when: {
612
624
  type: string;
@@ -5,7 +5,6 @@ unpredictable css rules order in build */
5
5
  line-height: var(--g-text-body-3-line-height);
6
6
  display: flex;
7
7
  flex-direction: column;
8
- color: var(--g-color-text-secondary);
9
8
  }
10
9
  .pc-author__avatar {
11
10
  width: 80px;
@@ -25,11 +24,11 @@ unpredictable css rules order in build */
25
24
  .pc-author__name {
26
25
  font-size: var(--g-text-body-3-font-size);
27
26
  line-height: var(--g-text-body-3-line-height);
28
- color: var(--g-color-text-primary);
29
27
  }
30
28
  .pc-author__description {
31
29
  font-size: var(--g-text-body-2-font-size);
32
30
  line-height: var(--g-text-body-2-line-height);
31
+ color: var(--g-color-text-secondary);
33
32
  padding-top: 4px;
34
33
  }
35
34
  .pc-author__label:not(:first-child) {
@@ -53,4 +52,7 @@ unpredictable css rules order in build */
53
52
  }
54
53
  .pc-author_type_line .pc-author__label:not(:first-child) {
55
54
  margin-left: 16px;
55
+ }
56
+ .pc-author_theme_dark .pc-author__description {
57
+ color: var(--g-color-text-light-secondary);
56
58
  }
@@ -8,7 +8,7 @@ const utils_2 = require("../Media/Image/utils");
8
8
  const index_1 = require("../index");
9
9
  const b = (0, utils_1.block)('author');
10
10
  const Author = (props) => {
11
- const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa } = props;
11
+ const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa, theme, } = props;
12
12
  const { firstName, secondName, description, avatar } = author;
13
13
  const name = secondName ? `${firstName} ${secondName}` : firstName;
14
14
  const isAvatarJSX = react_1.default.isValidElement(avatar);
@@ -16,7 +16,7 @@ const Author = (props) => {
16
16
  if (!isAvatarJSX && avatar) {
17
17
  avatarProps = (0, utils_2.getMediaImage)(avatar);
18
18
  }
19
- return (react_1.default.createElement("div", { className: b({ type }, className), "data-qa": qa },
19
+ return (react_1.default.createElement("div", { className: b({ type, theme }, className), "data-qa": qa },
20
20
  avatar && (react_1.default.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : react_1.default.createElement(index_1.Image, Object.assign({}, avatarProps)))),
21
21
  react_1.default.createElement("div", { className: b('label') },
22
22
  react_1.default.createElement("div", { className: b('name') }, name),
@@ -4,17 +4,14 @@
4
4
  overflow: hidden;
5
5
  }
6
6
  .pc-code-editor_fullscreen {
7
- position: fixed;
7
+ position: absolute;
8
8
  top: 0;
9
9
  left: 0;
10
10
  width: 100%;
11
- height: 100vh;
11
+ height: 100%;
12
12
  z-index: 1000;
13
13
  background: var(--g-color-base-background);
14
14
  }
15
- .pc-code-editor_fullscreen .pc-code-editor__header {
16
- margin-top: var(--pc-editor-header-height);
17
- }
18
15
  .pc-code-editor__code {
19
16
  width: 100%;
20
17
  height: 100%;
@@ -1,12 +1,12 @@
1
1
  import { PageContent } from '../../../models';
2
2
  import { CodeEditorMessageProps } from '../../utils/validation';
3
3
  interface CodeEditorProps {
4
- content: PageContent;
4
+ code: string;
5
5
  fullscreenModeOn: boolean;
6
6
  validator: (code: string) => CodeEditorMessageProps;
7
7
  onFullscreenModeOnUpdate: (fullscreenModeOn: boolean) => void;
8
8
  onChange: (content: PageContent) => void;
9
9
  message?: CodeEditorMessageProps;
10
10
  }
11
- export declare const CodeEditor: ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }: CodeEditorProps) => JSX.Element;
11
+ export declare const CodeEditor: ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }: CodeEditorProps) => JSX.Element;
12
12
  export {};
@@ -5,26 +5,29 @@ const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
6
  const icons_1 = require("@gravity-ui/icons");
7
7
  const uikit_1 = require("@gravity-ui/uikit");
8
- const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
8
+ const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
9
9
  const react_monaco_editor_1 = tslib_1.__importDefault(require("react-monaco-editor"));
10
+ const models_1 = require("../../../models");
10
11
  const utils_1 = require("../../../utils");
12
+ const context_1 = require("../../context");
11
13
  const code_1 = require("../../utils/code");
12
14
  const constants_1 = require("./constants");
13
15
  const b = (0, utils_1.block)('code-editor');
14
- const CodeEditor = ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }) => {
15
- const value = (0, react_1.useMemo)(() => js_yaml_1.default.dump(content), [content]);
16
- const [message, setMessage] = (0, react_1.useState)(() => validator(value));
17
- const onChangeWithValidation = (0, react_1.useCallback)((code) => {
18
- const validationResult = validator(code);
16
+ const CodeEditor = ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }) => {
17
+ const [message, setMessage] = (0, react_1.useState)(() => validator(code));
18
+ const { theme = models_1.Theme.Light } = (0, react_1.useContext)(context_1.EditorContext);
19
+ // eslint-disable-next-line react-hooks/exhaustive-deps
20
+ const onChangeWithValidation = (0, react_1.useCallback)((0, debounce_1.default)((newCode) => {
21
+ const validationResult = validator(newCode);
19
22
  setMessage(validationResult);
20
- onChange((0, code_1.parseCode)(code));
21
- }, [onChange, validator]);
23
+ onChange((0, code_1.parseCode)(newCode));
24
+ }, 200), [onChange, validator]);
22
25
  return (react_1.default.createElement("div", { className: b({ fullscreen: fullscreenModeOn }) },
23
26
  react_1.default.createElement("div", { className: b('header') },
24
27
  react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn) },
25
28
  react_1.default.createElement(uikit_1.Icon, { data: fullscreenModeOn ? icons_1.ChevronsCollapseUpRight : icons_1.ChevronsExpandUpRight, size: 16 }))),
26
29
  react_1.default.createElement("div", { className: b('code') },
27
- react_1.default.createElement(react_monaco_editor_1.default, { key: String(fullscreenModeOn), value: value, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: "vs" })),
30
+ react_1.default.createElement(react_monaco_editor_1.default, { key: String(fullscreenModeOn), value: code, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: theme === models_1.Theme.Dark ? 'vs-dark' : 'vs' })),
28
31
  react_1.default.createElement("div", { className: b('footer') }, message && (react_1.default.createElement("div", { className: b('message-container') },
29
32
  react_1.default.createElement("div", { className: b('message', { status: message.status }) }, message.text))))));
30
33
  };
@@ -1,2 +1,2 @@
1
1
  import { EditorProps } from '../../types';
2
- export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, ...rest }: EditorProps) => JSX.Element;
2
+ export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme, ...rest }: EditorProps) => JSX.Element;
@@ -15,13 +15,15 @@ const useCodeValidator_1 = require("../../hooks/useCodeValidator");
15
15
  const main_1 = require("../../store/main");
16
16
  const settings_1 = require("../../store/settings");
17
17
  const types_1 = require("../../types");
18
+ const index_1 = require("../../types/index");
18
19
  const utils_1 = require("../../utils");
19
20
  const Form_1 = require("../Form/Form");
20
21
  const Editor = (_a) => {
21
- var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
22
+ var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
22
23
  const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, main_1.useMainState)(rest);
23
- const { viewMode, theme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = (0, settings_1.useSettingsState)();
24
+ const { viewMode, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = (0, settings_1.useSettingsState)();
24
25
  const isEditingMode = viewMode === types_1.ViewModeItem.Edititng;
26
+ const isCodeOnlyMode = codeFullscreeModeOn && formTab === index_1.FormTab.Code && viewMode === types_1.ViewModeItem.Edititng;
25
27
  const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
26
28
  const schema = (0, react_1.useMemo)(() => (0, schema_1.generateDefaultSchema)(customSchema), [customSchema]);
27
29
  const codeValidator = (0, useCodeValidator_1.useCodeValidator)(schema);
@@ -52,20 +54,29 @@ const Editor = (_a) => {
52
54
  content: transformedContent,
53
55
  custom: rest.custom,
54
56
  },
55
- providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode), theme }),
57
+ providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode), theme: constructorTheme }),
56
58
  deviceEmulationSettings,
57
- }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings, theme]);
59
+ theme: editorTheme,
60
+ }), [
61
+ providerProps,
62
+ rest.custom,
63
+ viewMode,
64
+ transformedContent,
65
+ deviceEmulationSettings,
66
+ constructorTheme,
67
+ editorTheme,
68
+ ]);
58
69
  (0, react_1.useEffect)(() => {
59
70
  onChange === null || onChange === void 0 ? void 0 : onChange(content);
60
71
  }, [content, onChange]);
61
72
  return (react_1.default.createElement(context_1.EditorContext.Provider, { value: context },
62
- react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate, theme: theme, onThemeChange: onThemeUpdate },
73
+ react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate, theme: constructorTheme, onThemeChange: onThemeUpdate },
63
74
  isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
64
75
  react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, activeTab: formTab, codeFullscreeModeOn: codeFullscreeModeOn, schema: schema, codeValidator: codeValidator, onActiveTabUpdate: onFormTabUpdate, onCodeFullscreeModeOnUpdate: onCodeFullscreeModeOnUpdate, onSelect: onSelect }))),
65
- react_1.default.createElement(Layout_1.default.Right, null,
76
+ !isCodeOnlyMode && (react_1.default.createElement(Layout_1.default.Right, null,
66
77
  react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState },
67
- react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps, { theme: theme }),
78
+ react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps, { theme: constructorTheme }),
68
79
  react_1.default.createElement(PageConstructor_1.PageConstructor, Object.assign({}, outgoingProps)))),
69
- isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd })))));
80
+ isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd }))))));
70
81
  };
71
82
  exports.Editor = Editor;
@@ -10,6 +10,7 @@ const CodeEditor_1 = require("../../components/CodeEditor/CodeEditor");
10
10
  const PagePropsForm_1 = require("../../components/PagePropsForm/PagePropsForm");
11
11
  const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
12
12
  const types_1 = require("../../types");
13
+ const hooks_1 = require("./hooks");
13
14
  const b = (0, utils_1.block)('editor-form');
14
15
  const tabsItems = Object.values(types_1.FormTab).map((tab) => ({
15
16
  id: tab,
@@ -17,6 +18,7 @@ const tabsItems = Object.values(types_1.FormTab).map((tab) => ({
17
18
  }));
18
19
  exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }) => {
19
20
  const _a = content || {}, { blocks } = _a, page = tslib_1.__rest(_a, ["blocks"]);
21
+ const code = (0, hooks_1.useCode)({ activeTab, content, codeFullscreeModeOn });
20
22
  const spec = (0, useFormSpec_1.default)(schema);
21
23
  const { blocks: blocksSpec, page: pageSpec } = spec || {};
22
24
  let form;
@@ -39,7 +41,7 @@ exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelec
39
41
  break;
40
42
  }
41
43
  case types_1.FormTab.Code: {
42
- form = (react_1.default.createElement(CodeEditor_1.CodeEditor, { content: content, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
44
+ form = (react_1.default.createElement(CodeEditor_1.CodeEditor, { code: code, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
43
45
  break;
44
46
  }
45
47
  }
@@ -0,0 +1,8 @@
1
+ import { FormProps } from './Form';
2
+ /**
3
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
4
+ *
5
+ * @param {Object} props - props parent from form
6
+ * @returns {string} - updated code
7
+ */
8
+ export declare function useCode({ activeTab, content, codeFullscreeModeOn, }: Pick<FormProps, 'activeTab' | 'content' | 'codeFullscreeModeOn'>): string;
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useCode = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = require("react");
6
+ const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
7
+ const usePreviousValue_1 = tslib_1.__importDefault(require("../../hooks/usePreviousValue"));
8
+ const types_1 = require("../../types");
9
+ /**
10
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
11
+ *
12
+ * @param {Object} props - props parent from form
13
+ * @returns {string} - updated code
14
+ */
15
+ function useCode({ activeTab, content, codeFullscreeModeOn, }) {
16
+ var _a;
17
+ const [code, setCode] = (0, react_1.useState)('');
18
+ const prevTab = (0, usePreviousValue_1.default)(activeTab);
19
+ const prevContentLength = (0, usePreviousValue_1.default)((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
20
+ const prevCodeFullscreeModeOn = (0, usePreviousValue_1.default)(codeFullscreeModeOn);
21
+ (0, react_1.useEffect)(() => {
22
+ var _a;
23
+ const switchedToCodeEditing = activeTab !== prevTab && activeTab === types_1.FormTab.Code;
24
+ const blocksCountChanged = prevContentLength !== ((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
25
+ const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;
26
+ if (blocksCountChanged || switchedToCodeEditing || codeModeSwitched) {
27
+ setCode(js_yaml_1.default.dump(content, { lineWidth: -1 }));
28
+ }
29
+ }, [
30
+ activeTab,
31
+ prevTab,
32
+ content,
33
+ prevContentLength,
34
+ codeFullscreeModeOn,
35
+ prevCodeFullscreeModeOn,
36
+ ]);
37
+ return code;
38
+ }
39
+ exports.useCode = useCode;
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
2
  import { PageConstructorProps, PageConstructorProviderProps } from '../containers/PageConstructor';
3
+ import { Theme } from '../models/common';
3
4
  import { EditorProps } from './types';
4
5
  export interface EditorContextType {
5
6
  constructorProps?: PageConstructorProps;
6
7
  providerProps?: PageConstructorProviderProps;
7
8
  deviceEmulationSettings?: EditorProps['deviceEmulationSettings'];
9
+ theme?: Theme;
8
10
  }
9
11
  export declare const EditorContext: React.Context<Partial<EditorContextType>>;
@@ -1,5 +1,6 @@
1
1
  import { PageConstructorProps, PageConstructorProviderProps } from '../../containers/PageConstructor';
2
2
  import { BlockDecorationProps, PageContent } from '../../models';
3
+ import { Theme } from '../../models/common';
3
4
  import { SchemaCustomConfig } from '../../schema';
4
5
  import { EditBlockActions } from '../components/EditBlock/EditBlock';
5
6
  export type EditorBlockId = number | string;
@@ -17,6 +18,7 @@ export interface EditorProps extends Required<Pick<PageConstructorProps, 'conten
17
18
  transformContent?: ContentTransformer;
18
19
  customSchema?: SchemaCustomConfig;
19
20
  deviceEmulationSettings?: DeviceEmulationSettings;
21
+ theme?: Theme;
20
22
  }
21
23
  export interface EditBlockEditorProps {
22
24
  isActive?: boolean;