Carlos Villegas wrote:
Based on your explanation, we managed to run the editor in a shadowRoot host.
This is what we did:
We created a wrapper element to the xxe-client to serve as a host for the
shadowRoot. More on this later.
We modified DocumentView to be able to set the domTree with the shadowRoot.
Fortunately, DocumentView already has a domTree property that is set to
document by default. DocumentView needs to be aware that it is running in a
shadowRoot as some Web APIs need to be adjusted accordingly.
Modern browsers now support the link element directly under the shadowRoot,
so static stylesheets can be added here.
For the dynamic stylesheets of the document views, we created a stylesheet object to
be "adopted" by the shadowRoot. Fortunately, we can use the same API to
dynamically change the CSS rules as required, so that part of DocumentView doesn't have
to be modified, only setup the stylesheet.
We changed calls to window.getSelection to shadowRoot.getSelection in
several places if DocumentView is running in a shadowRoot. I think NodeView and
MarkManager use this API.
I think that's about it. We modified the distributed xxeclient code that fortunately is only cleaned up a bit, not mangled completely.
This is done on purpose. We want to keep the JS code easy to read and
easy to understand.
I think a proper solution will probably use the xxe-client directly as the
host for the shadowRoot, but that requires a bit more work as sometimes some
objects are located using a DOM query from the xxe-client element and that
needs to be changed in several places to use the shadowRoot as context for the
queries.
Sure.
With these changes we were able to implement a multi-tab editor running in
a React single page application, and also use it as a generic element selection
dialog for selecting link targets in our schemas.
I must confess that I'm completely ignorant about React. However I do
understand the "multi-tab editor" and the "generic element selection
dialog" requirements.
We still need other features from our changes to the standalone editor
related to custom widgets and CSS components to be able to replace the
standalone editor completely, our goal. We'll keep evaluating this web editor
to see if it's a feasible path for updating our application.
Wow! Impressive.
We certainly do not want our customers to go to these (rather extreme)
lengths to be able to integrate Web Edition to their web app. Therefore
may be it's time for us to give ShadowRoot a second chance (while at it,
for both DocumentView and XMLEditor).
Just one question: which web browser have you used to test your
prototype? Just Chrome?
We want XMLmind XML Editor to run on Chrome, Firefox and Safari (that
is, the 3 different "web engines"). For now, it works fine on Chrome and
Firefox but not on Safari. Surprisingly, the problem with Safari is not
the HTML+CSS+JS part but the Web Socket part. The Web Socket client
which is part of Safari seems to behave quite oddly.
--
XMLmind XML Editor Support List
[email protected]
http://www.xmlmind.com/mailman/listinfo/xmleditor-support
