`react-code-editor` uses cdn to load `monaco-editor` by default which is not allowed in RHDH

[karthikjeeyar]

Problem:

In RHDH, opening file preview modal throws a Content security policy error to include https://cdn.jsdelivr.net in csp rules, which is problematic as overriding csp rules unfortunately breaks other areas of the backstage application and forces us to include unsafe-eval values which is not safe as per security standards.

As a workaround, we had to add the following config:

csp:
   script-src:
     - "'self'"
     - "'unsafe-eval'" # this is required for scaffolder usage, and ajv validation.
     - https://cdn.jsdelivr.net # this is required for react-code-editor.

Our goal is to remove the script-src rules entirely, and If we remove the script-src rules, then the scaffolder plugin works as expected but react-code-editor (monaco-editor in file preview modal) doesn't work.

Proposal:

PF chatbot to include the monaco-editor as npm package rather than loading it via default cdn way.

cc: @rebeccaalpert

[rebeccaalpert]

Found this in the docs for @patternfly/react-code-editor:

To use monaco-editor as an npm package and avoid using CDN
The @monaco-editor/react package is built on the monaco-editor package, which will fetch some additional files using CDN by default. To avoid this, include monaco-editor as a dependency and insert the following into your code:

import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';

loader.config({ monaco });
This may require the additonal webpack plugins such as monaco-editor-webpack-plugin. To properly install the library monaco-editor-webpack-plugin be sure to follow the plugin instructions

Let's give that a try first. We can't really drop the PF wrapper in favor of wrapping it ourselves, but this seems doable to me?