editor height fix

SenseNet · Nov 22, 2023 · 93ae5ae · 93ae5ae
1 parent a22b804
commit 93ae5ae
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 62 deletions.
diff --git 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
@@ -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<ReactClientFieldSetting> = (props) => {
 
   const readonly = props.actionName === 'browse' || props.settings.ReadOnly
 
+  const editorRef = useRef<MonacoEditor>(null)
+  const containerRef = useRef<HTMLDivElement>(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 (
     <>
-      {/* <Typography variant="caption" gutterBottom={true}>
-        {props.settings.DisplayName}
-      </Typography> */}
-      <InputLabel
-        style={{
-          display: 'block',
-          fontSize: '1.3rem',
-          transformOrigin: 'top left',
-        }}>
-        {props.settings.DisplayName}
-      </InputLabel>
+      <InputLabel shrink>{props.settings.DisplayName}</InputLabel>
 
-      <MonacoEditor
-        {...props}
-        width="100%"
-        height="200px"
-        value={value}
-        onChange={(v) => {
-          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',
-          },
+      <div style={{ maxHeight: '68vh', margin: '0.5rem 0' }} ref={containerRef} data-test="html-editor-container">
+        <MonacoEditor
+          ref={editorRef}
+          {...props}
+          width="100%"
+          height="100%"
+          value={value}
+          onChange={(v) => {
+            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',
+              },
+            })
+          }}
+        />
+      </div>
     </>
   )
 }