fix: code editing problems pt.2

gravity-ui · Dec 1, 2023 · 135b844 · 135b844
1 parent 973ea7d
commit 135b844
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 24 deletions.
diff --git a/src/editor/components/CodeEditor/CodeEditor.scss b/src/editor/components/CodeEditor/CodeEditor.scss
@@ -8,17 +8,13 @@ $block: '.#{$ns}code-editor';
     overflow: hidden;
 
     &_fullscreen {
-        position: fixed;
+        position: absolute;
         top: 0;
         left: 0;
         width: 100%;
-        height: 100vh;
+        height: 100%;
         z-index: 1000;
         background: var(--g-color-base-background);
-
-        #{$block}__header {
-            margin-top: var(--pc-editor-header-height);
-        }
     }
 
     &__code {

diff --git a/src/editor/components/CodeEditor/CodeEditor.tsx b/src/editor/components/CodeEditor/CodeEditor.tsx
@@ -1,12 +1,13 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useContext, useState} from 'react';
 
 import {ChevronsCollapseUpRight, ChevronsExpandUpRight} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import MonacoEditor from 'react-monaco-editor';
 
-import {PageContent} from '../../../models';
+import {PageContent, Theme} from '../../../models';
 import {block} from '../../../utils';
+import {EditorContext} from '../../context';
 import {parseCode} from '../../utils/code';
 import {CodeEditorMessageProps} from '../../utils/validation';
 
@@ -33,6 +34,7 @@ export const CodeEditor = ({
     code,
 }: CodeEditorProps) => {
     const [message, setMessage] = useState(() => validator(code));
+    const {theme = Theme.Light} = useContext(EditorContext);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const onChangeWithValidation = useCallback(
@@ -65,7 +67,7 @@ export const CodeEditor = ({
                     language="yaml"
                     options={options}
                     onChange={onChangeWithValidation}
-                    theme="vs"
+                    theme={theme === Theme.Light ? 'vs' : 'vs-dark'}
                 />
             </div>
             <div className={b('footer')}>

diff --git a/src/editor/containers/Editor/Editor.tsx b/src/editor/containers/Editor/Editor.tsx
@@ -13,6 +13,7 @@ import {useCodeValidator} from '../../hooks/useCodeValidator';
 import {useMainState} from '../../store/main';
 import {useSettingsState} from '../../store/settings';
 import {EditorProps, ViewModeItem} from '../../types';
+import {FormTab} from '../../types/index';
 import {addCustomDecorator, checkIsMobile, getBlockId} from '../../utils';
 import {Form} from '../Form/Form';
 
@@ -22,6 +23,7 @@ export const Editor = ({
     providerProps,
     transformContent,
     deviceEmulationSettings,
+    theme: editorTheme,
     ...rest
 }: EditorProps) => {
     const {
@@ -35,7 +37,7 @@ export const Editor = ({
     } = useMainState(rest);
     const {
         viewMode,
-        theme,
+        theme: constructorTheme,
         onViewModeUpdate,
         onThemeUpdate,
         formTab,
@@ -45,6 +47,9 @@ export const Editor = ({
     } = useSettingsState();
 
     const isEditingMode = viewMode === ViewModeItem.Edititng;
+    const isCodeOnlyMode =
+        codeFullscreeModeOn && formTab === FormTab.Code && viewMode === ViewModeItem.Edititng;
+
     const transformedContent = useMemo(
         () => (transformContent ? transformContent(content, {viewMode}) : content),
         [content, transformContent, viewMode],
@@ -95,11 +100,20 @@ export const Editor = ({
             providerProps: {
                 ...providerProps,
                 isMobile: checkIsMobile(viewMode),
-                theme,
+                theme: constructorTheme,
             },
             deviceEmulationSettings,
+            theme: editorTheme,
         }),
-        [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings, theme],
+        [
+            providerProps,
+            rest.custom,
+            viewMode,
+            transformedContent,
+            deviceEmulationSettings,
+            constructorTheme,
+            editorTheme,
+        ],
     );
 
     useEffect(() => {
@@ -111,7 +125,7 @@ export const Editor = ({
             <Layout
                 mode={viewMode}
                 onModeChange={onViewModeUpdate}
-                theme={theme}
+                theme={constructorTheme}
                 onThemeChange={onThemeUpdate}
             >
                 {isEditingMode && (
@@ -130,14 +144,16 @@ export const Editor = ({
                         />
                     </Layout.Left>
                 )}
-                <Layout.Right>
-                    <ErrorBoundary key={errorBoundaryState}>
-                        <PageConstructorProvider {...providerProps} theme={theme}>
-                            <PageConstructor {...outgoingProps} />
-                        </PageConstructorProvider>
-                    </ErrorBoundary>
-                    {isEditingMode && <AddBlock onAdd={onAdd} />}
-                </Layout.Right>
+                {!isCodeOnlyMode && (
+                    <Layout.Right>
+                        <ErrorBoundary key={errorBoundaryState}>
+                            <PageConstructorProvider {...providerProps} theme={constructorTheme}>
+                                <PageConstructor {...outgoingProps} />
+                            </PageConstructorProvider>
+                        </ErrorBoundary>
+                        {isEditingMode && <AddBlock onAdd={onAdd} />}
+                    </Layout.Right>
+                )}
             </Layout>
         </EditorContext.Provider>
     );

diff --git a/src/editor/containers/Form/Form.tsx b/src/editor/containers/Form/Form.tsx
@@ -53,15 +53,24 @@ export const Form = memo(
 
         const prevTab = usePreviousValue(activeTab);
         const prevContentLength = usePreviousValue(content.blocks?.length);
+        const prevCodeFullscreeModeOn = usePreviousValue(codeFullscreeModeOn);
 
         useEffect(() => {
             const switchedToCodeEditing = activeTab !== prevTab && activeTab === FormTab.Code;
             const blocksCountChanged = prevContentLength !== content.blocks?.length;
+            const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;
 
-            if (blocksCountChanged || switchedToCodeEditing) {
+            if (blocksCountChanged || switchedToCodeEditing || codeModeSwitched) {
                 setCode(yaml.dump(content, {lineWidth: -1}));
             }
-        }, [activeTab, prevTab, content, prevContentLength]);
+        }, [
+            activeTab,
+            prevTab,
+            content,
+            prevContentLength,
+            codeFullscreeModeOn,
+            prevCodeFullscreeModeOn,
+        ]);
 
         const {blocks, ...page} = content || {};
         const spec = useFormSpec(schema);
@@ -120,7 +129,6 @@ export const Form = memo(
             case FormTab.Code: {
                 form = (
                     <CodeEditor
-                        content={content}
                         code={code}
                         onChange={onChange}
                         validator={codeValidator}

diff --git a/src/editor/context.ts b/src/editor/context.ts
@@ -1,13 +1,15 @@
 import React from 'react';
 
 import {PageConstructorProps, PageConstructorProviderProps} from '../containers/PageConstructor';
+import {Theme} from '../models/common';
 
 import {EditorProps} from './types';
 
 export interface EditorContextType {
     constructorProps?: PageConstructorProps;
     providerProps?: PageConstructorProviderProps;
     deviceEmulationSettings?: EditorProps['deviceEmulationSettings'];
+    theme?: Theme;
 }
 
 export const EditorContext = React.createContext<Partial<EditorContextType>>({});
diff --git a/src/editor/types/index.ts b/src/editor/types/index.ts
@@ -1,5 +1,6 @@
 import {PageConstructorProps, PageConstructorProviderProps} from '../../containers/PageConstructor';
 import {BlockDecorationProps, PageContent} from '../../models';
+import {Theme} from '../../models/common';
 import {SchemaCustomConfig} from '../../schema';
 import {EditBlockActions} from '../components/EditBlock/EditBlock';
 
@@ -27,6 +28,7 @@ export interface EditorProps
     transformContent?: ContentTransformer;
     customSchema?: SchemaCustomConfig;
     deviceEmulationSettings?: DeviceEmulationSettings;
+    theme?: Theme;
 }
 
 export interface EditBlockEditorProps {