Initialize nested extensions and pass attrs to them

1

Hi guys,

i’m a little bit stuck. i want to create an extension with some nested extension inside of it. additionally i want to pass an attr to the “parent”-extension and it should pass that attribute to the children.

my parent-code looks like this:

export default class myParent extends Node {
      get name () {
        return 'my_parent'
      }

      get schema () {
        return {
          attrs: {
            parentId: {
              default: undefined
            }
          },
      group: 'block',
      content: 'child_one child_two,
      parseDOM: [{
        tag: '[data-type="parent"]',
        getAttrs: dom => ({
          dataId: dom.getAttribute('parent-id')
        })
      }],
      toDOM: node => {
        const {parentId} = node.attrs
        return ['div', {'class': 'parent_class', 'data-type': 'parent', 'parent-id': parentId}, 0]
      }
    }
  }

  command ({type, attrs}) {
    return chainCommands(exitCode, (state, dispatch) => {
      const child1 = state.schema.nodes.child_one.create(attrs)
      const child2 = state.schema.nodes.child_two.create(attrs)
      dispatch(state.tr.replaceSelectionWith(type.create(attrs, [child1, child2])))
    })
  }
}

code of child_one and child_two looks pretty similar to each other:

export default class ChildTwo extends Node {
  get name () {
    return 'child_two'
  }

      get schema () {
        return {
          attrs: {
            parentId: {
              default: undefined
            }
          },
          content: 'paragraph+',
          group: 'paragraph',
          parseDOM: [{
            tag: '[class="child-two"]'
          }],
          toDOM: (node) => {
            return ['div', {class: 'child_class', 'contenteditable': true}, 0]
          }
        }
      }
    }

does anybody has an idea why this won’t work? it does show up, but i cant go into the child-tags and edit their content? my cursor jumps out immediately :-/

any help would be helpful :slight_smile:

2

Why are you putting contenteditable: true in the DOM for the children? That might be related.

3

oh thank you for your fast reply!

i added it, because the content of the children should be editable if the user wants change it. Isn’t the contenteditable-attribute needed then?

i just removed it and still the same error occurs(cursor behaves crazy. jumps out as soon as i click inside).

4

Being editable is inherited in the DOM, so you don’t need to re-set it for every wrapper node.

Your command looks like it’s going to create invalid nodes—child_one.create(attrs) will create a child_one node without children. You may want .createAndFill(attrs) instead.

5

wow that helped me.one step further to get into prosemirror! thank you so much for your fast reaction!

1 Like