@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/editor/components/NotFoundBlock/NotFoundBlock.css

@@ -0,0 +1,21 @@
+.pc-not-found-block {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+.pc-not-found-block:hover {
+  box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
+  cursor: pointer;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-not-found-block {
+  font-size: var(--g-text-display-1-font-size, var(--pc-text-display-1-font-size));
+  line-height: var(--g-text-display-1-line-height, var(--pc-text-display-1-line-height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  background-color: var(--pc-color-highlight-silver);
+  border-radius: var(--pc-border-radius);
+}

package/build/esm/editor/components/NotFoundBlock/NotFoundBlock.d.ts

@@ -0,0 +1,3 @@
+import { BlockDecorationProps } from '../../../models';
+import './NotFoundBlock.css';
+export declare const NotFoundBlock: ({ type, children }: BlockDecorationProps) => JSX.Element;

package/build/esm/editor/components/NotFoundBlock/NotFoundBlock.js

@@ -0,0 +1,8 @@
+import React, { Fragment } from 'react';
+import { BlockBase } from '../../../components';
+import { block } from '../../../utils';
+import { i18n } from './i18n';
+import './NotFoundBlock.css';
+const b = block('not-found-block');
+export const NotFoundBlock = ({ type, children }) => children ? (React.createElement(Fragment, null, children)) : (React.createElement(BlockBase, null,
+    React.createElement("div", { className: b() }, i18n('message', { type }))));

package/build/esm/editor/components/NotFoundBlock/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "message": "{{type}} not found"
+}

package/build/esm/editor/components/NotFoundBlock/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "message", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/editor/components/NotFoundBlock/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}NotFoundBlock`);

package/build/esm/editor/components/NotFoundBlock/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "message": "{{type}} не найден"
+}

package/build/esm/editor/components/PageSettings/PageSettings.css

@@ -0,0 +1,26 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-editor-page-settings__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-editor-page-settings__container .g-disclosure__content {
+  width: 100%;
+}
+.pc-editor-page-settings__form {
+  margin-top: 16px;
+}

package/build/esm/editor/components/PageSettings/PageSettings.d.ts

@@ -0,0 +1,12 @@
+import { JSONSchema4 } from 'json-schema';
+import { PageContent } from '../../../models';
+import './PageSettings.css';
+export interface PageSettingsProps {
+    content: PageContent;
+    schema: JSONSchema4;
+    onChange: (content: PageContent) => void;
+}
+export declare const PageSettings: {
+    ({ schema, content, onChange }: PageSettingsProps): JSX.Element;
+    displayName: string;
+};

package/build/esm/editor/components/PageSettings/PageSettings.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { DynamicField } from '@gravity-ui/dynamic-forms';
+import { Disclosure } from '@gravity-ui/uikit';
+import noop from 'lodash/noop';
+import { Form as FinalForm, FormSpy } from 'react-final-form';
+import { block } from '../../../utils';
+import { dynamicConfig } from '../../dynamic-forms-custom/config';
+import useFormSpec from '../../hooks/useFormSpec';
+import { i18n } from './i18n';
+import './PageSettings.css';
+const b = block('editor-page-settings');
+export const PageSettings = ({ schema, content, onChange }) => {
+    const spec = useFormSpec(schema);
+    const { page: pageSpec } = spec || {};
+    const initialPage = useMemo(() => {
+        const _a = content || {}, { blocks: _ } = _a, page = __rest(_a, ["blocks"]);
+        return page;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React.createElement(Disclosure, { className: b('container'), summary: i18n('page-settings-title'), size: "l" },
+        React.createElement("div", { className: b('form') },
+            React.createElement(FinalForm, { initialValues: { content: initialPage }, onSubmit: noop }, () => (React.createElement("div", null,
+                React.createElement(FormSpy, { onChange: ({ values }) => onChange(Object.assign(Object.assign({}, content), values.content)), subscription: { values: true } }),
+                React.createElement(DynamicField, { name: "content", spec: pageSpec, config: dynamicConfig })))))));
+};
+PageSettings.displayName = 'PageSettings';

package/build/esm/editor/components/PageSettings/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "page-settings-title": "Global page settings"
+}

package/build/esm/editor/components/PageSettings/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "page-settings-title", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/editor/components/PageSettings/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}PageSettings`);

package/build/esm/editor/components/PageSettings/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "page-settings-title": "Глобальные настройки страницы"
+}

package/build/esm/editor/containers/Editor/Editor.css

@@ -0,0 +1,17 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-editor__panel {
+  top: 0;
+  position: sticky;
+  z-index: 2;
+}

package/build/esm/editor/containers/Editor/Editor.d.ts

@@ -0,0 +1,3 @@
+import { EditorProps } from '../../types';
+import './Editor.css';
+export declare const Editor: (props: EditorProps) => JSX.Element;

package/build/esm/editor/containers/Editor/Editor.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { PageConstructor, PageConstructorProvider } from '../../../containers/PageConstructor';
+import { block } from '../../../utils';
+import AddBlock from '../../components/AddBlock/AddBlock';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import ControlPanel from '../../components/ControlPanel/ControlPanel';
+import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
+import Layout from '../../components/Layout/Layout';
+import { PageSettings } from '../../components/PageSettings/PageSettings';
+import { EditorContext } from '../../context';
+import { Form } from '../Form/Form';
+import { useEditorState } from './hooks/useEditorState';
+import './Editor.css';
+const b = block('editor');
+export const Editor = (props) => {
+    const { providerProps } = props;
+    const { context, viewMode, editMode, constructorTheme, onThemeUpdate, onViewModeUpdate, onEditModeUpdate, isCodeEditMode, isFormEditMode, isDesktopViewMode, content, schema, onContentUpdate, code, codeValidator, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, activeBlockIndex, onSelect, isCodeOnlyMode, errorBoundaryState, outgoingProps, onAdd, } = useEditorState(props);
+    return (React.createElement(EditorContext.Provider, { value: context },
+        React.createElement(ControlPanel, { viewMode: viewMode, onViewModeChange: onViewModeUpdate, editMode: editMode, onEditModeChange: onEditModeUpdate, theme: constructorTheme, className: b('panel'), onThemeChange: onThemeUpdate }),
+        isFormEditMode && isDesktopViewMode && (React.createElement(PageSettings, { content: content, schema: schema, onChange: onContentUpdate })),
+        isCodeEditMode && (React.createElement(CodeEditor, { code: code, onChange: onContentUpdate, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate })),
+        React.createElement(Layout, { editMode: editMode, viewMode: viewMode },
+            isFormEditMode && isDesktopViewMode && (React.createElement(Layout.Left, null,
+                React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, schema: schema, onSelect: onSelect }))),
+            !isCodeOnlyMode && (React.createElement(Layout.Right, null,
+                React.createElement(ErrorBoundary, { key: errorBoundaryState },
+                    React.createElement(PageConstructorProvider, Object.assign({}, providerProps, { theme: constructorTheme }),
+                        React.createElement(PageConstructor, Object.assign({}, outgoingProps)))),
+                isFormEditMode && React.createElement(AddBlock, { onAdd: onAdd }))))));
+};

package/build/esm/editor/containers/Editor/hooks/useCode.d.ts

@@ -0,0 +1,14 @@
+import { PageContent } from '../../../../models';
+type UseCodeProps = {
+    content: PageContent;
+    codeFullscreeModeOn: boolean;
+    isCodeEditMode: boolean;
+};
+/**
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
+ *
+ * @param {Object} props - props parent from form
+ * @returns {string} - updated code
+ */
+export declare function useCode({ content, codeFullscreeModeOn, isCodeEditMode }: UseCodeProps): string;
+export {};

package/build/esm/editor/containers/Editor/hooks/useCode.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import yaml from 'js-yaml';
+import usePreviousValue from '../../../hooks/usePreviousValue';
+/**
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
+ *
+ * @param {Object} props - props parent from form
+ * @returns {string} - updated code
+ */
+export function useCode({ content, codeFullscreeModeOn, isCodeEditMode }) {
+    var _a;
+    const [code, setCode] = useState('');
+    const prevContentLength = usePreviousValue((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
+    const prevCodeFullscreeModeOn = usePreviousValue(codeFullscreeModeOn);
+    useEffect(() => {
+        var _a;
+        const blocksCountChanged = prevContentLength !== ((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
+        const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;
+        if (blocksCountChanged || isCodeEditMode || codeModeSwitched) {
+            setCode(yaml.dump(content, { lineWidth: -1 }));
+        }
+    }, [isCodeEditMode, content, prevContentLength, codeFullscreeModeOn, prevCodeFullscreeModeOn]);
+    return code;
+}

package/build/esm/editor/containers/Editor/hooks/useEditorState.d.ts

@@ -0,0 +1,49 @@
+import { EditModeItem, EditorProps, ViewModeItem } from '../../../types';
+export declare const useEditorState: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme, ...rest }: EditorProps) => {
+    context: {
+        constructorProps: {
+            content: import("../../../../models").PageContent;
+            custom: import("../../../../models").CustomConfig | undefined;
+        };
+        providerProps: {
+            isMobile: boolean;
+            theme: import("../../../../models").Theme;
+            locale?: import("../../../../context/localeContext").LocaleContextProps | undefined;
+            location?: import("../../../../context/locationContext").LocationContextProps | undefined;
+            ssrConfig?: import("../../../../context/ssrContext").SSRContextProps | undefined;
+            mapsContext?: import("../../../../context/mapsContext/mapsContext").MapsContextType | undefined;
+            projectSettings?: import("../../../../context/projectSettingsContext").ProjectSettingsContextProps | undefined;
+            analytics?: import("../../../..").AnalyticsContextProps | undefined;
+            forms?: import("../../../../context/formsContext").FormsContextProps | undefined;
+            image?: import("../../../../context/imageContext").ImageContextProps | undefined;
+        };
+        deviceEmulationSettings: import("../../../types").DeviceEmulationSettings | undefined;
+        theme: import("../../../../models").Theme | undefined;
+    };
+    viewMode: ViewModeItem;
+    editMode: EditModeItem;
+    constructorTheme: import("../../../../models").Theme;
+    onThemeUpdate: (newTheme: import("../../../../models").Theme) => void;
+    onViewModeUpdate: (newViewMode: ViewModeItem) => void;
+    onEditModeUpdate: (newEditMode: EditModeItem) => void;
+    isCodeEditMode: boolean;
+    isDesktopViewMode: boolean;
+    content: import("../../../../models").PageContent;
+    schema: import("json-schema").JSONSchema4;
+    onContentUpdate: (newContent: import("../../../../models").PageContent) => void;
+    code: string;
+    codeValidator: import("../../../hooks/useCodeValidator").CodeValidator;
+    codeFullscreeModeOn: boolean;
+    onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn: boolean) => void;
+    activeBlockIndex: number;
+    onSelect: (index: number) => void;
+    isCodeOnlyMode: boolean;
+    errorBoundaryState: number;
+    outgoingProps: {
+        content: import("../../../../models").PageContent;
+        custom: import("../../../../models").CustomConfig | undefined;
+        viewMode: ViewModeItem;
+    };
+    onAdd: (block: import("../../../../models").Block) => void;
+    isFormEditMode: boolean;
+};

package/build/esm/editor/containers/Editor/hooks/useEditorState.js

@@ -0,0 +1,95 @@
+import { __rest } from "tslib";
+import React, { useEffect, useMemo } from 'react';
+import { generateDefaultSchema } from '../../../../schema';
+import EditBlock from '../../../components/EditBlock/EditBlock';
+import { ErrorBoundary } from '../../../components/ErrorBoundary/ErrorBoundary';
+import { NotFoundBlock } from '../../../components/NotFoundBlock/NotFoundBlock';
+import { useCodeValidator } from '../../../hooks/useCodeValidator';
+import { useMainState } from '../../../store/main';
+import { useSettingsState } from '../../../store/settings';
+import { EditModeItem, ViewModeItem } from '../../../types';
+import { addCustomDecorator, checkIsMobile, getBlockId } from '../../../utils';
+import { useCode } from './useCode';
+// Editor business logic
+export const useEditorState = (_a) => {
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
+    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = useMainState(rest);
+    const { viewMode, editMode, onEditModeUpdate, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = useSettingsState();
+    const isCodeEditMode = editMode === EditModeItem.Code;
+    const isViewEditMode = editMode === EditModeItem.View;
+    const isFormEditMode = editMode === EditModeItem.Form;
+    const isDesktopViewMode = viewMode === ViewModeItem.Desktop;
+    const isCodeOnlyMode = codeFullscreeModeOn && isCodeEditMode;
+    const transformedContent = useMemo(() => (transformContent ? transformContent(content, { viewMode, editMode }) : content), [content, transformContent, viewMode, editMode]);
+    const schema = useMemo(() => generateDefaultSchema(customSchema), [customSchema]);
+    const codeValidator = useCodeValidator(schema);
+    const outgoingProps = useMemo(() => {
+        const custom = isCodeEditMode || isViewEditMode
+            ? rest.custom
+            : addCustomDecorator([
+                (props) => React.createElement(NotFoundBlock, Object.assign({}, props)),
+                (props) => (React.createElement(EditBlock, Object.assign({}, injectEditBlockProps(props)))),
+                // need errorBoundaryState flag to reset error on content update
+                (props) => (React.createElement(ErrorBoundary, Object.assign({}, props, { key: `${getBlockId(props)}-${errorBoundaryState}` }))),
+            ], rest.custom);
+        return {
+            content: transformedContent,
+            custom,
+            viewMode,
+        };
+    }, [
+        injectEditBlockProps,
+        errorBoundaryState,
+        viewMode,
+        transformedContent,
+        rest.custom,
+        isCodeEditMode,
+        isViewEditMode,
+    ]);
+    const context = useMemo(() => ({
+        constructorProps: {
+            content: transformedContent,
+            custom: rest.custom,
+        },
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode), theme: constructorTheme }),
+        deviceEmulationSettings,
+        theme: editorTheme,
+    }), [
+        providerProps,
+        rest.custom,
+        viewMode,
+        transformedContent,
+        deviceEmulationSettings,
+        constructorTheme,
+        editorTheme,
+    ]);
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(content);
+    }, [content, onChange]);
+    const code = useCode({ isCodeEditMode, content, codeFullscreeModeOn });
+    return {
+        context,
+        viewMode,
+        editMode,
+        constructorTheme,
+        onThemeUpdate,
+        onViewModeUpdate,
+        onEditModeUpdate,
+        isCodeEditMode,
+        isDesktopViewMode,
+        content,
+        schema,
+        onContentUpdate,
+        code,
+        codeValidator,
+        codeFullscreeModeOn,
+        onCodeFullscreeModeOnUpdate,
+        activeBlockIndex,
+        onSelect,
+        isCodeOnlyMode,
+        errorBoundaryState,
+        outgoingProps,
+        onAdd,
+        isFormEditMode,
+    };
+};

package/build/esm/editor/containers/Form/Form.css

@@ -0,0 +1,87 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-editor-form {
+  --block-name-font-size: var(--g-text-display-1-font-size);
+  --block-name-line-height: var(--g-text-display-1-line-height);
+  --property-name-font-size: var(--g-text-body-1-font-size);
+  --property-name-line-height: var(--g-text-body-1-line-height);
+  --input-min-width: 150px;
+  --property-title-width: 96px;
+  --button-height: 48px;
+  --icon-size: 28px;
+  --icon-margin: 8px;
+  --property-font-weight: 500;
+  --header-text-size: var(--block-name-font-size);
+  --header-line-height: var(--block-name-line-height);
+}
+.pc-editor-form .df-use-search .df-use-search {
+  --button-height: 28px;
+  --icon-size: 16px;
+  --icon-margin: 0px;
+  --header-text-size: var(--property-name-font-size);
+  --header-line-height: var(--property-name-line-height);
+  --property-font-weight: 400;
+}
+.pc-editor-form .df-row {
+  width: inherit;
+}
+.pc-editor-form .df-row__left {
+  width: var(--property-title-width);
+}
+.pc-editor-form .df-row__title {
+  font-weight: var(--property-font-weight);
+  white-space: nowrap;
+}
+.pc-editor-form .df-simple-vertical-accordeon textarea {
+  min-width: var(--input-min-width);
+  min-height: var(--input-min-width);
+}
+.pc-editor-form .df-simple-vertical-accordeon__header .g-button,
+.pc-editor-form .df-simple-vertical-accordeon__title {
+  font-size: var(--header-text-size);
+  line-height: var(--header-line-height);
+}
+.pc-editor-form .df-simple-vertical-accordeon__header .g-button {
+  --g-button-height: var(--button-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pc-editor-form .df-simple-vertical-accordeon__header .g-button .g-button__icon-inner > svg {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--g-color-text-hint);
+}
+.pc-editor-form .df-simple-vertical-accordeon__header .g-button .g-button__icon_side_right ~ .g-button__text {
+  margin-right: var(--icon-margin);
+}
+.pc-editor-form .df-simple-vertical-accordeon__body {
+  margin-top: 0px;
+  padding-top: 12px;
+}
+.pc-editor-form .df-use-search {
+  margin: 4px 0;
+}
+.pc-editor-form .df-simple-vertical-accordeon__body,
+.pc-editor-form .df-group-indent > .df-use-search {
+  margin-top: 0;
+  margin-left: 1px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 12px;
+  border-left: 1px solid var(--g-color-line-generic-accent);
+}
+.pc-editor-form .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
+  padding-left: 12px;
+}
+.pc-editor-form .g-select,
+.pc-editor-form .g-text-input {
+  min-width: var(--input-min-width);
+  width: 100%;
+}
+.pc-editor-form + .pc-editor-form {
+  margin-top: 12px;
+}
+.pc-editor-form__block-form {
+  margin-bottom: 16px;
+}

package/build/esm/editor/containers/Form/Form.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { JSONSchema4 } from 'json-schema';
+import { PageContent } from '../../../models';
+import './Form.css';
+export interface FormProps {
+    content: PageContent;
+    schema: JSONSchema4;
+    activeBlockIndex: number;
+    onChange: (content: PageContent) => void;
+    onSelect: (index: number) => void;
+}
+export declare const Form: React.MemoExoticComponent<({ content, onChange, activeBlockIndex, onSelect, schema }: FormProps) => JSX.Element>;

package/build/esm/editor/containers/Form/Form.js

@@ -0,0 +1,24 @@
+import React, { memo } from 'react';
+import { Text } from '@gravity-ui/uikit';
+import { block, getBlockKey } from '../../../utils';
+import { BlockForm } from '../../components/BlockForm/BlockForm';
+import useFormSpec from '../../hooks/useFormSpec';
+import './Form.css';
+const b = block('editor-form');
+// TODO in https://github.com/gravity-ui/page-constructor/issues/884 this component will be extremely refactor
+export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, schema }) => {
+    const { blocks } = content || {};
+    const spec = useFormSpec(schema);
+    const { blocks: blocksSpec } = spec || {};
+    return (React.createElement("div", { className: b() },
+        React.createElement(Text, { variant: "body-2" }, 'Blocks'),
+        blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement("div", { className: b('block-form'), key: getBlockKey(blockData, index) },
+            React.createElement(BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+                    onChange(Object.assign(Object.assign({}, content), { blocks: [
+                            ...blocks.slice(0, index),
+                            data,
+                            ...blocks.slice(index + 1),
+                        ] }));
+                }, onSelect: () => onSelect(index) }))) : null)));
+});
+Form.displayName = 'Form';

package/build/esm/editor/context.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PageConstructorProps, PageConstructorProviderProps } from '../containers/PageConstructor';
+import { Theme } from '../models/common';
+import { EditorProps } from './types';
+export interface EditorContextType {
+    constructorProps?: PageConstructorProps;
+    providerProps?: PageConstructorProviderProps;
+    deviceEmulationSettings?: EditorProps['deviceEmulationSettings'];
+    theme?: Theme;
+}
+export declare const EditorContext: React.Context<Partial<EditorContextType>>;

package/build/esm/editor/context.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const EditorContext = React.createContext({});

package/build/esm/editor/data/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Block, BlockType } from '../../models';
+export type PreviewComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+export interface EdiorBlockData {
+    template: Block;
+    preview: PreviewComponent;
+    meta: {
+        title: string;
+        description?: string;
+    };
+}
+type EditorBlocksData = Partial<Record<BlockType, EdiorBlockData>>;
+declare function getEditorBlocksData(): Promise<EditorBlocksData>;
+export { EditorBlocksData, getEditorBlocksData };

package/build/esm/editor/data/index.js

@@ -0,0 +1,30 @@
+import { BlockType } from '../../models';
+import { formatBlockName } from '../utils';
+import DefaultPreview from './previews/default-preview';
+import HeaderBlock from './previews/header-block';
+const getBlockTemplate = (blockType) => import(`./templates/${blockType}.json`).then((data) => data.default);
+const getBlockPreview = (blockType) => {
+    try {
+        if (blockType === BlockType.HeaderBlock) {
+            return HeaderBlock;
+        }
+        return DefaultPreview;
+    }
+    catch (err) {
+        /*eslint-disable no-console */
+        console.warn(`Preview image for ${blockType} not found`);
+        return DefaultPreview;
+    }
+};
+async function getEditorBlocksData() {
+    const EdiorBlockData = {};
+    for (const blockType of Object.values(BlockType)) {
+        const template = await getBlockTemplate(blockType);
+        const preview = getBlockPreview(blockType);
+        template.meta = template.meta || {};
+        template.meta.title = template.meta.title || formatBlockName(blockType);
+        EdiorBlockData[blockType] = Object.assign(Object.assign({}, template), { preview });
+    }
+    return EdiorBlockData;
+}
+export { getEditorBlocksData };

package/build/esm/editor/data/previews/default-preview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DefaultPreview: React.FC<React.SVGProps<SVGSVGElement>>;
+export default DefaultPreview;

package/build/esm/editor/data/previews/default-preview.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../../../utils/svg';
+const DefaultPreview = (props) => (React.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
+    React.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "14.7675", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "14.7675", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#E7E7E7" }),
+    React.createElement("rect", { x: "33.6977", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
+    React.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
+export default DefaultPreview;

package/build/esm/editor/data/previews/header-block.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Header: React.FC<React.SVGProps<SVGSVGElement>>;
+export default Header;

package/build/esm/editor/data/previews/header-block.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../../../utils/svg';
+const Header = (props) => (React.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
+    React.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
+    React.createElement("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
+    React.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "currentColor" }),
+    React.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    React.createElement("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }),
+    React.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }),
+    React.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
+    React.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
+export default Header;