Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow Banners to render basic markdown such as links and emphasis. #3481

Merged
merged 4 commits into from
Sep 15, 2023

Conversation

TomTirapani
Copy link
Member

@TomTirapani TomTirapani commented Sep 15, 2023

image

  • Added reactMarkdown component and dependency.

Hoist P/R Checklist

Pull request authors: Review and check off the below. Items that do not apply can also be
checked off to indicate they have been considered. If unclear if a step is relevant, please leave
unchecked and note in comments.

  • Caught up with develop branch as of last change.
  • Added CHANGELOG entry, or determined not required.
  • Reviewed for breaking changes, added breaking-change label + CHANGELOG if so.
  • Updated doc comments / prop-types, or determined not required.
  • Reviewed and tested on Mobile, or determined not required.
  • Created Toolbox branch / PR, or determined not required.

If your change is still a WIP, please use the "Create draft pull request" option in the split
button below to indicate it is not ready yet for a final review.

Pull request reviewers: when merging this P/R, please consider using a squash commit to
collapse multiple intermediate commits into a single commit representing the overall feature
change. This helps keep the commit log clean and easy to scan across releases. PRs containing a
single commit should be rebased when possible.

@amcclain
Copy link
Member

Thank you for jumping on this - has been on my list for a while to discuss built-in markdown support, and this was a good prompt to do so.

  • Should we consider publishing a markdown component outside of the kit directory? I am not sure - I can't think of anything really to add or normalize on the API, but at the same time we typically publish a non-kit cmp for components we expect developers to be using regularly.
  • Not for the banner usage, but thinking of other in-app usages like comments, we could consider adding https://github.com/remarkjs/remark-breaks as a preconfigured plugin. Github makes this modification to standard MD in a few places and I always find it intuitive:

By way of example
this is on another line
(but wouldn't be in standard markdown, I don't think)

  • Changelog entry should include it in a Libraries section + a callout in the New Features section to recommend that apps cut over to the Hoist export + remove from their package.json to take advantage of our managed upgrade cycle (compatibility testing, etc) and to avoid potentially including multiple versions of the library should we have non-overlapping version specs.
  • I'm all for adding this as a built-in, but we should check to how much this increases the bundle size of e.g. Toolbox. It looks like a fair amount of dependencies, and with the usage within the built-in banner, we know it will always be included in any/every app bundle.

@amcclain
Copy link
Member

Another thought - at some point it would be great to have a user-friendly MarkdownInput component with something like the formatting toolbar in this Github commenting box.

Codemirror has a markdown mode and we could certainly configure that, but then you are in monospace/non-wrapping "code editing" mode and that's not really the experience I think we would want for user (or even admin) facing MD editing.

Not something we need to do for this PR, but it could be a companion comp we could consider when we go to use MD more widely for use cases like in-app comments (something I'd like to offer in one of our current apps).

@amcclain
Copy link
Member

columbo-oh-just-one-more-thing

We need to wrap the "full" display in the new markdown comp, for a multi-line banner prompt. First line shows up in banner, rest of the message (which now might include more advanced MD formatting) shown in a pop-up.

+ Add `remark-breaks` plugin to convert line-breaks to <br>
+ Render Markdown in alert banner "Read More" popup
+ Update CHANGELOG entry
@TomTirapani
Copy link
Member Author

Thanks for taking a look Anselm - I've updated the PR. Including the remark-breaks plugin was justification enough to wrap this in its own Markdown component. I've updated the CHANGELOG entry, and ensured the "Read More" popup is also rendered as markdown.

@TomTirapani
Copy link
Member Author

According toolbox/yarn startAndAnalyze with the inlineHoist flag set to true, this PR increases the bundle size 23.81 MB > 24.39 MB

@lbwexler
Copy link
Member

This looks great to me --- we might want to add some text in the banner admin discussing what is going to work, and what won't. Happy to merge this now

@lbwexler lbwexler requested review from lbwexler and removed request for lbwexler September 15, 2023 18:42
Copy link
Member

@amcclain amcclain left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for getting those additional changes in 👍

@lbwexler lbwexler merged commit f6f0e52 into develop Sep 15, 2023
@lbwexler lbwexler deleted the markdownBanners branch September 15, 2023 19:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants