Need more explanation regarding custom plugin

[neelay92]

How do I create custom extension, say for Heading?
In the doc it is mentioned to extend the Base Class, but what if I want to add a custom class to it?
Is it similar to tiptap, wherein the we need to define it in the schema/doc?

Also can you explain what menuBtnView (editorContext) {} expects and needs to return.

Thanks.
Great work on the plugin!

[Leecason]

I created this simple demo for you. you can check it

Create The Custom Bold Menu Button

In your custom extension class, add a menuBtnView function to return a object (in there i called Vue Component Spec) that contains three attribute:

{
  component:  // your vue component
  componentProps: {
    // props will pass to your vue component
  },
  componentEvents: {
    // handle events that your component emit
  },
}

menuBtnView function has just one param editorContext, its properties are same as https://github.com/scrumpy/tiptap#editormenubar, i just plus the tiptap editor instance to it.

Also you can overwrite such as schema, plugins and commands in your custom extension class like in tiptap. create-custom-extensions

If you want to render multiple buttons in one extension, just like you say the Heading extension.

your can return a Vue Component Spec array in the menuBtnView:

class Bold extends OriginalBold {
  menuBtnView () {
    return [
       {
          component: componentH1,
       },
       {
          component: componentH2,
       }
      ...
    ];
  }
}

i will make the docs more detailed.

I'm glad to reply if you have any other questions.

thanks for supporting this project.

[Leecason]

Do you still have any questions?

[neelay92]

Hey
Thanks for the reply. I managed to get it working by your help.

[shadrachtuck]

@Leecason Trying to render multiple buttons in the extension as per your last example works for rendering buttons but the logic within component events is not firing. Perhaps I have the syntax incorrect??

export default class Bold extends OriginalBold {
  // here you can extend the extension like tiptap, such as schema, plugins ...
  menuBtnView({ isActive, word, code }) {
    
    return [
        {
          component: RhymeButton,
        },
        {
          component: ThesaurusButton,
        },
        {
          component: DictionaryButton
        },
      {
      componentProps: {
        isActive: isActive.bold(),
        word: String,
        code: String
      },
      props: ["code"],
      componentEvents: {
        click: () => {
          let word = this.word;
          word = (document.all)
          ? document.selection.createRange().text.toString()
          : document.getSelection().toString().trim().toLowerCase();
          // document.getElementById('hidden').value = word;
          // document.onmouseup = getSelectionText;
          // if (!document.all) document.captureEvents(Event.MOUSEUP);
          this.word = word;
          store.commit("addWord", this.word)
        },
      },
    }
    
    ];

  }

}

[Leecason]

@shadrachtuck
Each component object contains its props and events

menuBtnView (editorContext) {
  return [
    {
      component: compA,
      componentProps: compAprops,
      componentEvents: compAevents, 
    },
    {
      component: compB,
      componentProps: compBprops,
      componentEvents: compBevents,
    },
    ...
  ],
}

[shadrachtuck]

@Leecason oh of course! brilliant, thank you!