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

[tom-sherman]

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]

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!

[tom-sherman]

@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.

[pouyamiralayi]

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.

[tom-sherman]

Thanks!