Carlos Villegas wrote:
I'm trying to use several instances of the xxeclient in the same page and I'm seeing
"cross talk" between the instances, well, what I mean, some CSS styles in the
first instance change while I open the second instance, and then go back to what it was,
when I delete the second instance.
What I'm trying to do is to have my main editor in the page and open a second instance in an popup dialog box, which is a component I'm using from a 3rd party library, which I think just renders the dialog box over the page using a different zindex. In this second instance I open a different document that uses the same doctype and stylesheet, same XXE configuration, but in read only mode. The purpose is to select an element from this other document as an aid to create a link. The popup doesn't cover the whole page so I can see part of the main editor.
When I do this I see some styles in the main document change, for example, some title elements in my custom schema lose their bold style and larger font size. When I close my popup window, which deletes the second xxeclient instance, things go back to normal. I probably can live with this, but it's a bit confusing for the user, and I don't know if other internal things were also affected and mixed up between the instances.
I tried to put my second instance in a shadowRoot to isolate the styles, but I had several problems, xxeclient's documentView running in the shadowRoot gives errors and it doesn't find node views. I traced some of the issues, for example, _domTree iin DocumentView s initialized to be the global DOM document object which is disconnected from the xxeclient DOM tree when running in the shadowRoot. I did some changes to the xxeclient just to test if it would work, and I got it partially working, enough to see that even in the shadowRoot, my original problem still persists, it still affects styles in the other instance. Probably some styles are applied programmatically globally and requires more effort to completely isolate the styles in the instances. I'm also wrapping the xxeclient in a React component and creating 2 instances of this React component. I don't know if that is also part of the problem, but that just creates two instances of the xxeclient DOM element and the XMLEditor
object.
Any suggestions to have 2 completely separate xxeclient instances in the same page?
Well it's currently not possible to have more than <xxe-client> instance
in the same HTML page.
It works as follows:
1) When added to the page, <xxe-client> adds a <style> element to
<html><head>. The content of this <style> element is specific to
<xxe-client>.
2) When you open an XML document, a number of ".xxe-sNNN" CSS rules are
added to this <style> element.
3) When you edit the opened XML document, more ".xxe-sNNN" CSS rules may
be added to this <style> element.
4) When you close the XML document, this <style> element is made empty.
The issue you describe is caused by the fact that the CSS rules added by
different instances of <xxe-client> all have the same ".xxe-sNNN"
selectors. The problem could be solved by using ".xe1-sNNN" selectors
for first instance, .xe2-sNNN" selectors for second instance and so on.
--> Why not use a shadow DOM for <xxe-client> on order to prevent the
".xxe-sNNN" CSS rules from "bleeding" to the rest of the HTML page,
including the other <xxe-client> instance?
The answer is that we did this at the early stages of XXEW development
but we abandoned this more elegant approach that because it caused other
problems (Shadow DOM and selection API problems; may be solved now).
Another idea is to use an iframe to put the second instance, but iframes are
also tricky especially in terms of security, sometimes they get restricted by
the browser. But I'll give it a try next.
--
XMLmind XML Editor Support List
[email protected]
http://www.xmlmind.com/mailman/listinfo/xmleditor-support
