fix: copy code buttons in markdown blocks (#1262)

* fix: adding a test spec to debug copy code buttons missing

* fix: pasing the copyButtons prop everywhere it needs to go

* fix: cleaning up some copybuttons work

example/src/Demo.jsx

@@ -98,6 +98,8 @@ class Demo extends React.Component {
       // baseUrl: '/child/v1.0',
       baseUrl: '/',
 
+      copyButtons: true,
+
       // To test the top level error boundary, uncomment this
       // docs: [null, null],
       docs,

example/swagger-files/manual-api-doc-only.json

@@ -0,0 +1,45 @@
+{
+  "readmeManual": true,
+  "docs": [
+    {
+      "_id": "5c2e346b-50f9-4192-9e97-88e3155b24e4",
+      "metadata": {
+        "image": [],
+        "title": "",
+        "description": ""
+      },
+      "api": {
+        "method": "get",
+        "url": "",
+        "auth": "required",
+        "params": []
+      },
+      "next": {
+        "description": "",
+        "pages": []
+      },
+      "title": "Getting Started With Your API",
+      "updates": [],
+      "type": "basic",
+      "slug": "getting-started-with-your-api-1",
+      "excerpt": "This page will help you get started with FUn API.",
+      "body": "This is where you show your users how to set it up. You can use code samples, like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$http.post('/someUrl', data).success(successCallback);\\n\\nalert('test');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nTry dragging a block from the right to see how easy it is to add more content!",
+      "order": 999,
+      "isReference": true,
+      "hidden": false,
+      "sync_unique": "",
+      "link_url": "",
+      "link_external": false,
+      "pendingAlgoliaPublish": false,
+      "previousSlug": "",
+      "slugUpdatedAt": "2021-04-29T21:05:51.244Z",
+      "createdAt": "2021-04-29T21:42:53.568Z",
+      "updatedAt": "2021-04-29T21:42:53.568Z",
+      "__v": 0,
+      "children": [],
+      "childrenPages": []
+    }
+  ],
+  "oasFiles": {},
+  "oasUrls": {}
+}

packages/api-explorer/src/Doc.jsx

@@ -315,6 +315,7 @@ class Doc extends React.Component {
 
         <Content
           body={doc.body}
+          copyButtons={true}
           flags={this.props.flags}
           isThreeColumn
           splitReferenceDocs={this.props.appearance.splitReferenceDocs}
@@ -342,6 +343,7 @@ class Doc extends React.Component {
 
               <Content
                 body={doc.body}
+                copyButtons={true}
                 flags={this.props.flags}
                 isThreeColumn="left"
                 splitReferenceDocs={this.props.appearance.splitReferenceDocs}
@@ -511,7 +513,7 @@ class Doc extends React.Component {
   }
 
   render() {
-    const { doc, copyButtons, lazy, oas, useNewMarkdownEngine } = this.props;
+    const { doc, lazy, oas, useNewMarkdownEngine } = this.props;
     const { TutorialTile } = this.props.ui.tutorials;
 
     const renderEndpoint = () => {
@@ -545,7 +547,7 @@ class Doc extends React.Component {
               <h2>{doc.title}</h2>
               {doc.excerpt && (
                 <div className="markdown-body excerpt">
-                  {useNewMarkdownEngine ? markdown(doc.excerpt, { copyButtons }) : markdownMagic(doc.excerpt)}
+                  {useNewMarkdownEngine ? markdown(doc.excerpt, { copyButtons: true }) : markdownMagic(doc.excerpt)}
                 </div>
               )}
             </header>
@@ -578,7 +580,6 @@ Doc.propTypes = {
   }),
   auth: PropTypes.shape({}).isRequired,
   baseUrl: PropTypes.string,
-  copyButtons: PropTypes.bool,
   doc: PropTypes.shape({
     api: PropTypes.shape({
       examples: PropTypes.shape({
@@ -652,7 +653,6 @@ Doc.defaultProps = {
     splitReferenceDocs: false,
   },
   baseUrl: '/',
-  copyButtons: true,
   enableRequestBodyJsonEditor: false,
   flags: {
     correctnewlines: false,