@fc-components/monaco-editor 0.1.3 → 0.1.4

package/README.md

@@ -4,8 +4,12 @@
 import { PromQLMonacoEditor } from '@fc-components/monaco-editor';
 
 const App = () => {
+  const [value, setValue] = React.useState<string>();
+
   return (
     <PromQLMonacoEditor
+      theme='light' // or 'dark'
+      size='middle' // 'small', 'middle', or 'large'
       placeholder='Enter your PromQL query here...'
       variablesNames={['$job', '$instance']} // Example variable names
       apiPrefix='/api/n9e/proxy/1/api/v1'
@@ -19,6 +23,7 @@ const App = () => {
           }),
         });
       }}
+      value={value}
       enableAutocomplete={true} // Enable completion
       durationVariablesCompletion={false} // Disable duration variables completion. eg. $__interval, $__range, $__rate_interval
       interpolateString={(query) => {
@@ -33,6 +38,7 @@ const App = () => {
       }}
       onChange={(value) => {
         console.log('Value changed:', value);
+        setValue(value);
       }}
     />
   );

package/dist/monaco-editor.cjs.development.js

@@ -1959,7 +1959,6 @@ function isErrorBoundary(boundary) {
 
 var _excluded = ["error"];
 var PROMQL_LANG_ID = monacoPromql.promLanguageDefinition.id;
-var EDITOR_HEIGHT_OFFSET = 2;
 var SIZE_MAP = {
   small: {
     className: 'ant-input-sm',
@@ -1978,8 +1977,8 @@ var SIZE_MAP = {
   }
 };
 var themeMap = {
-  light: 'vs-light',
-  dark: 'vs-dark'
+  light: 'light',
+  dark: 'n9e-dark'
 };
 var getStyles = function getStyles(placeholder) {
   return {
@@ -2030,6 +2029,15 @@ function PromQLEditor(props) {
     };
   }, []);
   var handleEditorDidMount = function handleEditorDidMount(editor) {
+    monaco.editor.defineTheme('n9e-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000'
+      }
+    });
     var isEditorFocused = editor.createContextKey('isEditorFocused' + id, false);
     // we setup on-blur
     editor.onDidBlurEditorWidget(function () {
@@ -2072,7 +2080,7 @@ function PromQLEditor(props) {
       var containerDiv = containerRef.current;
       if (containerDiv !== null) {
         var pixelHeight = editor.getContentHeight();
-        containerDiv.style.height = pixelHeight + EDITOR_HEIGHT_OFFSET + "px";
+        containerDiv.style.height = pixelHeight + "px";
         containerDiv.style.width = '100%';
         var pixelWidth = containerDiv.clientWidth;
         editor.layout({