Fix copy actions

Author: jschuler

packages/dev/src/quickstarts-data/yaml/template.yaml

@@ -67,15 +67,30 @@ spec:
         The syntax for an inline code snippet contains:
         - Text between back quotes, followed by `{{copy}}`
 
+        #### Example 1
+
         The following text demonstates an inline-copy element `https://github.com/sclorg/ruby-ex.git`{{copy}}
 
+        #### Example 2
+
+        And another one `https://patternfly.org`{{copy}} here!
+
         The syntax for multi-line code snippets:
         - Text between triple back quotes, followed by `{{copy}}`
 
+        #### Example 1
+
         ```
         oc new-app ruby~https://github.com/sclorg/ruby-ex.git
         echo "Expose route using oc expose svc/ruby-ex"
         oc expose svc/ruby-ex
+        ```{{copy}}
+
+        #### Example 2
+
+        ```
+        Hello
+        world
         ```{{copy}}  
 
         - Clicking the _Next_ button will display the **Check your work** module.

packages/module/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -21,15 +21,15 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
     const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
     return (docContext.querySelector(
       `${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`,
-    ) as HTMLElement).innerText;
+    ) as HTMLElement)?.innerText;
   }, [element, docContext, rootSelector]);
 
   useEventListener(
     element,
     'click',
     React.useCallback(() => {
       navigator.clipboard
-        .writeText(textToCopy)
+        .writeText(textToCopy.trim())
         .then(() => {
           setShowSuccessContent(true);
         })

packages/module/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -11,25 +11,19 @@ const useInlineCopyClipboardShowdownExtension = () => {
   return React.useMemo(
     () => ({
       type: 'lang',
-      regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
-      replace: (
-        text: string,
-        group: string,
-        subGroup: string,
-        groupType: string,
-        groupId: string,
-      ): string => {
-        if (!group || !subGroup || !groupType || !groupId) {
+      regex: /`([^`](.*?)[^`])`{{copy}}/g,
+      replace: (text: string, group: string, _: string, groupId: number): string => {
+        if (!group || isNaN(groupId)) {
           return text;
         }
         return removeTemplateWhitespace(
           `<span class="pf-c-clipboard-copy pf-m-inline">
-              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</span>
+              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
               <span class="pf-c-clipboard-copy__actions">
                 <span class="pf-c-clipboard-copy__actions-item">
                   <button class="pf-c-button pf-m-plain" aria-label="${getResource(
                     'Copy to clipboard',
-                  )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                  )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                     ${renderToStaticMarkup(<CopyIcon />)}
                   </button>
                 </span>

packages/module/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -11,15 +11,9 @@ const useMultilineCopyClipboardShowdownExtension = () => {
   return React.useMemo(
     () => ({
       type: 'lang',
-      regex: /```[\n]((.*?\n)+)```{{copy}}/g,
-      replace: (
-        text: string,
-        group: string,
-        subgroup: string,
-        groupType: string,
-        groupId: string,
-      ): string => {
-        if (!group || !subgroup || !groupType || !groupId) {
+      regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
+      replace: (text: string, group: string, _1: string, _2: string, groupId: number): string => {
+        if (!group || isNaN(groupId)) {
           return text;
         }
         return `<div class="pf-c-code-block">
@@ -28,7 +22,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                   <div class="pf-c-code-block__actions-item">
                     <button class="pf-c-button pf-m-plain" type="button" aria-label="${getResource(
                       'Copy to clipboard',
-                    )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                    )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                       ${renderToStaticMarkup(<CopyIcon />)}
                     </button>
                   </div>
@@ -37,7 +31,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
               <div class="pf-c-code-block__content">
                 <pre class="pf-c-code-block__pre pfext-code-block__pre">
                   <code class="pf-c-code-block__code" 
-                    ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</code>
+                    ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
                 </pre>
               </div>
             </div>`;