microsoft · compulim · Oct 26, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024
@@ -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
 

@@ -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>
@@ -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>
@@ -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>