@fc-components/monaco-editor 0.1.18 → 0.1.20

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;
@@ -11,6 +13,7 @@ interface SqlEditorProps {
     onChange?: (value: string) => void;
     onEnter?: (value: string) => void;
     onBlur?: (value: string) => void;
+    onFocus?: (value: string) => void;
     editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
 }
 export default function SqlEditor(props: SqlEditorProps): React.JSX.Element;

package/package.json

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

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;
@@ -20,6 +20,7 @@ interface SqlEditorProps {
   onChange?: (value: string) => void;
   onEnter?: (value: string) => void;
   onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
   editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
 }
 
@@ -30,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,
   },
 };
 
@@ -70,6 +75,8 @@ const containerReadOnlyClassName = css`
 export default function SqlEditor(props: SqlEditorProps) {
   const id = uuidv4();
   const {
+    maxHeight,
+    fontSize,
     size = 'middle',
     theme = 'light',
     value = '',
@@ -80,6 +87,7 @@ export default function SqlEditor(props: SqlEditorProps) {
     onChange,
     onEnter,
     onBlur,
+    onFocus,
     editorDidMount,
   } = props;
 
@@ -147,6 +155,7 @@ export default function SqlEditor(props: SqlEditorProps) {
 
     editor.onDidFocusEditorText(() => {
       isEditorFocused.set(true);
+      onFocus?.(editor.getValue());
     });
 
     // set the height of the editor container
@@ -222,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
@@ -242,9 +257,11 @@ export default function SqlEditor(props: SqlEditorProps) {
             readOnly: readOnly || disabled,
             scrollBeyondLastLine: false,
             smoothScrolling: true,
+            fontSize,
             tabSize: 2,
             wordWrap: 'on',
             automaticLayout: true,
+            fixedOverflowWidgets: true,
             glyphMargin: false,
             lineNumbers: 'off',
             lineNumbersMinChars: 0,
@@ -255,6 +272,7 @@ export default function SqlEditor(props: SqlEditorProps) {
             placeholder: placeholder,
             renderLineHighlight: 'none',
             occurrencesHighlight: 'off',
+            scrollbar: { vertical: 'hidden', horizontal: 'hidden', alwaysConsumeMouseWheel: false },
           }}
         />
       </div>