@gravity-ui/page-constructor 3.12.2 → 3.13.0

package/build/cjs/editor/components/YamlEditor/YamlEditor.css

@@ -0,0 +1,12 @@
+.pc-yaml-editor {
+  height: 100%;
+  position: relative;
+}
+.pc-yaml-editor__copy-button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+.pc-yaml-editor__copy-button_hidden {
+  visibility: hidden;
+}

package/build/cjs/editor/components/YamlEditor/YamlEditor.d.ts

@@ -0,0 +1,6 @@
+import { PageContent } from '../../../models';
+interface YamlEditorProps {
+    content: PageContent;
+}
+export declare const YamlEditor: ({ content }: YamlEditorProps) => JSX.Element;
+export {};

package/build/cjs/editor/components/YamlEditor/YamlEditor.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YamlEditor = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+const react_monaco_editor_1 = tslib_1.__importDefault(require("react-monaco-editor"));
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('yaml-editor');
+const YamlEditor = ({ content }) => {
+    const value = (0, react_1.useMemo)(() => {
+        return js_yaml_1.default.dump(content);
+    }, [content]);
+    const options = (0, react_1.useMemo)(() => {
+        return {
+            minimap: {
+                enabled: false,
+            },
+            renderWhitespace: 'all',
+            overviewRulerLanes: 0,
+            hideCursorInOverviewRuler: true,
+            scrollbar: {
+                vertical: 'hidden',
+            },
+            overviewRulerBorder: false,
+            readOnly: true,
+        };
+    }, []);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(react_monaco_editor_1.default, { value: value, language: "yaml", options: options }),
+        react_1.default.createElement(uikit_1.ClipboardButton, { className: b('copy-button'), text: value })));
+};
+exports.YamlEditor = YamlEditor;

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

@@ -109,4 +109,7 @@ unpredictable css rules order in build */
 }
 .pc-editor-form__block-form {
   margin-bottom: 16px;
+}
+.pc-editor-form_yaml-editor-enabled {
+  height: 100%;
 }

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

@@ -7,10 +7,12 @@ const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const BlockForm_1 = require("../../components/BlockForm/BlockForm");
 const PagePropsForm_1 = require("../../components/PagePropsForm/PagePropsForm");
+const YamlEditor_1 = require("../../components/YamlEditor/YamlEditor");
 var FormTab;
 (function (FormTab) {
     FormTab["Blocks"] = "blocks";
     FormTab["Page"] = "page";
+    FormTab["Yaml"] = "yaml";
 })(FormTab || (FormTab = {}));
 const b = (0, utils_1.block)('editor-form');
 const tabsItems = Object.values(FormTab).map((tab) => ({
@@ -40,8 +42,12 @@ exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelec
                     }, onSelect: () => onSelect(index) }))) : null)));
             break;
         }
+        case FormTab.Yaml: {
+            form = react_1.default.createElement(YamlEditor_1.YamlEditor, { content: content });
+            break;
+        }
     }
-    return (react_1.default.createElement("div", { className: b() },
+    return (react_1.default.createElement("div", { className: b({ 'yaml-editor-enabled': activeTab === FormTab.Yaml }) },
         react_1.default.createElement(uikit_1.Tabs, { activeTab: activeTab, className: b('tabs'), items: tabsItems, onSelectTab: setActiveTab }),
         form));
 });

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

@@ -0,0 +1,12 @@
+.pc-yaml-editor {
+  height: 100%;
+  position: relative;
+}
+.pc-yaml-editor__copy-button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+.pc-yaml-editor__copy-button_hidden {
+  visibility: hidden;
+}

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

@@ -0,0 +1,7 @@
+import { PageContent } from '../../../models';
+import './YamlEditor.css';
+interface YamlEditorProps {
+    content: PageContent;
+}
+export declare const YamlEditor: ({ content }: YamlEditorProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import { ClipboardButton } from '@gravity-ui/uikit';
+import yaml from 'js-yaml';
+import MonacoEditor from 'react-monaco-editor';
+import { block } from '../../../utils';
+import './YamlEditor.css';
+const b = block('yaml-editor');
+export const YamlEditor = ({ content }) => {
+    const value = useMemo(() => {
+        return yaml.dump(content);
+    }, [content]);
+    const options = useMemo(() => {
+        return {
+            minimap: {
+                enabled: false,
+            },
+            renderWhitespace: 'all',
+            overviewRulerLanes: 0,
+            hideCursorInOverviewRuler: true,
+            scrollbar: {
+                vertical: 'hidden',
+            },
+            overviewRulerBorder: false,
+            readOnly: true,
+        };
+    }, []);
+    return (React.createElement("div", { className: b() },
+        React.createElement(MonacoEditor, { value: value, language: "yaml", options: options }),
+        React.createElement(ClipboardButton, { className: b('copy-button'), text: value })));
+};

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

@@ -109,4 +109,7 @@ unpredictable css rules order in build */
 }
 .pc-editor-form__block-form {
   margin-bottom: 16px;
+}
+.pc-editor-form_yaml-editor-enabled {
+  height: 100%;
 }

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

@@ -4,11 +4,13 @@ import { Tabs } from '@gravity-ui/uikit';
 import { block, getBlockKey } from '../../../utils';
 import { BlockForm } from '../../components/BlockForm/BlockForm';
 import { PagePropsForm } from '../../components/PagePropsForm/PagePropsForm';
+import { YamlEditor } from '../../components/YamlEditor/YamlEditor';
 import './Form.css';
 var FormTab;
 (function (FormTab) {
     FormTab["Blocks"] = "blocks";
     FormTab["Page"] = "page";
+    FormTab["Yaml"] = "yaml";
 })(FormTab || (FormTab = {}));
 const b = block('editor-form');
 const tabsItems = Object.values(FormTab).map((tab) => ({
@@ -38,8 +40,12 @@ export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, spec
                     }, onSelect: () => onSelect(index) }))) : null)));
             break;
         }
+        case FormTab.Yaml: {
+            form = React.createElement(YamlEditor, { content: content });
+            break;
+        }
     }
-    return (React.createElement("div", { className: b() },
+    return (React.createElement("div", { className: b({ 'yaml-editor-enabled': activeTab === FormTab.Yaml }) },
         React.createElement(Tabs, { activeTab: activeTab, className: b('tabs'), items: tabsItems, onSelectTab: setActiveTab }),
         form));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -87,7 +87,9 @@
     "final-form": "^4.20.9",
     "github-buttons": "2.23.0",
     "lodash": "^4.17.21",
+    "monaco-editor": "^0.38.0",
     "react-final-form": "^6.5.9",
+    "react-monaco-editor": "^0.53.0",
     "react-player": "^2.9.0",
     "react-slick": "^0.29.0",
     "react-spring": "^9.3.0",
@@ -128,6 +130,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.4",
+    "@types/js-yaml": "^4.0.5",
     "@types/json-schema": "^7.0.12",
     "@types/lodash": "^4.14.176",
     "@types/react": "^18.0.27",