')
105 | has('table > tr')
106 | })
107 |
108 | it('renders inline SVG', () => {
109 | const svg = stripIndents`
110 |
119 | `
120 |
121 | md({ html: true }).idom(svg)
122 |
123 | has('svg[xmlns][viewBox="0 0 32 32"]')
124 | has('svg > defs > linearGradient#gradation')
125 | has('#gradation > stop + stop')
126 | has('svg > rect[x][y][width][height][fill]')
127 | })
128 | })
129 | })
130 |
131 | context('with breaks option', () => {
132 | const markdown = 'break\ntest'
133 |
134 | context('with false', () => {
135 | it('keeps breaks as text', () => {
136 | md({ breaks: false }).idom(markdown)
137 |
138 | expect(document.querySelector('br')).toBeFalsy()
139 | expect(document.querySelector('p').textContent).toBe(markdown)
140 | })
141 | })
142 |
143 | context('with true', () => {
144 | it('renders
on breaks', () => {
145 | md({ breaks: true }).idom(markdown)
146 | has('br')
147 | })
148 | })
149 | })
150 |
151 | context('with overriden renderers', () => {
152 | context('when HTML parser is used only in opening element', () => {
153 | it('renders correctly', () => {
154 | const markdown = md()
155 | markdown.renderer.rules.paragraph_open = () => ''
156 | markdown.idom('Render correctly')
157 |
158 | expect(document.querySelector('p.overriden')).toBeTruthy()
159 | })
160 | })
161 | })
162 |
163 | context('with other plugins', () => {
164 | context('when markdown-it-sub is injected (simple plugin)', () => {
165 | const instance = md().use(MarkdownItSub)
166 |
167 | it('renders tag correctly', () =>
168 | expect(instance.idom('H~2~O')).toBe('H2O
'))
169 | })
170 |
171 | context(
172 | 'when markdown-it-footnote is injected (overriding renderer rules)',
173 | () => {
174 | const instance = md().use(MarkdownItFootnote)
175 | const markdown = 'Footnote[^1]\n\n[^1]: test'
176 |
177 | it('renders footnote correctly', () => {
178 | instance.idom(markdown)
179 |
180 | has('sup.footnote-ref > a#fnref1[href="#fn1"]')
181 | has('hr.footnotes-sep')
182 | has('section.footnotes > ol.footnotes-list > li#fn1.footnote-item')
183 | has('#fn1 a.footnote-backref[href="#fnref1"]')
184 | })
185 | }
186 | )
187 | })
188 | })
189 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # markdown-it-incremental-dom
2 |
3 | [](https://travis-ci.org/yhatt/markdown-it-incremental-dom)
4 | [](https://coveralls.io/github/yhatt/markdown-it-incremental-dom?branch=master)
5 | [](https://www.npmjs.com/package/markdown-it-incremental-dom)
6 | [](./LICENSE)
7 |
8 | A [markdown-it](https://github.com/markdown-it/markdown-it) renderer plugin by using [Incremental DOM](https://github.com/google/incremental-dom).
9 |
10 | Let's see key features: **[https://yhatt.github.io/markdown-it-incremental-dom/](https://yhatt.github.io/markdown-it-incremental-dom/)** or [`docs.md`](docs/docs.md)
11 |
12 | [](https://yhatt.github.io/markdown-it-incremental-dom/)
13 |
14 | ## Requirement
15 |
16 | - [markdown-it](https://github.com/markdown-it/markdown-it) >= 4.0.0 (Recommend latest version >= 8.4.0, that this plugin use it)
17 | - [Incremental DOM](https://github.com/google/incremental-dom) >= 0.5.x
18 |
19 | ## Examples
20 |
21 | ### Node
22 |
23 | ```javascript
24 | import * as IncrementalDOM from 'incremental-dom'
25 | import MarkdownIt from 'markdown-it'
26 | import MarkdownItIncrementalDOM from 'markdown-it-incremental-dom'
27 |
28 | const md = new MarkdownIt().use(MarkdownItIncrementalDOM, IncrementalDOM)
29 |
30 | IncrementalDOM.patch(
31 | document.getElementById('target'),
32 | md.renderToIncrementalDOM('# Hello, Incremental DOM!')
33 | )
34 | ```
35 |
36 | ### Browser
37 |
38 | Define as `window.markdownitIncrementalDOM`.
39 |
40 | ```html
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
59 |
60 |
61 | ```
62 |
63 | #### CDN
64 |
65 | You can use [the recent version through CDN](https://cdn.jsdelivr.net/npm/markdown-it-incremental-dom@2/dist/markdown-it-incremental-dom.min.js) provides by [jsDelivr](https://www.jsdelivr.com/).
66 |
67 | ```html
68 |
69 | ```
70 |
71 | - **[Compressed (Recommend)](https://cdn.jsdelivr.net/npm/markdown-it-incremental-dom@2/dist/markdown-it-incremental-dom.min.js)**
72 | - [Uncompressed](https://cdn.jsdelivr.net/npm/markdown-it-incremental-dom@2/dist/markdown-it-incremental-dom.js)
73 |
74 | ## Installation
75 |
76 | We recommend using [yarn](https://yarnpkg.com/) to install.
77 |
78 | ```bash
79 | $ yarn add incremental-dom markdown-it
80 | $ yarn add markdown-it-incremental-dom
81 | ```
82 |
83 | If you wanna use npm, try this:
84 |
85 | ```bash
86 | $ npm install incremental-dom markdown-it --save
87 | $ npm install markdown-it-incremental-dom --save
88 | ```
89 |
90 | ## Usage
91 |
92 | When injecting this plugin by `.use()`, _you should pass Incremental DOM class as second argument._ (`window.IncrementalDOM` by default)
93 |
94 | ```javascript
95 | import * as IncrementalDOM from 'incremental-dom'
96 | import MarkdownIt from 'markdown-it'
97 | import MarkdownItIncrementalDOM from 'markdown-it-incremental-dom'
98 |
99 | const md = new MarkdownIt().use(MarkdownItIncrementalDOM, IncrementalDOM)
100 | ```
101 |
102 | If it is succeed, [2 new rendering methods](#rendering-methods) would be injected to instance.
103 |
104 | > **_TIPS:_** This plugin keeps default rendering methods [`render()`](https://markdown-it.github.io/markdown-it/#MarkdownIt.render) and [`renderInline()`](https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline).
105 |
106 | ### Option
107 |
108 | You can pass option object as third argument. See below:
109 |
110 | ```javascript
111 | new MarkdownIt().use(MarkdownItIncrementalDOM, IncrementalDOM, {
112 | incrementalizeDefaultRules: false,
113 | })
114 | ```
115 |
116 | - **`incrementalizeDefaultRules`**: For better performance, this plugin would override a few default renderer rules only when you calls injected methods. If the other plugins that override default rules have occurred any problem, You can disable overriding by setting `false`. _(`true` by default)_
117 |
118 | ### Rendering methods
119 |
120 | #### `MarkdownIt.renderToIncrementalDOM(src[, env])` => `Function`
121 |
122 | Similar to [`MarkdownIt.render(src[, env])`](https://markdown-it.github.io/markdown-it/#MarkdownIt.render) but _it returns a function for Incremental DOM_. It means doesn't render Markdown immediately.
123 |
124 | You must render to DOM by using [`IncrementalDOM.patch(node, description)`](http://google.github.io/incremental-dom/#api/patch). Please pass the returned function to the description argument. For example:
125 |
126 | ```javascript
127 | const node = document.getElementById('#target')
128 | const func = md.renderToIncrementalDOM('# Hello, Incremental DOM!')
129 |
130 | // It would render "Hello, Incremental DOM!
" to
131 | IncrementalDOM.patch(node, func)
132 | ```
133 |
134 | #### `MarkdownIt.renderInlineToIncrementalDOM(src[, env])` => `Function`
135 |
136 | Similar to `MarkdownIt.renderToIncrementalDOM` but it wraps [`MarkdownIt.renderInline(src[, env])`](https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline).
137 |
138 | ### Renderer property
139 |
140 | #### _get_ `MarkdownIt.IncrementalDOMRenderer` => [`Renderer`](https://markdown-it.github.io/markdown-it/#Renderer)
141 |
142 | Returns [`Renderer`](https://markdown-it.github.io/markdown-it/#Renderer) instance that includes Incremental DOM support.
143 |
144 | It will inject Incremental DOM features into the current state of [`MarkdownIt.renderer`](https://markdown-it.github.io/markdown-it/#MarkdownIt.prototype.renderer) at getting this property.
145 |
146 | > **_NOTE:_** This property is provided for the expert. Normally you should use `renderToIncrementalDOM()`.
147 | >
148 | > But it might be useful if you have to parse Markdown and operate tokens manually.
149 | >
150 | > ```javascript
151 | > const md = new MarkdownIt()
152 | > const tokens = md.parse('# Hello')
153 | >
154 | > // ...You can operate tokens here...
155 | >
156 | > const patch = md.IncrementalDOMRenderer.render(tokens, md.options)
157 | > IncrementalDOM.patch(document.body, patch)
158 | > ```
159 |
160 | ## Development
161 |
162 | ```bash
163 | $ git clone https://github.com/yhatt/markdown-it-incremental-dom
164 |
165 | $ yarn install
166 | $ yarn build
167 | ```
168 |
169 | ### Lint & Format
170 |
171 | ```bash
172 | $ yarn lint # Run ESLint
173 | $ yarn lint --fix # Fix lint
174 |
175 | $ yarn format:check # Run Prettier
176 | $ yarn format --write # Fix formatting by Prettier
177 | ```
178 |
179 | ### Publish to npm
180 |
181 | ```bash
182 | $ npm publish
183 | ```
184 |
185 | :warning: Use npm >= 5.0.0.
186 |
187 | ## Author
188 |
189 | Yuki Hattori ([@yhatt](https://github.com/yhatt/))
190 |
191 | ## License
192 |
193 | This plugin releases under the [MIT License](https://github.com/yhatt/markdown-it-incremental-dom/blob/master/LICENSE).
194 |
--------------------------------------------------------------------------------
')
95 | has('hr + img')
96 | })
97 |
98 | it('renders invalid HTML', () => {
99 | md({ html: true }).idom('