temp

package.json

@@ -41,16 +41,14 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@doc-tools/transform": "^3.8.5",
-    "@gravity-ui/uikit": "^5.5.0",
+    "@gravity-ui/uikit": "^6.10.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@doc-tools/transform": "^3.8.5",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.5.0",
+    "@gravity-ui/uikit": "^6.10.2",
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
     "autoprefixer": "^10.4.15",
@@ -65,7 +63,12 @@
   },
   "dependencies": {
     "@diplodoc/markdown-it-markdown-renderer": "^0.14.4",
+    "@diplodoc/transform": "^4.13.1",
+    "@doc-tools/yfm-editor": "^12.2.1",
+    "@gravity-ui/page-constructor": "^5.12.0",
     "@monaco-editor/react": "^4.5.2",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "markdown-it-meta": "^0.0.1",
     "markdown-it-sup": "^1.0.0",

scripts/dev.js

@@ -21,7 +21,7 @@ const {generateHTML} = require('../src/index.html.js');
 
     const html = generateHTML({
         env: 'development',
-        csspath: path.join('/', 'index.css'),
+        csspath: [path.join('/', 'index.css'), path.join('/', 'styles.css')]
     });
 
     await writeFile(path.join(outdir, 'index.html'), html);

scripts/pages.js

@@ -22,7 +22,7 @@ const {generateHTML} = require('../src/index.html.js');
 
     const html = generateHTML({
         env: 'production',
-        csspath: path.join('/', projectName, 'index.css')});
+        csspath: ['index.css', 'styles.css'].map(el => path.join('/', projectName, el))});
 
     await writeFile(path.join(outdir, 'index.html'), html);
 

src/App/index.scss

@@ -0,0 +1,21 @@
+.app {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+}
+
+.playground {
+  width: 1328px;
+
+  margin-top: 30px;
+}
+
+.tabs {
+  width: fit-content;
+}
+
+.editor {
+}

src/App/index.tsx

@@ -0,0 +1,59 @@
+import {useCallback, useState, useEffect}  from 'react';
+
+import './index.scss';
+import {useTabs} from "src/useTabs";
+import { Tabs } from 'node_modules/@gravity-ui/uikit/build/esm/index';
+import SplitViewEditor from "src/SplitViewEditor";
+import PageConstructorEditor from "src/PageConstructorEditor";
+import WYSIWYGEditor from "src/WYSIWYGEditor";
+import Header from "src/Header";
+
+
+const App = () => {
+  return(
+  <>
+      <Header/>
+      <Playground persistRestore={true} />
+  </>)
+};
+
+export type PlaygroundProperties = {
+  content?: string;
+  persistRestore?: boolean;
+}
+
+enum EditorType {
+  SPLIT = 'SPLIT_VIEW',
+  WYSIWYG = 'WYSIWYG',
+  PC = 'PC'
+
+}
+
+function Playground(props: PlaygroundProperties) {
+  const [editorType, setEditorType] = useState(EditorType.SPLIT);
+
+  const [
+    items,
+    activeTab,
+    handleSetInputAreaTabActive
+  ] = useTabs({
+    items: [
+        { id: EditorType.SPLIT, title: 'Split view', node: <SplitViewEditor/> },
+        { id: EditorType.WYSIWYG, title: 'WYSIWYG', node: <WYSIWYGEditor/> },
+        { id: EditorType.PC, title: 'Page constructor', node: <PageConstructorEditor/> }
+    ],
+    initial: EditorType.SPLIT,
+  });
+
+  return (
+      <div className="playground">
+        <Tabs className="tabs" activeTab={activeTab} items={items} onSelectTab={handleSetInputAreaTabActive}/>
+        <div className="editor">
+              {items?.find(el => el.id === activeTab).node}
+        </div>
+      </div>
+  );
+}
+
+export {App, Playground};
+export default {App, Playground};

src/Header/header.scss

@@ -0,0 +1,15 @@
+.header {
+  display: flex;
+  align-content: center;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  height: 64px;
+  width: 100%;
+
+  box-shadow: inset 0 -1px 0 var(--g-color-line-generic);
+}
+
+.logo {
+  width: 1328px;
+}

src/Header/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Icon} from '@gravity-ui/uikit';
+
+import './header.scss';
+
+function Header() {
+    return (
+        <div className='header'>
+            <div className='logo'>
+                <img
+                     src="https://storage.yandexcloud.net/diplodoc-www-assets/navigation/diplodoc-logo.svg"/>
+            </div>
+        </div>
+    )
+}
+
+export default Header

src/PageConstructorEditor/data.json

@@ -0,0 +1,66 @@
+{
+  "blocks": [
+    {
+      "type": "header-block",
+      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+      "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+      "buttons": [
+        {
+          "text": "Button\r",
+          "theme": "action",
+          "url": "https://example.com"
+        },
+        {
+          "text": "Button",
+          "theme": "outlined",
+          "url": "https://example.com"
+        }
+      ]
+    },
+    {
+      "type": "slider-block",
+      "title": {
+        "text": "Slider",
+        "url": "https://example.com"
+      },
+      "children": [
+        {
+          "type": "basic-card",
+          "url": "https://example.com",
+          "title": "Lorem ipsum dolor sit amet",
+          "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "icon": "https://preview.gravity-ui.com/page-constructor/story-assets/icon_1_light.svg"
+        },
+        {
+          "type": "basic-card",
+          "url": "https://example.com",
+          "title": "Lorem ipsum dolor sit amet",
+          "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "icon": "https://preview.gravity-ui.com/page-constructor/story-assets/icon_2_light.svg"
+        },
+        {
+          "type": "basic-card",
+          "url": "https://example.com",
+          "title": "Lorem ipsum dolor sit amet",
+          "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "icon": "https://preview.gravity-ui.com/page-constructor/story-assets/icon_3_light.svg"
+        },
+        {
+          "type": "basic-card",
+          "url": "https://example.com",
+          "title": "Lorem ipsum dolor sit amet",
+          "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "icon": "https://preview.gravity-ui.com/page-constructor/story-assets/icon_4_light.svg"
+        },
+        {
+          "type": "basic-card",
+          "url": "https://example.com",
+          "title": "Lorem ipsum dolor sit amet",
+          "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "icon": "https://preview.gravity-ui.com/page-constructor/story-assets/icon_1_light.svg"
+        }
+      ]
+    }
+  ],
+  "animated": false
+}

src/PageConstructorEditor/index.tsx

@@ -0,0 +1,34 @@
+import React, {useCallback, useState} from 'react';
+
+
+import {ContentTransformer, Editor,} from '@gravity-ui/page-constructor/editor';
+import { PageContent } from 'node_modules/@gravity-ui/page-constructor/build/esm/index';
+import data from './data.json';
+import {contentTransformer} from "@gravity-ui/page-constructor/server";
+import {memoizeLast} from "src/PageConstructorEditor/utils";
+
+interface MyAppEditorProps {
+  initialContent: PageContent;
+  transformContent: ContentTransformer;
+  onChange: (content: PageContent) => void;
+}
+
+const contentTransformerMemoized = memoizeLast(contentTransformer);
+
+
+function PageConstructorEditor () {
+    const [input, setInput] = useState(data)
+    const lang = 'ru'
+
+    const transformContent = useCallback(
+        (content: PageContent) => ({
+            ...content,
+            ...contentTransformerMemoized({content, options: {lang}}),
+        }),
+        [lang],
+    );
+
+    return <Editor content={input} onChange={setInput} transformContent={transformContent} />
+}
+
+export default PageConstructorEditor

src/PageConstructorEditor/utils.ts

@@ -0,0 +1,22 @@
+import isEqual from 'lodash/isEqual';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const memoizeLast = (fn: (...args: any[]) => any) => {
+    let cacheKey: Parameters<typeof fn>;
+    let cacheResult: ReturnType<typeof fn>;
+
+    return (...params: Parameters<typeof fn>) => {
+        if (!isEqual(params, cacheKey)) {
+            try {
+                const result = fn(...params);
+
+                cacheResult = result;
+                cacheKey = params;
+            } catch {
+                return cacheResult;
+            }
+        }
+
+        return cacheResult;
+    };
+};

src/generators.ts → src/SplitViewEditor/generators.ts

@@ -1,9 +1,9 @@
 import MarkdownIt from 'markdown-it';
 
 // @ts-ignore
-import transform from '@doc-tools/transform';
+import transform from '@diplodoc/transform';
 // @ts-ignore
-import transformMarkdown from '@doc-tools/transform/lib/md';
+import transformMarkdown from '@diplodoc/transform/lib/md';
 
 import {
     mdRenderer,
@@ -13,17 +13,17 @@ import {
  import meta from 'markdown-it-meta';
 // @ts-ignore
 import sup from 'markdown-it-sup';
-import notes from '@doc-tools/transform/lib/plugins/notes';
-import cut from '@doc-tools/transform/lib/plugins/cut';
-import checkbox from '@doc-tools/transform/lib/plugins/checkbox';
-import anchors from '@doc-tools/transform/lib/plugins/anchors';
-import monospace from '@doc-tools/transform/lib/plugins/monospace';
-import imsize from '@doc-tools/transform/lib/plugins/imsize';
-import file from '@doc-tools/transform/lib/plugins/file';
-import includes from '@doc-tools/transform/lib/plugins/includes';
-import tabs from '@doc-tools/transform/lib/plugins/tabs';
-import video from '@doc-tools/transform/lib/plugins/video';
-import table from '@doc-tools/transform/lib/plugins/table';
+import notes from '@diplodoc/transform/lib/plugins/notes';
+import cut from '@diplodoc/transform/lib/plugins/cut';
+import checkbox from '@diplodoc/transform/lib/plugins/checkbox';
+import anchors from '@diplodoc/transform/lib/plugins/anchors';
+import monospace from '@diplodoc/transform/lib/plugins/monospace';
+import imsize from '@diplodoc/transform/lib/plugins/imsize';
+import file from '@diplodoc/transform/lib/plugins/file';
+import includes from '@diplodoc/transform/lib/plugins/includes';
+import tabs from '@diplodoc/transform/lib/plugins/tabs';
+import video from '@diplodoc/transform/lib/plugins/video';
+import table from '@diplodoc/transform/lib/plugins/table';
 
 const diplodocOptions = {
     lang: 'en',

src/SplitViewEditor/index.scss

@@ -0,0 +1,51 @@
+.split-view {
+    display: flex;
+
+    gap: 30px
+}
+
+.area__card {
+    padding: var(--g-text-body-1-font-size);
+
+    & > section {
+        height: var(--diplodoc-playground-height) !important;
+        min-height: var(--diplodoc-playground-height) !important;
+        max-height: var(--diplodoc-playground-height) !important;
+        background-color: red;
+        overflow-y: scroll;
+        overflow-x: hidden;
+
+        padding: 0;
+    }
+}
+
+/* yfm preview */
+.area__yfm {
+    border-radius: 2px !important;
+
+    height: calc(var(--diplodoc-playground-height) + 26px);
+    min-height: calc(var(--diplodoc-playground-height) + 26px);
+    max-height: calc(var(--diplodoc-playground-height) + 26px);
+
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  .area-card__editor {
+    border-radius: 2px !important;
+    padding-right: 0px;
+  }
+
+  .area__tabs {
+    text-transform: uppercase;
+}
+
+.input {
+    width: 50%;
+
+    margin-top: 39px;
+}
+
+.output {
+    width: 50%;
+}