Embed the new OWS Editor into the website- #11 - #16
Conversation
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
✅ Deploy Preview for openworkflow ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
JBBianchi
left a comment
JBBianchi
left a comment
There was a problem hiding this comment.
Thanks a lot for the PR! Good work, I really like the idea of bringing the diagram editor directly into the examples section.
I played a bit with the implementation and I think there are just a few things I would improve around how the editor is integrated:
- Use a single editor instance for all examples. Right now each tab creates its own editor, while only one can ever be visible. We can keep the code examples as they are and have one shared diagram that follows the selected tab.
- Load the editor only when needed. The examples section is quite far down the page and the editor is relatively heavy, so I don't think we need to hydrate it as soon as the page loads.
- Keep the tabs as the source of truth. The existing HTML/CSS tabs already know which example is selected. The editor can simply follow that selection instead of adding another state/lifecycle around it.
- Avoid the
setTimeout/fitViewworkaround. I think this is mostly a consequence of mounting the editors while their tabs are hidden. With one visible editor, it should be able to resize/refit normally when its content changes. - Avoid remounting the editor when the theme changes. The editor already reacts to the
colorModeprop, so changing the theme shouldn't require recreating the whole editor and resetting its viewport. - As a smaller related improvement, I would also resolve the initial theme before the page is painted, so we don't briefly render the light theme for users using dark mode.
With the help of AI, I made a small conceptual implementation in my fork to illustrate what I mean: neuroglia-io/open-workflow-specification.github.io@f2b8410.
It's not necessarily meant to be copied as-is, but hopefully it makes the overall direction clearer. 🙂
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
JBBianchi
left a comment
JBBianchi
left a comment
There was a problem hiding this comment.
Besides the nitpick about how theme changes are observed, the rest looks good to me.
I did notice one small behavior that feels a bit inconsistent, although I think this is more on the editor side. If you switch tabs after moving around or zooming in/out, especially when coming from a very different graph like "Try-Catch", the new graph isn't always centered and zoomed to fit. What's a bit strange is that it seems to adjust automatically most of the time, just not consistently. @lornakelly, is this a known behavior?
| if (typeof document === "undefined") { | ||
| return () => {}; | ||
| } | ||
|
|
||
| const observer = new MutationObserver(onChange); | ||
|
|
||
| observer.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ["data-theme"], | ||
| }); | ||
|
|
||
| return () => observer.disconnect(); |
There was a problem hiding this comment.
I'd recommend using a custom event rather than a mutation observer.
Here you're relying on some kind of side-effect rather than implementing an intentional communication mechanism.
2 participants
closes #5
Overview
This PR adds support for embedding the Workflow Editor directly into a webpage, allowing the editor to be integrated and rendered as part of an existing web application.
Screenshots