How can I update the rendered HTML for a node, I don't care about export

[ptrthomas]

this is what I tried:

    var id = '1';
    var node = editor.drawflow.drawflow.Home.data[id];
    node.html = '<div>HELLO WORLD</div>';
    editor.updateNodeDataFromId(id, {});

I was hoping to update the HTML visible, but it doesn't work. This is read-only HTML and no input or textarea is involved, so df-name won't work. I know how to update the data, but here I want the HTML to "update".

my use case is there is a separate edit popup, and after closing that, I want the respective node to "redraw".

is there a way to get the HTML DOM reference of a node ? I can then set the innerHTML directly

any suggestions would be appreciated !

[SamuraiDante]

If I understand you correctly then this would be one way I think: var t = document.querySelector(".drawflow-node[id='node-1'] .drawflow_content_node");

[jerosoler]

That you comment @SamuraiDante is correct.

[ptrthomas]

@SamuraiDante thank you, that helps !

in case this helps anyone else, I found that editor.import(editor.export()) will also do what I wanted, which is to "apply" any changes made to the node html property.

let me know if that is an ok approach @jerosoler - and thank you very much for this awesome library !

[shubhambattoo]

@jerosoler I tried the following code to update the html inside the node, but when I try editor.export() I am getting the old HTML only, as I am using this with React so assuming library is ignoring this change? Or is this expected?

const el = document.querySelector(
  `.drawflow-node[id='node-1'] .drawflow_content_node`
);
el.innerHTML = `<div id="my-id" class="box"> New Inner Text </div>`;

[jerosoler]

Hello @shubhambattoo

You have to update the json as well.

editor.drawflow.drawflow.Home.data[5].html = "...."

View: https://github.com/jerosoler/Drawflow/issues/40

[shubhambattoo]

@jerosoler Yeah that worked. Thanks.