feat: add code editing (#730)

feat: add code editing

Author: gorgeousvlad

.storybook/main.ts

@@ -1,5 +1,6 @@
 import {resolve} from 'path';
 import WebpackShellPluginNext from 'webpack-shell-plugin-next';
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 
 const customAlias = {
     widget: resolve(__dirname, '../widget'),
@@ -27,6 +28,7 @@ const config = {
     ],
     webpackFinal: (storybookBaseConfig: any) => {
         storybookBaseConfig.plugins.push(
+            new MonacoWebpackPlugin(),
             new WebpackShellPluginNext({
                 onBuildStart: {
                     scripts: ['npm run build:widget'],

package-lock.json

@@ -86,8 +86,10 @@
     "@gravity-ui/i18n": "^1.0.0",
     "@react-spring/web": "^9.7.3",
     "ajv": "^8.12.0",
+    "ajv-keywords": "^5.1.0",
     "final-form": "^4.20.9",
     "github-buttons": "2.23.0",
+    "js-yaml-source-map": "^0.2.2",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
     "react-final-form": "^6.5.9",
@@ -164,6 +166,7 @@
     "js-yaml": "^4.1.0",
     "lint-staged": "^11.2.6",
     "markdown-loader": "^6.0.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "move-file-cli": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.16",

package.json

@@ -0,0 +1,78 @@
+@import '../../../../styles/variables.scss';
+
+$block: '.#{$ns}code-editor';
+
+#{$block} {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+
+    &_fullscreen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
+        z-index: 1000;
+        background: var(--g-color-base-background);
+
+        #{$block}__header {
+            margin-top: var(--pc-editor-header-height);
+        }
+    }
+
+    &__code {
+        width: 100%;
+        height: 100%;
+    }
+
+    &__header,
+    &__footer {
+        padding: 0 $indentS;
+        background: var(--g-color-base-background);
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        height: var(--pc-editor-code-header-height);
+
+        border-bottom: 1px solid var(--g-color-line-generic);
+    }
+
+    &__footer {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        min-height: var(--pc-editor-code-header-height);
+        border-top: 1px solid var(--g-color-line-generic);
+    }
+
+    &__message-container {
+        max-height: 140px;
+        padding: 12px;
+
+        overflow-y: auto;
+
+        font-family: Menlo, Monaco, 'Courier New', monospace;
+        white-space: pre-wrap;
+    }
+
+    &__message {
+        &_status {
+            &_success {
+                color: var(--g-color-text-positive);
+            }
+
+            &_warning {
+                color: var(--g-color-text-warning-heavy);
+            }
+
+            &_error {
+                color: var(--g-color-text-danger);
+            }
+        }
+    }
+}

src/editor/components/CodeEditor/CodeEditor.scss

@@ -0,0 +1,80 @@
+import React, {useCallback, useMemo, useState} from 'react';
+
+import {ChevronsCollapseUpRight, ChevronsExpandUpRight} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import yaml from 'js-yaml';
+import MonacoEditor from 'react-monaco-editor';
+
+import {PageContent} from '../../../models';
+import {block} from '../../../utils';
+import {parseCode} from '../../utils/code';
+import {CodeEditorMessageProps} from '../../utils/validation';
+
+import {options} from './constants';
+
+import './CodeEditor.scss';
+
+const b = block('code-editor');
+
+interface CodeEditorProps {
+    content: PageContent;
+    fullscreenModeOn: boolean;
+    validator: (code: string) => CodeEditorMessageProps;
+    onFullscreenModeOnUpdate: (fullscreenModeOn: boolean) => void;
+    onChange: (content: PageContent) => void;
+    message?: CodeEditorMessageProps;
+}
+
+export const CodeEditor = ({
+    content,
+    onChange,
+    validator,
+    fullscreenModeOn,
+    onFullscreenModeOnUpdate,
+}: CodeEditorProps) => {
+    const value = useMemo(() => yaml.dump(content), [content]);
+    const [message, setMessage] = useState(() => validator(value));
+
+    const onChangeWithValidation = useCallback(
+        (code: string) => {
+            const validationResult = validator(code);
+
+            setMessage(validationResult);
+            onChange(parseCode(code));
+        },
+        [onChange, validator],
+    );
+
+    return (
+        <div className={b({fullscreen: fullscreenModeOn})}>
+            <div className={b('header')}>
+                <Button
+                    view="flat-secondary"
+                    onClick={() => onFullscreenModeOnUpdate(!fullscreenModeOn)}
+                >
+                    <Icon
+                        data={fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight}
+                        size={16}
+                    />
+                </Button>
+            </div>
+            <div className={b('code')}>
+                <MonacoEditor
+                    key={String(fullscreenModeOn)}
+                    value={value}
+                    language="yaml"
+                    options={options}
+                    onChange={onChangeWithValidation}
+                    theme="vs"
+                />
+            </div>
+            <div className={b('footer')}>
+                {message && (
+                    <div className={b('message-container')}>
+                        <div className={b('message', {status: message.status})}>{message.text}</div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

src/editor/components/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,20 @@
+import {editor} from 'monaco-editor';
+import {monaco} from 'react-monaco-editor';
+
+export const options: monaco.editor.IStandaloneEditorConstructionOptions = {
+    wordWrap: 'on' as editor.IEditorOptions['wordWrap'],
+    renderLineHighlight: 'none' as editor.IEditorOptions['renderLineHighlight'],
+    selectOnLineNumbers: true,
+    renderWhitespace: 'all',
+    automaticLayout: true,
+    minimap: {
+        enabled: false,
+    },
+    overviewRulerLanes: 0,
+    hideCursorInOverviewRuler: true,
+    scrollbar: {
+        vertical: 'hidden',
+    },
+    overviewRulerBorder: false,
+    readOnly: false,
+};