From 9afd1788992caa72523fa3e84c3a421a843ebc71 Mon Sep 17 00:00:00 2001 From: ache Date: Fri, 18 May 2018 04:44:26 +0200 Subject: Tests with README --- README.md | 98 +++++++++++++++++++++++++++++++++++++++++++----------- __tests__/index.js | 42 +++++++++++++++++++++-- 2 files changed, 117 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 43ad188..02d6994 100644 --- a/README.md +++ b/README.md @@ -2,18 +2,13 @@ This plugin add support of custom attributes to Markdown syntax. -**This is an alpha not ready to be used in production.** +**This is an alpha not ready to be used in production.** but will be soon. -For the moment, it only support image and link. - -It aimed to support any other elements of the markdown syntax. - -Also for security reasons, this plugin should use [html-element-attributes](https://github.com/wooorm/html-element-attributes). -The use of JavaScript attributes (onload for example) must not be allowed by default. +Also for security reasons, this plugin use [html-element-attributes](https://github.com/wooorm/html-element-attributes). +The use of JavaScript attributes (onload for example) is not allowed by default. ## Default Syntax - Images : ```markdown ![alt](img){attrs} / ![alt](img){ height=50 } @@ -24,11 +19,35 @@ Links : [Hot babe with computer](https://rms.sexy){rel="external"} ``` +Header (Atx) : +```markdown +### This is a title +{style="color:red;"} +``` + +Emphasis : +```markdown +Npm stand for *node*{style="color:red"} packet manager. +``` + +Strong : +```markdown +This is a **Unicorn**{awesome} ! +``` + +Delete : +```markdown +Your problem is ~~at line 18~~{style="color: grey"}. My mistake, it's at line 14. +``` + +Code : +```markdown +You can use the `fprintf`{lang=c} function to format the output to a file. +``` + ## rehype -This plugin is compatible with [rehype][rehype]. -Actually, it wouldn't really do much good otherwise. -At the moment it aims is to be used with remark-rehype only. +At the moment it aims is to be used with [rehype][rehype] only, using remark-rehype. ```md [Hot babe with computer](https://rms.sexy){rel="external"} @@ -36,7 +55,6 @@ At the moment it aims is to be used with remark-rehype only. gives: - ```html Hot babe with computer ``` @@ -91,20 +109,60 @@ $ node index.js

ache avatar

``` +This package can be configurated. + +```javascript +unified() + .use(remarkParse) + .use(remarkAttr, config) + .use(remark2rehype) + .use(stringify) + .process( testFile, (err, file) => { + console.log(String(file)) + } ) +``` + +Here are the defaults options : - +```javascript + { + allowDangerousDOMEventHandlers: false, + elements: ['link', 'image', 'header'], + extends: {}, + scope: 'specific', + }; +``` -## License +**allowDangerousDOMEventHandlers** : A boolean - +Allow the use of `on-*` attributs. They are depreciated and disabled by default for security reason. -[zds]: https://zestedesavoir.com +**elements** : A list of elements from this list `[ 'link', 'image', 'header', 'strong', 'emphasis', 'deletion', 'code', 'atxHeader' ]` or `"*"`. -[npm]: https://www.npmjs.com/package/remark-attr +List of every tags on witch remark-attr will be activated or `'*'` to activate remark-attr on every supported tags. -[mdast]: https://github.com/syntax-tree/mdast/blob/master/readme.md +**extends** : An object that extends the list of attributs supported for some elements. -[rehype]: https://github.com/wooorm/rehype +Example : +``` +{extends: {image: ['original', 'quality', 'format', 'exposition']}} +``` + +With this configuration, if the scope permit it, 4 mores attributs will be supported for image elements. -[parent]: https://github.com/syntax-tree/unist#parent +**scope** : A string with the value `"global"` or `"specific"` or `"extented"` or `"none"` or `"every"`. + +`"none"` will disable the plugin +`"global"` will activate only the global attributs +`"specific"` will activate global and specific attributs. +`"extented"` will add personalized tags for some elements. +`"permissive"` or `"every"` will allow every attributs (execpt dangerous one) on every elements supported. + +## License + + + +[npm]: https://www.npmjs.com/package/remark-attr + +[rehype]: https://github.com/wooorm/rehype diff --git a/__tests__/index.js b/__tests__/index.js index 6a09cf9..3c86fea 100644 --- a/__tests__/index.js +++ b/__tests__/index.js @@ -1,5 +1,6 @@ +import {readFileSync as file} from 'fs'; +import {join} from 'path'; import unified from 'unified'; - import test from 'ava'; import raw from 'rehype-raw'; import reParse from 'remark-parse'; @@ -14,14 +15,14 @@ const Stream = stream.Readable; const render = text => unified() .use(reParse) - .use(plugin) + .use(plugin, {allowDangerousDOMEventHandlers: false, scope: 'permissive'}) .use(remark2rehype) .use(stringify) .processSync(text); const renderRaw = text => unified() .use(reParse) - .use(plugin) + .use(plugin, {allowDangerousDOMEventHandlers: true, scope: 'permissive'}) .use(remark2rehype, {allowDangerousHTML: true}) .use(raw) .use(stringify) @@ -99,3 +100,38 @@ test('em', async t => { await string2stream(contents).pipe(parser); }); +test('readme', async t => { + const fileExample = file(join(__dirname, 'readMeTest.txt')); + const {contents} = render(fileExample); + const parser = new parse5.SAXParser(); + + parser.on('startTag', (name, attrs) => { + switch (name) { + case 'img': + t.true(propEgal({height: 50, alt: 'alt', src: 'img'}, attrs)); + break; + case 'a': + t.true(propEgal({ref: 'external', src: 'https://rms.sexy'}, attrs)); + break; + case 'h3': + t.true(propEgal({style: 'color:red;'}, attrs)); + break; + case 'em': + t.true(propEgal({style: 'color:yellow;'}, attrs)); + break; + case 'strong': + t.true(propEgal({awesome: ''}, attrs)); + break; + case 'del': + t.true(propEgal({style: 'color: grey;'}, attrs)); + break; + case 'code': + t.true(propEgal({lang: 'c'}, attrs)); + break; + default: + } + }); + + await string2stream(contents).pipe(parser); +}); + -- cgit v1.2.3