@fc-components/monaco-editor 0.1.19 → 0.1.21

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,8 @@
 import React from 'react';
 import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
 interface SqlEditorProps {
+    maxHeight?: number | string;
+    fontSize?: number;
     size?: 'small' | 'middle' | 'large';
     theme?: 'light' | 'dark';
     value?: string;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.19",
+  "version": "0.1.21",
   "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,8 +346,12 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
         'ant-input' +
         (size ? ` ${SIZE_MAP[size].className}` : '') +
         (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
-        (readOnly ? ` ${containerReadOnlyClassName}` : '')
+        (readOnly ? ` ${containerReadOnlyClassName}` : '') +
+        ` ${className}`
       }
+      style={{
+        display: 'block',
+      }}
     >
       <div ref={containerRef}>
         <MonacoEditor

package/src/sql/index.tsx

@@ -4,12 +4,12 @@ import * as monaco from 'monaco-editor';
 import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
 import { v4 as uuidv4 } from 'uuid';
 import { css } from '@emotion/css';
-
 import { language, languageConfiguration } from './sql';
 import { getSqlCompletionProvider } from './completion/getCompletionProvider';
-// import { validateSql } from './validation';
 
 interface SqlEditorProps {
+  maxHeight?: number | string;
+  fontSize?: number;
   size?: 'small' | 'middle' | 'large';
   theme?: 'light' | 'dark';
   value?: string;
@@ -31,22 +31,26 @@ const SIZE_MAP: Record<
     className: string;
     top: number;
     bottom: number;
+    minHeight: number;
   }
 > = {
   small: {
     className: 'ant-input-sm',
     top: 1,
     bottom: 1,
+    minHeight: 24,
   },
   middle: {
     className: 'ant-input-md',
     top: 1,
     bottom: 1,
+    minHeight: 32,
   },
   large: {
     className: 'ant-input-lg',
     top: 3,
     bottom: 2,
+    minHeight: 40,
   },
 };
 
@@ -71,6 +75,8 @@ const containerReadOnlyClassName = css`
 export default function SqlEditor(props: SqlEditorProps) {
   const id = uuidv4();
   const {
+    maxHeight,
+    fontSize,
     size = 'middle',
     theme = 'light',
     value = '',
@@ -225,6 +231,12 @@ export default function SqlEditor(props: SqlEditorProps) {
         (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
         (readOnly ? ` ${containerReadOnlyClassName}` : '')
       }
+      style={{
+        resize: 'vertical',
+        overflow: 'auto',
+        minHeight: SIZE_MAP[size].minHeight,
+        maxHeight,
+      }}
     >
       <div ref={containerRef}>
         <MonacoEditor
@@ -245,9 +257,12 @@ export default function SqlEditor(props: SqlEditorProps) {
             readOnly: readOnly || disabled,
             scrollBeyondLastLine: false,
             smoothScrolling: true,
+            fontSize,
+            lineHeight: 24,
             tabSize: 2,
             wordWrap: 'on',
             automaticLayout: true,
+            fixedOverflowWidgets: true,
             glyphMargin: false,
             lineNumbers: 'off',
             lineNumbersMinChars: 0,
@@ -258,6 +273,7 @@ export default function SqlEditor(props: SqlEditorProps) {
             placeholder: placeholder,
             renderLineHighlight: 'none',
             occurrencesHighlight: 'off',
+            scrollbar: { vertical: 'hidden', horizontal: 'hidden', alwaysConsumeMouseWheel: false },
           }}
         />
       </div>