feat(v2): add support for sync to npm2yarn tabs (#3705)

packages/docusaurus-remark-plugin-npm2yarn/README.md

@@ -34,15 +34,15 @@ module.exports = {
       {
         docs: {
           // ...
-          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+          remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}]],
         },
         blog: {
           // ...
-          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+          remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}]],
         },
         pages: {
           // ...
-          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+          remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}]],
         },
         // ...
       },
@@ -51,3 +51,9 @@ module.exports = {
   // ...
 };
 ```
+
+## Options
+
+| Property | Type      | Default | Description                                                                                                               |
+|----------|-----------|---------|---------------------------------------------------------------------------------------------------------------------------|
+| `sync`   | `boolean` | `false` | Syncing tab choices (yarn and npm). See https://v2.docusaurus.io/docs/markdown-features/#syncing-tab-choices for details. |

packages/docusaurus-remark-plugin-npm2yarn/src/index.js

@@ -10,14 +10,15 @@ const npmToYarn = require('npm-to-yarn');
 // E.g. global install: 'npm i' -> 'yarn'
 const convertNpmToYarn = (npmCode) => npmToYarn(npmCode, 'yarn');
 
-const transformNode = (node) => {
+const transformNode = (node, isSync) => {
+  const groupIdProp = isSync ? 'groupId="npm2yarn" ' : '';
   const npmCode = node.value;
   const yarnCode = convertNpmToYarn(node.value);
   return [
     {
       type: 'jsx',
       value:
-        `<Tabs defaultValue="npm" ` +
+        `<Tabs defaultValue="npm" ${groupIdProp}` +
         `values={[
     { label: 'npm', value: 'npm', },
     { label: 'Yarn', value: 'yarn', },
@@ -53,12 +54,13 @@ const nodeForImport = {
     "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';",
 };
 
-module.exports = () => {
+module.exports = (options = {}) => {
+  const {sync = false} = options;
   let transformed = false;
   const transformer = (node) => {
     if (matchNode(node)) {
       transformed = true;
-      return transformNode(node);
+      return transformNode(node, sync);
     }
     if (Array.isArray(node.children)) {
       let index = 0;

website/docusaurus.config.js

@@ -194,7 +194,9 @@ module.exports = {
             'https://github.com/facebook/docusaurus/edit/master/website/',
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
-          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+          remarkPlugins: [
+            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
+          ],
           disableVersioning: isVersioningDisabled,
           lastVersion: 'current',
           onlyIncludeVersions: