feat(v2): inline table-of-contents + refactor TOC (#3904)

* Add TOCInline theme component

* Add TOCInline theme component doc + migration guide

* remove useless getPathsToWatch on classic theme

* rename rightToc to toc

* add temp theme-bootstrap TOCInline comp to fix build issue

packages/docusaurus-mdx-loader/src/index.js

@@ -12,13 +12,13 @@ const emoji = require('remark-emoji');
 const matter = require('gray-matter');
 const stringifyObject = require('stringify-object');
 const slug = require('./remark/slug');
-const rightToc = require('./remark/rightToc');
+const toc = require('./remark/toc');
 const transformImage = require('./remark/transformImage');
 const transformLinks = require('./remark/transformLinks');
 
 const DEFAULT_OPTIONS = {
   rehypePlugins: [],
-  remarkPlugins: [emoji, slug, rightToc],
+  remarkPlugins: [emoji, slug, toc],
 };
 
 module.exports = async function docusaurusMdxLoader(fileString) {

packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`inline code should be escaped 1`] = `
-"export const rightToc = [
+"export const toc = [
 	{
 		value: '<code>&lt;Head /&gt;</code>',
 		id: 'head-',
@@ -43,7 +43,7 @@ exports[`inline code should be escaped 1`] = `
 `;
 
 exports[`non text phrasing content 1`] = `
-"export const rightToc = [
+"export const toc = [
 	{
 		value: '<em>Emphasis</em>',
 		id: 'emphasis',

packages/docusaurus-mdx-loader/src/remark/toc/__tests__/fixtures/name-exist.md

@@ -1,4 +1,4 @@
-export const rightToc = ['replaceMe'];
+export const toc = ['replaceMe'];
 
 ## Thanos
 

packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.js

@@ -37,7 +37,7 @@ test('inline code should be escaped', async () => {
 test('text content', async () => {
   const result = await processFixture('just-content');
   expect(result).toMatchInlineSnapshot(`
-    "export const rightToc = [
+    "export const toc = [
     	{
     		value: 'Endi',
     		id: 'endi',
@@ -83,7 +83,7 @@ test('text content', async () => {
 test('should export even with existing name', async () => {
   const result = await processFixture('name-exist');
   expect(result).toMatchInlineSnapshot(`
-    "export const rightToc = [
+    "export const toc = [
     	{
     		value: 'Thanos',
     		id: 'thanos',
@@ -167,7 +167,7 @@ test('should insert below imports', async () => {
 
     import somethingElse from 'something-else';
 
-    export const rightToc = [
+    export const toc = [
     	{
     		value: 'Title',
     		id: 'title',
@@ -200,7 +200,7 @@ test('should insert below imports', async () => {
 test('empty headings', async () => {
   const result = await processFixture('empty-headings');
   expect(result).toMatchInlineSnapshot(`
-    "export const rightToc = [];
+    "export const toc = [];
 
     # Ignore this
 

packages/docusaurus-mdx-loader/src/remark/toc/index.js

@@ -59,7 +59,7 @@ const getOrCreateExistingTargetIndex = (children, name) => {
 };
 
 const plugin = (options = {}) => {
-  const name = options.name || 'rightToc';
+  const name = options.name || 'toc';
 
   const transformer = (node) => {
     const headings = search(node);

packages/docusaurus-mdx-loader/src/remark/toc/search.js

@@ -11,7 +11,7 @@ const toString = require('mdast-util-to-string');
 const visit = require('unist-util-visit');
 const {toValue} = require('../utils');
 
-/** @typedef {import('@docusaurus/types').MarkdownRightTableOfContents} TOC */
+/** @typedef {import('@docusaurus/types').TOCItem} TOC */
 /** @typedef {import('unist').Node} Node */
 
 /**