Merge pull request #26 from JanGuillermo/1.0.4

🚢 Ship 1.0.4

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.4] - 2020-09-17
+### Added
+- Added support for external plugins using a new property `plugins`
+
+### Removed
+- [markdown-it-latex](https://github.com/tylingsoft/markdown-it-latex) dependency
+
 ## [1.0.3] - 2020-09-16
 ### Added
 - Added `linkify` property
@@ -12,7 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reduced production library size
 
 ### Removed
-- `markdown-it-strikethrough-alt` dependency
+- [markdown-it-strikethrough-alt](https://github.com/jay-hodgson/markdown-it-strikethrough-alt) dependency
 
 ## [1.0.2] - 2020-09-15
 ### Added
@@ -28,8 +35,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Omitted the production library folder
 - Omitted the includes for LaTeX + highlight.js styles
-- `dedent` dependency
-- `highlight.js` dependency
+- [dedent](https://github.com/MartinKolarik/dedent-js) dependency
+- [highlight.js](https://github.com/highlightjs/highlight.js) dependency
 
 ## [1.0.1] - 2020-09-14
 ### Added
@@ -50,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) - Add task lists
   - [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) - Add table of contents
 
+[1.0.4]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.3...v1.0.4
 [1.0.3]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.2...v1.0.3
 [1.0.2]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/JanGuillermo/vue3-markdown-it/releases/tag/v1.0.1

README.md

@@ -6,7 +6,7 @@
 
 [![GitHub package.json version](https://img.shields.io/github/package-json/v/JanGuillermo/vue3-markdown-it)](https://www.npmjs.com/package/vue3-markdown-it) [![Build Status](https://travis-ci.com/JanGuillermo/vue3-markdown-it.svg?branch=master)](https://travis-ci.com/JanGuillermo/vue3-markdown-it) [![codecov](https://codecov.io/gh/JanGuillermo/vue3-markdown-it/branch/master/graph/badge.svg)](https://codecov.io/gh/JanGuillermo/vue3-markdown-it) [![Dependencies Status](https://david-dm.org/JanGuillermo/vue3-markdown-it.svg)](https://david-dm.org/JanGuillermo/vue3-markdown-it) [![Known Vulnerabilities](https://snyk.io/test/github/JanGuillermo/vue3-markdown-it/badge.svg?targetFile=package.json)](https://snyk.io/test/github/JanGuillermo/vue3-markdown-it?targetFile=package.json) [![npm](https://img.shields.io/npm/dt/vue3-markdown-it)](https://www.npmjs.com/package/vue3-markdown-it)
 
-> A Vue 3 [markdown-it](https://github.com/markdown-it/markdown-it) wrapper plugin.
+> An awesome Vue 3 [markdown-it](https://github.com/markdown-it/markdown-it) wrapper plugin that can even support external plugins!
 
 🔎 [Live Demo](https://janguillermo.github.io/vue3-markdown-it/)
 
@@ -26,7 +26,6 @@ npm install vue3-markdown-it
 - [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) - Add footnotes
 - [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) - Add highlighting for code blocks
 - [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins) - Add `<ins>` tags
-- [markdown-it-latex](https://github.com/tylingsoft/markdown-it-latex) - Add LaTeX formatting
 - [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark) - Add marking/highlighting
 - [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub) - Add subscript
 - [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup) - Add superscript
@@ -45,11 +44,6 @@ app.use(VueMarkdownIt);
 ```
 
 ### CSS
-If you want to use LaTeX, you'll have to import a CSS file from [markdown-it-latex](https://github.com/tylingsoft/markdown-it-latex).
-```js
-import 'markdown-it-latex/dist/index.css';
-```
-
 If you want to use highlighting for code blocks, you'll have to import a CSS file from [highlight.js](https://github.com/highlightjs/highlight.js). View more styles [here](https://github.com/highlightjs/highlight.js/tree/master/src/styles). The code sample below imports the Monokai styling.
 ```js
 import 'highlight.js/styles/monokai.css';
@@ -117,6 +111,42 @@ Type: `String` | Default value: `language-`
 
 Type: `Boolean` | Default value: `false`
 
+### `plugins` 🌟
+> Don't see your favorite markdown-it plugin in the list of supported plugins? You can create an array of plugins and bind it into the component!
+> > The array only consists of objects (plugins in that case). A plugin has two properties:
+> > - `plugin`: A `markdown-it` plugin imported into this
+> > - `options`: Set the options for a specific `markdown-it` plugin.
+> ```vue
+> <template>
+>   <div>
+>     <vue3-markdown-it :source='source' :plugins='plugins' />
+>   </div>
+> </template>
+>
+> <script>
+> import MarkdownItStrikethroughAlt from 'markdown-it-strikethrough-alt';
+> import VueMarkdownIt from 'vue3-markdown-it';
+> 
+> export default {
+>   components: {
+>     VueMarkdownIt
+>   },
+>   data() {
+>     return {
+>       source: '--this is not so cool!--',
+>       plugins = [
+>         {
+>           plugin: MarkdownItStrikethroughAlt
+>         }
+>       ]
+>     }
+>   }
+> }
+> </script>
+> ```
+
+Type: `Array` | Default value: `[]`
+
 ### `quotes`
 > Double + single quotes replacement pairs, when typographer enabled and smartquotes on. Could be either a String or an Array. *For example*, you can use `«»„“` for Russian, `„“‚‘` for German, and `['«\xA0', '\xA0»', '‹\xA0', '\xA0›']` for French (including nbsp).
 

__tests__/plugins/markdown-it.spec.js

@@ -1,3 +1,4 @@
+import MarkdownItStrikethroughAlt from 'markdown-it-strikethrough-alt';
 import render from '#/render';
 
 describe('markdown-it tests', () => {
@@ -14,4 +15,21 @@ describe('markdown-it tests', () => {
     await global.wrapper.setProps({ source });
     expect(global.wrapper.html()).toContain(result);
   });
+
+  it('should be able to support external plugins', async () => {
+    source = '--Strikeout--';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).not.toContain('</s>');
+
+    const plugins = [
+      {
+        plugin: MarkdownItStrikethroughAlt
+      }
+    ];
+    await global.wrapper.setProps({ source, plugins });
+    expect(global.wrapper.html()).toContain('</s>');
+  });
 });

__tests__/render.js

@@ -6,7 +6,6 @@ import MarkdownItEmoji from 'markdown-it-emoji';
 import MarkdownItFootnote from 'markdown-it-footnote';
 import MarkdownItHighlightjs from 'markdown-it-highlightjs';
 import MarkdownItIns from 'markdown-it-ins';
-import MarkdownItLatex from 'markdown-it-latex';
 import MarkdownItMark from 'markdown-it-mark';
 import MarkdownItSub from 'markdown-it-sub';
 import MarkdownItSup from 'markdown-it-sup';
@@ -23,7 +22,6 @@ md.use(MarkdownItAbbr)
   .use(MarkdownItFootnote)
   .use(MarkdownItHighlightjs)
   .use(MarkdownItIns)
-  .use(MarkdownItLatex)
   .use(MarkdownItMark)
   .use(MarkdownItSub)
   .use(MarkdownItSup)