Panoptes-Front-End icon indicating copy to clipboard operation
Panoptes-Front-End copied to clipboard

fix(talk): preserve whitespace in markdown code blocks

Open eatyourgreens opened this issue 9 months ago • 4 comments

Style Markdown code blocks so that long lines wrap without collapsing whitespace.

Trim comments so that comments with leading whitespace aren't accidentally displayed as code blocks.

Screenshot of some Python code on Talk, with the indentation displayed as expected.
  • Fixes #6686 by styling code blocks with pre-wrap, not pre-line.
  • Fixes #1599 by trimming leading whitespace from Talk comments.
  • Fixes #7113 by applying Talk comment styles to inbox messages.

Test cases to run locally:

  • Planet Four comments with leading whitespace that are accidentally displayed as code blocks: https://local.zooniverse.org:3735/projects/mschwamb/planet-four-terrains/talk/29/3494/?comment=6783&env=production&page=1
  • Markdown tests on staging: https://local.zooniverse.org:3735/talk/38/372
  • a Talk comment with a Python script: https://local.zooniverse.org:3735/talk/18/3317233?comment=5524608&env=production

Talk discussions:

Required Manual Testing

  • [ ] Does the non-logged in home page render correctly?
  • [ ] Does the logged in home page render correctly?
  • [ ] Does the projects page render correctly?
  • [ ] Can you load project home pages?
  • [ ] Can you load the classification page?
  • [ ] Can you submit a classification?
  • [ ] Does talk load correctly?
  • [ ] Can you post a talk comment?

Review Checklist

  • [ ] Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
  • [ ] Does it work on mobile?
  • [ ] Can you npm ci and app works as expected?
  • [ ] If the component is in coffeescript, is it converted to ES6? Is it free of eslint errors? Is the conversion its own commit?
  • [ ] Are the tests passing locally and on GitHub Actions?

Optional

eatyourgreens avatar May 25 '24 10:05 eatyourgreens