Merge pull request #7506 from weseek/imprv/toc-placeholder

imprv: ToC placeholder

packages/app/package.json

@@ -181,6 +181,7 @@
     "remark-emoji": "^3.0.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
+    "remark-toc": "^8.0.1",
     "remark-wiki-link": "^1.0.4",
     "socket.io": "^4.2.0",
     "stream-to-promise": "^3.0.0",

packages/app/resource/locales/en_US/sandbox.md

@@ -1,16 +1,13 @@
-<div class="card">
-  <div class="card-body">
+# :memo: Table of Contents
 
-# Table of Contents
+Add `ToC` after some `#` signs.
+`Table of Contents` or `Table-of-Contents` is also OK.
 
 ```
-@[toc]
+# ToC
 ```
 
-@[toc]
-
-  </div>
-</div>
+## ToC
 
 # :memo: Block Elements
 

packages/app/resource/locales/ja_JP/sandbox.md

@@ -1,16 +1,13 @@
-<div class="card">
-  <div class="card-body">
+# :memo: 目次
 
-# 目次
+いくつかの `#` 記号に続けて `ToC` という文字列を記述します。  
+`Table of Contents` または `Table-of-Contents` でも構いません。
 
 ```
-@[toc]
+# ToC
 ```
 
-@[toc]
-
-  </div>
-</div>
+## ToC
 
 # :memo: Block Elements
 

packages/app/resource/locales/zh_CN/sandbox.md

@@ -1,16 +1,13 @@
-<div class="card">
-  <div class="card-body">
+# :memo: Table of Contents
 
-# Table of Contents
+Add `ToC` after some `#` signs.
+`Table of Contents` or `Table-of-Contents` is also OK.
 
 ```
-@[toc]
+# ToC
 ```
 
-@[toc]
-
-  </div>
-</div>
+## ToC
 
 # :memo: Block Elements
 

packages/app/src/services/renderer/renderer.tsx

@@ -19,6 +19,7 @@ import breaks from 'remark-breaks';
 import emoji from 'remark-emoji';
 import gfm from 'remark-gfm';
 import math from 'remark-math';
+import toc from 'remark-toc';
 import deepmerge from 'ts-deepmerge';
 import type { PluggableList, Pluggable, PluginTuple } from 'unified';
 
@@ -38,10 +39,9 @@ import * as addLineNumberAttribute from './rehype-plugins/add-line-number-attrib
 import * as keywordHighlighter from './rehype-plugins/keyword-highlighter';
 import { relativeLinks } from './rehype-plugins/relative-links';
 import { relativeLinksByPukiwikiLikeLinker } from './rehype-plugins/relative-links-by-pukiwiki-like-linker';
-import * as toc from './rehype-plugins/relocate-toc';
+import * as relocateToc from './rehype-plugins/relocate-toc';
 import * as plantuml from './remark-plugins/plantuml';
 import { pukiwikiLikeLinker } from './remark-plugins/pukiwiki-like-linker';
-import * as table from './remark-plugins/table';
 import * as xsvToTable from './remark-plugins/xsv-to-table';
 
 // import EasyGrid from './PreProcessor/EasyGrid';
@@ -124,6 +124,7 @@ const verifySanitizePlugin = (options: RendererOptions, shouldBeTheLastItem = tr
 const generateCommonOptions = (pagePath: string|undefined): RendererOptions => {
   return {
     remarkPlugins: [
+      [toc, { maxDepth: 3, tight: true, prefix: 'mdcont-' }],
       gfm,
       emoji,
       pukiwikiLikeLinker,
@@ -188,7 +189,7 @@ export const generateViewOptions = (
     [lsxGrowiPlugin.rehypePlugin, { pagePath, isSharedPage: config.isSharedPage }],
     rehypeSanitizePlugin,
     katex,
-    [toc.rehypePluginStore, { storeTocNode }],
+    [relocateToc.rehypePluginStore, { storeTocNode }],
   );
 
   // add components
@@ -232,7 +233,7 @@ export const generateTocOptions = (config: RendererConfig, tocNode: HtmlElementN
 
   // add rehype plugins
   rehypePlugins.push(
-    [toc.rehypePluginRestore, { tocNode }],
+    [relocateToc.rehypePluginRestore, { tocNode }],
     rehypeSanitizePlugin,
   );
 

packages/remark-growi-directive/package.json

@@ -48,10 +48,7 @@
     "is-hidden": "^2.0.0",
     "mdast-util-from-markdown": "^1.0.0",
     "micromark": "^3.0.0",
-    "micromark-build": "^1.0.0",
     "remark": "^14.0.0",
-    "remark-cli": "^10.0.0",
-    "remark-preset-wooorm": "^9.0.0",
     "rimraf": "^3.0.0",
     "tape": "^5.0.0",
     "to-vfile": "^7.0.0",