How to change prosemirror-view renderer

Hi there, I am currently implementing prosemirror in a VueJS project, I wanted to be able to pass Vue Components in my toDOM() nodes & marks, I have already searched a little bit in prosemirror-view package but I was not able to find where everything is getting rendered right now, can someone please point me to the right direction


1 Like

You can only change the rendering within the bounds of what node views can do. The rendering code is in prosemirror-view/src/viewdesc.js.

not what I was expecting, looked more into viewdesc.js and it seems its using DOMSerializer to actually render, and DOMSerializer uses doc.createElement / doc.createTextNode to actually create dom elements, my assumption is the doc object used in renderSpec function is js document object, so by reimplementing DOMSerializer function renderSpec I should be able to use Vue Components, is this all I need? can you please describe more about how I can remove current DOM and use a Virtual DOM like Vues.


No, that won’t work, and it rather sounds like you’re trying to do something that just isn’t realistic. This library has a lot closer relation to the DOM than just rendering stuff, so it isn’t going to work to just swap out some method to make it do Vue.

You may want to take a look at how Tip Tap integrates ProseMirror and Vue

Hi, thanks for the replies, I managed to dig more into it and have some experiments as for the TipTap, I already tried it and I really dont see any point in using it when its not providing what I originally asked. my intuition was since Vue can compile its virtual dom to actual dom, overriding the renderSpec function should be enough to use a layer of Vue between us and dom and thus us the Vue renderer, I changed this part of renderSpec code:

if (xmlNS) {
        dom = doc.createElementNS(xmlNS, tagName);
      } else {
        if (self.editorComponents[tagName]) {
          console.log("vue: ", tagName);
          const comClass = Vue.extend(self.editorComponents[tagName]);
          const comp = new comClass({
            propsData: structure[1].props
          dom = comp.$el;
          dom.editorComponentRef = comp;
          vue = true;
        } else {
          console.log("dom: ", tagName);
          dom = doc.createElement(tagName);
//... and stop writing attributes on Vue generated components ...

self is a reference to a Vue component with list of all prosemirror components that need to use Vue for the renderer (self.editorComponents), but I am not impacted with side effects yet, I am improving on this,

in the mean time another way to use the whole system is to make prosemirror render mostly 'div’s and put ids on them, then use a callback function to act on those 'div’s and mount a Vue component on them. but so far I prefer the first method. I want to do some more experiments and see if I can actually use Vue slots and render the schema content inside the templates slots. I will be very interested in any suggestions to achieve this.

My goal is to make a Vuetify based page builder with prosemirror

and thank you for your beautiful software

I am also interested in this direction. Would like to know any news on this?