What is the best way just add some css class attribute to specific node?

1

I have some node next below.

<span class="active">
text
</span>

I just want to remove that class. and its event has triggered from outside of Editor.

I tried The best simple way of js style code with jQuery.

$(‘.active’).removeClass(‘active’)

I already know about The PM has immutable rule of like that. every changes must handle by next steps like ‘state’, ‘apply’, ‘transaction’, ‘dispatch’.

but is there no exception on that? I just want switch to some attribute on node.

If I edit eidtor’s dom directly by something like jQuery. Can I turn off that immutable state for a while? (Forcely re-render)

I don’t need appropriate function by history plugin on that case. just only need styling for the user.

Should I build some decoration plugin on that ?

I just have curious…little. and need confirming by other people.

any advice would be thanksful.

sorry for my poor english.

2

If your schema has some node type that encodes spans with and without the active class, with the appropriate parseDOM rules, you should be able to just mutate the span like that and have the editor pick up the change via its DOM observer.

(If, on the other hand, you’re thinking of your document as HTML, and want to be able to just do HTML things with it and have ProseMirror pick them up without having them in the schema, you’re going to have a bad time.)

3

Thanks for your reply.

I am confused your above mentioned “like that”.

You mean that If it is defined on schema and had appropriate parseDOM rule. then Is it possible mutated by HTML directly on them?

I tested on P tag.

Here is my P tag schema. then I edited html document by js style directly.

const buptleParagraphSpec = {
    attrs : {
        align:{default:'left'},
        style:{default:''},
        class:{default:'buptle_editor_default_p_class'}
        },
    content: "inline*",
    group: "block",
      toDOM(node){
            return ['p',
                {
                    align:node.attrs.align,
                    style:node.attrs.style,
                    class:node.attrs.class
                },
                0]
        },
        parseDOM: [{
            tag: "p",
            getAttrs(dom){
                // console.log(dom);
                 return {
                     align:dom.align,
                     style:dom.getAttribute('style'),
                     class:dom.getAttribute("class"),
                 }
            }
        }]
};

And here is test video capture.

.

test_p_tag

It didn’t work. Did I miss something? or Should I mutate their attributes by accessing PM’s node?

thanks.

4

Is it possible that the default attribute value for class is kicking in when you remove the DOM attribute?

If I go to the demo on the website, create an image, and change the src or alt attributes of the DOM node, I see those changes show up in the ProseMirror document as expected.

5

Yes. It does. The default value in class attribute is kicked in soon as possible after I delete from DOM attribute by F12 mode on Chrome or from javascript. It looks like that The editor don’t allow any changes except the text-node.

And. I checked about demos on prosemirror.net too. Then I confirmed the attribute on image tag can be removed by above ways. But this is same to my editor. The attribute’s value on IMG tag can be removed. But P and Span tag doesn’t.

I don’t know the schema spec of P tag from demo site. so i don’t know also that attribute on P tag can be edited normally or not.

I can edit P, Span tag’s attribute by only this codes.

_pmView.state.tr.setNodeMarkup(pos, node.type, {class:‘other_test_class’})

I hope find appropriate concept of handling PM.

6

What I’m saying is that if you remove the attribute, your getAttrs method will provide it as null, and creating a node with that attribute set to null, because you specified a default, will cause its value to be the default value. As in, everything is working as expected.

7

Oh… sorry. I had misunderstanding what you’re talking about.

But the editing or removing attrs on Html directly is enable on IMG tag. But the P and Span tag still doesn’t. All of them has defined in schema with attrs, toDOM and parseDOM.

(Maybe I need to more study about PM. Then I will look into about this deeply again.)