Revert "feat($markdown): TOC component (close: #1275) (#1375)"

This reverts commit 760f90b.

packages/@vuepress/core/lib/client/app.js

@@ -16,7 +16,6 @@ import Content from './components/Content.js'
 import ContentSlotsDistributor from './components/ContentSlotsDistributor'
 import OutboundLink from './components/OutboundLink.vue'
 import ClientOnly from './components/ClientOnly'
-import TOC from './components/TOC.vue'
 
 // suggest dev server restart on base change
 if (module.hot) {
@@ -47,8 +46,6 @@ Vue.component('ClientOnly', ClientOnly)
 // core components
 Vue.component('Layout', getLayoutAsyncComponent('Layout'))
 Vue.component('NotFound', getLayoutAsyncComponent('NotFound'))
-// markdown components
-Vue.component('TOC', TOC)
 
 // global helper for adding base path to absolute urls
 Vue.prototype.$withBase = function (path) {

packages/@vuepress/markdown/index.js

@@ -15,11 +15,12 @@ const componentPlugin = require('./lib/component')
 const hoistScriptStylePlugin = require('./lib/hoist')
 const convertRouterLinkPlugin = require('./lib/link')
 const snippetPlugin = require('./lib/snippet')
-const tocPlugin = require('./lib/tableOfContents')
 const emojiPlugin = require('markdown-it-emoji')
 const anchorPlugin = require('markdown-it-anchor')
+const tocPlugin = require('markdown-it-table-of-contents')
 const {
   slugify: _slugify,
+  parseHeaders,
   logger, chalk, hash, normalizeConfig,
   moduleResolver: { getMarkdownItResolver }
 } = require('@vuepress/shared-utils')
@@ -94,7 +95,11 @@ module.exports = (markdown = {}) => {
       .end()
 
     .plugin(PLUGINS.TOC)
-      .use(tocPlugin, [toc])
+      .use(tocPlugin, [Object.assign({
+        slugify,
+        includeLevel: [2, 3],
+        format: parseHeaders
+      }, toc)])
       .end()
 
   if (lineNumbers) {

packages/@vuepress/markdown/package.json

@@ -25,6 +25,7 @@
     "markdown-it-anchor": "^5.0.2",
     "markdown-it-chain": "^1.3.0",
     "markdown-it-emoji": "^1.4.0",
+    "markdown-it-table-of-contents": "^0.4.0",
     "prismjs": "^1.13.0"
   },
   "devDependencies": {

packages/docs/docs/config/README.md

@@ -218,17 +218,9 @@ The key and value pair will be added to `<a>` tags that point to an external lin
 ### markdown.toc
 
 - Type: `Object`
+- Default: `{ includeLevel: [2, 3] }`
 
-This attribute will control the behaviour of `[[TOC]]`. It contains the following options:
-
-- includeLevel: [number, number], level of headers to be included, defaults to `[2, 3]`.
-- containerClass: string, the class name for the container, defaults to `table-of-contents`.
-- markerPattern: RegExp, the regular expression for the marker to be replaced with TOC, defaults to `/^\[\[toc\]\]/im`.
-- listType: string or Array, labels for all levels of the list, defaults to `"ul"`.
-- containerHeaderHtml: string, an HTML string for container header, defaults to `""`.
-- containerFooterHtml: string, an HTML string for container footer, defaults to `""`.
-
-We also provide a [global component TOC](../guide/using-vue.md#toc) which allows for more free control by passing props directly to `<TOC>`.
+Options for [markdown-it-table-of-contents](https://github.com/Oktavilla/markdown-it-table-of-contents). (Note: prefer `markdown.slugify` if you want to customize header ids.)
 
 ### markdown.plugins
 

packages/docs/docs/guide/markdown.md

@@ -105,21 +105,15 @@ A list of all emojis available can be found [here](https://github.com/markdown-i
 
 **Input**
 
-```md
-[[toc]]
 ```
-
-or
-
-```md
-<TOC/>
+[[toc]]
 ```
 
 **Output**
 
 [[toc]]
 
-Rendering of TOC can be configured using the [`markdown.toc`](../config/README.md#markdown-toc) option, or as props of [TOC component](./using-vue.md#toc), like `<TOC list-type="ol" :include-level="[2, Infinity]"/>`.
+Rendering of TOC can be configured using the [`markdown.toc`](../config/README.md#markdown-toc) option.
 
 ## Custom Containers <Badge text="default theme"/>
 

packages/docs/docs/guide/using-vue.md

@@ -224,27 +224,6 @@ Specify a specific slot for a specific page (.md) for rendering. This will be ve
 - [Markdown Slot](./markdown-slot.md)
 - [Writing a theme > Content Outlet](../theme/writing-a-theme.md#content-outlet)
 
-### TOC <Badge text="1.0.0-alpha.41+"/>
-
-- **Props**:
-  - `listType` - string or Array, defaults to `"ul"`
-  - `includeLevel` - [number, number], defaults to `[2, 3]`
-
-- **Slots**: `header`, `footer`
-
-- **Usage**:
-
-You can add a custom table of contents by specify some props to this component. `includeLevel` decides which level of headers should be included. `listType` decides the tags of lists. If specified as an array, the component will take the first element as the first-level list type and so on. If there are not enough values provided, the last value will be used for all the remaining list types.
-
-``` md
-<TOC :list-type="['ol', 'ul']">
-  <p slot="header"><strong>Custom Table of Contents</strong></p>
-</TOC>
-```
-
-<TOC :list-type="['ol', 'ul']">
-  <p slot="header"><strong>Custom Table of Contents</strong></p>
-</TOC>
 
 ### Badge <Badge text="beta" type="warn"/> <Badge text="0.10.1+"/> <Badge text="default theme"/>
 

packages/docs/docs/zh/config/README.md

@@ -209,17 +209,9 @@ VuePress 提供了一种添加额外样式的简便方法。你可以创建一
 ### markdown.toc
 
 - 类型: `Object`
+- 默认值: `{ includeLevel: [2, 3] }`
 
-这个值将会控制 `[[TOC]]` 默认行为。它包含下面的选项：
-
-- includeLevel: [number, number]，决定哪些级别的标题会被显示在目录中，默认值为 `[2, 3]`。
-- containerClass: string，决定了目录容器的类名，默认值为 `table-of-contents`。
-- markerPattern: RegExp，决定了标题匹配的正则表达式，默认值为 `/^\[\[toc\]\]/im`。
-- listType: string 或 Array，决定了各级列表的标签，默认值为 `"ul"`。
-- containerHeaderHtml: string，在目录开头插入的 HTML 字符串，默认值为 `""`。
-- containerFooterHtml: string，在目录结尾插入的 HTML 字符串，默认值为 `""`。
-
-此外，我们还提供了[全局组件 TOC](../guide/using-vue.md#toc)，可以通过直接向 `<TOC>` 传递属性实现更加自由的控制。
+[markdown-it-table-of-contents](https://github.com/Oktavilla/markdown-it-table-of-contents) 的选项。
 
 ### markdown.plugins
 

packages/docs/docs/zh/guide/markdown.md

@@ -103,21 +103,15 @@ lang: en-US
 
 **输入**
 
-```md
-[[toc]]
 ```
-
-或者
-
-```md
-<TOC/>
+[[toc]]
 ```
 
 **输出**
 
 [[toc]]
 
-目录（Table of Contents）的渲染可以通过  [`markdown.toc`](../config/README.md#markdown-toc) 选项来配置，也可以在 [TOC 组件](./using-vue.md#toc)中直接传入，如 `<TOC list-type="ol" :include-level="[2, Infinity]"/>`。
+目录（Table of Contents）的渲染可以通过  [`markdown.toc`](../config/README.md#markdown-toc) 选项来配置。
 
 ## 自定义容器 <Badge text="默认主题"/>
 

packages/docs/docs/zh/guide/using-vue.md

@@ -225,27 +225,6 @@ export default {
 - [Markdown 插槽](./markdown-slot.md)
 - [开发主题 > 获取渲染内容](../theme/writing-a-theme.md#获取渲染内容)
 
-### TOC <Badge text="1.0.0-alpha.41+"/>
-
-- **Props**:
-  - `listType` - string 或 Array, 默认值为 `"ul"`
-  - `includeLevel` - [number, number], 默认值为 `[2, 3]`
-
-- **Slots**: `header`, `footer`
-
-- **Usage**:
-
-你可以通过一些属性来实现一个自定义的目录。`includeLevel` 决定了哪些级别的标题会被显示在目录中。`listType` 决定了所有列表的标签。如果设置为了数组，组件将会使用第一个元素作为第一级列表的标签，以此类推。如果提供的标签不够多，将使用提供的最后一个值作为全部剩下的列表标签。
-
-``` md
-<TOC :list-type="['ol', 'ul']">
-  <p slot="header"><strong>自定义目录</strong></p>
-</TOC>
-```
-
-<TOC :list-type="['ol', 'ul']">
-  <p slot="header"><strong>自定义目录</strong></p>
-</TOC>
 
 ### Badge <Badge text="beta" type="warn"/> <Badge text="0.10.1+"/> <Badge text="默认主题"/>