Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Oct 19, 2018

Conversation

aprotim
Copy link
Contributor

@aprotim aprotim commented Oct 17, 2018

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.)

screenshot from 2018-10-17 01-27-32

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
Copy link
Member

UziTech commented Oct 18, 2018

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

image

@aprotim
Copy link
Contributor Author

aprotim commented Oct 18, 2018

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
Copy link
Contributor Author

aprotim commented Oct 18, 2018

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

@aprotim
Copy link
Contributor Author

aprotim commented Oct 18, 2018

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

@styfle styfle added the category: docs Documentation changes label Oct 18, 2018
@styfle
Copy link
Member

styfle commented Oct 18, 2018

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 👍

Per @styfle's suggestion, setting the options element's contents to the defaults on load.
@aprotim
Copy link
Contributor Author

aprotim commented Oct 18, 2018

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
Copy link
Member

UziTech commented Oct 18, 2018

@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
Copy link
Contributor Author

aprotim commented Oct 18, 2018

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
Copy link
Contributor Author

aprotim commented Oct 18, 2018

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.

Copy link
Member

@styfle styfle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a much needed feature, thank you! 🎉

Copy link
Member

@UziTech UziTech left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome 💯 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category: docs Documentation changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants