fix: editor form style indent (#428)

Author: gorgeousvlad

src/editor/components/BlockForm/BlockForm.scss

@@ -5,13 +5,10 @@ import _ from 'lodash';
 import {Form as FinalForm, FormSpy} from 'react-final-form';
 
 import {Block} from '../../../models';
-import {block} from '../../../utils';
 import {dynamicConfig} from '../../dynamic-forms-custom/config';
 import {CustomSpec} from '../../dynamic-forms-custom/parser/types';
 import usePreviousValue from '../../hooks/usePreviousValue';
 
-import './BlockForm.scss';
-
 interface BlockFormProps {
     data: Block;
     spec: CustomSpec;
@@ -20,8 +17,6 @@ interface BlockFormProps {
     active?: boolean;
 }
 
-const b = block('block-form');
-
 export const BlockForm = memo(
     ({data: {type, ...content}, onChange, onSelect, active, spec: specRaw}: BlockFormProps) => {
         const initialValues = useMemo(() => ({content}), [content]);
@@ -44,7 +39,6 @@ export const BlockForm = memo(
                     name={type}
                     title={spec.viewSpec.layoutTitle || type}
                     onOpenChange={onSelect}
-                    className={b('folded')}
                 >
                     {/* SimpleVerticalAccordeon requires children, put dummy value*/}{' '}
                 </SimpleVerticalAccordeon>

src/editor/components/BlockForm/BlockForm.tsx

@@ -15,4 +15,8 @@ $block: '.#{$ns}editor-form';
         --yc-color-base-special: var(--yc-color-promo-base-neon);
         margin-bottom: $indentS;
     }
+
+    &__block-form {
+        margin-bottom: $indentXS;
+    }
 }

src/editor/containers/Form/Form.scss

@@ -59,23 +59,25 @@ export const Form = memo(({content, onChange, activeBlockIndex, onSelect, spec}:
                 <Fragment>
                     {blocks.map((blockData, index) =>
                         blocksSpec[blockData.type] ? (
-                            <BlockForm
-                                spec={blocksSpec[blockData.type]}
-                                key={getBlockKey(blockData, index)}
-                                data={blockData}
-                                active={activeBlockIndex === index}
-                                onChange={(data: Block) => {
-                                    onChange({
-                                        ...content,
-                                        blocks: [
-                                            ...blocks.slice(0, index),
-                                            data,
-                                            ...blocks.slice(index + 1),
-                                        ],
-                                    });
-                                }}
-                                onSelect={() => onSelect(index)}
-                            />
+                            <div className={b('block-form')}>
+                                <BlockForm
+                                    spec={blocksSpec[blockData.type]}
+                                    key={getBlockKey(blockData, index)}
+                                    data={blockData}
+                                    active={activeBlockIndex === index}
+                                    onChange={(data: Block) => {
+                                        onChange({
+                                            ...content,
+                                            blocks: [
+                                                ...blocks.slice(0, index),
+                                                data,
+                                                ...blocks.slice(index + 1),
+                                            ],
+                                        });
+                                    }}
+                                    onSelect={() => onSelect(index)}
+                                />
+                            </div>
                         ) : null,
                     )}
                 </Fragment>