Editor mobile devices preview mode

.gitignore

@@ -13,6 +13,7 @@ node_modules
 /configure
 /styles/**/*.css
 /coverage
+/widget
 
 *.tgz
 .env

.storybook/main.ts

@@ -1,4 +1,9 @@
-const {join} = require('path');
+const {join, resolve} = require('path');
+const WebpackShellPlugin = require('webpack-shell-plugin');
+
+const customAlias = {
+    widget: resolve(__dirname, '../widget'),
+};
 
 const config = {
     stories: ['../src/**/*.stories.@(ts|tsx)'],
@@ -31,6 +36,17 @@ const config = {
         // to turn fileName in context.parameters into path form number in production bundle
         storybookBaseConfig.optimization.moduleIds = 'named';
 
+        storybookBaseConfig.plugins.push(
+            new WebpackShellPlugin({
+                onBuildStart: ['npm run build:widget'],
+            }),
+        );
+
+        storybookBaseConfig.resolve.alias = {
+            ...(storybookBaseConfig.resolve?.alias || {}),
+            ...customAlias,
+        };
+
         return storybookBaseConfig;
     },
 };

README.md

@@ -374,17 +374,15 @@ Editor provides user interface for page content management with realtime preview
 How to use:
 
 ```tsx
-import {PageConstructor} from '@gravity-ui/page-constructor';
 import {Editor} from '@gravity-ui/page-constructor/editor';
 
 interface MyAppEditorProps {
   initialContent: PageContent;
+  transformContent: ContentTransformer;
   onChange: (content: PageContent) => void;
 }
 
-export const MyAppEditor = ({initialContent, onChange}: MyAppEditorProps) => (
-  <Editor onChange={onChange} content={initialContent}>
-    {(props) => <PageConstructor {...props} />}
-  </Editor>
+export const MyAppEditor = ({initialContent, onChange, transformContent}: MyAppEditorProps) => (
+  <Editor content={initialContent} onChange={onChange} transformContent={transformContent} />
 );
 ```

gulpfile.js

@@ -4,6 +4,7 @@ const path = require('path');
 const {task, src, dest, series, parallel} = require('gulp');
 const sass = require('gulp-dart-sass');
 const replace = require('gulp-replace');
+const alias = require('gulp-ts-alias');
 const ts = require('gulp-typescript');
 const rimraf = require('rimraf');
 
@@ -31,13 +32,15 @@ function compileTs(modules = false) {
         '!src/**/__tests__/**/*',
         '!src/server.ts',
         '!src/configure.ts',
+        '!src/widget/**/*',
         '!test-utils/**/*',
     ])
         .pipe(
             replace(/import '.+\.scss';/g, (match) =>
                 modules ? match.replace('.scss', '.css') : '',
             ),
         )
+        .pipe(alias(tsProject.config))
         .pipe(tsProject())
         .pipe(dest(path.resolve(BUILD_CLIENT_DIR, modules ? ESM_DIR : CJS_DIR)));
 }
@@ -58,6 +61,7 @@ task('copy-js-declarations', () => {
         '!src/**/__stories__/**/*.d.ts',
         '!src/**/__tests__/**/*.d.ts',
         '!test-utils/**/*.d.ts',
+        '!src/widget/**/*',
     ])
         .pipe(dest(path.resolve(BUILD_CLIENT_DIR, ESM_DIR)))
         .pipe(dest(path.resolve(BUILD_CLIENT_DIR, CJS_DIR)));
@@ -74,7 +78,7 @@ task('styles-global', () => {
 });
 
 task('styles-components', () => {
-    return src([`src/**/*.scss`, `!src/**/__stories__/**/*.scss`])
+    return src([`src/**/*.scss`, `!src/**/__stories__/**/*.scss`, '!src/widget/**/*.scss'])
         .pipe(sass().on('error', sass.logError))
         .pipe(dest(path.resolve(BUILD_CLIENT_DIR, ESM_DIR)))
         .pipe(dest(path.resolve(BUILD_CLIENT_DIR, CJS_DIR)));