Add code block copy button (#5334)

* Add code block copy button * Add tests and accessibility * Add snapshots * Add entry * Simpler tag name * Revert name * Move snapshot to local * Add Adaptive Cards test * Use pre-wrap * Change button to square * Fix tests * Move props to HTML attributes * Add test * Longer text * Move class outside * Add observed attributes * Cache observedAttributes * Change attribute name to "class" from "className" * Anonymous class * Add static * Add margin before button * Use inline-end * Use right * Fix tests * Fix screenshots * Fix screenshots * FIx screenshots * Fix screenshots * Fix tests * Update icon * Update icon * Simplify * Generalize custom element registration * Create React wrapper for custom element * No root element
microsoft · Oct 26, 2024 · f1d7b19 · f1d7b19
1 parent 558a7d6
commit f1d7b19
Show file tree

Hide file tree

Showing 62 changed files with 1,254 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -62,6 +62,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  (Experimental) Added more CSS variables support, in PR [#5321](https://github.com/microsoft/BotFramework-WebChat/pull/5321), by [@compulim](https://github.com/compulim)
 -  Added MathML/TeX block support in Markdown via [`micromark-extension-math`](https://npmjs.com/package/micromark-extension-math) and [`katex`](https://katex.org/), in PR [#5332](https://github.com/microsoft/BotFramework-WebChat/pull/5332), by [@compulim](https://github.com/compulim)
 -  Added code viewer dialog with syntax highlighting, in PR [#5335](https://github.com/microsoft/BotFramework-WebChat/pull/5335), by [@OEvgeny](https://github.com/OEvgeny)
+-  Added copy button to code blocks, in PR [#5334](https://github.com/microsoft/BotFramework-WebChat/pull/5334), by [@compulim](https://github.com/compulim)
 
 ### Changed
 

diff --git a/...ive-cards-js-inputs-card-with-custom-style-options-and-submit-action-1-snap.png b/...ive-cards-js-inputs-card-with-custom-style-options-and-submit-action-1-snap.png
diff --git a/...s-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png b/...s-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png
diff --git a/...s-js-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png b/...s-js-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png
diff --git a/...ions-js-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png b/...ions-js-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png
diff --git a/...ack-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png b/...ack-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png
diff --git a/...post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png b/...post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png
diff --git a/...-accessibility-requirement-disabling-adaptive-card-with-inputs-field-3-snap.png b/...-accessibility-requirement-disabling-adaptive-card-with-inputs-field-3-snap.png
diff --git a/...-actions-shown-should-stick-to-bottom-if-submitting-an-adaptive-card-1-snap.png b/...-actions-shown-should-stick-to-bottom-if-submitting-an-adaptive-card-1-snap.png
diff --git a/...operties-with-no-locale-is-sent-should-get-hello-and-welcome-message-1-snap.png b/...operties-with-no-locale-is-sent-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...properties-with-locale-of-en-us-should-get-hello-and-welcome-message-1-snap.png b/...properties-with-locale-of-en-us-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...ies-with-locale-of-invalid-type-should-get-hello-and-welcome-message-1-snap.png b/...ies-with-locale-of-invalid-type-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...erties-with-non-existing-locale-should-get-hello-and-welcome-message-1-snap.png b/...erties-with-non-existing-locale-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...ties-with-non-iso-format-locale-should-get-hello-and-welcome-message-1-snap.png b/...ties-with-non-iso-format-locale-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...h-locale-of-zh-cn-should-get-hello-and-welcome-in-simplified-chinese-1-snap.png b/...h-locale-of-zh-cn-should-get-hello-and-welcome-in-simplified-chinese-1-snap.png
diff --git a/...rd-actions-js-hero-card-actions-message-back-display-text-text-value-1-snap.png b/...rd-actions-js-hero-card-actions-message-back-display-text-text-value-1-snap.png
diff --git a/...ots__/html/hero-card-actions-js-hero-card-actions-message-back-value-1-snap.png b/...ots__/html/hero-card-actions-js-hero-card-actions-message-back-value-1-snap.png
diff --git a/...apshots__/html/hero-card-actions-js-hero-card-actions-post-back-json-1-snap.png b/...apshots__/html/hero-card-actions-js-hero-card-actions-post-back-json-1-snap.png
diff --git a/...tton-tab-order-js-scroll-to-end-button-should-have-correct-tab-order-1-snap.png b/...tton-tab-order-js-scroll-to-end-button-should-have-correct-tab-order-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-43-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-43-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-44-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-44-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-46-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-46-1-snap.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html b/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat" style="position: relative"></main>
+    <script type="text/babel">
+      run(async function () {
+        await host.sendDevToolsCommand('Browser.setPermission', {
+          permission: { name: 'clipboard-write' },
+          setting: 'granted'
+        });
+
+        await expect(navigator.permissions.query({ name: 'clipboard-write' })).resolves.toHaveProperty(
+          'state',
+          'granted'
+        );
+
+        const {
+          ReactDOM: { render },
+          WebChat: { ReactWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => (
+          <React.Fragment>
+            <ReactWebChat directLine={directLine} store={store} />
+            <div style={{ gap: 8, position: 'absolute', top: 0, width: '100%' }}>
+              <label>
+                <div>Paste box</div>
+                <textarea
+                  data-testid="paste box"
+                  spellCheck={false}
+                  style={{ background: '#f0f0f0', border: 0, height: 100, padding: 0, resize: 'none', width: '100%' }}
+                />
+              </label>
+            </div>
+          </React.Fragment>
+        );
+
+        render(<App />, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              content: {
+                type: 'AdaptiveCard',
+                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                version: '1.5',
+                body: [
+                  {
+                    style: 'heading',
+                    type: 'TextBlock',
+                    text: 'This is an Adaptive Card'
+                  },
+                  {
+                    type: 'TextBlock',
+                    text: `Laboris ut proident dolore nisi sint ullamco proident veniam est.
+
+\`\`\`
+In do pariatur id enim nisi adipisicing incididunt consectetur do velit quis aliqua ad.
+
+Et proident est fugiat duis exercitation qui sunt amet ipsum.
+\`\`\`
+
+Ea sint elit anim enim voluptate aliquip aliqua nulla veniam.
+
+<pre>
+Ea et pariatur sint Lorem ex veniam adipisicing.
+
+Aliqua magna aliquip nisi quis.
+</pre>
+
+Cupidatat nulla duis dolor nulla ut pariatur minim incididunt quis adipisicing velit id Lorem.`,
+                    wrap: true
+                  }
+                ]
+              },
+              contentType: 'application/vnd.microsoft.card.adaptive'
+            }
+          ],
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // WHEN: Focus on the "Copy" button via keyboard.
+        await host.click(document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`));
+        await host.sendShiftTab(3);
+        await host.sendKeys('ENTER');
+
+        // THEN: Should focus on the "Copy" button
+        const copyButton = document.querySelector(`[data-testid="${WebChat.testIds.codeBlockCopyButton}"]`);
+
+        expect(document.activeElement).toBe(copyButton);
+        await host.snapshot('local');
+
+        // WHEN: Press ENTER on the "Copy" button.
+        await host.sendKeys('ENTER');
+
+        // THEN: The copy button should change to "Copied".
+        await host.snapshot('local');
+
+        // WHEN: Paste into plain text and rich text text box.
+        await host.click(document.querySelector('[data-testid="paste box"]'));
+        await host.sendKeys('+CONTROL', 'v', '-CONTROL');
+
+        await host.click(document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`));
+
+        // Sleep for 1 second for the checkmark to go away.
+        await testHelpers.sleep(500);
+
+        // WHEN: Hiding Web Chat and showing it back.
+        document.getElementById('webchat').style.display = 'none';
+        document.body.offsetWidth; // Need for browser to refresh the layout.
+        document.getElementById('webchat').style.display = '';
+
+        // THEN: The "Copy" button should kept at normal.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-1.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-1.png
diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-2.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-2.png
diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-3.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/layout.html b/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/layout.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        await host.sendDevToolsCommand('Browser.setPermission', {
+          permission: { name: 'clipboard-write' },
+          setting: 'granted'
+        });
+
+        await expect(navigator.permissions.query({ name: 'clipboard-write' })).resolves.toHaveProperty(
+          'state',
+          'granted'
+        );
+
+        const {
+          WebChat: { renderWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              content: {
+                type: 'AdaptiveCard',
+                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                version: '1.5',
+                body: [
+                  {
+                    style: 'heading',
+                    type: 'TextBlock',
+                    text: 'This is an Adaptive Card'
+                  },
+                  {
+                    type: 'TextBlock',
+                    text: `Laboris ut proident dolore nisi sint ullamco proident veniam est.
+
+\`\`\`
+In do pariatur id enim nisi adipisicing incididunt consectetur do velit quis aliqua ad.
+
+Et proident est fugiat duis exercitation qui sunt amet ipsum.
+\`\`\`
+
+Ea sint elit anim enim voluptate aliquip aliqua nulla veniam.
+
+<pre>
+Ea et pariatur sint Lorem ex veniam adipisicing.
+
+Aliqua magna aliquip nisi quis.
+</pre>
+
+Cupidatat nulla duis dolor nulla ut pariatur minim incididunt quis adipisicing velit id Lorem.`,
+                    wrap: true
+                  }
+                ]
+              },
+              contentType: 'application/vnd.microsoft.card.adaptive'
+            }
+          ],
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // THEN: Should show 2 copy button, one for triple-backtick codeblock, one for <pre> codeblock.
+        expect(
+          pageElements.activities()[0].querySelectorAll(`[data-testid="${testIds.codeBlockCopyButton}"]`)
+        ).toHaveLength(2);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/layout.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat" style="position: relative"></main>
+    <script type="text/babel">
+      run(async function () {
+        await host.sendDevToolsCommand('Browser.setPermission', {
+          permission: { name: 'clipboard-write' },
+          setting: 'denied'
+        });
+
+        await expect(navigator.permissions.query({ name: 'clipboard-write' })).resolves.toHaveProperty(
+          'state',
+          'denied'
+        );
+
+        const {
+          ReactDOM: { render },
+          WebChat: { ReactWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => (
+          <React.Fragment>
+            <ReactWebChat directLine={directLine} store={store} />
+            <div style={{ gap: 8, position: 'absolute', top: 0, width: '100%' }}>
+              <label>
+                <div>Paste box</div>
+                <textarea
+                  data-testid="paste box"
+                  spellCheck={false}
+                  style={{ background: '#f0f0f0', border: 0, height: 100, padding: 0, resize: 'none', width: '100%' }}
+                />
+              </label>
+            </div>
+          </React.Fragment>
+        );
+
+        render(<App />, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          text: `Laboris ut proident dolore nisi sint ullamco proident veniam est.
+
+\`\`\`
+In do pariatur id enim nisi adipisicing incididunt consectetur do velit quis aliqua ad.
+
+Et proident est fugiat duis exercitation qui sunt amet ipsum.
+\`\`\`
+
+Ea sint elit anim enim voluptate aliquip aliqua nulla veniam.
+
+<pre>
+Ea et pariatur sint Lorem ex veniam adipisicing.
+
+Aliqua magna aliquip nisi quis.
+</pre>
+
+Cupidatat nulla duis dolor nulla ut pariatur minim incididunt quis adipisicing velit id Lorem.`,
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // WHEN: Focus on the "Copy" button via keyboard.
+        await host.click(document.querySelector(`[data-testid="${testIds.sendBoxTextBox}"]`));
+        await host.sendShiftTab(3);
+        await host.sendKeys('ENTER');
+
+        // THEN: Should focus on the "Copy" button
+        const copyButton = document.querySelector(`[data-testid="${testIds.codeBlockCopyButton}"]`);
+
+        expect(document.activeElement).toBe(copyButton);
+        await host.snapshot('local');
+
+        // WHEN: Press ENTER on the "Copy" button.
+        await host.sendKeys('ENTER');
+
+        // THEN: The copy button should be disabled.
+        expect(copyButton.getAttribute('aria-disabled')).toBe('true');
+        await host.snapshot('local');
+
+        // WHEN: Press TAB twice.
+        await host.sendTab(2);
+
+        // THEN: It should stay on the second copy button.
+        expect(document.activeElement).toBe(document.querySelectorAll(`[data-testid="${testIds.codeBlockCopyButton}"]`)[1]);
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-2.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-2.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-3.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-3.png