healthyregions / SDOHPlace

Landing page and data discovery application for SDOH Place Project.
https://sdohplace.org
GNU General Public License v3.0
1 stars 1 forks source link

Create new "Collapsible" markdown editor component - CMS #342

Closed mradamcox closed 3 weeks ago

mradamcox commented 1 month ago

In the Decap CMS markdown editor we would like to add a new block component option to handle collapsible sections. At the core of this component would be the standard HTML elements like this:

<details>
  <summary>text of the title</summary>
  Text of the detailed content
</details>

And it would behave like this:

text of the title Text of the detailed content

There is no need to program any of the toggle behavior, that will come automatically, and we should have styles set up already for this as well. We just need to ease the creation of these styles of elements in

Here is the Decap documentation about how to create and register a custom component: https://decapcms.org/docs/custom-widgets/. Note that we will need to registerEditorComponent, most likely in the public/admin/index.html file.

The name of the new component should be "Toggle Section". Inputs for the component should be

  1. title (required) Will be placed within the <summary> tag and shown at all times
  2. content (required) Will be placed within the content (after the summary tag), and will only appear when the toggle is open.
  3. group (optional) This would be a single string that gets mapped directly to the name attribute of the details element. This provides a radio-type behavior for all details in the same group, if one is opened all the others will close (this is default HTML behavior, we only need to supply the name attribute. See example: https://nikitahl.com/native-html-accordion

For the content, ideally we could be putting Markdown in here, and this would be rendered properly in the preview. If that proves problematic we could just leave plain text for now and come back to complex content later.