diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte index 7f2f79c98d..8bb8aa275c 100644 --- a/frontend/src/lib/components/SimpleEditor.svelte +++ b/frontend/src/lib/components/SimpleEditor.svelte @@ -14,7 +14,8 @@ Uri as mUri, languages, type IRange, - type IDisposable + type IDisposable, + Position } from 'monaco-editor' languages.typescript.javascriptDefaults.setCompilerOptions({ @@ -235,6 +236,13 @@ suggestion = value } + export function setCursorPosition(position: Position): void { + if (editor) { + editor.setPosition(position) + editor.revealPositionInCenterIfOutsideViewport(position) + } + } + let disableTabCond: meditor.IContextKey | undefined $effect(() => { @@ -394,6 +402,9 @@ updateCode() }, 200) }) + editor.onDidChangeCursorPosition((event) => { + dispatch('cursorPositionChange', { position: event.position }) + }) editor.onDidFocusEditorText(() => { if (!editor) return diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index 75db79da69..6b2f18c602 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -201,6 +201,7 @@ allIdsInPath: writable([]), darkMode, cssEditorOpen, + globalCssEditorSavedPosition: { val: undefined }, previewTheme, debuggingComponents: writable({}), replaceStateFn: replaceStateFn, diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte index 63cbf553ac..f99f99fe5e 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte @@ -14,12 +14,20 @@ import ThemeCodePreview from './ThemeCodePreview.svelte' import { sendUserToast } from '$lib/toast' - const { app } = getContext('AppViewerContext') + const { app, globalCssEditorSavedPosition } = getContext('AppViewerContext') - let cssEditor: SimpleEditor | undefined = undefined - let alertHeight: number | undefined = undefined - let themeViewer: any = undefined - let selectedTab: 'css' | 'theme' = 'css' + let cssEditor: SimpleEditor | undefined = $state(undefined) + let alertHeight: number | undefined = $state(undefined) + let themeViewer: any = $state(undefined) + let selectedTab: 'css' | 'theme' = $state('css') + + $effect(() => { + if (!cssEditor) return + setTimeout(() => { + if (globalCssEditorSavedPosition.val) + cssEditor?.setCursorPosition(globalCssEditorSavedPosition.val) + }, 0) + }) function insertSelector(selector: string) { if ($app?.theme?.type === 'path') { @@ -80,6 +88,9 @@ small automaticLayout bind:this={cssEditor} + on:cursorPositionChange={(e) => { + globalCssEditorSavedPosition.val = e.detail.position + }} /> {:else} diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index b000fc2326..4bb00129e5 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -23,10 +23,11 @@ import type { TemplateV2AppInput, UploadAppInput, UploadS3AppInput, - UserAppInput, + UserAppInput } from './inputType' import type { World } from './rx' import type { FilledItem } from './svelte-grid/types' +import type { Position } from 'monaco-editor' export type HorizontalAlignment = 'left' | 'center' | 'right' export type VerticalAlignment = 'top' | 'center' | 'bottom' @@ -141,13 +142,13 @@ export type HiddenRunnable = { export type AppTheme = | { - type: 'path' - path: string - } + type: 'path' + path: string + } | { - type: 'inlined' - css: string - } + type: 'inlined' + css: string + } export type App = { grid: GridItem[] @@ -277,6 +278,7 @@ export type AppViewerContext = { allIdsInPath: Writable darkMode: Writable cssEditorOpen: Writable + globalCssEditorSavedPosition: { val: Position | undefined } // Not reactive previewTheme: Writable debuggingComponents: Writable> replaceStateFn?: ((url: string) => void) | undefined