From 41fd96784ae108177fdd5c4bdd8fc3090b3e9e1f Mon Sep 17 00:00:00 2001 From: gchuf Date: Thu, 7 May 2026 14:15:58 +0200 Subject: [PATCH 1/4] ARTEMIS-6000 - Remove monaco editor dependency --- .../artemis-extension/app/package.json | 3 -- .../artemis-extension/app/webpack.config.cjs | 20 +------- .../artemis-console-plugin/package.json | 4 -- .../src/messages/SendMessage.tsx | 46 +++++++------------ 4 files changed, 17 insertions(+), 56 deletions(-) diff --git a/artemis-console-extension/artemis-extension/app/package.json b/artemis-console-extension/artemis-extension/app/package.json index b29103be..c8d0da19 100644 --- a/artemis-console-extension/artemis-extension/app/package.json +++ b/artemis-console-extension/artemis-extension/app/package.json @@ -12,7 +12,6 @@ }, "dependencies": { "@hawtio/react": "1.12.5", - "@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", diff --git a/artemis-console-extension/artemis-extension/app/webpack.config.cjs b/artemis-console-extension/artemis-extension/app/webpack.config.cjs index 3ceba7ef..afd26736 100644 --- a/artemis-console-extension/artemis-extension/app/webpack.config.cjs +++ b/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', diff --git a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/package.json b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/package.json index 93e722e8..9a9a06cb 100644 --- a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/package.json +++ b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/package.json @@ -26,7 +26,6 @@ }, "devDependencies": { "@hawtio/react": "1.12.5", - "@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", diff --git a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/messages/SendMessage.tsx b/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/messages/SendMessage.tsx index d72b715b..14281308 100644 --- a/artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/messages/SendMessage.tsx +++ b/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 = props => { const [messageBody, setMessageBody] = useState(props.body?props.body:'') const [selectedFormat, setSelectedFormat] = useState(Language.xml) const [isDropdownOpen, setDropdownOpen] = useState(false) - const editorRef = useRef(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 = props => { return ( <> - +