fix(v2): use remark-admonitions separately in each plugin instead of in preset only (#2642)

* fix(v2): use remark-admonitions separately in each plugin instead of in preset only

* Update types.d.ts

* Update types.d.ts

* Address fixes from review

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

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

@@ -11,6 +11,7 @@ import pickBy from 'lodash.pickby';
 import globby from 'globby';
 import fs from 'fs-extra';
 import path from 'path';
+import admonitions from 'remark-admonitions';
 import {
   normalizeUrl,
   docuHash,
@@ -57,6 +58,7 @@ const DEFAULT_OPTIONS: PluginOptions = {
   rehypePlugins: [],
   showLastUpdateTime: false,
   showLastUpdateAuthor: false,
+  admonitions: {},
 };
 
 export default function pluginContentDocs(
@@ -64,6 +66,13 @@ export default function pluginContentDocs(
   opts: Partial<PluginOptions>,
 ): Plugin<LoadedContent | null> {
   const options = {...DEFAULT_OPTIONS, ...opts};
+
+  if (options.admonitions) {
+    options.remarkPlugins = options.remarkPlugins.concat([
+      [admonitions, options.admonitions],
+    ]);
+  }
+
   const {siteDir, generatedFilesDir, baseUrl} = context;
   const docsDir = path.resolve(siteDir, options.path);
   const sourceToPermalink: SourceToPermalink = {};
@@ -119,6 +128,16 @@ export default function pluginContentDocs(
       return [...globPattern, options.sidebarPath];
     },
 
+    getClientModules() {
+      const modules = [];
+
+      if (options.admonitions) {
+        modules.push('remark-admonitions/styles/infima.css');
+      }
+
+      return modules;
+    },
+
     // Fetches blog contents and returns metadata for the contents.
     async loadContent() {
       const {include, sidebarPath} = options;

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

@@ -21,8 +21,9 @@ export interface PluginOptions extends MetadataOptions, PathOptions {
   include: string[];
   docLayoutComponent: string;
   docItemComponent: string;
-  remarkPlugins: string[];
+  remarkPlugins: ([Function, object] | Function)[];
   rehypePlugins: string[];
+  admonitions: any;
 }
 
 export type SidebarItemDoc = {