@fc-components/monaco-editor 0.1.21 → 0.1.23

package/dist/sql/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
 interface SqlEditorProps {
+    className?: string;
     maxHeight?: number | string;
     fontSize?: number;
     size?: 'small' | 'middle' | 'large';

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.21",
+  "version": "0.1.23",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/promql/index.tsx

@@ -89,7 +89,7 @@ const getStyles = (placeholder?: string) => {
 export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
   const id = uuidv4();
   const {
-    className = '',
+    className,
     size = 'middle',
     theme = 'light',
     value,
@@ -347,11 +347,8 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
         (size ? ` ${SIZE_MAP[size].className}` : '') +
         (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
         (readOnly ? ` ${containerReadOnlyClassName}` : '') +
-        ` ${className}`
+        (className ? ` ${className}` : '')
       }
-      style={{
-        display: 'block',
-      }}
     >
       <div ref={containerRef}>
         <MonacoEditor

package/src/sql/index.tsx

@@ -8,6 +8,7 @@ import { language, languageConfiguration } from './sql';
 import { getSqlCompletionProvider } from './completion/getCompletionProvider';
 
 interface SqlEditorProps {
+  className?: string;
   maxHeight?: number | string;
   fontSize?: number;
   size?: 'small' | 'middle' | 'large';
@@ -75,6 +76,7 @@ const containerReadOnlyClassName = css`
 export default function SqlEditor(props: SqlEditorProps) {
   const id = uuidv4();
   const {
+    className,
     maxHeight,
     fontSize,
     size = 'middle',
@@ -163,7 +165,7 @@ export default function SqlEditor(props: SqlEditorProps) {
       const containerDiv = containerRef.current;
       if (containerDiv !== null) {
         const pixelHeight = editor.getContentHeight();
-        containerDiv.style.height = `${pixelHeight}px`;
+        containerDiv.style.minHeight = `${pixelHeight}px`;
         containerDiv.style.width = '100%';
         const pixelWidth = containerDiv.clientWidth;
         editor.layout({ width: pixelWidth, height: pixelHeight });
@@ -229,16 +231,23 @@ export default function SqlEditor(props: SqlEditorProps) {
         'ant-input' +
         (size ? ` ${SIZE_MAP[size].className}` : '') +
         (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
-        (readOnly ? ` ${containerReadOnlyClassName}` : '')
+        (readOnly ? ` ${containerReadOnlyClassName}` : '') +
+        (className ? ` ${className}` : '')
       }
       style={{
+        display: 'block',
         resize: 'vertical',
         overflow: 'auto',
         minHeight: SIZE_MAP[size].minHeight,
         maxHeight,
       }}
     >
-      <div ref={containerRef}>
+      <div
+        ref={containerRef}
+        style={{
+          height: '100%',
+        }}
+      >
         <MonacoEditor
           width='100%'
           height='100%'