diff --git a/ui/src/components/codemirror/Codemirror.vue b/ui/src/components/codemirror/Codemirror.vue index c675c667f..55bbcc49a 100644 --- a/ui/src/components/codemirror/Codemirror.vue +++ b/ui/src/components/codemirror/Codemirror.vue @@ -6,7 +6,7 @@ import { json } from "@codemirror/lang-json"; import { LanguageSupport, StreamLanguage } from "@codemirror/language"; import { yaml } from "@codemirror/legacy-modes/mode/yaml"; import type { EditorStateConfig } from "@codemirror/state"; -import { EditorState } from "@codemirror/state"; +import { Compartment, EditorState } from "@codemirror/state"; import { EditorView } from "@codemirror/view"; import { basicSetup } from "codemirror"; import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue"; @@ -42,17 +42,21 @@ const emit = defineEmits<{ (e: "change", value: string): void; }>(); -const customTheme = EditorView.theme({ - "&": { - height: props.height, - width: "100%", - }, -}); - const wrapper = shallowRef(); const cmState = shallowRef(); const cmView = shallowRef(); +const themeCompartment = new Compartment(); + +const createCustomTheme = (height: string) => { + return EditorView.theme({ + "&": { + height, + width: "100%", + }, + }); +}; + const createCmEditor = () => { const language = typeof props.language === "string" @@ -62,7 +66,7 @@ const createCmEditor = () => { let extensions = [ basicSetup, EditorView.lineWrapping, - customTheme, + themeCompartment.of(createCustomTheme(props.height)), language, EditorView.updateListener.of((viewUpdate) => { if (viewUpdate.docChanged) { @@ -106,6 +110,17 @@ onMounted(() => { } } ); + + watch( + () => props.height, + (newHeight) => { + if (cmView.value) { + cmView.value.dispatch({ + effects: themeCompartment.reconfigure(createCustomTheme(newHeight)), + }); + } + } + ); }); // Destroy codemirror editor when component unmounts diff --git a/ui/src/formkit/inputs/code/CodeInput.vue b/ui/src/formkit/inputs/code/CodeInput.vue index 592c4c19c..2551442bd 100644 --- a/ui/src/formkit/inputs/code/CodeInput.vue +++ b/ui/src/formkit/inputs/code/CodeInput.vue @@ -31,6 +31,15 @@ useEventListener(codeInputWrapperRef, "keydown", (e: KeyboardEvent) => { fullscreen.value = false; } }); + +const editorHeight = computed(() => { + if (fullscreen.value) { + // VPageHeader height is 3.5rem + return "calc(100vh - 3.5rem)"; + } + + return "100%"; +});