blocklyWidgetDiv / blocklyTooltipDiv not recreated in single page app

[Eddy Fras]

Hi all,

I'm using Vue.JS with Blockly.

I just managed to switch to fullscreen editing using the Blockly.setParentContainer() method but it seems that is has a side effect on blocklyWidgetDiv & blocklyTooltipDiv divs that are deleted when we navigate to another page and not recreated when we go back to the page with Blockly.

Contrary to what Neil Fraser said in https://groups.google.com/g/blockly/c/U3POUu0t500/m/Vr6FY5PnBQAJ , the 2 divs are not abandoned on my page but removed so I can't edit input fields anymore.

Any idea of what should be done to get these divs recreated ?

Thanks

Eddy

[Eddy Fras]

I answer to myself if someone get the same issue, I finally figured it out.

For these 3 divs (I forgot blocklyDropDownDiv in my previous post) to be recreated after changing route in a single page app, I had to delete the DIV properties of each element (DIV_ for DropDownDiv, which is not documented) before leaving the page (in a beforeDestroy() method for example when using Vue.js) :

...

Blockly.getMainWorkspace().dispose();

Blockly.WidgetDiv.DIV = null;

Blockly.Tooltip.DIV = null;

Blockly.DropDownDiv.DIV_ = null;

...

Next time a Blockly.inject() is called, the 3 divs are recreated inside the blocklyArea defined with Blockly.setParentContainer(), mandatory to switch to fullscreen editing.

Hope this helps,

Eddy