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 1 year 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

Coverage Status

coverage: 56.892% (-0.004%) from 56.896% when pulling 65c9ea68afb9983a736126de238fdbf61b1f2ea1 on eatyourgreens:fix-code-whitespace into a8412d3d43986f8d381d18a592150b22c6eefd0e on zooniverse:master.

coveralls avatar May 25 '24 10:05 coveralls

Test cases here: https://master.pfe-preview.zooniverse.org/talk/38/372?env=staging

eatyourgreens avatar May 25 '24 11:05 eatyourgreens

The original Planet Four comment, to test for regressions (and comments accidentally being displayed as code): https://www.zooniverse.org/projects/mschwamb/planet-four-terrains/talk/29/3494/?comment=6783

eatyourgreens avatar May 25 '24 12:05 eatyourgreens

A Talk comment with a Python script, that I just posted. This PR should fix the broken indentation here: https://www.zooniverse.org/talk/18/3317233?comment=5524608

eatyourgreens avatar Jun 07 '24 14:06 eatyourgreens