Collapsible sections in text?

[AmeliaNestler]

Figure out if you can do collapsible sections. If so, implement for examples or other areas.

[AmeliaNestler]

I tried this, and it didn't work. Anyone have other ideas on how to get it working?

https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f

I tested it in marked's demo and it worked fine (https://marked.js.org/demo/?text=&options=) and in github and it worked fine, but it doesn't work in the app.

[NorthDecoder]

I think the short answer is "Yes you are correct", because in the PrISM project we are including the package react-markdown syntax to render the markdown as HTML which can be demonstrated at demo. Although react-markdown package claims to do Github Flavored Markdown (GFM), the demo appears to implement the syntax differently than the marked.js demo.

You pointed out the following works in marked.js demo (and on github flavored markdown):

## collapsible markdown?

<details><summary>CLICK ME</summary>
<p>

#### yes, even hidden code blocks!

```python
print("hello world!")
```

</p>
</details>

By removing spacing you can coax the react-markdown demo to sort of work, but the collapsed content loses the markdown translation:

## collapsible markdown?

<details><summary>CLICK ME</summary>
<p>
#### yes, even hidden code blocks!
```python
print("hello world!")
```

</p>
</details>

Your question was how to make this work, and I am not sure that it does. My gut instict is that react-markdown is just currently not working that way yet. I checked the react-markdown issues and saw no mention, so I entered issue 267

---

As you pointed out; the collapsible markdown works in GFM

CLICK ME

#### yes, even hidden code blocks! ```python print("hello world!") ```

[NorthDecoder]

Sorrryyyy, clicked the wrong button...

[NorthDecoder]

I had to scan each of your commits to figure out which you were referring to, so for example I copied the following from commit f4bf89c , by playing with the spacing of the text that does the collapsing both in the react-markdown demo and here I was able to get the collapsing to work, however the nice little carrot is missing. This proposed change has not been tested in the app yet.

For example

<details><summary>Floral Soil</summary>

A product concept with exceptional ambitions for sustainable product design is

[Floral Soil](https://www.floralsoilsolutions.com).

Floral Soil is designed to replace conventional floral foam used by florists to hold flowers in place in an
arrangement and to keep them moist. The designer set out to create a product that was ‘safe enough 
to eat’ in addition to being biobased, biodegradable in home gardens or compost, reusable and high 
performing with respect to holding water to replace current floral foams.

![Floral Soil design goals includes: 1) Non-toxic, 2) Bio-based, 3) Biodegradable, 4) Grow seeds, 5) Hold   
water](https://raw.githubusercontent.com/NorthwestGreenChemistry/PrISM/develop/app/assets/1-
design-goals/project-goals.png)

[Learn more about Floral Soil Solutions.](https://www.floralsoilsolutions.com/)

</details>

---

Floral Soil

A product concept with exceptional ambitions for sustainable product design is [Floral Soil](https://www.floralsoilsolutions.com/). Floral Soil is designed to replace conventional floral foam used by florists to hold flowers in place in an arrangement and to keep them moist. The designer set out to create a product that was ‘safe enough to eat’ in addition to being biobased, biodegradable in home gardens or compost, reusable and high performing with respect to holding water to replace current floral foams.  [Learn more about Floral Soil Solutions.](https://www.floralsoilsolutions.com/)

[AmeliaNestler]

I tried copying it in like you've written it here, and had the same issue. It's like the <> type tags aren't enabled maybe? I tried using one for an img so I could set width and it just showed up as text, too.

[mariannefeng]

Collapsible sections isn't widely supported by markdown, and will only work with certain markdown libraries. The one we're currently using does not support collapsible sections, it looks like the one you guys were linking is using this one: https://github.com/markedjs/marked.

With a bit of finangling, we could swap over to the other library (I say with a bit of finangling because the library isn't a react library, so no promises on a smooth bug-less transition)

[NorthDecoder]

Also note there are different renderer's for testing in the browser, but the only one that matters is Chromium (NOT Google Chrome) which is what is used by ElectronJS in the app.

A side note is that the whole point of markdown is that the original text is human readable without too much markup.

[AmeliaNestler]

OK, so it sounds like this isn't possible. At least not without some major changes, and I want to avoid those for now.