[QUESTION] How to load children of a readonly component?

Question

I'm trying to mount a readonly component (draggable, droppable etc all set to false) and allow the user to edit child components inside.

For example if I have the following content

<div class="wrapper">
  <header>A header</header>

  <div>
    EDIT ME
  </div>

  <footer>A footer</footer>
</div>

I want to load all of this content inside of the component, and allow the user to drag new blocks where it would say "EDIT ME"

pouyamiralayi · Accepted Answer

hi there! you can set draggable property of the target component this way: this way, it will only be draggable inside the Slot. the same can be done for readonly type. if you need further help for your specific case, i would appreciate a fiddle. cheers.

pouyamiralayi · Answer

Hi there! if you mean injecting the component into the editor without user interactions, you can use: more on this hereallow the user to drag new blocks where it would say "EDIT ME" if you mean making the readonly component editable again, it is achievable this way: more on this here cheers!

tom-sherman · Answer

@pouyamiralayi Thanks! I've implemented a Slot component and overriding the attributes inside of the init method The issue I'm having now is that the use is able to drag an item above the readonly header for example. Is there a way to prevent this behaviour? I want to prevent items being dropped between Body and Readonly. I thought I could maybe override the default component with droppable=false, preventing things to be dropped onto the body, but I'm not sure how to do this.

How to load children of a readonly component?

Question

Answers (3)

Related Questions and Answers

[QUESTION] Custom component default children

Component with pointer-events: 'all' (except wrapper) or editable component are draggable & droppable to itself.

Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin

[Question] Define components in template

Paid Plugins That Match This Issue

Browse Plugin Categories