[WIP] feat: add editor v2

.eslintignore

@@ -7,6 +7,9 @@ node_modules
 /coverage
 /widget
 /schema
+/playground/dist
 
 /playwright/playwright/.cache/
 playwright
+/playwright-report
+/scripts

.gitignore

@@ -34,3 +34,8 @@ playwright-report*
 # Skill eval artifacts (workspaces are local-only test outputs)
 .agents/skills/*-workspace/
 .claude/skills/*-workspace/
+
+# Playground
+/playground/node_modules
+/playground/.next
+/playground/.env

.prettierignore

@@ -15,8 +15,12 @@ CONTRIBUTING.md
 /widget
 /schema
 
+
 /playwright/playwright/.cache/
 playwright
 
 # npm files
-package.json
+package.json
+
+# Playground
+/playground/.next

.storybook/addons/form-addon/constants.ts

@@ -0,0 +1,3 @@
+export const ADDON_ID = 'formaddon';
+export const TOOL_ID = `${ADDON_ID}/tool`;
+export const GLOBAL_KEY = 'formAddon';

.storybook/addons/form-addon/preset.ts

@@ -0,0 +1,9 @@
+function managerEntries(entry: string[] = []) {
+    return [...entry, require.resolve('./register')];
+}
+
+function previewAnnotations(entry: string[] = []) {
+    return [...entry, require.resolve('./preview')];
+}
+
+module.exports = {managerEntries, previewAnnotations};

.storybook/addons/form-addon/preview.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import {ThemeProvider} from '@gravity-ui/uikit';
+import {useArgs} from '@storybook/preview-api';
+import {Decorator} from '@storybook/react';
+
+import FormGenerator from '../../../src/form-generator-v2/FormGenerator';
+import type {Fields} from '../../../src/form-generator-v2/types';
+
+import {GLOBAL_KEY} from './constants';
+
+export const withFormAddon: Decorator = (Story, context) => {
+    const [args, updateArgs] = useArgs();
+    const inputs = context.parameters.inputs as Fields | undefined;
+    const isActive = Boolean(context.globals[GLOBAL_KEY]);
+
+    if (!isActive || !inputs) {
+        return <Story />;
+    }
+
+    return (
+        <ThemeProvider theme="dark">
+            <div style={{display: 'flex', alignItems: 'flex-start', width: '100%'}}>
+                <div
+                    style={{
+                        flex: 1,
+                        position: 'sticky',
+                        top: 0,
+                        marginLeft: 'var(--g-spacing-4)',
+                        paddingTop: 'var(--g-spacing-4)',
+                    }}
+                >
+                    <Story />
+                </div>
+                <div
+                    style={{
+                        width: 420,
+                        flexShrink: 0,
+                        border: '1px solid var(--g-color-line-generic)',
+                        borderRadius: 'var(--g-border-radius-m)',
+                        margin: 'var(--g-spacing-4)',
+                    }}
+                >
+                    <h4
+                        style={{
+                            padding: 'var(--g-spacing-4) var(--g-spacing-3)',
+                            fontFamily: 'var(--g-text-subheader-font-family)',
+                            fontWeight: 'var(--g-text-subheader-font-weight)',
+                            fontSize: 'var(--g-text-subheader-3-font-size)',
+                            lineHeight: 'var(--g-text-subheader-3-line-height)',
+                            margin: 0,
+                        }}
+                    >
+                        Form
+                    </h4>
+                    <FormGenerator
+                        blockConfig={inputs}
+                        contentConfig={args}
+                        onUpdate={updateArgs}
+                    />
+                </div>
+            </div>
+        </ThemeProvider>
+    );
+};
+
+export const decorators = [withFormAddon];

.storybook/addons/form-addon/register.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import {IconButton} from '@storybook/components';
+import {EditIcon} from '@storybook/icons';
+import {addons, types, useGlobals} from '@storybook/manager-api';
+const STORY_PREPARED = 'storyPrepared';
+const STORY_CHANGED = 'storyChanged';
+
+import {ADDON_ID, GLOBAL_KEY, TOOL_ID} from './constants';
+
+addons.register(ADDON_ID, () => {
+    addons.add(TOOL_ID, {
+        type: types.TOOL,
+        title: 'Form editor',
+        render: () => <FormTool />,
+    });
+});
+
+function FormTool() {
+    const [globals, updateGlobals] = useGlobals();
+    const isActive = Boolean(globals[GLOBAL_KEY]);
+    const [hasInputs, setHasInputs] = React.useState(false);
+
+    React.useEffect(() => {
+        const channel = addons.getChannel();
+
+        const onPrepared = ({parameters}: {parameters: Record<string, unknown>}) => {
+            setHasInputs(Boolean(parameters?.inputs));
+        };
+
+        const onChanged = () => setHasInputs(false);
+
+        channel.on(STORY_PREPARED, onPrepared);
+        channel.on(STORY_CHANGED, onChanged);
+
+        return () => {
+            channel.off(STORY_PREPARED, onPrepared);
+            channel.off(STORY_CHANGED, onChanged);
+        };
+    }, []);
+
+    if (!hasInputs) {
+        return null;
+    }
+
+    return (
+        <IconButton
+            active={isActive}
+            title="Toggle form editor"
+            onClick={() => updateGlobals({[GLOBAL_KEY]: !isActive})}
+        >
+            <EditIcon />
+        </IconButton>
+    );
+}

.storybook/addons/result-addon/AddonResult.css

@@ -0,0 +1,13 @@
+.result-addon {
+    padding: 11px;
+}
+
+.result-addon pre {
+    margin: 10px 0 0;
+    padding: 0;
+}
+
+.result-addon__empty {
+    opacity: 0.5;
+    font-style: italic;
+}

.storybook/addons/result-addon/constants.ts

@@ -0,0 +1,3 @@
+export const ADDON_ID = 'resultaddon';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const EVENT_ID = `${ADDON_ID}/update`;

.storybook/addons/result-addon/preset.ts

@@ -0,0 +1,5 @@
+function managerEntries(entry: string[] = []) {
+    return [...entry, require.resolve('./register')];
+}
+
+module.exports = {managerEntries};

.storybook/addons/result-addon/register.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {AddonPanel} from '@storybook/components';
+import {addons, types, useChannel, useGlobals} from '@storybook/manager-api';
+import {ClipboardButton, ThemeProvider} from '@gravity-ui/uikit';
+
+import {ADDON_ID, EVENT_ID, PANEL_ID} from './constants';
+
+import './AddonResult.css';
+
+const ResultPanel = () => {
+    const [globals] = useGlobals();
+    const [content, setContent] = React.useState<unknown>(null);
+
+    useChannel({
+        [EVENT_ID]: (value: unknown) => {
+            setContent(value);
+        },
+    });
+
+    const json = React.useMemo(
+        () => (content !== null ? JSON.stringify(content, null, 2) : ''),
+        [content],
+    );
+
+    return (
+        <ThemeProvider theme={globals.theme}>
+            <div className="result-addon">
+                {json ? <ClipboardButton text={json} /> : null}
+                <pre>{json || <span className="result-addon__empty">No data yet</span>}</pre>
+            </div>
+        </ThemeProvider>
+    );
+};
+
+addons.register(ADDON_ID, () => {
+    addons.add(PANEL_ID, {
+        type: types.PANEL,
+        title: 'Result',
+        paramKey: 'resultPanel',
+        render: ({active, key}) => (
+            <AddonPanel active={Boolean(active)} key={key}>
+                <ResultPanel />
+            </AddonPanel>
+        ),
+    });
+});

.storybook/addons/result-addon/useResultPanel.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {useChannel} from '@storybook/preview-api';
+
+import {EVENT_ID} from './constants';
+
+/**
+ * Drop-in replacement for useState that also mirrors the value to the Result panel.
+ *
+ * Usage in a story:
+ *   const [content, setContent] = useResultPanel<Content>({});
+ */
+export function useResultPanel<T>(initial: T): [T, (value: T) => void] {
+    const [value, setValue] = React.useState<T>(initial);
+
+    const emit = useChannel({});
+
+    const update = React.useCallback(
+        (next: T) => {
+            setValue(next);
+            emit(EVENT_ID, next);
+        },
+        [emit],
+    );
+
+    // Emit initial value so the panel is not empty on first render.
+    React.useEffect(() => {
+        emit(EVENT_ID, initial);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return [value, update];
+}

.storybook/decorators/docs/index.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {ThemeProvider} from '@gravity-ui/uikit';
 
 import {themes} from '../../theme';
-import {MobileContext} from '../../../src/context/mobileContext';
+
 import {cn} from '../../../src/utils/cn';
 
 import './DocsDecorator.scss';
@@ -20,9 +20,7 @@ export function DocsDecorator({children, context}: DocsDecoratorProps) {
     return (
         <div className={b()}>
             <DocsContainer context={context} theme={themes[theme as 'dark' | 'light']}>
-                <ThemeProvider theme={theme}>
-                    <MobileContext.Provider value={false}>{children}</MobileContext.Provider>
-                </ThemeProvider>
+                <ThemeProvider theme={theme}>{children}</ThemeProvider>
             </DocsContainer>
         </div>
     );

.storybook/decorators/withPageConstructorProvider.tsx

@@ -4,11 +4,7 @@ import {PageConstructorProvider} from '../../src/containers/PageConstructor/Prov
 
 export const withPageConstructorProvider: Decorator = (Story, context) => {
     return (
-        <PageConstructorProvider
-            isMobile={context.globals.platform === 'mobile'}
-            locale={{lang: context.globals.lang}}
-            theme={context.globals.theme}
-        >
+        <PageConstructorProvider>
             <Story {...context} />
         </PageConstructorProvider>
     );

.storybook/main.ts

@@ -31,6 +31,8 @@ const config = {
             },
         },
         './addons/yaml-addon/preset',
+        './addons/result-addon/preset',
+        './addons/form-addon/preset',
         './addons/theme-addon/register.tsx',
         '@storybook/addon-mdx-gfm',
         '@storybook/addon-webpack5-compiler-babel',

.storybook/preview.ts

@@ -19,6 +19,8 @@ const preview: Preview = {
     decorators: [withLang, withMobile, withContextProvider, withPageConstructorProvider],
 
     parameters: {
+        inputs: {disable: true},
+        resultPanel: {disable: true},
         layout: 'fullscreen',
         docs: {
             theme: themeLight,
@@ -55,6 +57,9 @@ const preview: Preview = {
     },
 
     globalTypes: {
+        formAddon: {
+            defaultValue: false,
+        },
         theme: {
             name: 'Theme',
             description: 'Global theme for components',

.storybook/utils.ts

@@ -1,6 +1,6 @@
 import yfm from '@diplodoc/transform';
 import {ConstructorBlock} from '../src';
-import {contentTransformer} from '../src/text-transform';
+import {contentTransformer} from '../src/gravity-blocks/text-transform';
 
 export const yfmTransform = (content: string) => yfm(content).result.html;
 

README.md

@@ -540,7 +540,7 @@ If you want to release a new version in previous major after commit it to the ma
 7. Check your changes in CHANGELOG.md and approve robot's PR.
 8. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
 
-## Page constructor editor
+## Page Constructor Editor v1
 
 Editor provides user interface for page content management with realtime preview.
 
@@ -593,6 +593,36 @@ When working with AI agents on this project, the Memory Bank serves as a compreh
 
 AI agents can read these files to quickly get up to speed with the project context and make more informed decisions about code changes and implementations.
 
+## Page Constructor Editor v2
+
+Editor provides user interface for page content management with realtime preview.
+
+Based on Iframe postMessage communication.
+
+How to use:
+
+```tsx
+import {Editor} from '@gravity-ui/page-constructor/editor-v2';
+
+export const MyAppEditor = ({initialContent, onUpdate, disableUrlField}: MyAppEditorProps) => (
+  <Editor
+    initialUrl={'https://url-to-page-with-page-constructor.com'}
+    content={initialContent}
+    disableUrlField={disableUrlField}
+    onUpdate={onUpdate}
+  />
+);
+```
+
+### How to develop
+
+```shell
+npm run deps:install
+npm run dev:playground
+```
+
+Directory `/playground` contains NextJS service with integrated PC and Editor for development purposes.
+
 ## Tests
 
 Comprehensive documentation is available at the provided [link](./test-utils/docs/README.md).