Markdown style bug causing ordered/unordered lists to behave the same

[snblickhan]

FEM - Markdown

Describe the bug

Report from Project Builder: "There is a bug in the style for the markdown for lists. Both unordered and ordered behave the same way."

To Reproduce

Steps to reproduce the behavior: From @mcbouslog: FEM not expected https://frontend.preview.zooniverse.org/projects/markb-panoptes/digileap-testing/about/research?env=staging NB: based on this from the lab about editor - https://master.pfe-preview.zooniverse.org/lab/1952/about/research

Applicable Panoptes resource IDs (project, workflow, etc) to demonstrate the issue:

Expected behavior

expected (PFE) https://master.pfe-preview.zooniverse.org/projects/markb-panoptes/digileap-testing/about/research?env=staging

Screenshots

FEM (not expected):

PFE (expected):

Possibly related Markdown issues:

Received May 09 via Talk (FEM project 15969): "I have had varying degrees of difficulty creating spacing between lines. Sometimes adding an extra return between lines helps or adding three or more spaces at the end of a line. However, in the Field Guide text, I have been unable to add extra spaces between lines using markdown. I've tried backslashes, extra spaces at the end of lines, and extra space between lines, and none of these seem to work consistently."

Received May 10 via Talk (FEM project 15597): " I'm losing icons for topics in the Field Guide. They all appear when editing the guide, but when clicking on the Field Guide button during the transcription process, most are missing. When I go into the actual topic page, they are also missing." I checked the lab, and all the icons are appearing as they should on the Field Guide page. See screenshots below:

FG boxes as they currently appear on FEM project page:

FG icons as they appear in PFE lab:

Received May 19 via email (FEM project 5481):

I was trying to finalize my Field Guide this week, a lot of resizing of sample images of individual letters, and I just seem to be missing something in the markup. I can't seem to get the image samples to stay at a smaller size so they aren't so pixelated. I've tried multiple ways to format the image and hold it to 152x89 pixels (which is the native size), but the Field Guide keeps displaying the image at the larger size or not at all (as if the markup language is not understood.

[snblickhan]

Note: added 2 possibly(?) related Markdown issues from FEM project team reports.

[snblickhan]

Added 1 more Markdown issue from a team using FEM.

[eatyourgreens]

Ordered lists work in the storybook, so perhaps there's a style clash in the project app somewhere. https://zooniverse.github.io/front-end-monorepo/@zooniverse/react-components/iframe.html?id=components-markdownz--in-project-context&args=&globals=locale:en;locales.en:English;locales.test:Test%20Language&viewMode=story

[goplayoutside3]

I'm looking into the lists styling today.

In the future it will be most helpful if the reported markdown issues are documented in separate issues based on the unexpected behavior:

1. lists styling
2. creating space between lines
3. icons in the field guide
4. unable to resize images in the field guide

Regarding # 4, project 5481 field guide images have image urls incorrectly formatted. The markdown guide snapshot below shows how to resize field guide images. Project 5481's urls include =MxN instead of replacing M and N with numeric values, or the resize syntax is missing all together.

[goplayoutside3]

@snblickhan a quick fix for teams that want ordered lists in their project About Pages is to enter one line before the start of the list like this:

In short, our custom FEM markdown handler wasn't built with lists in mind. I'll work on a fix for it with better styling 👍

[goplayoutside3]

The root of the ordered list problem lies in FEM's remark version. Given the following input

Ordered list:
1. item one 
2. item two 
3. item three

remark version 11 processes it to:

Ordered list:
1\ item one 
2\ item two 
3\ item three

and it's rendered as a paragraph.

We want the original input to be processed to:

Ordered list:

1. item one 
2. item two 
3. item three

Upgrading to remark version 12 fixes this issue, but also has unintended consequences for using footnotes in markdown. I have a PR incoming that addressed both ordered lists and preserves footnote styling.

[eatyourgreens]

To be fair, lists must have the preceding blank line since they’re block elements, like headings and paragraphs. If project teams are writing bad Markdown, then it’s ok if our code is strict about parsing it.

[snblickhan]

I'm looking into the lists styling today.

In the future it will be most helpful if the reported markdown issues are documented in separate issues based on the unexpected behavior:

1. lists styling
2. creating space between lines
3. icons in the field guide
4. unable to resize images in the field guide

Regarding # 4, project 5481 field guide images have image urls incorrectly formatted. The markdown guide snapshot below shows how to resize field guide images. Project 5481's urls include =MxN instead of replacing M and N with numeric values, or the resize syntax is missing all together.

Thanks, Delilah -- particularly for the note about preference for potentially related issues. I'll definitely open new issues for each in the future, rather than putting them together!

RE: image resizing, I think this syntax guide is confusing for project builders. The example from the screenshot I sent was a user trying multiple different examples to show how none of them were showing up as expected, even the original image was pixelated in FEM whereas it shows up fine in the PFE lab preview.

In this Markdown syntax example, is the 350x350 the original image size, and M + N the desired size? If so, we should really update our guidance to be clearer. I know at least from my perspective I'm still confused as to why PFE previews look fine and FEM Field Guide images are gigantic (whether resized or not), so I'm not really sure how to guide the team from here.

[goplayoutside3]

Ordered/Unordered lists in markdown was solved, so I'm closing this issue.

Problems with icons in the field guide is a separate issue here: https://github.com/zooniverse/front-end-monorepo/issues/3295

@snblickhan if there's still problems with creating space in markdown, please open a separate issue with screenshots of the desired effect that can be replicated in PFE, but not FEM if possible. Thanks!