How to receive data from Javascript variable embedded in an iframe?(dev.:markdown editor tool)

Dash Python
1

I want to build up Markdown Editor in plotly dash. So I build up a small script to render a html template and provide it to the layout:

# Import required libraries
import dash
from jinja2 import FileSystemLoader, Environment
import dash_html_components as html

app = dash.Dash(
    __name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}]
)
server = app.server

file_loader = FileSystemLoader('/home/daniel/projects/forecast-system/meteoIntelligence-dashboard/apps/assets')
env = Environment(loader=file_loader)

markdown_editor = env.get_template('markdown_editor_base.html')
markdown_editor = markdown_editor.render()


app.layout = html.Div(
        [
            html.Div(id="input-clientside"),
            html.Div([
                html.Div(
                    [
                        html.Iframe(srcDoc=markdown_editor, id='markdown_editor', style={'border': 0, 'margin-bottom': -10, 'margin-top': -5},
                                    width="100%", height=400)

                    ],
                    className="pretty_container eight columns",
                    id='left-top-column',
                ),
                html.Div(
                    [
                        html.P(id='test-output')

                    ],
                    className="pretty_container four columns",
                    id='right-top-column',
                )
                ,

         ], className="row flex-display"),

        ], id="mainContainer", style={"display": "flex", "flex-direction": "column"})


@app.callback(
    dash.dependencies.Output('test-output', 'children'),
    [dash.dependencies.Input('markdown_editor', 'srcDoc')])
def update_forecast_data(markdown_data):
    return html.P(markdown_data)


if __name__ == "__main__":
    app.run_server(debug=True, host='0.0.0.0')

And here is the required html template:

<!DOCTYPE html>
        <html lang="en">
<body>
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<textarea></textarea>
<p id="p1"></p>
<script>
var easyMDE = new EasyMDE();
easyMDE.codemirror.on("change", function(){
document.getElementById("p1").innerHTML = easyMDE.value();

});
</script>
</body>
</html>

My issue is now to receive the data/value of easyMDE.value() whichis the markdown output. As you can see I tried to receive the data via a div or p box but the srcDoc does not change and the iframe javascript does not write any data to the p1 element.