feat: add editor forms

README.md

@@ -184,6 +184,8 @@ Sub-blocks are components that can be used in the block `children` property. In
 
 6. In the block directory, add the `README.md` file with a description of input parameters.
 7. In the block directory add storybook demo in `__stories__` folder. All demo content for story should be placed in `data.json` at story dir. The generic `Story` must accept the type of block props, otherwise incorrect block props will be displayed in Storybook.
+8. Add block data template to `src/editor/data/templates/` folder, file name should match block type
+9. (optional) Add block preview icon to `src/editor/data/previews/` folder, file name should match block type
 
 ### Themes
 

package.json

@@ -48,8 +48,10 @@
   "dependencies": {
     "@gravity-ui/i18n": "^1.0.0",
     "bem-cn-lite": "^4.0.0",
+    "final-form": "^4.20.9",
     "github-buttons": "2.23.0",
     "lodash": "^4.17.21",
+    "react-final-form": "^6.5.9",
     "react-player": "^2.9.0",
     "react-slick": "^0.28.1",
     "react-spring": "^9.3.0",
@@ -69,6 +71,7 @@
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@doc-tools/transform": "2.12.0",
+    "@gravity-ui/dynamic-forms": "^1.7.1",
     "@gravity-ui/eslint-config": "^2.0.0",
     "@gravity-ui/icons": "^2.1.0",
     "@gravity-ui/prettier-config": "^1.0.1",
@@ -85,6 +88,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.4",
+    "@types/json-schema": "^7.0.12",
     "@types/lodash": "^4.14.176",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",

src/blocks/ContentLayout/ContentLayout.tsx

@@ -35,14 +35,9 @@ function getTextWidth(size: ContentTextSize) {
 
 export const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {
     const isMobile = useContext(MobileContext);
-    const {textContent, fileContent, properties: cardLayoutProperties = {size: 'l'}} = props;
-    const {
-        size = 'l',
-        background,
-        centered,
-        theme = 'default',
-        textWidth = 'm',
-    } = cardLayoutProperties;
+    const {textContent, fileContent} = props;
+    const propsSource = props.properties || props;
+    const {size = 'l', background, centered, theme = 'default', textWidth = 'm'} = propsSource;
 
     const colSizes = useMemo(() => getTextWidth(textWidth), [textWidth]);
 

src/blocks/ContentLayout/schema.ts

@@ -9,31 +9,37 @@ import {
 import {filteredArray} from '../../schema/validators/utils';
 import {ContentBlock} from '../../sub-blocks/Content/schema';
 
+const ContentLayoutBlockProperties = {
+    size: {
+        type: 'string',
+        enum: contentSizes,
+    },
+    background: ImageObjectProps,
+    centered: {
+        type: 'boolean',
+    },
+    theme: {
+        type: 'string',
+        enum: contentThemes,
+    },
+    textWidth: {
+        type: 'string',
+        enum: contentTextWidth,
+    },
+};
+
 export const ContentLayoutBlock = {
     'content-layout-block': {
         additionalProperties: false,
         properties: {
             ...BlockBaseProps,
-            textContent: ContentBlock,
+            textContent: ContentBlock?.content,
             fileContent: filteredArray(FileLinkProps),
-            properties: {
-                size: {
-                    type: 'string',
-                    enum: contentSizes,
-                },
-                background: ImageObjectProps,
-                centered: {
-                    type: 'boolean',
-                },
-                theme: {
-                    type: 'string',
-                    enum: contentThemes,
-                },
-                textWidth: {
-                    type: 'string',
-                    enum: contentTextWidth,
-                },
-            },
+            /**
+             * @deprecated Use params on top level instead
+             */
+            properties: ContentLayoutBlockProperties,
+            ...ContentLayoutBlockProperties,
         },
     },
 };

src/blocks/ExtendedFeatures/schema.ts

@@ -4,7 +4,9 @@ import {
     BlockHeaderProps,
     LinkProps,
     containerSizesObject,
+    withTheme,
 } from '../../schema/validators/common';
+import {ImageProps} from '../../schema/validators/components';
 import {filteredArray} from '../../schema/validators/utils';
 
 export const ExtendedFeaturesItem = {
@@ -24,9 +26,7 @@ export const ExtendedFeaturesItem = {
             enum: ['New', 'Preview'],
         },
         link: LinkProps,
-        icon: {
-            type: 'string',
-        },
+        icon: withTheme(ImageProps),
     },
 };
 

src/blocks/FilterBlock/schema.ts

@@ -40,7 +40,18 @@ export const FilterProps = {
         ...BlockBaseProps,
         ...AnimatableProps,
         ...BlockHeaderProps,
-        allTag: {oneOf: [{type: 'boolean'}, {type: 'string'}]},
+        allTag: {
+            oneOf: [
+                {
+                    type: 'boolean',
+                    optionName: 'auto',
+                },
+                {
+                    type: 'string',
+                    optionName: 'cutom',
+                },
+            ],
+        },
         colSizes: containerSizesObject,
         tags: filteredArray(FilterTagProps),
         items: filteredArray(FilterItemProps),
@@ -52,5 +63,5 @@ export const FilterProps = {
 };
 
 export const FilterBlock = {
-    'filterable-block': FilterProps,
+    'filter-block': FilterProps,
 };

src/blocks/Header/schema.ts

@@ -31,6 +31,7 @@ export const HeaderProperties = {
     description: {
         type: 'string',
         contentType: 'yfm',
+        inputType: 'textarea',
     },
     width: {
         type: 'string',

src/blocks/HeaderSlider/schema.ts

@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 import {HeaderProperties, SliderProps} from '../../schema/validators/blocks';
 import {BlockBaseProps} from '../../schema/validators/common';
 
@@ -7,7 +9,7 @@ export const HeaderSliderBlock = {
         required: ['items'],
         properties: {
             ...BlockBaseProps,
-            ...SliderProps,
+            ..._.omit(SliderProps, ['loadable', 'children']),
             items: {
                 type: 'array',
                 items: {

src/blocks/Icons/schema.ts

@@ -13,6 +13,7 @@ export const IconsProps = {
         size: {
             type: 'string',
             enum: ['s', 'm', 'l'],
+            default: 's',
         },
         items: {
             type: 'array',
@@ -38,5 +39,5 @@ export const IconsProps = {
 };
 
 export const IconsBlock = {
-    'icon-block': IconsProps,
+    'icons-block': IconsProps,
 };

src/blocks/Media/schema.ts

@@ -6,6 +6,7 @@ import {
     ButtonBlock,
     MediaProps,
     mediaDirection,
+    withTheme,
 } from '../../schema/validators/common';
 import {ContentBase} from '../../sub-blocks/Content/schema';
 
@@ -52,7 +53,7 @@ export const MediaBlock = {
         required: ['title', 'media'],
         properties: {
             ...MediaBlockBaseProps,
-            media: Media,
+            media: withTheme(Media),
         },
     },
 };

src/blocks/PromoFeaturesBlock/schema.ts

@@ -13,6 +13,7 @@ export const PromoFeaturesItem = {
         text: {
             type: 'string',
             contentType: 'yfm',
+            inputType: 'textarea',
         },
         theme: {
             enum: ['accent', 'accent-light', 'primary'],

src/blocks/Slider/schema.ts

@@ -13,18 +13,15 @@ const LoadableProps = {
     properties: {
         source: {
             type: 'string',
-            enum: ['events', 'blog', 'services'],
+            // add loadable sources here if you use it in your project
+            // enum: ['my-loadable-source-1', 'my-loadable-source-1'],
         },
         /**
          * @deprecated
          */
         minCount: {
             type: 'number',
         },
-        /**
-         * @deprecated Will be moved to params
-         */
-        serviceId: {type: 'number'},
         params: {
             type: 'object',
             patternProperties: {
@@ -34,6 +31,8 @@ const LoadableProps = {
             },
         },
     },
+    // remove it in your custom validator schema if you use loadable
+    disabled: true,
 };
 
 const DisclaimerProps = {

src/blocks/Table/schema.ts

@@ -20,8 +20,18 @@ export const TableBlock = {
                         items: {
                             type: 'array',
                             items: {
-                                type: ['string', 'number'],
-                                contentType: 'text',
+                                oneOf: [
+                                    {
+                                        type: 'string',
+                                        contentType: 'text',
+                                        optionName: 'text',
+                                    },
+                                    {
+                                        type: 'number',
+                                        contentType: 'text',
+                                        optionName: 'number',
+                                    },
+                                ],
                             },
                         },
                     },

src/components/BlockBase/BlockBase.tsx

@@ -11,7 +11,7 @@ import './BlockBase.scss';
 const b = block('block-base');
 
 const BlockBase = (props: PropsWithChildren<BlockBaseProps & ClassNameProps>) => {
-    const {anchor, visible, children, className, resetPaddings, qa, index = 0} = props;
+    const {anchor, visible, children, className, resetPaddings, qa, type, index} = props;
 
     return (
         <Col
@@ -20,7 +20,7 @@ const BlockBase = (props: PropsWithChildren<BlockBaseProps & ClassNameProps>) =>
             reset={true}
             dataQa={qa}
         >
-            <BlockDecoration id={index}>
+            <BlockDecoration type={type} index={index}>
                 {anchor && <Anchor id={anchor.url} className={b('anchor')} />}
                 {children}
             </BlockDecoration>