feat: Editor component is replaced by MultiLineEditor

2025-12-10 12:27:45 +00:00 · 2022-10-10 18:06:06 +05:30
parent 19a7eec010
commit 47ab1b0c44
24 changed files with 137 additions and 75 deletions
--- a/packages/firecamp-core/src/components/modals-v3/environment/CreateEnvironment.tsx
+++ b/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}
--- a/packages/firecamp-core/src/components/modals-v3/environment/ManageEnvironment.tsx
+++ b/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}
--- a/packages/firecamp-core/src/components/modals/collection-setting/body/environment/EnvPlayground.tsx
+++ b/packages/firecamp-core/src/components/modals/collection-setting/body/environment/EnvPlayground.tsx
@@ -3,8 +3,7 @@ import {
  Container,
  TabHeader,
  Button,
- 
-  MultiLineIFE,
+  Editor
 } 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={
--- a/packages/firecamp-core/src/components/modals/workspace-setting/body/import/body/ImportRaw.tsx
+++ b/packages/firecamp-core/src/components/modals/workspace-setting/body/import/body/ImportRaw.tsx
@@ -6,9 +6,7 @@ import {
  Container,
  TabHeader,
  Button,
- 
-  
-  MultiLineIFE,
+  Editor,
 } 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'}
--- a/packages/firecamp-core/src/components/sidebar/EnvSidebar.tsx
+++ b/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}
--- a/packages/firecamp-core/src/components/tabs/converter/source/Body.tsx
+++ b/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}
--- a/packages/firecamp-core/src/components/tabs/converter/target/Body.tsx
+++ b/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}
--- a/packages/firecamp-core/src/components/tabs/markdown/source/Body.tsx
+++ b/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}
--- a/packages/firecamp-core/src/components/tabs/markdown/target/Body.tsx
+++ b/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}
--- a/packages/firecamp-graphql/src/components/playground-panel/playground/request/footerbar/Variables.tsx
+++ b/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) => {
--- a/packages/firecamp-graphql/src/components/playground-panel/playground/request/query-editor/QueryEditor.monaco.tsx
+++ b/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}
--- a/packages/firecamp-graphql/src/components/playground-panel/playground/response/tabs/BodyTab.tsx
+++ b/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}
--- a/packages/firecamp-graphql/src/components/playground-panel/playground/response/tabs/TimelineTab.tsx
+++ b/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"
--- a/packages/firecamp-rest/src/components/common/code-snippets/CodeSnippets.tsx
+++ b/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'
--- a/packages/firecamp-rest/src/components/request/tabs/BodyTab.tsx
+++ b/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={
--- a/packages/firecamp-rest/src/components/request/tabs/body/GraphQLBody.tsx
+++ b/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={{
--- a/packages/ui-kit/src/components/editors/monaco-v2/Editor.interface.ts
+++ b/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;
+}
--- a/packages/ui-kit/src/components/editors/monaco-v2/Editor.tsx
+++ b/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;
  }
@@ -201,7 +199,6 @@ const Editor: FC<IMultiLineIFE> = ({
        options={options}
        // height="90vh"
        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>
  );
--- a/packages/ui-kit/src/components/response/tabs/TimelineTab.tsx
+++ b/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"
--- a/packages/ui-kit/src/components/scripts/HelpPopup.tsx
+++ b/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
                                                                }
--- a/packages/ui-kit/src/components/scripts/ScriptsTabs.tsx
+++ b/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] || ''}
--- a/packages/ui-kit/src/components/smart-json-table/SmartJSONEditor.tsx
+++ b/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={{
--- a/packages/ui-kit/src/components/table/bulk-edit-ift/BulkEditIFT.tsx
+++ b/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',
            }}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -109,16 +109,16 @@ exports.plugins = [
      console.log(`${(percentage * 100).toFixed()}%`, message, ...args);
    },
  }),
-  new MonacoWebpackPlugin({
-    /**
-     * available options are documented at
-     * https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin#options
-     **/
-    globalAPI: true,
-    publicPath: '/js',
-    filename: '[name].worker.bundle.js',
-    languages: ['javascript', 'html', 'typescript', 'json'],
-  }),
+  // new MonacoWebpackPlugin({
+  //   /**
+  //    * available options are documented at
+  //    * https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin#options
+  //    **/
+  //   globalAPI: true,
+  //   publicPath: '/js',
+  //   filename: '[name].worker.bundle.js',
+  //   languages: ['javascript', 'html', 'typescript', 'json'],
+  // }),
 ];

 exports.rules = [