Allow tip format functions to return DOM nodes for rich text#2444
Open
kirthi-b wants to merge 1 commit into
Open
Allow tip format functions to return DOM nodes for rich text#2444kirthi-b wants to merge 1 commit into
kirthi-b wants to merge 1 commit into
Conversation
A custom format function for the title channel or any other channel may now return a DOM node, such as an SVG tspan or anchor element, instead of a string. The returned node is appended directly to the tip rather than being wrapped in a text node, allowing styled and hyperlinked rich text. Plain string formats are unchanged and still rendered as text, so this adds no HTML injection surface. Fixes observablehq#1767
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes the long-standing request for rich text and markup in tips (#1767).
This implements the "relatively easy" direction that mbostock outlined in the thread: a custom format function for the title channel, or any other channel, may now return a DOM node instead of a string. The returned node is appended directly to the tip rather than being wrapped in a text node, so you can style and hyperlink tip content, for example with an SVG tspan or anchor element built with Hypertext Literal:
Safety: only a DOM node returned by a format function is treated as rich content. Plain string formats are unchanged and always rendered as text, so no HTML is ever parsed and this adds no injection surface. Because a returned node is appended as-is rather than measured, the lineWidth and textOverflow options do not apply to it.
Changes:
I scoped this to the format-function approach only, and did not add the separate content channel or the href channel also floated in the thread, since those are larger API surfaces you may want to design yourselves. The VersionBadge version in the docs is a placeholder for you to set to whatever you plan to release.
Fixes #1767