From 93ae5ae47d70f9e060a4ea7df659dedbc0825209 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= Date: Wed, 22 Nov 2023 17:14:32 +0100 Subject: [PATCH] editor height fix --- .vscode/settings.json | 14 +- .../components/field-controls/html-editor.tsx | 134 ++++++++++-------- 2 files changed, 86 insertions(+), 62 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 35a6d34f1..e983e2d42 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,16 @@ { "typescript.tsdk": "node_modules/typescript/lib", - "editor.formatOnSave": true + "editor.formatOnSave": true, + "sqltools.connections": [ + { + "previewLimit": 50, + "server": "38.242.211.248", + "port": 5432, + "driver": "PostgreSQL", + "name": "idopontom", + "username": "admin", + "database": "idopontom", + "password": "10825660" + } + ] } diff --git a/apps/sensenet/src/components/field-controls/html-editor.tsx b/apps/sensenet/src/components/field-controls/html-editor.tsx index aef1a4cb2..3e8243b28 100644 --- a/apps/sensenet/src/components/field-controls/html-editor.tsx +++ b/apps/sensenet/src/components/field-controls/html-editor.tsx @@ -1,9 +1,9 @@ /** * @module FieldControls */ -import { InputLabel, useTheme } from '@material-ui/core' +import { Box, InputLabel, Typography, useTheme } from '@material-ui/core' import { changeTemplatedValue, ReactClientFieldSetting } from '@sensenet/controls-react' -import React, { useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import MonacoEditor from 'react-monaco-editor' /** @@ -18,70 +18,82 @@ export const HtmlEditor: React.FC = (props) => { const readonly = props.actionName === 'browse' || props.settings.ReadOnly + const editorRef = useRef(null) + const containerRef = useRef(null) + + useEffect(() => { + console.log({ editorRef, containerRef }) + + if (!editorRef.current) { + return + } + editorRef.current.editor!.onDidContentSizeChange(() => { + const contentHeight = editorRef?.current?.editor?.getContentHeight() + + console.log('contentHeight', contentHeight) + + containerRef.current!.style.height = `${contentHeight}px` + }) + }, [editorRef, containerRef, value]) + return ( <> - {/* - {props.settings.DisplayName} - */} - - {props.settings.DisplayName} - + {props.settings.DisplayName} - { - setValue(v) - props.fieldOnChange?.(props.settings.Name, v) - }} - options={{ - automaticLayout: true, - contextmenu: true, - hideCursorInOverviewRuler: true, - lineNumbers: 'on', - selectOnLineNumbers: true, - minimap: { - enabled: true, - }, - roundedSelection: false, - readOnly: readonly, - cursorStyle: 'line', - scrollbar: { - horizontalSliderSize: 4, - verticalScrollbarSize: 6, - // vertical: 'hidden', - }, +
+ { + setValue(v) + props.fieldOnChange?.(props.settings.Name, v) + }} + options={{ + automaticLayout: true, + contextmenu: true, + hideCursorInOverviewRuler: true, + lineNumbers: 'on', + selectOnLineNumbers: true, + scrollBeyondLastLine: false, + minimap: { + enabled: true, + }, + roundedSelection: false, + readOnly: readonly, + cursorStyle: 'line', + scrollbar: { + horizontalSliderSize: 4, + verticalScrollbarSize: 6, + // vertical: 'hidden', + }, - wordWrap: 'on', - autoIndent: 'advanced', - matchBrackets: 'always', - language: 'html', - suggest: { - snippetsPreventQuickSuggestions: false, - showProperties: true, - showKeywords: true, - showWords: true, - }, - }} - theme={theme.palette.type === 'dark' ? 'admin-ui-dark' : 'vs-light'} - editorWillMount={(monaco) => { - monaco.editor.defineTheme('admin-ui-dark', { - base: 'vs-dark', - inherit: true, - rules: [], - colors: { - 'editor.background': '#121212', + wordWrap: 'on', + autoIndent: 'advanced', + matchBrackets: 'always', + language: 'html', + suggest: { + snippetsPreventQuickSuggestions: false, + showProperties: true, + showKeywords: true, + showWords: true, }, - }) - }} - /> + }} + theme={theme.palette.type === 'dark' ? 'admin-ui-dark' : 'vs-light'} + editorWillMount={(monaco) => { + monaco.editor.defineTheme('admin-ui-dark', { + base: 'vs-dark', + inherit: true, + rules: [], + colors: { + 'editor.background': '#121212', + }, + }) + }} + /> +
) }