From 135b844678e470d601d7d2b498305af137328214 Mon Sep 17 00:00:00 2001 From: gorgeousvlad Date: Fri, 1 Dec 2023 18:47:48 +0100 Subject: [PATCH] fix: code editing problems pt.2 --- .../components/CodeEditor/CodeEditor.scss | 8 +--- .../components/CodeEditor/CodeEditor.tsx | 8 ++-- src/editor/containers/Editor/Editor.tsx | 40 +++++++++++++------ src/editor/containers/Form/Form.tsx | 14 +++++-- src/editor/context.ts | 2 + src/editor/types/index.ts | 2 + 6 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/editor/components/CodeEditor/CodeEditor.scss b/src/editor/components/CodeEditor/CodeEditor.scss index dc2c459a3..b5507b467 100644 --- 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 index 5ac4dbf90..1e8293d44 100644 --- 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'} />
diff --git a/src/editor/containers/Editor/Editor.tsx b/src/editor/containers/Editor/Editor.tsx index c53879378..7ba73d190 100644 --- 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 = ({ {isEditingMode && ( @@ -130,14 +144,16 @@ export const Editor = ({ /> )} - - - - - - - {isEditingMode && } - + {!isCodeOnlyMode && ( + + + + + + + {isEditingMode && } + + )} ); diff --git a/src/editor/containers/Form/Form.tsx b/src/editor/containers/Form/Form.tsx index 8438a6e29..685d26ac2 100644 --- 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 = ( >({}); diff --git a/src/editor/types/index.ts b/src/editor/types/index.ts index 56702bc5a..302b2b18c 100644 --- 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 {