Add RTL/LTR text direction support for paragraph elements

[ssmns]

Add dir="auto" attribute to

tags in both Swagger UI and ReDoc views to enable proper bidirectional text rendering. Uses MutationObserver to handle dynamically added content.

[JoelLefkowitz]

Thanks @ssmns for taking the time to tackle this and for thinking about RTL/LTR support here 😀

I'm not sure that the MutationObserver is the cleanest approach. It solves the problem, but it does so by patching the DOM after the viewer has already rendered, which makes it a fairly brittle runtime workaround. That tends to be harder to maintain, harder to reason about, and more likely to break if the third-party viewer changes its internal structure.

I’d think we should consider whether we can solve this closer to the source of the markup. A few alternatives seem worth exploring first:

• Viewer hooks: if Swagger UI or ReDoc exposes a render hook, slot, or initialization option that lets us set attributes as elements are created, that would be much cleaner.

• Template level changes: if we control the wrapper markup around the viewer, it may be possible to set dir="auto" higher up in the tree or on the container elements that the viewer populates.

What do you think @ssmns?

[ssmns]

Thanks for the thoughtful feedback. I agree that a MutationObserver is not the cleanest long-term approach.

I’ve actually implemented these changes directly in redoc itself. If my PR gets accepted upstream, then simply updating the redoc dependency in our codebase should bring these fixes in automatically.

So from that perspective, this can be kept in the codebase temporarily as a short-term workaround, but it shouldn’t be treated as the final solution. The preferred path is definitely to rely on the upstream redoc update once the PR is merged.

If you want, I can also make this sound a bit more formal or more concise for GitHub review.

[JoelLefkowitz]

Thanks @ssmns, this approach is much better than the MutationObserver approach. Could you please add a link to the upstream ReDoc PR here as well? That would make it easier to track the dependency and merge this in sequence once the upstream fix lands.

It may be worth checking whether the dir="auto" change on the ReDoc template placeholder has the intended effect, since that element gets replaced with the actual <redoc> node during initialization. If so, the direction attribute would need to be applied to the final rendered element instead, or the placeholder change could be dropped if it’s only acting as a temporary staging point. The JS side redoc.setAttribute("dir", "auto") is the part that seems likely to affect the rendered UI.

[ssmns]

Thanks for catching that! You're right, the dir="auto" on redoc-placeholder has no effect because redoc-init.js replaces it entirely with document.body.replaceChild(redoc, ...) before ReDoc initializes. Removed it.

The JS-side redoc.setAttribute("dir", "auto") on the actual <redoc> element is what affects the rendered UI, and unicode-bidi: plaintext in CSS is the main mechanism for per-block direction detection.

Upstream ReDoc PR: Redocly/redoc#2823