Async Node view rendering

1

I’m integrating ProseMirror into an Angularjs 1.x app. I have a custom element <file-viewer> that support attribute url (the content to display) and viewer (the type of the content)

On the Angular part, all is handled by angular itself I’m struggling on the prosemirror part to render this custom element.

The thing I’m currently experimenting is using a NodeView to render my element. The thing is it need to fetch data from the backend before rendering:

  1. parse
  2. fetch id aaa from db, return url and type
  3. put in the dom

Point 2. is where I’m lost.

I currently have a function returning a Promise<NodeView<any>>

image

But of course I think it’s not designed to work.

I’ve tried to follow the Image Upload async example but that doesn’t seems to fit here

What can I do for this use case (also, I’m no expert with prosemirror yet)

Thank you!

2

A nodeview that starts by returning an empty element and then fills it in asynchronously might work.

3

Yeah, that’s the part I’m struggling with. Where exactly should I update it ? Where should I start the async fetch ?

4

When instantiating the node view, I would assume. You’ll definitely want to keep a cache somewhere so that this doesn’t make tons of repetitive requests.

5

Ok, still can’t make it work. Here is my code, commented:

    {
        nodeViews: {
            kdocument: (node, view, getPos) => {
                const makeComponent = (url, mimetype) => {
                    // returns a dom element
                };

              	// empty at start
                let dom = makeComponent('', '');

                const selectNode = () => {
                    dom.classList.add('ProseMirror-selectednode');
                };

                const deselectNode = () => {
                    dom.classList.remove('ProseMirror-selectednode');
                };

                const {
                    kid
                } = node.attrs;

                asyncFetchHere(kid, this.API)
                    .then(({
                        infos,
                        url
                    }) => {
                  		// trying to update reference, but of course not working
                        dom = makeComponent(url, mime[infos.mimetype]);
                        return true;
                    })
                    .catch(error => {
                        console.error('e', error);
                    });

                return {
                    dom,
                    selectNode,
                    deselectNode,
                };
            },
        },
    }

Of course I’m missing something

Edit:

Tried

const component = makeComponent(url, mime[infos.mimetype]);
dom.replaceWith(component);

instead of

dom = makeComponent(url, mime[infos.mimetype]);

But it result in the element being removed from the DOM

6

Don’t try to replace the element, append to it.

7

Wow, it kinda worked!

Appending instead of replacing result in a new node inserted inside the previous one

image

image