How to inject custom UI & logic inside canvas:dragdata callback function

[protozoo]

Hi there!

I'm writing an app where users can drag custom components onto the canvas (not using the blocks manager, the components are dragged from elsewhere). I followed the advice by @artf read here: #2595

And it works great, the component is added to the canvas as expected.

However I want to apply some logic before actually adding the component to the canvas: when the user drops it at the desired location, I want to show a dialog offering to choose among a list of different components (variations of the initially dragged one). When the user selects an option in this dialog, then I'll finally add the chosen component to the canvas.

What's the best approach for this?

I've (roughly) succeeded at this by calling the browser's native "prompt()" function inside the "canvas:dragdata" callback function. Calling prompt() seems to effectively pause execution so I can change the value of result.content as needed. But I need a better UI for this dialog, so using prompt() is not an actual solution.

Based on this, I've also tried setting the callback function as async, but it does not work (the original "" element is added to the canvas before the user chooses an option in the dialog.

Here's the two code examples:

• Using prompt: https://jsfiddle.net/protozoo/9frjm6hc/55/
• Using async dialog: https://jsfiddle.net/protozoo/q3bedst5/8/

Many thanks!

[artf]

Hi @protozoo I'd suggest creating and dropping a placeholder kind of component, once the user decides and confirm the type you can remove the placeholder and drop, at the same position, the proper one.

[protozoo]

Thanks for the swift response @artf ! Please can you point to an example on how to do that? All good with adding the placeholder but not sure how to properly select it (if I add a "component:add" event it will trigger for all components, not only the placeholder one) and how to swap the placeholder for the final component?

Regarding the first question on how to select the just-added placeholder, I'm trying this:

editor.on('component:add', onComponentAdded);
function onComponentAdded(info){
    console.log( 'onComponentAdded', info.attributes.tagName );
    editor.select(info);
}

But of course this catches adding any component, not just the placeholder.
I guess I can add some logic there to discard non-placeholders.

However not sure how to properly remove it and add another one (the final component when the user choosses it in the dialog) in the same location.

Thanks again!

[protozoo]

Oh sorry, I just found the component.replaceWith() method which seems to be what I need for the second question. Thanks!

[artf]

On component add event you can simply check the component type (eg. component.is('plh-cmp')) or instead of the event, you can also select it right in the init method of the component's model.

[protozoo]

Worked like a charm, thanks @artf !