@fc-components/monaco-editor 0.1.20 → 0.1.22

package/dist/promql/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
 import type { DataProviderParams } from './types';
 interface PromQLEditorProps {
+    className?: string;
     size?: 'small' | 'middle' | 'large';
     theme?: 'light' | 'dark';
     value?: string;

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.20",
+  "version": "0.1.22",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/promql/index.tsx

@@ -14,6 +14,7 @@ import type { DataProviderParams } from './types';
 import { validateQuery } from './validation';
 
 interface PromQLEditorProps {
+  className?: string;
   size?: 'small' | 'middle' | 'large';
   theme?: 'light' | 'dark';
   value?: string;
@@ -88,6 +89,7 @@ const getStyles = (placeholder?: string) => {
 export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
   const id = uuidv4();
   const {
+    className,
     size = 'middle',
     theme = 'light',
     value,
@@ -344,7 +346,8 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
         'ant-input' +
         (size ? ` ${SIZE_MAP[size].className}` : '') +
         (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
-        (readOnly ? ` ${containerReadOnlyClassName}` : '')
+        (readOnly ? ` ${containerReadOnlyClassName}` : '') +
+        (className ? ` ${className}` : '')
       }
     >
       <div ref={containerRef}>

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',
@@ -229,9 +231,11 @@ 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,
@@ -258,6 +262,7 @@ export default function SqlEditor(props: SqlEditorProps) {
             scrollBeyondLastLine: false,
             smoothScrolling: true,
             fontSize,
+            lineHeight: 24,
             tabSize: 2,
             wordWrap: 'on',
             automaticLayout: true,