How to integrate code editor in Material UI?

Question

I have tried every possible popular code editor from npm but all of them refuse to display monospace fonts. I have tried ThemeProvider and inline style but it doesn't work. It displays phantom monospace fonts and actual font displayed is the default one. Apart from the code editor, monospace works in the Typography component. Apart from the font, all code editors work fine. Please help.

Answer 1

Shadow Root

With shadow root you can isolate from root css design. For documentation, see https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

window.customElements.define('codemirror', class extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({ mode: 'open' });
        // !! Shadow Root inside css rules you can change this
        shadowRoot.innerHTML = `
            <style>
               @import url(https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css)
            </style>` 
        // !! on ready you can change yourself CodeMirror constructor
        this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});        
    }
    
});

HTML

Use custom element <codemirror id="test"></codemirror> ;

JS

get CodeMirror object from element .cm

var code = document.getElementById("test");
code.cm.setValue("var i = 0;");