Improve notes field on collection show page

[Evan-Leon]

Change the collection "notes" field to respect EOL (changing EOL-><br>) perhaps? Or be fancier and parse/render it as Markdown?

Lets try making the notes field render as markdown

ChatGPT assist 😅 :

• EOL (End of Line): Refers to the newline or line break characters in text. These are typically invisible but are used to separate lines.
• Change EOL ->
  : This suggests converting EOL characters (newline characters) to HTML line breaks (
  ), which will ensure that the notes field respects line breaks in a web display.
• Parse/render as Markdown: Markdown is a lightweight markup language that allows for formatting (like headers, bold text, links, lists, etc.) in a simple and readable way. The suggestion here is to enhance the "notes" field so that it can interpret and display Markdown formatting (e.g., headers, bold, bullet points), making it more flexible and visually appealing.

[rahulbot]

Note: This should be changed anywhere this field shows up, i.e. also on the Directory "feature collections" widget.

@Evan-Leon is the EOL -> <br> approach a quick fix that can be moved up in priority? We're spending more time cleaning collections right now and this would help readability a lot.

[Evan-Leon]

Yes, that should be doable, will move this up the priority list

[Evan-Leon]

Testing out some css commands that looks like it should do this, but doesn't look to be working
For featured collections page:

break-spaces

pre-wrap

pre-line

For Collection Show page notes:

break-spaces

pre-wrap

pre-line

Also looks like there may be a good package for markdown React-Markdown
Or can check this SO for a couple or parsers

[Evan-Leon]

@rahulbot do any of the above work better? or should we move forward with markdown approach?

[rahulbot]

None of those seem to be adding a break in between the lines in the input text. I was imaging a simple hack like this example I made: https://jsfiddle.net/cu6f8dyr/33/#&togetherjs=GF4DGO258J

That just splits on \n and wraps each sentence in a <p> tag:

var theTextArea = document.getElementById("description");
var sentences = theTextArea.value.split("\n");
var htmlToShow = "";
sentences.forEach(s => htmlToShow += `<p>${s}</p>`);
var theOutputElem = document.getElementById("output");
theOutputElem.innerHTML = htmlToShow;

We could read the field and render it as Markdown text, but that seems like more work.