Codemirror CSS not added when codemirror is used under different shadow-DOMs

v6
1

Hi Marijin,
I have integrated codemirror into prosemirror. For CSS collisions in various products, we have implemented our prosemirror editor inside shadow-DOMs. There may be cases where we might use multiple editors within the same page under different shadow-DOMs.

So when doing so found that codemirror’s CSS is getting injected into one shadow dom only for the first time in the page, when another codemirror instance is created in another shadow-DOM, the expectation is to inject the CSS again into that shadow-DOM as well, but in the below attached video you can see that the CSS is not getting applied into the second shadow-DOM.

All the classes are getting attached properly to both codemirror instances, but the CSS alone is not getting applied into the second shadow-DOM, on debugging further found that in style-mod package in this line, seems like the doc variable is assigned the wrong value. Probably it should have been like let doc = root || root.ownerDocument , this is because of the reason that root.ownerDocument always points to the top level document irrespective of, in which shadow root the codemirror instance is present. As a result, for the first time adoptedSet Map has no value so codemirror’s styles are getting injected, but from the second time since root.ownerDocument points to the top level document, irrespective of which shadow root you pass, always adoptedSet Map says the CSS is injected into that particular doc key, as a result the CSS is not getting injected into the second shadow-root.

If that is the issue, can I submit a PR with the patch for it @marijn ?

You can find the video here

2

When I try to reproduce this (here), I see two styled editors. Am I doing something wrong?

3

Could you put both editors in 2 different shadow-DOMs and try? I hope the left hand side editor is in the body.

If one editor is in the body and if other editor is in shadow-root it works perfectly fine for me too!

4

You can see the code that creates these editors on the left side. They are in different shadow DOMs.

5

Oh I didn’t see that!

On debugging further found that style-mod package version 4.1.1 seems to have caused the problem, the issue was not reproduced for you because you were using style-mod version 4.1.2

In version 4.1.1 this this.root = root was storing the value of the root, so adoptedSet.set(doc, this) stored the root value also in adoptedSet Map, so from the next time onwards if we do adoptedSet.get(doc), the root will also be returned along with it, as a result this will have the set variable be set with improper root value, so set.root will be pointing to the previous root, so this is the one that modified the current root value. This is the reason why the CSS wasn’t working for me.

I made the change of using style-mod version 4.1.2 instead of 4.1.1, which seems to have solved the issue.

Thanks for the quick response @marijn :slight_smile: