feat: allow to add component mixins and more

- Added `componentMixins` option - Allow plugin to extend markdown component via `extendMarkdownComponent` hook
egoist · Nov 18, 2018 · d04adad · d04adad
1 parent 9c3850e
commit d04adad
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 9 deletions.
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -91,10 +91,16 @@ export default {
 
   computed: {
     MarkdownBody() {
-      return {
+      const {componentMixins} = this.$store.getters.config
+      const component = {
+        mixins: componentMixins || [],
         name: 'MarkdownBody',
         template: `<div class="markdown-body">${this.$store.state.html}</div>`
       }
+
+      hooks.process('extendMarkdownComponent', component)
+
+      return component
     }
   },
 

diff --git a/website/docs/guide/writing.md b/website/docs/guide/writing.md
@@ -75,10 +75,11 @@ function debounce(func, wait, immediate) {
 
 The languages we support by default:
 
-- JavaScript
-- CSS
-- Markdown
-- HTML
+<ul>
+  <li v-for="lang in builtinLanguages" :key="lang">
+    {{ lang }}
+  </li>
+</ul>
 
 You can use [highlight](/options#highlight) option to add more languages.
 

diff --git a/website/docs/options.md b/website/docs/options.md
@@ -49,6 +49,12 @@ The source path to fetch markdown files from, by default we load them from the r
 
 It can also be a full URL like: `https://some-website/path/to/markdown/files` so that you can load files from a different domain.
 
+## componentMixins
+
+- Type: `Array<Object>`
+
+Basically an array of [Vue mixins](https://vuejs.org/v2/api/#mixins) that are applied to all markdown components.
+
 
 ## highlight
 

diff --git a/website/docs/zh/guide/writing.md b/website/docs/zh/guide/writing.md
@@ -75,10 +75,11 @@ function debounce(func, wait, immediate) {
 
 默认支持的语言：
 
-- JavaScript
-- CSS
-- Markdown
-- HTML
+<ul>
+  <li v-for="lang in builtinLanguages" :key="lang">
+    {{ lang }}
+  </li>
+</ul>
 
 你可以查看[高亮](/zh/options#highlight)选项添加更多语言。
 

diff --git a/website/docs/zh/options.md b/website/docs/zh/options.md
@@ -51,6 +51,12 @@ interface ItemLink {
 它也可以是完整的 URL，例如： `https://some-website/path/to/markdown/files`，以便于你可以从其他域名加载文件。
 
 
+## componentMixins
+
+- 类型: `Array<Object>`
+
+一个包含 [Vue mixins](https://vuejs.org/v2/api/#mixins) 的数组，会被应用到所有的 Markdown 组件中。
+
 ## highlight
 
 - 类型：`Array<string>`

diff --git a/website/index.js b/website/index.js
@@ -1,5 +1,6 @@
 import googleAnalytics from '@leptosia/docute-google-analytics'
 import Docute from '../src'
+import prismLanguages from '../src/utils/prismLanguages'
 
 new Docute({
   target: 'app',
@@ -10,6 +11,15 @@ new Docute({
   ].filter(Boolean),
   editLinkBase: 'https://github.com/leptosia/docute/tree/master/website/docs',
   editLinkText: 'Edit this page on GitHub',
+  componentMixins: [
+    {
+      data() {
+        return {
+          builtinLanguages: prismLanguages.builtin
+        }
+      }
+    }
+  ],
   versions: {
     v4: {
       link: '/'