feat: add editor mode switch

src/editor/components/AddBlock/AddBlock.scss

@@ -10,6 +10,12 @@ $block: '.#{$ns}add-block';
     $buttonWidth: 76px;
     $buttonHeight: 40px;
 
+    position: fixed;
+    bottom: $indentM;
+    left: calc(50% + var(--editor-left-column-width) / 2);
+    transform: translateX(-50%);
+    z-index: 110;
+
     &__button {
         @include reset-button-style();
         @include control();

src/editor/components/BlockForm/BlockForm.tsx

@@ -7,6 +7,7 @@ import {Form as FinalForm, FormSpy} from 'react-final-form';
 import {Block} from '../../../models';
 import {dynamicConfig} from '../../dynamic-forms-custom/config';
 import {CustomSpec} from '../../dynamic-forms-custom/parser/types';
+import usePreviousValue from '../../hooks/usePreviousValue';
 
 interface BlockFormProps {
     data: Block;
@@ -21,6 +22,7 @@ export const BlockForm = memo(
         // get initial values only at first render, then the form manages data
         // eslint-disable-next-line react-hooks/exhaustive-deps
         const initialValues = useMemo(() => ({content}), []);
+        const prevContent = usePreviousValue(content);
         const spec = useMemo(
             () => ({
                 ...specRaw,
@@ -43,7 +45,12 @@ export const BlockForm = memo(
                         }}
                     >
                         <FormSpy
-                            onChange={({values}) => onChange({type, ...values.content})}
+                            onChange={({values}) => {
+                                // fix for FormSpy onChange called twice without content changes
+                                if (!_.isEqual(values.content, prevContent)) {
+                                    onChange({type, ...values.content});
+                                }
+                            }}
                             subscription={{values: true}}
                         />
                         <DynamicField

src/editor/components/ControlPanel/ControlPanel.scss

@@ -0,0 +1,35 @@
+@import '../../../../styles/variables.scss';
+@import '../../../../styles/mixins.scss';
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+$block: '.#{$ns}control-panel';
+
+#{$block} {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: var(--editor-header-height);
+    padding: $indentXXXS $indentS;
+    background-color: var(--yc-color-base-background);
+    border-bottom: 1px solid var(--yc-color-line-generic);
+
+    &__icon {
+        display: flex;
+        align-items: center;
+    }
+
+    &__radio-button {
+        margin-left: $indentXXS;
+        //align for icons in radio buttons
+        .yc-radio-button__option {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    &__mode-switch {
+        display: flex;
+        align-items: center;
+    }
+}

src/editor/components/ControlPanel/ControlPanel.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {Display, Pencil} from '@gravity-ui/icons';
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {ClassNameProps} from '../../../models';
+import {block} from '../../../utils';
+import {ViewModeItem} from '../../types';
+
+import i18n from './i18n';
+
+const ICON_SIZE = 14;
+
+import './ControlPanel.scss';
+
+const b = block('control-panel');
+
+const ControlPanelViewModeIcons = {
+    [ViewModeItem.Edititng]: Pencil,
+    [ViewModeItem.View]: Display,
+};
+
+export interface ControlPanelProps extends ClassNameProps {
+    viewMode?: ViewModeItem;
+    onViewModeChange: (viewMode: ViewModeItem) => void;
+}
+
+const ControlPanel = ({
+    viewMode = ViewModeItem.Edititng,
+    onViewModeChange,
+    className,
+}: ControlPanelProps) => (
+    <div className={b(null, className)}>
+        <div className={b('mode-switch')}>
+            <span>{i18n('mode')}</span>
+            <RadioButton
+                className={b('radio-button')}
+                value={viewMode}
+                onUpdate={(value) => onViewModeChange(value as ViewModeItem)}
+            >
+                {Object.values(ViewModeItem).map((item) => {
+                    const Icon = ControlPanelViewModeIcons[item];
+
+                    return (
+                        <RadioButton.Option key={item} value={item}>
+                            <Icon className={b('icon')} width={ICON_SIZE} height={ICON_SIZE} />
+                        </RadioButton.Option>
+                    );
+                })}
+            </RadioButton>
+        </div>
+    </div>
+);
+
+export default ControlPanel;

src/editor/components/ControlPanel/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "mode": "Mode"
+}

src/editor/components/ControlPanel/i18n/index.ts

@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ControlPanel';
+
+export default registerKeyset({en, ru}, COMPONENT);

src/editor/components/ControlPanel/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "mode": "Режим"
+}

src/editor/components/Layout/Layout.scss

@@ -0,0 +1,44 @@
+@import '../../../../styles/variables.scss';
+@import '../../../../styles/mixins.scss';
+@import '../../styles/root.scss';
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}editor-layout';
+
+%overflow-container {
+    --yc-scrollbar-width: 0;
+    height: calc(100vh - var(--editor-header-height));
+    max-height: calc(100vh - var(--editor-header-height));
+    overflow-y: auto;
+}
+
+#{$block} {
+    position: relative;
+
+    &__panel {
+        top: 0;
+        position: sticky;
+        z-index: 2;
+    }
+
+    &__container {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        z-index: 1;
+    }
+
+    &__left,
+    &__right {
+        @extend %overflow-container;
+    }
+
+    &__left {
+        flex: 0 0 auto;
+        padding: $indentXXXS $indentS $indentS;
+        width: var(--editor-left-column-width);
+        border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);
+        overflow-x: auto;
+    }
+}

src/editor/components/Layout/Layout.tsx

@@ -0,0 +1,53 @@
+import React, {Children, Fragment, PropsWithChildren, ReactElement} from 'react';
+
+import {block} from '../../../utils';
+import {ViewModeItem} from '../../types';
+import ControlPanel from '../ControlPanel/ControlPanel';
+
+import './Layout.scss';
+
+const b = block('editor-layout');
+
+const Left: React.FC<PropsWithChildren> = () => null;
+const Right: React.FC<PropsWithChildren> = () => null;
+
+export interface LayoutProps {
+    mode: ViewModeItem;
+    onModeChange: (mode: ViewModeItem) => void;
+}
+
+const Layout = ({children, mode, onModeChange}: PropsWithChildren<LayoutProps>) => {
+    let left, right;
+
+    function handleChild(child: ReactElement) {
+        switch (child?.type) {
+            case Left:
+                left = child?.props.children;
+                break;
+            case Right:
+                right = child?.props.children;
+                break;
+        }
+    }
+
+    if (React.Children.toArray(children).length) {
+        Children.forEach(children as ReactElement, handleChild);
+    }
+
+    return (
+        <div className={b()}>
+            <ControlPanel viewMode={mode} onViewModeChange={onModeChange} className={b('panel')} />
+            <div className={b('container')}>
+                <Fragment>
+                    {left && <div className={b('left')}>{left}</div>}
+                    {right && <div className={b('right')}>{right}</div>}
+                </Fragment>
+            </div>
+        </div>
+    );
+};
+
+Layout.Left = Left;
+Layout.Right = Right;
+
+export default Layout;