feat(v2): add beforeDefaultRemarkPlugins/beforeDefaultRehypePlugins options to all md content plugins (#3467)

* fix(plugin-content-docs): add beforeDefaultRemarkPlugins + beforeDefaultRehypePlugins options

* fix(plugin-content-blog): add beforeDefaultRemarkPlugins + beforeDefaultRehypePlugins options

* fix(plugin-content-pages): add beforeDefaultRemarkPlugins + beforeDefaultRehypePlugins options

* feat(website-docs): overriding remark-rehype plugins

* fix(plugin-content): update beforeDefaultRehypePlugins/beforeDefaultRemarkPlugins types

* fix(plugin-content-docs): fix tests

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -343,7 +343,13 @@ export default function pluginContentBlog(
       isServer: boolean,
       {getBabelLoader, getCacheLoader}: ConfigureWebpackUtils,
     ) {
-      const {rehypePlugins, remarkPlugins, truncateMarker} = options;
+      const {
+        rehypePlugins,
+        remarkPlugins,
+        truncateMarker,
+        beforeDefaultRemarkPlugins,
+        beforeDefaultRehypePlugins,
+      } = options;
       return {
         resolve: {
           alias: {
@@ -363,6 +369,8 @@ export default function pluginContentBlog(
                   options: {
                     remarkPlugins,
                     rehypePlugins,
+                    beforeDefaultRemarkPlugins,
+                    beforeDefaultRehypePlugins,
                     staticDir: path.join(siteDir, STATIC_DIR_NAME),
                     // Note that metadataPath must be the same/in-sync as
                     // the path from createData for each MDX.

packages/docusaurus-plugin-content-blog/src/types.ts

@@ -31,6 +31,8 @@ export interface PluginOptions {
   blogTagsPostsComponent: string;
   blogDescription: string;
   remarkPlugins: ([Function, object] | Function)[];
+  beforeDefaultRehypePlugins: ([Function, object] | Function)[];
+  beforeDefaultRemarkPlugins: ([Function, object] | Function)[];
   rehypePlugins: string[];
   truncateMarker: RegExp;
   showReadingTime: boolean;

packages/docusaurus-plugin-content-docs/src/__tests__/options.test.ts

@@ -30,6 +30,8 @@ describe('normalizeDocsPluginOptions', () => {
       docItemComponent: '@theme/DocItem',
       remarkPlugins: [markdownPluginsObjectStub],
       rehypePlugins: [markdownPluginsFunctionStub],
+      beforeDefaultRehypePlugins: [],
+      beforeDefaultRemarkPlugins: [],
       showLastUpdateTime: true,
       showLastUpdateAuthor: true,
       admonitions: {},
@@ -55,6 +57,8 @@ describe('normalizeDocsPluginOptions', () => {
   test('should accept correctly defined remark and rehype plugin options', async () => {
     const userOptions = {
       ...DEFAULT_OPTIONS,
+      beforeDefaultRemarkPlugins: [],
+      beforeDefaultRehypePlugins: [markdownPluginsFunctionStub],
       remarkPlugins: [[markdownPluginsFunctionStub, {option1: '42'}]],
       rehypePlugins: [
         markdownPluginsObjectStub,

packages/docusaurus-plugin-content-docs/src/index.ts

@@ -295,7 +295,12 @@ export default function pluginContentDocs(
 
     configureWebpack(_config, isServer, utils) {
       const {getBabelLoader, getCacheLoader} = utils;
-      const {rehypePlugins, remarkPlugins} = options;
+      const {
+        rehypePlugins,
+        remarkPlugins,
+        beforeDefaultRehypePlugins,
+        beforeDefaultRemarkPlugins,
+      } = options;
 
       const docsMarkdownOptions: DocsMarkdownOption = {
         siteDir,
@@ -323,6 +328,8 @@ export default function pluginContentDocs(
               options: {
                 remarkPlugins,
                 rehypePlugins,
+                beforeDefaultRehypePlugins,
+                beforeDefaultRemarkPlugins,
                 staticDir: path.join(siteDir, STATIC_DIR_NAME),
                 metadataPath: (mdxPath: string) => {
                   // Note that metadataPath must be the same/in-sync as

packages/docusaurus-plugin-content-docs/src/options.ts

@@ -27,6 +27,8 @@ export const DEFAULT_OPTIONS: Omit<PluginOptions, 'id'> = {
   docItemComponent: '@theme/DocItem',
   remarkPlugins: [],
   rehypePlugins: [],
+  beforeDefaultRemarkPlugins: [],
+  beforeDefaultRehypePlugins: [],
   showLastUpdateTime: false,
   showLastUpdateAuthor: false,
   admonitions: {},
@@ -60,6 +62,12 @@ export const OptionsSchema = Joi.object({
   docItemComponent: Joi.string().default(DEFAULT_OPTIONS.docItemComponent),
   remarkPlugins: RemarkPluginsSchema.default(DEFAULT_OPTIONS.remarkPlugins),
   rehypePlugins: RehypePluginsSchema.default(DEFAULT_OPTIONS.rehypePlugins),
+  beforeDefaultRemarkPlugins: RemarkPluginsSchema.default(
+    DEFAULT_OPTIONS.beforeDefaultRemarkPlugins,
+  ),
+  beforeDefaultRehypePlugins: RehypePluginsSchema.default(
+    DEFAULT_OPTIONS.beforeDefaultRehypePlugins,
+  ),
   admonitions: AdmonitionsSchema.default(DEFAULT_OPTIONS.admonitions),
   showLastUpdateTime: Joi.bool().default(DEFAULT_OPTIONS.showLastUpdateTime),
   showLastUpdateAuthor: Joi.bool().default(

packages/docusaurus-plugin-content-docs/src/types.ts

@@ -59,6 +59,8 @@ export type PluginOptions = MetadataOptions &
     docItemComponent: string;
     remarkPlugins: ([Function, object] | Function)[];
     rehypePlugins: string[];
+    beforeDefaultRemarkPlugins: ([Function, object] | Function)[];
+    beforeDefaultRehypePlugins: ([Function, object] | Function)[];
     admonitions: any;
     disableVersioning: boolean;
     excludeNextVersionDocs?: boolean;

packages/docusaurus-plugin-content-pages/src/index.ts

@@ -161,7 +161,12 @@ export default function pluginContentPages(
       isServer: boolean,
       {getBabelLoader, getCacheLoader}: ConfigureWebpackUtils,
     ) {
-      const {rehypePlugins, remarkPlugins} = options;
+      const {
+        rehypePlugins,
+        remarkPlugins,
+        beforeDefaultRehypePlugins,
+        beforeDefaultRemarkPlugins,
+      } = options;
       return {
         resolve: {
           alias: {
@@ -181,6 +186,8 @@ export default function pluginContentPages(
                   options: {
                     remarkPlugins,
                     rehypePlugins,
+                    beforeDefaultRehypePlugins,
+                    beforeDefaultRemarkPlugins,
                     staticDir: path.join(siteDir, STATIC_DIR_NAME),
                     // Note that metadataPath must be the same/in-sync as
                     // the path from createData for each MDX.

packages/docusaurus-plugin-content-pages/src/pluginOptionSchema.ts

@@ -19,6 +19,8 @@ export const DEFAULT_OPTIONS: PluginOptions = {
   mdxPageComponent: '@theme/MDXPage',
   remarkPlugins: [],
   rehypePlugins: [],
+  beforeDefaultRehypePlugins: [],
+  beforeDefaultRemarkPlugins: [],
   admonitions: {},
   exclude: [
     '**/_*.{js,jsx,ts,tsx,md,mdx}',
@@ -35,5 +37,11 @@ export const PluginOptionSchema = Joi.object({
   mdxPageComponent: Joi.string().default(DEFAULT_OPTIONS.mdxPageComponent),
   remarkPlugins: RemarkPluginsSchema.default(DEFAULT_OPTIONS.remarkPlugins),
   rehypePlugins: RehypePluginsSchema.default(DEFAULT_OPTIONS.rehypePlugins),
+  beforeDefaultRehypePlugins: RehypePluginsSchema.default(
+    DEFAULT_OPTIONS.beforeDefaultRehypePlugins,
+  ),
+  beforeDefaultRemarkPlugins: RemarkPluginsSchema.default(
+    DEFAULT_OPTIONS.beforeDefaultRemarkPlugins,
+  ),
   admonitions: AdmonitionsSchema.default(DEFAULT_OPTIONS.admonitions),
 });

packages/docusaurus-plugin-content-pages/src/types.ts

@@ -14,6 +14,8 @@ export interface PluginOptions {
   mdxPageComponent: string;
   remarkPlugins: ([Function, object] | Function)[];
   rehypePlugins: string[];
+  beforeDefaultRemarkPlugins: ([Function, object] | Function)[];
+  beforeDefaultRehypePlugins: ([Function, object] | Function)[];
   admonitions: any;
 }
 

website/docs/using-plugins.md

@@ -424,6 +424,12 @@ module.exports = {
          */
         remarkPlugins: [],
         rehypePlugins: [],
+        /**
+         * Custom Remark and Rehype plugins passed to MDX before
+         * the default Docusaurus Remark and Rehype plugins.
+         */
+        beforeDefaultRemarkPlugins: [],
+        beforeDefaultRehypePlugins: [],
       },
     ],
   ],