Extend example in doc

Hi there. Great job already! Thank you guys.

Would really love to see an example of how to pass a prop to a custom extension. for example i copied your TodoItem-extension and tried to pass an object in like this:

<ul data-type="todo_list">
    <li 
        :custom-prop="customProp"
        data-type="todo_item" 
        data-done="true">
         Buy beer
    </li>
</ul>

and then tried to use this custom-prop inside of the template logic of TodoItem, but it wasn’t available there. is there a way to achive something like this? an example-code for this in the doc would help not only me, but also other.

[philippkuehn]

Ah, I think I know what you have tried to do. You wanted to pass custom props like this right?

<editor>
    <div slot="content" slot-scope="props">
      <ul data-type="todo_list">
        <li 
          :custom-prop="customProp"
          data-type="todo_item" 
          data-done="true">
            Buy beer
        </li>
      </ul>
    </div>
</editor>

You’ll have to add custom-prop to your schema correctly. Based on the todo_item extension this will look something like this:

get schema() {
  return {
    attrs: {
      done: {
        default: false,
      },
      customProp: {
        default: null,
      },
    },
    draggable: false,
    content: 'paragraph',
    toDOM(node) {
      const { done, customProp } = node.attrs

      return ['li', {
          'data-type': 'todo_item',
          'data-done': done.toString(),
          'custom-prop': customProp.toString(),
        },
        ['span', { class: 'todo-checkbox', contenteditable: 'false' }],
        ['div', { class: 'todo-content' }, 0],
      ]
    },
    parseDOM: [{
      priority: 51,
      tag: '[data-type="todo_item"]',
      getAttrs: dom => ({
        done: dom.getAttribute('data-done') === 'true',
        customProp: dom.getAttribute('custom-prop'),
      }),
    }],
  }
}

After that you will have access to customProp in your vue component:

get view() {
  return {
    props: ['node', 'updateAttrs', 'editable'],
    methods: {
      onChange() {
        this.updateAttrs({
          done: !this.node.attrs.done,
        })
      },
    },
    template: `
      <li data-type="todo_item" :data-done="node.attrs.done.toString()">
        <span class="todo-checkbox" contenteditable="false" @click="onChange"></span>
        <div class="todo-content" ref="content" :contenteditable="editable.toString()"></div>
        <div>
          {{ node.attrs.customProp }}
        </DIV>
      </li>
    `,
  }
}

Please note that customProp will not be reactive, because everything you pass to the editor will be parsed and rendered from Prosemirror. So any reactivity breaks here. If you need reactivity here, you’ll have to use some state management like Vuex.

[laurensiusadi]

@rameezcubet You can bind v-model to a computed with get() and set() like this

computed: {
  customValue: { 
    get() {
      return this.$store.getters.customValue
    },
    set(customValue){
      this.$store.commit('setCustomValue', customValue)
    }
  }
},