Unable to append child into editor div

[ct1735x]

I want to insert a div, p or a in the editor with appendChild but it is not working. I can appendChild on any element but not in the editor div. (# prosemirror)

let fileLink = document.createElement('p');
fileLink.textContent = "hello !";
document.getElementById('ProseMirrorId').appendChild(fileLink);

Nothing happens.

last code line works in browser console without appendChild, which means the selector is ok.

I'm in the wysiwyg view

editor.insertText works, I wonder if you could add another function like editor.insertElement or insertNode

[z-950]

I think #1621 can help you, though it is hack.

[ct1735x]

How do I use this ? Do I have to write all of this everytime I want to insert an element ? Or I can use it like a function

[z-950]

This function can help you to create element. And then insert it.

Just like this:

editor.insertHtml = (type, attrs, content) => {
    const wwSelection = editor.getSelection();
    const node = createNode(type, attrs, content);
    const newDoc = editor.wwEditor.schema.nodes.doc.create(null, node);

    const { tr } = editor.wwEditor.view.state;

    editor.wwEditor.view.dispatch(tr.replaceWith(wwSelection[0], wwSelection[1], newDoc));
};

[ct1735x]

Thanks! But I'm using CDN, no imports. WWE is unknown

[z-950]

Thanks! But I'm using CDN, no imports. WWE is unknown

editor.wwEditor is wwe

[ct1735x]

I figured out how to do it, thanks for your help

[js87zz]

@z-950 @2klm
As you said, there is no API to insert html nodes .
It's not as good to have direct access to the internal editor code as you do now.
So we'll provide API or command later.

[ct1735x]

@z-950 @js87zz do you know how do I use this to create a 'a href ' element ? There is no 'link' object in the nodes list
I tried this : editor.insertHtml('link', null, createText('test'));
but 'link' doesnt exist. Availabe objects are :
{ doc: {…}, paragraph: {…}, text: {…}, heading: {…}, codeBlock: {…}, bulletList: {…}, orderedList: {…}, listItem: {…}, blockQuote: {…}, table: {…}, … } and a few more but no link

however, I can see in the editor config : node = createNode('link', this.sourcepos(startpos, this.pos));
which makes me think it is possible to create a link node.

I can't wait for an API or a command to be released since I'm working on a project for a customer and I have a short schedule

[ct1735x]

I tried to add this in custom html renderers :

htmlBlock: {
        a(node) {
            return [
                { type: 'openTag', tagName: 'a', outerNewLine: true, attributes: node.attrs },
                { type: 'html', content: linkText },
                { type: 'closeTag', tagName: 'a', outerNewLine: true },
            ];
        },
    }

which works, but node.attrs doesnt so I cant add the " href='..' " part

Does it work like so ? editor.insertHtml('a', {linkUrl: 'https://google.com'} );

[z-950]

@2klm
link or <a> is htmlInline, should use editor.wwEditor.schema.marks.doc.create(...), accorading to this

[js87zz]

@2klm
I don't think it's necessary to complicate that much if it's simply inserting a link node.
It doesn't seem to need a custom renderer either.
You can insert the link node through executing the command as below.

const attrs = {
  linkUrl: // ...
  linkText: // ...
};
editor.exec('addLink', attrs);

[ct1735x]

@2klm
I don't think it's necessary to complicate that much if it's simply inserting a link node.
It doesn't seem to need a custom renderer either.
You can insert the link node through executing the command as below.

const attrs = {
  linkUrl: // ...
  linkText: // ...
};
editor.exec('addLink', attrs);

Thanks! I didnt know about that command stuff. Is there a doc about commands ?