How to change prosemirror-view renderer

1

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

regards

1 Like
2

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.

3

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.

thanks

4

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.

1 Like
5

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

6

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
          });
          comp.$mount();
          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

7

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