fix: enable code copy buttons (#1258)

| [☁️   CI App][demo] | Fix CX-281 | | --- | --- | ## 🧰 What's being changed? Enables the copy button on pinned code blocks. ## 🧬 Testing You should be able to see and use the copy buttons on code blocks. [demo]: https://explorer-pr-1258.herokuapp.com/?selected=swagger-files%2Fexcerpt-markdown.json
readmeio · Apr 27, 2021 · a4414ee · a4414ee
1 parent 6109383
commit a4414ee
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 4 deletions.
diff --git a/example/swagger-files/excerpt-markdown.json b/example/swagger-files/excerpt-markdown.json
@@ -53,6 +53,105 @@
           }
         }
       }
+    },
+     "/rightside/codeblocks": {
+      "get": {
+        "summary": "Displaying copy button",
+        "description": "`const options = { copyButtons: false };`\n```javascript\nconst options = { copyButtons: true }\n```",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json;charset=UTF-8": {
+                "schema": {
+                  "$ref": "#/components/schemas/extendedAttribute"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "extendedAttribute": {
+        "type": "object",
+        "required": [
+          "value"
+        ],
+        "properties": {
+          "createdOn": {
+            "type": "string",
+            "format": "date",
+            "description": "yyyy-MM-dd'T'HH:mm:ss.SSSZ. Generated and managed by the service. `Read-only`"
+          },
+          "lastModifiedOn": {
+            "type": "string",
+            "format": "date",
+            "description": "yyyy-MM-dd'T'HH:mm:ss.SSSZ. Generated and managed by the service. `Read-only`"
+          },
+          "application": {
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/link"
+              }
+            ]
+          },
+          "value": {
+            "type": "string"
+          }
+        }
+      },
+      "linkBase": {
+        "type": "object",
+        "required": [
+          "href",
+          "rel"
+        ],
+        "properties": {
+          "href": {
+            "type": "string",
+            "description": "The URI of the resource this `Link` represents."
+          },
+          "rel": {
+            "type": "string",
+            "description": "Relation to the resource represented by the `Link`,"
+          },
+          "status": {
+            "type": "string",
+            "description": "Status of the resource represented by this Link.",
+            "readOnly": true,
+            "enum": [
+              "Enabled",
+              "Disabled",
+              "Suspended",
+              "Deleted"
+            ]
+          },
+          "title": {
+            "type": "string",
+            "description": "Some descriptive text about the Link. Generally name of the resource represented by this Link.",
+            "readOnly": true
+          }
+        }
+      },
+      "link": {
+        "type": "object",
+        "allOf": [
+          {
+            "$ref": "#/components/schemas/linkBase"
+          },
+          {
+            "type": "object",
+            "properties": {
+              "source": {
+                "$ref": "#/components/schemas/linkBase"
+              }
+            }
+          }
+        ]
+      }
     }
   }
 }
diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx
@@ -511,7 +511,7 @@ class Doc extends React.Component {
   }
 
   render() {
-    const { doc, lazy, oas, useNewMarkdownEngine } = this.props;
+    const { doc, copyButtons, lazy, oas, useNewMarkdownEngine } = this.props;
     const { TutorialTile } = this.props.ui.tutorials;
 
     const renderEndpoint = () => {
@@ -545,7 +545,7 @@ class Doc extends React.Component {
               <h2>{doc.title}</h2>
               {doc.excerpt && (
                 <div className="markdown-body excerpt">
-                  {useNewMarkdownEngine ? markdown(doc.excerpt, { copyButtons: false }) : markdownMagic(doc.excerpt)}
+                  {useNewMarkdownEngine ? markdown(doc.excerpt, { copyButtons }) : markdownMagic(doc.excerpt)}
                 </div>
               )}
             </header>
@@ -578,6 +578,7 @@ Doc.propTypes = {
   }),
   auth: PropTypes.shape({}).isRequired,
   baseUrl: PropTypes.string,
+  copyButtons: PropTypes.bool,
   doc: PropTypes.shape({
     api: PropTypes.shape({
       examples: PropTypes.shape({
@@ -651,6 +652,7 @@ Doc.defaultProps = {
     splitReferenceDocs: false,
   },
   baseUrl: '/',
+  copyButtons: true,
   enableRequestBodyJsonEditor: false,
   flags: {
     correctnewlines: false,

diff --git a/packages/api-explorer/src/block-types/Content.jsx b/packages/api-explorer/src/block-types/Content.jsx
@@ -43,12 +43,12 @@ const Loop = ({ content, column, flags, splitReferenceDocs }) => {
 };
 
 const Content = props => {
-  const { body, flags, isThreeColumn, splitReferenceDocs, useNewMarkdownEngine } = props;
+  const { body, copyButtons, flags, isThreeColumn, splitReferenceDocs, useNewMarkdownEngine } = props;
 
   if (useNewMarkdownEngine) {
     const content = markdown(body, {
       compatibilityMode: flags.rdmdCompatibilityMode,
-      copyButtons: false,
+      copyButtons,
       showAnchorIcons: splitReferenceDocs,
     });
 
@@ -128,6 +128,7 @@ Loop.defaultProps = {
 
 Content.propTypes = {
   body: PropTypes.string,
+  copyButtons: PropTypes.bool,
   flags: PropTypes.shape(),
   isThreeColumn: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   splitReferenceDocs: PropTypes.bool,