How to render the “result” view in CodeMirror?

Question

I have created a component in react which allows to edit two states: codeHtml and codeCss in two CodeMirror editor views:

import React from "react";
import CodeMirror from "react-codemirror";
require('codemirror/mode/htmlembedded/htmlembedded');
require('codemirror/mode/css/css');

export default class HtmlComponent extends React.Component {
  constructor(props) {
    super();
    this.state = {
        codeHtml:'<div class="comeClass">some test div text</div>',
        codeCss:'.someClass{color:"red"}',
    }

  }

    updateHtmlCode(newCode) {
        this.setState({
            codeHtml: newCode,
        });
    }
    updateCssCode(newCode) {
        this.setState({
            codeCss: newCode,
        });
    }
    render() {
        console.log(this.state);

        return(
            <div>
            HTML editor:
            <CodeMirror value={this.state.codeHtml} onChange={this.updateHtmlCode.bind(this)} options={{mode:"htmlembedded",lineNumbers: true}} />
            CSS editor:
            <CodeMirror value={this.state.codeCss} onChange={this.updateCssCode.bind(this)} options={{mode:"css",lineNumbers: true}} />
            </div>
        ) 
    }

}

I need to render the resulting DOM as third view but I don´t find anything in the documentation: https://codemirror.net/doc/manual.html

The point of using CodeMirror was to avoid having to deal with the logic of expanding the whole websites CSS file....

Is the a CodeMirror way to do it?

AN easy way of rendering the resulting html code is:

   render() {
    console.log(this.state);
    const hCode = this.state.codeHtml;
    const cCode = this.state.codeCss;

    return(
        <div>
        HTML editor:
        <CodeMirror value={this.state.codeHtml} onChange={this.updateHtmlCode.bind(this)} options={{mode:"htmlembedded",lineNumbers: true}} />
        CSS editor:
        <CodeMirror value={this.state.codeCss} onChange={this.updateCssCode.bind(this)} options={{mode:"css",lineNumbers: true}} />
        <div dangerouslySetInnerHTML={{__html:hCode}}></div>
        </div>
    ) 
}

But is there an easy way to apply the css to the resulting html?

Answer 1

Solution is to add the html code to an iframe and then use js or jquery to attach & update the style tag in the iframe 's header:

updateStyleTagOnView(cCode){
    const head = jQuery("#iframe").contents().find("head");
    const css = '<style type="text/css">' + cCode + '</style>';
    jQuery(head[0]).empty().append(css);    
}

render() {

    const hCode = this.state.codeHtml;
    const cCode = this.state.codeCss;
    const mCode = this.state.mixedCode;

    this.updateStyleTagOnView(cCode)

    return(
        <div>
        HTML editor:
        <CodeMirror value={this.state.codeHtml} onChange={this.updateHtmlCode.bind(this)} options={{mode:"htmlembedded",lineNumbers: true}} />
        CSS editor:
        <CodeMirror value={this.state.codeCss} onChange={this.updateCssCode.bind(this)} options={{mode:"css",lineNumbers: true}} />
        CSS editor:
        <CodeMirror value={this.state.mixedCode} onChange={this.updateMixedCode.bind(this)} options={{mode:"css",lineNumbers: true}} />

        <iframe id="iframe" srcDoc={hCode}>
          <p>Your browser does not support iframes.</p>
        </iframe>
        </div>
    ) 
}