feat: Editor component is replaced by MultiLineEditor

packages/firecamp-core/src/components/modals-v3/environment/CreateEnvironment.tsx

@@ -6,7 +6,7 @@ import {
   Modal,
   IModal,
   ProgressBar,
-  MultiLineIFE,
+  Editor,
   CheckboxGroup,
 } from '@firecamp/ui-kit';
 import { _misc } from '@firecamp/utils';
@@ -227,7 +227,7 @@ const CreateEnvironment: FC<IModal> = ({
               Variables will be valid JSON in key-value pair. ex.{' '}
               {`{ "host": "https://myapi.com" }`}
             </span>
-            <MultiLineIFE
+            <Editor
               language="json"
               value={env.variables}
               onChange={onVariableEditorChange}

packages/firecamp-core/src/components/modals-v3/environment/ManageEnvironment.tsx

@@ -6,7 +6,7 @@ import {
   Modal,
   IModal,
   ProgressBar,
-  MultiLineIFE,
+  Editor,
 } from '@firecamp/ui-kit';
 import { _misc } from '@firecamp/utils';
 import { IEnvironment, EEnvironmentScope } from '@firecamp/types';
@@ -215,7 +215,7 @@ const ManageEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
               Variables will be valid JSON in key-value pair. ex.{' '}
               {`{ "host": "https://myapi.com" }`}
             </span>
-            <MultiLineIFE
+            <Editor
               language="json"
               value={env.variables}
               onChange={onVariableEditorChange}

packages/firecamp-core/src/components/modals/collection-setting/body/environment/EnvPlayground.tsx

@@ -3,8 +3,7 @@ import {
   Container,
   TabHeader,
   Button,
- 
+  Editor
-  MultiLineIFE,
 } from '@firecamp/ui-kit';
 import equal from 'deep-equal';
 import { _object } from '@firecamp/utils';
@@ -167,7 +166,7 @@ const EnvPlayground: FC<IEnvPlayground> = ({
   return (
     <Container>
       <Container.Body>
-        <MultiLineIFE
+        <Editor
           autoFocus={!isAddEnvPopoverOpen}
           language={'json'}
           value={

packages/firecamp-core/src/components/modals/workspace-setting/body/import/body/ImportRaw.tsx

@@ -6,9 +6,7 @@ import {
   Container,
   TabHeader,
   Button,
- 
+  Editor,
-  
-  MultiLineIFE,
 } from '@firecamp/ui-kit';
 
 const ImportRaw: FC<IImportRaw> = ({
@@ -37,7 +35,7 @@ const ImportRaw: FC<IImportRaw> = ({
   return (
     <Container className="fc-import-editor" overflow="auto">
       <Container.Body>
-        <MultiLineIFE
+        <Editor
           disabled={false}
           name={'jsonbody'}
           language={'json'}

packages/firecamp-core/src/components/sidebar/EnvSidebar.tsx

@@ -3,7 +3,7 @@ import { VscClose } from '@react-icons/all-files/vsc/VscClose';
 import {
   Resizable,
   Container,
-  MultiLineIFE,
+  Editor,
   TabHeader,
   Button, 
 } from '@firecamp/ui-kit';
@@ -247,7 +247,7 @@ const EnvVarPreview: FC<IEnvVarPreview> = ({
         </TabHeader>
       </div>
       <div style={{ height: 'calc(50vh - 100px)' }}>
-        <MultiLineIFE
+        <Editor
           autoFocus={true}
           language="json"
           value={variables}

packages/firecamp-core/src/components/tabs/converter/source/Body.tsx

@@ -1,5 +1,5 @@
 import { FC, Fragment } from 'react';
-import { MultiLineIFE } from '@firecamp/ui-kit';
+import { Editor } from '@firecamp/ui-kit';
 import { EConverterLang } from '../types';
 
 import { ITabFns } from '../../types/tab';
@@ -42,7 +42,7 @@ const Body: FC<IBody> = ({
 
   return (
     <Fragment>
-      <MultiLineIFE
+      <Editor
         autoFocus={true}
         language={mode}
         value={body}

packages/firecamp-core/src/components/tabs/converter/target/Body.tsx

@@ -1,5 +1,5 @@
 import { FC, Fragment } from 'react';
-import { MultiLineIFE } from '@firecamp/ui-kit';
+import { Editor } from '@firecamp/ui-kit';
 import { EConverterLang } from '../types';
 
 import { ITargetState } from './Target';
@@ -29,7 +29,7 @@ const Body: FC<IBody> = ({
 
   return (
     <Fragment>
-      <MultiLineIFE
+      <Editor
         language={mode}
         value={body}
         disabled={true}

packages/firecamp-core/src/components/tabs/markdown/source/Body.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { FC, Fragment } from 'react';
-import { MultiLineIFE } from '@firecamp/ui-kit';
+import { Editor } from '@firecamp/ui-kit';
 
 import { ITabFns } from '../../types/tab';
 import { ISourceState } from './Source';
@@ -12,7 +12,7 @@ const Body: FC<IBody> = ({
 }) => {
   return (
     <Fragment>
-      <MultiLineIFE
+      <Editor
         autoFocus={true}
         language={'markdown'}
         value={body}

packages/firecamp-core/src/components/tabs/markdown/target/Body.tsx

@@ -2,13 +2,13 @@
 
 import { FC, Fragment } from 'react';
 
-import { MultiLineIFE } from '@firecamp/ui-kit';
+import { Editor } from '@firecamp/ui-kit';
 import { ITabFns } from '../../types/tab';
 
 const Body: FC<IBody> = ({ body = {}, tabFns = {} }) => {
   return (
     <Fragment>
-      <MultiLineIFE
+      <Editor
         language={'html'}
         value={body}
         disabled={true}

packages/firecamp-graphql/src/components/playground-panel/playground/request/footerbar/Variables.tsx

@@ -1,5 +1,5 @@
 import shallow from 'zustand/shallow';
-import { MultiLineIFE } from '@firecamp/ui-kit';
+import { Editor } from '@firecamp/ui-kit';
 // import equal from 'deep-equal';
 
 import { useGraphQLStore } from '../../../../../store';
@@ -14,7 +14,7 @@ const Variables = () => {
   );
 
   return (
-    <MultiLineIFE
+    <Editor
       language={`json`}
       value={playground?.request?.meta?.variables || `{ }`}
       onChange={(e) => {

packages/firecamp-graphql/src/components/playground-panel/playground/request/query-editor/QueryEditor.monaco.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { print } from 'graphql/language/printer';
-import { Container, Column, MultiLineIFE } from '@firecamp/ui-kit';
+import { Container, Column, Editor } from '@firecamp/ui-kit';
 
 import getQueryFacts, {
   getCurrentOperation,
@@ -112,7 +112,7 @@ const QueryEditorMonaco = ({ isQueryDirty, toggleQueryDirty }) => {
     <Column flex={1} height="100%" overflow="auto">
       <Container className="with-divider">
         <Container.Body>
-          <MultiLineIFE
+          <Editor
             value={editorValue || ''}
             language="graphqlDev"
             // formatOnPaste={true}

packages/firecamp-graphql/src/components/playground-panel/playground/response/tabs/BodyTab.tsx

@@ -4,7 +4,7 @@ import shallow from 'zustand/shallow';
 import {
   SecondaryTab,
   Container,
-  MultiLineIFE,
+  Editor,
   StatusBar,
 } from '@firecamp/ui-kit';
 import { useGraphQLStore } from '../../../../../store';
@@ -124,7 +124,7 @@ const BodyTab = () => {
         let cursorStart = 1;
 
         return (
-          <MultiLineIFE
+          <Editor
             language={tab}
             value={data}
             onLoad={(editor) => {
@@ -147,7 +147,7 @@ const BodyTab = () => {
          * Allow to show HTML response without checking data HTML valid or not
          */
         return (
-          <MultiLineIFE
+          <Editor
             disabled={true}
             language={tab}
             value={data}
@@ -175,7 +175,7 @@ const BodyTab = () => {
         break;
       default:
         return (
-          <MultiLineIFE
+          <Editor
             disabled={true}
             language={tab}
             value={data}

packages/firecamp-graphql/src/components/playground-panel/playground/response/tabs/TimelineTab.tsx

@@ -1,4 +1,4 @@
-import { MultiLineIFE } from '@firecamp/ui-kit';
+import { Editor } from '@firecamp/ui-kit';
 import shallow from 'zustand/shallow';
 
 import { useGraphQLStore } from '../../../../../store';
@@ -12,7 +12,7 @@ const TimelineTab = () => {
   );
 
   return (
-    <MultiLineIFE
+    <Editor
       disabled={true}
       value={response?.timeline || ``}
       language="text"

packages/firecamp-rest/src/components/common/code-snippets/CodeSnippets.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo } from 'react';
 import classnames from 'classnames';
-import { MultiLineIFE, Container, Tabs, Modal } from '@firecamp/ui-kit';
+import { Editor, Container, Tabs, Modal } from '@firecamp/ui-kit';
 import shallow from 'zustand/shallow';
 
 import codeSnippet, {
@@ -160,7 +160,7 @@ const CodeSnippets = ({ tabId = '', getPlatformEnvironments }) => {
                     ''
                   )}
 
-                  <MultiLineIFE
+                  <Editor
                     value={snippetCode || ''}
                     language={
                       activeClientTargetMap[activeTarget] || 'typescript'

packages/firecamp-rest/src/components/request/tabs/BodyTab.tsx

@@ -11,7 +11,7 @@ import { isRestBodyEmpty } from '../../../services/rest-service';
 import {
   Container,
   Dropdown,
-  MultiLineIFE,
+  Editor,
   PrimaryIFT,
   MultipartIFT,
   Button,
@@ -182,7 +182,7 @@ const BodyTab: FC<any> = () => {
         case 'application/text':
         case ERestBodyTypes.Text:
           return (
-            <MultiLineIFE
+            <Editor
               autoFocus={false} //todo: previously autoFocus={!propReq.raw_url}
               value={body?.[active_body_type]?.value}
               language={

packages/firecamp-rest/src/components/request/tabs/body/GraphQLBody.tsx

@@ -3,7 +3,7 @@ import { ERestBodyTypes } from '@firecamp/types';
 import {
   Container,
   Column,
-  MultiLineIFE,
+  Editor,
   CMGQueryEditor,
 } from '@firecamp/ui-kit';
 
@@ -34,7 +34,7 @@ const GraphQLBody = ({ body, onChange }) => {
         </Column>
         <Column flex={1}>
           <div className="text-base px-1 py-2 bg-focus1">Query variables</div>
-          <MultiLineIFE
+          <Editor
             value={variables}
             language={'json'}
             monacoOptions={{

packages/ui-kit/src/components/editors/monaco-v2/Editor.interface.ts

@@ -0,0 +1,69 @@
+export interface IEditor {
+  id?: string | number;
+
+  /** editor value string */
+  value: string;
+
+  /**
+   * boolean value whether editor is readOnly or not
+   * similar to field readOnly
+   */
+  disabled?: boolean;
+
+  /** similar to field disabled*/
+  readOnly?: boolean;
+
+  /** set auto focus to editor */
+  autoFocus?: boolean;
+
+  /** editor language */
+  language?: string;
+
+  /** monaco editor options */
+  monacoOptions?: any;
+
+  /** editor placeholder */
+  placeholder?: string;
+
+  /** apply class to editor's container */
+  className?: string;
+
+  /** on load editor */
+  editorDidMount?: (edt: any, monaco: any) => {};
+
+  /** on change editor string*/
+  onChange?: (event: any) => any;
+
+  /** on blur editor*/
+  onBlur?: (event: any) => any;
+
+  /** on focus editor */
+  onFocus?: (event: any) => any;
+
+  /** on load editor */
+  onLoad?: (event: any) => any;
+
+  /** on paste text */
+  onPaste?: (event: any) => any;
+
+  /** on press enter */
+  onEnter?: (event: any) => any;
+
+  /** on press s */
+  onCtrlS?: (event: any) => any;
+
+  /** on press shift + s */
+  onCtrlShiftS?: (event: any) => any;
+
+  /** on press ctrl + 0 */
+  onCtrlO?: (event: any) => any;
+
+  /** on press k */
+  onCtrlK?: (event: any) => any;
+
+  /** on press ctrl + enter */
+  onCtrlEnter?: (event: any) => any;
+
+  /** on press shift + enter */
+  onCtrlShiftEnter?: (event: any) => any;
+}

packages/ui-kit/src/components/editors/monaco-v2/Editor.tsx

@@ -1,12 +1,12 @@
 import { FC, useEffect } from 'react';
 import MonacoEditor, { OnMount, EditorProps } from '@monaco-editor/react';
 import cx from 'classnames';
-import { IMultiLineIFE } from '../monaco/components/MultiLineIFE.interfaces';
+import { IEditor } from './Editor.interface';
 import MonacoFirecampLangInit, {
   SetCompletionProvider,
 } from '../monaco/lang/init';
 
-const Editor: FC<IMultiLineIFE> = ({
+const Editor: FC<IEditor> = ({
   value,
   onChange = () => {}, // similar DOM event, e = { preventDefault, target }
   onBlur,
@@ -137,10 +137,6 @@ const Editor: FC<IMultiLineIFE> = ({
     //   }
     // }
 
-    // @ts-ignore
-    window.ife.set(edt._id, edt);
-    onLoad(edt);
-
     // set focus to Editor if autoFocus is given true to Input
     if (autoFocus === true) {
       try {
@@ -154,6 +150,7 @@ const Editor: FC<IMultiLineIFE> = ({
   };
 
   const options: EditorProps['options'] = {
+    readOnly: false,
     fontFamily: "'Open Sans', sans-serif",
     fontSize: 14,
     links: false,
@@ -170,14 +167,15 @@ const Editor: FC<IMultiLineIFE> = ({
       // vertical: "hidden",
       // horizontal: "hidden",
       handleMouseWheel: true,
-      useShadows: false,
+      useShadows: true,
 
-      verticalScrollbarSize: 5,
+      verticalScrollbarSize: 10,
       horizontalScrollbarSize: 5,
     },
-    ...monacoOptions,
+    // ...monacoOptions,
   };
 
+  /** if 'readOnly' is not provided then consider 'disabled' */
   if (!monacoOptions?.hasOwnProperty('readOnly')) {
     options.readOnly = disabled;
   }
@@ -200,8 +198,7 @@ const Editor: FC<IMultiLineIFE> = ({
         }
         options={options}
         // height="90vh"
-        onMount={(edt,monaco) => {
+        onMount={(edt, monaco) => {
-          onMount(edt, monaco);
           /**
            * Allow comments for JSON language
            * Reference: https://github.com/microsoft/monaco-editor/issues/2426
@@ -216,6 +213,7 @@ const Editor: FC<IMultiLineIFE> = ({
           onFocus && edt.onDidFocusEditorText(() => onFocus(edt));
           onPaste && edt.onDidPaste(() => onPaste(edt));
 
+          // https://www.anycodings.com/1questions/1773746/how-do-i-insert-text-into-a-monaco-editor
           // edt.insertTextAtCurrentCursor = (text: any) => {
           //   let p = edt.getPosition();
           //   edt.executeEdits('', [
@@ -230,10 +228,12 @@ const Editor: FC<IMultiLineIFE> = ({
           //     },
           //   ]);
           // };
+          onMount(edt, monaco);
+          onLoad(edt);
           editorDidMount && editorDidMount(edt, monaco);
+          // @ts-ignore
+          window.ife.set(edt._id, edt);
         }}
-        // onBlur={onBlur}
-        // onFocus={(e) => onFocus(e)}
       />
     </div>
   );

packages/ui-kit/src/components/response/tabs/TimelineTab.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react";
-import { MultiLineIFE } from '@firecamp/ui-kit';
+import { Editor } from '@firecamp/ui-kit';
 
 const TimelineTab: FC<{timeline: string}> = ({
   timeline
 }) => {
 
   return (
-    <MultiLineIFE
+    <Editor
       disabled={true}
       value={timeline || ``}
       language="text"

packages/ui-kit/src/components/scripts/HelpPopup.tsx

@@ -2,10 +2,8 @@ import { FC, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { VscInfo } from '@react-icons/all-files/vsc/VscInfo';
 import {
-  MultiLineIFE,
+  Editor,
   Button,
- 
-  
   Popover,
   EPopoverPosition,
 } from '@firecamp/ui-kit';
@@ -219,7 +217,7 @@ const HelpPopUp: FC<IHelpPopup> = ({
                                                                 height: '50px',
                                                               }}
                                                             >
-                                                              <MultiLineIFE
+                                                              <Editor
                                                                 value={
                                                                   help.snippet
                                                                 }

packages/ui-kit/src/components/scripts/ScriptsTabs.tsx

@@ -4,7 +4,7 @@ import {
   Container,
   SecondaryTab,
   Checkbox,
-  MultiLineIFE,
+  Editor,
 } from '@firecamp/ui-kit';
 import {
   preScriptSnippets,
@@ -205,7 +205,7 @@ const ScriptsTabs: FC<IScriptsTab> = ({
           {
             // TODO: remove above parent div and height
           }
-          <MultiLineIFE
+          <Editor
             autoFocus={true}
             id={`scripts-tab-${activeTab}-${id}`}
             value={scripts[activeTab] || ''}

packages/ui-kit/src/components/smart-json-table/SmartJSONEditor.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, Fragment } from 'react';
 import equal from 'deep-equal';
-import { MultiLineIFE } from '@firecamp/ui-kit';
+import { Editor } from '@firecamp/ui-kit';
 import { _table } from '@firecamp/utils'
 
 const SmartJSONEditor = ({ JSONState, detach = false, onChange }) => {
@@ -72,7 +72,7 @@ const SmartJSONEditor = ({ JSONState, detach = false, onChange }) => {
   // console.log(`detach`, detach)
 
   return (
-    <MultiLineIFE
+    <Editor
       value={JSONEditorString}
       language="json"
       options={{

packages/ui-kit/src/components/table/bulk-edit-ift/BulkEditIFT.tsx

@@ -3,10 +3,8 @@ import {
   Container,
   TabHeader,
   Button,
- 
-  
   PrimaryIFT,
-  MultiLineIFE,
+  Editor,
 } from '@firecamp/ui-kit';
 import equal from 'deep-equal';
 
@@ -103,10 +101,10 @@ const BulkEditIFT: FC<IBulkEditIFT> = ({
         />
       ) : (
         <div className="h-28">
-          <MultiLineIFE
+          <Editor
             value={raw}
             language="text"
-            options={{
+            monacoOptions={{
               style: { display: 'table-caption' },
               height: '100px',
             }}

webpack.config.js

@@ -109,16 +109,16 @@ exports.plugins = [
       console.log(`${(percentage * 100).toFixed()}%`, message, ...args);
     },
   }),
-  new MonacoWebpackPlugin({
+  // new MonacoWebpackPlugin({
-    /**
+  //   /**
-     * available options are documented at
+  //    * available options are documented at
-     * https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin#options
+  //    * https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin#options
-     **/
+  //    **/
-    globalAPI: true,
+  //   globalAPI: true,
-    publicPath: '/js',
+  //   publicPath: '/js',
-    filename: '[name].worker.bundle.js',
+  //   filename: '[name].worker.bundle.js',
-    languages: ['javascript', 'html', 'typescript', 'json'],
+  //   languages: ['javascript', 'html', 'typescript', 'json'],
-  }),
+  // }),
 ];
 
 exports.rules = [