feat: Add some markdow config

packages/@vuepress/vue-cli-plugin-vuepress/ui/config/defaultThemeConfig/searchBox.js

@@ -1,6 +1,8 @@
 
 const get = require('lodash/get')
 
+const { isNumber } = require('../validators')
+
 const GROUP_NAME = 'Search box'
 
 module.exports = data => ([
@@ -22,7 +24,9 @@ module.exports = data => ([
     link: 'https://vuepress.vuejs.org/theme/default-theme-config.html#built-in-search',
     group: GROUP_NAME,
     value: get(data, 'config.themeConfig.searchMaxSuggestions'),
-    default: '5'
+    default: '5',
+    validate: isNumber,
+    transform: Number
   },
   {
     name: 'themeConfig.searchPlaceholder',

packages/@vuepress/vue-cli-plugin-vuepress/ui/config/generalConfig/basic.js

@@ -1,4 +1,4 @@
-const { required } = require('../validators')
+const { required, isNumber } = require('../validators')
 
 const GROUP_NAME = 'Basic settings'
 
@@ -51,7 +51,9 @@ module.exports = data => ([
     link: 'https://vuepress.vuejs.org/config/#port',
     group: GROUP_NAME,
     value: data.config.port,
-    default: '8080'
+    default: '8080',
+    validate: isNumber,
+    transform: Number
   },
   {
     name: 'temp',

packages/@vuepress/vue-cli-plugin-vuepress/ui/config/generalConfig/index.js

@@ -1,9 +1,7 @@
 const flattenDeep = require('lodash/flattenDeep')
 
 const basic = require('./basic')
-const markdown = require('./markdown')
 
 module.exports = data => flattenDeep([
-  basic(data),
-  markdown(data)
+  basic(data)
 ])

packages/@vuepress/vue-cli-plugin-vuepress/ui/config/generalConfig/markdown.js

@@ -1,16 +0,0 @@
-const get = require('lodash/get')
-
-const GROUP_NAME = 'Markdown settings'
-
-module.exports = data => ([
-  {
-    name: 'markdown.lineNumbers',
-    type: 'confirm',
-    message: 'Display line numbers',
-    description: 'Whether to show line numbers to the left of each code blocks.',
-    link: 'https://vuepress.vuejs.org/config/#markdown-linenumbers',
-    group: GROUP_NAME,
-    value: get(data, 'config.markdown.lineNumbers'),
-    default: undefined
-  }
-])

packages/@vuepress/vue-cli-plugin-vuepress/ui/config/markdownConfig/index.js

@@ -0,0 +1,32 @@
+const get = require('lodash/get')
+
+const { isJSON } = require('../validators')
+
+const GROUP_NAME = 'Markdown settings'
+
+module.exports = data => ([
+  {
+    name: 'markdown.lineNumbers',
+    type: 'confirm',
+    message: 'Display line numbers for code blocks',
+    description: 'Whether to show line numbers to the left of each code blocks.',
+    link: 'https://vuepress.vuejs.org/config/#markdown-linenumbers',
+    group: GROUP_NAME,
+    value: get(data, 'config.markdown.lineNumbers'),
+    default: undefined
+  },
+  {
+    name: 'markdown.toc',
+    type: 'editor',
+    message: 'Table of contents options',
+    description: 'Options for markdown-it-table-of-contents (Note: prefer markdown.slugify to customize header ids).',
+    link: 'https://vuepress.vuejs.org/config/#markdown-toc',
+    group: GROUP_NAME,
+    value: get(data, 'config.markdown.toc'),
+    validate: isJSON,
+    transform: JSON.parse,
+    default: `{
+  "includeLevel": [2, 3]
+}`
+  }
+])

packages/@vuepress/vue-cli-plugin-vuepress/ui/config/read.js

@@ -1,23 +1,46 @@
 const generalConfig = require('./generalConfig')
 const defaultThemeConfig = require('./defaultThemeConfig')
+const markdownConfig = require('./markdownConfig')
 
-module.exports = ({ data }) => ({
-  tabs: [
+module.exports = ({ data }) => {
+  const tabs = [
     {
       id: 'generalConfig',
-      label: 'General settings',
+      label: 'General',
       icon: 'settings_applications',
-      prompts: [
-        generalConfig
-      ].flatMap(getConfig => getConfig(data))
+      prompts: [generalConfig]
+    },
+    {
+      id: 'markdownConfig',
+      label: 'Markdown',
+      icon: 'edit',
+      prompts: [markdownConfig]
     },
     {
       id: 'defaultThemeConfig',
-      label: 'Theme settings',
+      label: 'Theme',
       icon: 'palette',
-      prompts: [
-        defaultThemeConfig
-      ].flatMap(getConfig => getConfig(data))
+      prompts: [defaultThemeConfig]
     }
   ]
-})
+
+  const OBJECT_PROPERTIES = [
+    'config.markdown.toc'
+  ]
+
+  // When vue UI read the data source, we need to stringify object properties
+  // so it can be properly displayed in vue UI inputs
+  const getConfigData = getConfig => {
+    OBJECT_PROPERTIES.forEach(prop => {
+      data[prop] = JSON.stringify(data[prop])
+    })
+
+    return getConfig(data)
+  }
+
+  tabs.forEach(tab => {
+    tab.prompts = tab.prompts.flatMap(getConfigData)
+  })
+
+  return { tabs }
+}

packages/@vuepress/vue-cli-plugin-vuepress/ui/config/validators.js

@@ -1,5 +1,18 @@
 const required = input => !!input
 
+const isJSON = input => {
+  try {
+    JSON.parse(input)
+    return true
+  } catch (e) {
+    return 'This input must be a valid JSON object'
+  }
+}
+
+const isNumber = input => !isNaN(input) || 'This input must be a number'
+
 module.exports = {
-  required
+  required,
+  isJSON,
+  isNumber
 }

packages/@vuepress/vue-cli-plugin-vuepress/ui/config/write.js

@@ -6,29 +6,14 @@ module.exports = async ({ api, prompts }) => {
   result['themeConfig.nav'] = []
 
   for (const prompt of prompts) {
-    result[prompt.id] = await api.getAnswer(prompt.id)
+    if (!prompt.error) {
+      result[prompt.id] = await api.getAnswer(prompt.id, prompt.raw.transform)
+    }
   }
 
   if (get(result, 'themeConfig.sidebar')) {
     result['themeConfig.sidebar'] = 'auto'
   }
 
-  convertNumberProps(result)
-
   api.setData('config', result)
 }
-
-const NUMBER_PROPERTIES = [
-  'port',
-  'themeConfig.searchMaxSuggestions'
-]
-
-function convertNumberProps (result) {
-  NUMBER_PROPERTIES.forEach(prop => {
-    result[prop] = Number(result[prop])
-
-    if (isNaN(result[prop])) {
-      result[prop] = undefined
-    }
-  })
-}