Skip to content
Draft
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/serious-items-peel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/simple-markdown": major
---

Remove html output support (and other deprecated APIs)
40 changes: 7 additions & 33 deletions packages/simple-markdown/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,14 +148,6 @@ third `_`.
react: function(node, output) {
return React.DOM.u(null, output(node.content));
},

// Or an html element:
// (Note: you may only need to make one of `react:` or
// `html:`, as long as you never ask for an outputter
// for the other type.)
html: function(node, output) {
return '<u>' + output(node.content) + '</u>';
},
};
```

Expand All @@ -175,11 +167,7 @@ Finally, we need to build our parser and outputters:
var blockSource = source + "\n\n";
return rawBuiltParser(blockSource, {inline: false});
};
// You probably only need one of these: choose depending on
// whether you want react nodes or an html string:
var reactOutput = SimpleMarkdown.outputFor(rules, 'react');
var htmlOutput = SimpleMarkdown.outputFor(rules, 'html');

```

Now we can use our custom `parse` and `output` functions to parse
Expand Down Expand Up @@ -212,13 +200,8 @@ markdown with underlines!
_owner: null,
_context: {},
_store: { validated: false, props: [Object] } } ]

htmlOutput(syntaxTree)

=> '<div class="paragraph"><u>hello underlines</u></div>'
```


## Basic parsing/output API

#### `SimpleMarkdown.defaultBlockParse(source)`
Expand All @@ -242,15 +225,11 @@ Parses `source` as block if it ends with `\n\n`, or inline if not.

Returns React-renderable output for `syntaxTree`.

*Note: raw html output will be coming soon*


## Extension Overview

Elements in simple-markdown are generally created from rules.
For parsing, rules must specify `match` and `parse` methods.
For output, rules must specify a `react` or `html` method
(or both), depending on which outputter you create afterwards.
For output, rules must specify a `react` method.

Here is an example rule, a slightly modified version of what
simple-markdown uses for parsing **strong** (**bold**) text:
Expand All @@ -268,9 +247,6 @@ simple-markdown uses for parsing **strong** (**bold**) text:
react: function(node, recurseOutput) {
return React.DOM.strong(null, recurseOutput(node.content));
},
html: function(node, recurseOutput) {
return '<strong>' + recurseOutput(node.content) + '</strong>';
},
},
```

Expand Down Expand Up @@ -375,8 +351,8 @@ intermediate steps in the parsing/output process, if necessary.

The default rules, specified as an object, where the keys are
the rule types, and the values are objects containing `order`,
`match`, `parse`, `react`, and `html` fields (these rules can
be used for both parsing and outputting).
`match`, `parse`, and `react` fields (these rules can be used
for both parsing and outputting).

#### `SimpleMarkdown.parserFor(rules)`

Expand All @@ -391,8 +367,8 @@ object must contain a `match` and a `parse` function.

Takes a `rules` object and a `key` that indicates which key in
the rules object is mapped to the function that generates the
output type you want. This will be `'react'` or `'html'` unless
you are defining a custom output type.
output type you want. This will be `'react'` unless you are
defining a custom output type.

It returns a function that outputs a single syntax tree node of
any type that is in the `rules` object, given a node and a
Expand Down Expand Up @@ -422,16 +398,14 @@ var rules = {

var parser = SimpleMarkdown.parserFor(rules);
var reactOutput = SimpleMarkdown.outputFor(rules, 'react'));
var htmlOutput = SimpleMarkdown.outputFor(rules, 'html'));

var blockParseAndOutput = function(source) {
// Many rules require content to end in \n\n to be interpreted
// as a block.
var blockSource = source + "\n\n";
var parseTree = parser(blockSource, {inline: false});
var outputResult = htmlOutput(parseTree);
// Or for react output, use:
// var outputResult = reactOutput(parseTree);
var outputResult = reactOutput(parseTree);

return outputResult;
};
```
Expand Down
Loading
Loading