Question. We can use df- to default values to input fields can we do the same with div or span?

[SensorPro]

Hi,

Is it possible to default a value into a span or a div as opposed to a field?

Thanks

[jerosoler]

Hi @SensorPro

It's possible with contenteditable elements.

View https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

Jero

[The-Ali-Reda]

Is there a way to do it without the contenteditable attribute? I would like my data to be readonly but it seems that setting contenteditable to false makes it not render my data.

[jerosoler]

Hi @The-Ali-Reda

If it is only to show there is this option.

editor.editor_mode = 'view'

if you can't use textarea or inputs disabled.

[The-Ali-Reda]

Hi @jerosoler , I meant that I wanted the data to be view only but the node itself editable. It seems that my current option is to do something like:

var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
var html = `
<div><p>df-name</p></div>
`;
var data = { "name": 'TestName' };
html = html.replace("df-name", data.name); //focus on this part
editor.addNode('github', 0, 1, 150, 300, 'github', {}, html);

I was wondering if there is a way to do it in the library by defining specific attributes instead of doing it manually as this can be tedious, inefficient (from a performance standpoint because replace would be called multiple times unless we use regexp), and error prone depending on the number of fields in the database.

[jerosoler]

Hi @The-Ali-Reda

The simplest option I can think of is, modify the contents from true to false.

    editor.on('nodeCreated', () => {
        var editable_elements = document.querySelectorAll("[contenteditable=true]");
        for(var i=0; i<editable_elements.length; i++) {
            editable_elements[i].setAttribute("contenteditable", false);
        }
    })

    editor.addNode('aaa', 0, 1, 100, 300, 'aaa', { name: 'test'}, `<div contenteditable="true" df-name>` );

[The-Ali-Reda]

Hi @jerosoler , That worked. Thank you! I was wondering is there any particular reason why the library requires contenteditable to be true during add time? (line 1249)

[jerosoler]

Yes with conteneditable require true for df- attributes synchronize.