Add the ability to specify options on the demo page as JSON

[aprotim]

Description

Create a details toggle that hides a textarea into which a user can type a JSON-formatted options object.

(For some reason, I can't seem to get the textarea inside a details tag to match the width of the other textareas. After staring at the CSS and banging my head against it, I figured I'd let other people look at it, decide if it was important, and if it was, how to fix it.)

Contributor

• Test(s) exist to ensure functionality and minimize regression (if no tests added, list tests covering this PR); or,
• no tests required for this PR.
• If submitting new feature, it has been documented in the appropriate places.

Committer

In most cases, this should be a different person than the contributor.

• Draft GitHub release notes have been updated.
• CI is green (no forced merge required).
• Merge PR

[UziTech]

I like being able to add the options but could we move it to the right list

[aprotim]

I can do that, although right now all the things on the right are output/read-only, while the left side is input. What if instead of the details toggle, I added a similar dropdown on the input side? (Example of what it looks like forthcoming.)

[aprotim]

How about this change? Now all input is on the left, all output is on the right, and both have parallel type selectors.

[aprotim]

(FWIW, you can look at the live version at https://aprotim.github.io/marked/demo/)

[styfle]

This is awesome!

When the page loads the first time and there are no options in the query string, can you do $optionsElem.value = JSON.stringify(marked.getDefaults(), null, ' ');

This will give people an idea of what options are available 👍

[aprotim]

When the page loads the first time and there are no options in the query string, can you do $optionsElem.value = JSON.stringify(marked.getDefaults(), null, ' ');

Done!

[UziTech]

@aprotim looks like your demo page has an error

this.renderer.text is not a function

seems to be because the options are duplicated in the "renderer" option

...
"renderer": {
"options": {
"baseUrl": null,
"breaks": false,
"gfm": true,
"headerIds": true,
"headerPrefix": "",
"highlight": null,
"langPrefix": "language-",
"mangle": true,
"pedantic": false,
"renderer": {},
"sanitize": false,
"sanitizer": null,
"silent": false,
"smartLists": false,
"smartypants": false,
"tables": true,
"xhtml": false
}
},
...

[aprotim]

Ah, yeah. This is a problem with the roundtrip through JSON, when the default value for "renderer" is a complex object, not a dumb data object. I can either remove renderer from the object before stringifying, or I can set the default options text to be some manually-curated subset... let me tinker with it for a sec.

[aprotim]

Ok, now we filter any complex objects (or at least any objects whose prototype is different than Object's) out when we stringify. Seems to have cleared up the problem.

[styfle]

This is a much needed feature, thank you! 🎉

[UziTech]

Awesome 💯 🎉