chore(docz-core): set fixed mdx plugins on webpack config

packages/docz-core/package.json

@@ -58,6 +58,7 @@
     "unified": "^6.2.0",
     "unist-util-find": "^1.0.1",
     "unist-util-is": "^2.1.2",
+    "unist-util-remove": "^1.0.0",
     "unist-util-visit": "^1.3.1",
     "url-loader": "^1.0.1",
     "webpack": "^4.7.0",

packages/docz-core/src/bundlers/webpack/config.ts

@@ -9,6 +9,8 @@ import HtmlWebpackPlugin from 'html-webpack-plugin'
 import friendlyErrors from 'friendly-errors-webpack-plugin'
 
 import { Config as ConfigObj } from '../../commands/args'
+import { plugin as mdastPlugin } from '../../utils/plugin-mdast'
+import { plugin as hastPlugin } from '../../utils/plugin-hast'
 
 const INLINE_LIMIT = 10000
 
@@ -131,8 +133,8 @@ export const createConfig = (args: ConfigObj) => (): Configuration => {
     .use('@mdx-js/loader')
     .loader(require.resolve('@mdx-js/loader'))
     .options({
-      mdPlugins: args.mdPlugins,
-      hastPlugins: args.hastPlugins,
+      mdPlugins: args.mdPlugins.concat([mdastPlugin]),
+      hastPlugins: args.hastPlugins.concat([hastPlugin]),
     })
 
   config.module

packages/docz-core/src/commands/dev.ts

@@ -7,7 +7,6 @@ import { Config } from './args'
 
 import { Entries } from '../Entries'
 import { webpack } from '../bundlers'
-import { playgroundHast } from '../hast/playground-plugin'
 
 process.env.BABEL_ENV = process.env.BABEL_ENV || 'development'
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
@@ -51,7 +50,7 @@ const INITIAL_CONFIG = {
   paths,
   plugins: [],
   mdPlugins: [],
-  hastPlugins: [playgroundHast],
+  hastPlugins: [],
 }
 
 export const dev = async (args: Config) => {

packages/docz-core/src/types.d.ts

@@ -6,6 +6,7 @@ declare module 'unified'
 declare module 'unist-util-is'
 declare module 'unist-util-visit'
 declare module 'unist-util-find'
+declare module 'unist-util-remove'
 declare module 'hast-util-to-string'
 declare module 'node-prismjs'
 declare module 'remark-parse'

packages/docz-core/src/utils/plugin-hast.ts

@@ -2,15 +2,17 @@ import visit from 'unist-util-visit'
 import prism from 'node-prismjs'
 import nodeToString from 'hast-util-to-string'
 
+import { format } from '../utils/format'
+
 const hasOpenTag = (node: any) => /^\<Playground/.test(node.value)
 
-export const playgroundHast = () => (tree: any, file: any) => {
+export const plugin = () => (tree: any, file: any) => {
   visit(tree, 'jsx', visitor)
 
   function visitor(node: any, idx: any, parent: any): void {
     if (!hasOpenTag(node)) return
 
-    const code = nodeToString(node)
+    const code = format(nodeToString(node)).slice(1, Infinity)
     const html = prism.highlight(code, prism.languages.jsx)
 
     const codeComponent = `(