feat: yaml tab in editor (read-only) (#449)

* feat: added yaml tab in editor

---------

Co-authored-by: kkmch <[email protected]>

Author: Kyzyl-ool

package-lock.json

@@ -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",

package.json

@@ -0,0 +1,18 @@
+@import '../../../../styles/variables.scss';
+
+$block: '.#{$ns}yaml-editor';
+
+#{$block} {
+    height: 100%;
+    position: relative;
+
+    &__copy-button {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+
+        &_hidden {
+            visibility: hidden;
+        }
+    }
+}

src/editor/components/YamlEditor/YamlEditor.scss

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

src/editor/components/YamlEditor/YamlEditor.tsx

@@ -19,4 +19,8 @@ $block: '.#{$ns}editor-form';
     &__block-form {
         margin-bottom: $indentXS;
     }
+
+    &_yaml-editor-enabled {
+        height: 100%;
+    }
 }

src/editor/containers/Form/Form.scss

@@ -7,13 +7,15 @@ import {Block, PageContent} from '../../../models';
 import {block, getBlockKey} from '../../../utils';
 import {BlockForm} from '../../components/BlockForm/BlockForm';
 import {PagePropsForm, PagePropsFormData} from '../../components/PagePropsForm/PagePropsForm';
+import {YamlEditor} from '../../components/YamlEditor/YamlEditor';
 import {FormSpecs} from '../../dynamic-forms-custom/parser/types';
 
 import './Form.scss';
 
 enum FormTab {
     Blocks = 'blocks',
     Page = 'page',
+    Yaml = 'yaml',
 }
 
 const b = block('editor-form');
@@ -83,10 +85,14 @@ export const Form = memo(({content, onChange, activeBlockIndex, onSelect, spec}:
             );
             break;
         }
+        case FormTab.Yaml: {
+            form = <YamlEditor content={content} />;
+            break;
+        }
     }
 
     return (
-        <div className={b()}>
+        <div className={b({'yaml-editor-enabled': activeTab === FormTab.Yaml})}>
             <Tabs
                 activeTab={activeTab}
                 className={b('tabs')}