ARTEMIS-6000 - Remove monaco editor dependency

Author: GChuf

artemis-console-extension/artemis-extension/app/package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@hawtio/react": "^1.12.3",
-    "@monaco-editor/react": "^4.6.0",
     "@patternfly/react-charts": "^7.4.9",
     "@patternfly/react-code-editor": "^5.4.18",
     "@patternfly/react-core": "^5.4.14",
@@ -23,7 +22,6 @@
     "@patternfly/react-topology": "^5.4.1",
     "artemis-console-plugin": "workspace:*",
     "d3": "^7.9.0",
-    "monaco-editor": "^0.52.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.30.3"
@@ -38,7 +36,6 @@
     "css-minimizer-webpack-plugin": "^7.0.2",
     "html-webpack-plugin": "^5.6.6",
     "mini-css-extract-plugin": "^2.9.4",
-    "monaco-editor-webpack-plugin": "^7.1.1",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "replace": "^1.2.2",

artemis-console-extension/artemis-extension/app/webpack.config.cjs

@@ -25,7 +25,6 @@ const TerserPlugin = require("terser-webpack-plugin")
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
 const CopyWebpackPlugin = require('copy-webpack-plugin')
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 const bodyParser = require('body-parser')
 
 const outputPath = path.resolve(__dirname, 'build')
@@ -128,23 +127,12 @@ module.exports = (webpackEnv, args) => {
             singleton: true,
             requiredVersion: dependencies['@hawtio/react'],
           },
-          'monaco-editor': {
-            singleton: true,
-            requiredVersion: dependencies['monaco-editor'],
-          },
           '@patternfly/react-core': {
             singleton: true,
             requiredVersion: dependencies['@patternfly/react-core'],
           },
         }
       }),
-      new MonacoWebpackPlugin({
-        // 'html' is required as workaround for 'xml'
-        // https://github.com/microsoft/monaco-editor/issues/1509
-        languages: ['xml', 'json', 'html'],
-        publicPath: '',
-        globalAPI: true
-      }),
       new InvestigationPlugin({})
     ],
     entry: "./src/index.ts",
@@ -284,18 +272,12 @@ module.exports = (webpackEnv, args) => {
                 return `${cacheGroupKey}-${packageName}`;
               }
 
-              // Default to the cache group key (e.g., react, patternfly, monaco)
+              // Default to the cache group key (e.g., react, patternfly)
               return cacheGroupKey;
             },
             priority: 30,
             enforce: true,
           },
-          monaco: {
-            test: /[\\/]node_modules[\\/](monaco-editor)[\\/]/,
-            name: 'monaco',
-            priority: 25,
-            enforce: true,
-          },
           hawtio: {
             test: /[\\/]node_modules[\\/]@hawtio[\\/]/,
             name: 'hawtio',

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/package.json

@@ -26,7 +26,6 @@
   },
   "devDependencies": {
     "@hawtio/react": "^1.12.3",
-    "@monaco-editor/react": "^4.6.0",
     "@patternfly/react-charts": "^7.4.9",
     "@patternfly/react-code-editor": "^5.4.18",
     "@patternfly/react-core": "^5.4.14",
@@ -46,7 +45,6 @@
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-fetch-mock": "^3.0.3",
-    "monaco-editor": "^0.52.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.30.3",
@@ -59,7 +57,6 @@
   },
   "peerDependencies": {
     "@hawtio/react": "^1.12",
-    "@monaco-editor/react": "^4",
     "@patternfly/react-charts": "^7",
     "@patternfly/react-code-editor": "^5",
     "@patternfly/react-core": "^5",
@@ -68,7 +65,6 @@
     "@patternfly/react-table": "^5",
     "@patternfly/react-tokens": "^5",
     "@patternfly/react-topology": "^5",
-    "monaco-editor": "^0.52",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18",
     "react-router-dom": "^6.30",

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/messages/SendMessage.tsx

@@ -35,21 +35,17 @@ import {
   Checkbox,
   Tooltip,
   Popover,
-  TextContent
+  TextContent,
+  TextArea
 } from '@patternfly/react-core'
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'
 import { TrashIcon } from '@patternfly/react-icons/dist/esm/icons/trash-icon'
-import { CodeEditor, Language } from '@patternfly/react-code-editor'
+import { Language } from '@patternfly/react-code-editor'
 import { eventService, jolokiaService } from '@hawtio/react'
 import { artemisService } from '../artemis-service'
 import { Message } from './MessageView'
 
-import * as monacoEditor from 'monaco-editor'
-import { loader } from '@monaco-editor/react'
-
-loader.config({ monaco: monacoEditor })
-
 type SendBodyMessageProps = {
   onBodyChange: (body: string) => void
   body?: string
@@ -67,24 +63,16 @@ const MessageBody: React.FunctionComponent<SendBodyMessageProps> = props => {
   const [messageBody, setMessageBody] = useState<string>(props.body?props.body:'')
   const [selectedFormat, setSelectedFormat] = useState<Language>(Language.xml)
   const [isDropdownOpen, setDropdownOpen] = useState(false)
-  const editorRef = useRef<monacoEditor.editor.IStandaloneCodeEditor | null>(null)
-
-  const editorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor) => {
-    editorRef.current = editor
-  }
 
   const handleAutoFormat = () => {
-    if (editorRef.current) {
-      const model = editorRef.current.getModel()
-      if (model) {
-        if (selectedFormat === Language.xml) {
-          //monaco doesn't have built in xml formatter
-          updateMessageBody(xmlFormat(messageBody))
-        } else {
-          const range = model.getFullModelRange()
-          editorRef.current.trigger('', 'editor.action.formatDocument', { range })
-        }
-      }
+    try {
+      if (selectedFormat === Language.xml) {
+        updateMessageBody(xmlFormat(messageBody))
+      } else if (selectedFormat === Language.json) {
+        updateMessageBody(JSON.stringify(JSON.parse(messageBody), null, 2))
+       }
+    } catch {
+      // ignore formatting errors
     }
   }
 
@@ -104,13 +92,11 @@ const MessageBody: React.FunctionComponent<SendBodyMessageProps> = props => {
   return (
     <>
       <FormGroup label='Message'>
-        <CodeEditor
-          code={messageBody}
-          onEditorDidMount={editorDidMount}
-          language={selectedFormat}
-          height={'300px'}
-          onChange={updateMessageBody}
-        />
+        <TextArea
+          value={messageBody}
+          onChange={(_event, value) => updateMessageBody(value)}
+          rows={12}
+         />
       </FormGroup>
       <FormGroup>
         <Flex>