Merge branch 'master' into static-build-langs

src/components/App/App.tsx

@@ -6,18 +6,22 @@ import {
     NavigationItemModel,
     PageConstructor,
     PageConstructorProvider,
+    PageContent,
 } from '@gravity-ui/page-constructor';
 import {ThemeProvider} from '@gravity-ui/uikit';
 import {
-    DocLeadingPage,
+    DocContentPageData,
     DocLeadingPageData,
-    DocPage,
     DocPageData,
+    DocumentType,
     Lang,
     Router,
     Theme,
     getLangPath,
+    getPageByType,
+    getPageType,
 } from '@diplodoc/components';
+
 import {HeaderControls} from '../HeaderControls';
 import {getDirection, updateRootClassName} from '../../utils';
 import {Layout} from '../Layout';
@@ -32,14 +36,20 @@ import {LatexRuntime} from '@diplodoc/latex-extension/react';
 import {Runtime as OpenapiSandbox} from '@diplodoc/openapi-extension/runtime';
 
 import './App.scss';
+import {ConstructorPage} from '../ConstructorPage';
 
 export interface AppProps {
     lang: Lang;
     langs: Lang[];
     router: Router;
+    type: DocumentType;
+}
+
+export interface PageContentData extends DocContentPageData {
+    data: PageContent & {fullScreen?: boolean};
 }
 
-export type DocInnerProps<Data = DocLeadingPageData | DocPageData> = {
+export type DocInnerProps<Data = DocLeadingPageData | DocPageData | PageContentData> = {
     data: Data;
 } & AppProps;
 
@@ -67,9 +77,9 @@ function Runtime(props: RuntimeProps) {
     );
 }
 
-function Page(props: DocInnerProps) {
+export function Page(props: DocInnerProps) {
     const {data, ...pageProps} = props;
-    const Page = data.leading ? DocLeadingPage : DocPage;
+    const Page = getPageByType(props?.type);
 
     return (
         <Layout>
@@ -117,6 +127,8 @@ export function App(props: DocInnerProps): ReactElement {
     const {theme, textSize, wideFormat, fullScreen, showMiniToc, onChangeFullScreen} = settings;
     const fullHeader = !fullScreen && Boolean(navigation);
     const headerHeight = fullHeader ? 64 : 0;
+    const type = getPageType(data);
+
     const pageProps = {
         headerHeight,
         data,
@@ -129,8 +141,14 @@ export function App(props: DocInnerProps): ReactElement {
         textSize,
         fullScreen,
         onChangeFullScreen,
+        type,
     };
     const direction = getDirection(lang);
+    const fullScreenPC =
+        type === DocumentType.PageConstructor &&
+        'data' in data &&
+        'fullScreen' in data.data &&
+        data.data.fullScreen;
 
     useEffect(() => {
         updateRootClassName({
@@ -145,13 +163,40 @@ export function App(props: DocInnerProps): ReactElement {
         ...settings,
         onChangeLang,
     }
-console.log("here", router);
 
     if (!navigation) {
         return (
             <div className="App">
                 <ThemeProvider theme={theme} direction={direction}>
-                    <Page {...pageProps} {...pageContext} />
+                    <Page {...pageProps} {...pageContext}>
+                        {type === DocumentType.PageConstructor && (
+                            <PageConstructorProvider theme={theme}>
+                                <PageConstructor
+                                    custom={{
+                                        blocks: {
+                                            page: () => (
+                                                <ConstructorPage
+                                                    data={data as PageContentData}
+                                                    theme={theme}
+                                                />
+                                            ),
+                                        },
+                                    }}
+                                    content={
+                                        fullScreenPC
+                                            ? (data.data as PageContent)
+                                            : {
+                                                  blocks: [
+                                                      {
+                                                          type: 'page',
+                                                      },
+                                                  ],
+                                              }
+                                    }
+                                />
+                            </PageConstructorProvider>
+                        )}
+                    </Page>
                     <Runtime theme={theme} />
                 </ThemeProvider>
             </div>
@@ -175,20 +220,29 @@ console.log("here", router);
                             },
                             blocks: {
                                 page: () => (
-                                    <Page
-                                        {...pageProps}
-                                        {...(headerWithControls ? {} : pageContext)}
-                                    />
+                                    <Page {...pageProps} {...(headerWithControls ? {} : pageContext)}>
+                                        {type === DocumentType.PageConstructor &&
+                                            'data' in data && (
+                                                <ConstructorPage
+                                                    data={data as PageContentData}
+                                                    theme={theme}
+                                                />
+                                            )}
+                                    </Page>
                                 ),
                             },
                         }}
-                        content={{
-                            blocks: [
-                                {
-                                    type: 'page',
-                                },
-                            ],
-                        }}
+                        content={
+                            fullScreenPC
+                                ? (data.data as PageContent)
+                                : {
+                                      blocks: [
+                                          {
+                                              type: 'page',
+                                          },
+                                      ],
+                                  }
+                        }
                         navigation={
                             fullHeader
                                 ? {

src/components/ConstructorPage/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import block from 'bem-cn-lite';
+import {
+    BackgroundMedia,
+    Col,
+    ConstructorBlocks,
+    Grid,
+    Row,
+    Theme,
+    getThemedValue,
+} from '@gravity-ui/page-constructor';
+import {PageContentData} from '../App/App';
+
+export type WithChildren<T = {}> = T & {children?: React.ReactNode};
+
+const bPC = block('pc-page-constructor');
+const bPCRow = block('pc-constructor-row');
+
+export const ConstructorRow = ({children}: WithChildren<{}>) =>
+    children ? (
+        <Row className={bPCRow()}>
+            <Col>{children}</Col>
+        </Row>
+    ) : null;
+
+export function ConstructorPage({data: {data}, theme}: {data: PageContentData; theme: Theme}) {
+    const themedBackground = getThemedValue(data?.background, theme);
+
+    return (
+        <div className={bPC('')}>
+            <div className={bPC('wrapper')}>
+                {data?.blocks && themedBackground && (
+                    <BackgroundMedia {...themedBackground} className={bPC('background')} />
+                )}
+                <Grid>
+                    <ConstructorRow>
+                        <ConstructorBlocks items={data?.blocks} />
+                    </ConstructorRow>
+                </Grid>
+            </div>
+        </div>
+    );
+}

src/constants.ts

@@ -19,3 +19,25 @@ export enum TextDirection {
     RTL = 'rtl',
     LTR = 'ltr',
 }
+
+export const LINK_KEYS_LEADING_CONFIG = ['href'];
+export const LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG = [
+    'src',
+    'url',
+    'href',
+    'icon',
+    'image',
+    'desktop',
+    'mobile',
+    'tablet',
+    'previewImg',
+    'image',
+    'avatar',
+    'logo',
+    'light',
+    'dark',
+];
+
+export const LINK_KEYS = [
+    ...new Set([...LINK_KEYS_LEADING_CONFIG, ...LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG]),
+];

src/index.server.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import {renderToString} from 'react-dom/server';
 
 import {App, DocInnerProps, DocLeadingPageData, DocPageData} from './components/App/App';
+import {LINK_KEYS} from './constants';
 
 export type {DocInnerProps, DocPageData, DocLeadingPageData};
+export {LINK_KEYS};
 
 export const render = (props: DocInnerProps) => renderToString(<App {...props} />);

src/styles/overrides.scss

@@ -8,6 +8,20 @@
     margin-top: var(--pc-first-block-indent, 96px);
 }
 
+.pc-Grid {
+    .container-fluid {
+        padding-right: 0px;
+        padding-left: 0px;
+    }
+}
+
+.pc-Grid .pc-Grid {
+    .container-fluid .pc-header-block__container-fluid {
+        padding-right: 40px;
+        padding-left: 40px;
+    }
+}
+
 .pc-block-base {
     padding: 0 !important;
 }

tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "es2020",
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "lib": ["DOM"],
     "declaration": true,
     "outDir": "build",