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

hi there! you can set draggable property of the target component this way:

this.set('draggable','slot, slot *')

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.

Hi there! if you mean injecting the component into the editor without user interactions, you can use:

editor.setComponents(your component definition)

more on this here

allow 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:

editor.getWrapper().findType('your read-only type')[0].set('droppable',true)

more on this here cheers!

@pouyamiralayi Thanks! I've implemented a Slot component and overriding the attributes inside of the init method

const Slot = () => ({
  model: {
    defaults: {
      resizable: false,
      content: '<div style="min-height: 75px" class="teditor-wrapper"></div>'
    },
    init() {
      // Override the flags in case the slot is loaded inside of a readonly component
      this.set('droppable', true)
      this.set('hoverable', true)
      this.set('editable', true)
      this.set('removable', true)
      this.set('badgeable', true)
      this.set('stylable', true)
      this.set('highlightable', true)
      this.set('copyable', true)
      this.set('selectable', true)
    }
  },
  isComponent: el =>
    el.tagName === 'DIV' && el.classList.contains('teditor-wrapper')
})

Slot.id = 'slot'

export default Slot

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?

- Body
	- Readonly
		- Slot
			- Text
			- Image

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.