From 5eaab2be4283c73357ffff49397fb09b0cb28b72 Mon Sep 17 00:00:00 2001 From: Alexander Brown Date: Thu, 3 Aug 2023 00:02:42 -0700 Subject: [PATCH] Fix heights/sizing on resize --- index.html | 19 ++++++++++--------- src/App.tsx | 23 ++++++++++++++++------- src/components/Editor.tsx | 11 ++++++++--- src/index.css | 2 -- 4 files changed, 34 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 8d6014a..5ca4115 100644 --- a/index.html +++ b/index.html @@ -2,18 +2,19 @@ - - - - Prompt Crafter + + + + Prompt Crafter -
- +
+ \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index cde8226..fe644a1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,9 @@ import { AppBar, CssBaseline, Paper, Toolbar, Typography } from '@mui/material'; import { Editor } from './components/Editor'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useMonaco } from '@monaco-editor/react'; import { conf, language } from './common/sdprompt_monaco'; +import monaco from 'monaco-editor'; function App() { const [promptText, setPromptText] = useState( localStorage.getItem('pc.active_prompt') ?? '', @@ -22,6 +23,12 @@ function App() { localStorage.setItem('pc.active_prompt', promptText); }, [promptText]); + const editorRef = useRef(null); + + function handleEditorDidMount(editor: monaco.editor.IStandaloneCodeEditor) { + editorRef.current = editor; + } + function handleEditorTextChange(value: string | undefined) { if (value) { setPromptText(value); @@ -31,11 +38,13 @@ function App() { return prompt.split(/\s*,\s*/); } + editorRef.current?.layout(); + return ( <> -
- +
+ -
- {splitOnCommas(promptText).map((segment) => ( -
{segment}
+
+ {splitOnCommas(promptText).map((segment, idx) => ( +
{segment}
))}
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 6267e95..47552bf 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -1,15 +1,20 @@ -import MonacoEditor, { EditorProps } from '@monaco-editor/react'; +import MonacoEditor, { EditorProps, useMonaco } from '@monaco-editor/react'; import _ from 'lodash'; const DEFAULT_OPTIONS: EditorProps = { theme: 'vs-dark', - options: { minimap: { enabled: false }, wordWrap: 'wordWrapColumn' }, + options: { + padding: { top: 16 }, + minimap: { enabled: false }, + automaticLayout: true, + scrollBeyondLastLine: false, + wordWrap: 'wordWrapColumn', + }, language: 'sdprompt', }; export function Editor(props: EditorProps = {}) { const withDefaults = _.merge({}, DEFAULT_OPTIONS, props); - return ( <> diff --git a/src/index.css b/src/index.css index 30f48a9..e624bda 100644 --- a/src/index.css +++ b/src/index.css @@ -13,8 +13,6 @@ body { } #root { - display: grid; - grid-template: 1fr / 1fr; height: 100%; min-height: 100%; }