feat: Broadcast clipboard on lib component copy

src/library-authoring/components/ComponentCard.test.tsx

@@ -40,6 +40,13 @@ const contentHit: ContentHit = {
   lastPublished: null,
 };
 
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+(global as any).BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
 const RootWrapper = () => (
   <AppProvider store={store}>
     <IntlProvider locale="en">

src/library-authoring/components/ComponentCard.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
@@ -17,6 +17,7 @@ import TagCount from '../../generic/tag-count';
 import { ToastContext } from '../../generic/toast-context';
 import { type ContentHit, Highlight } from '../../search-manager';
 import messages from './messages';
+import { STUDIO_CLIPBOARD_CHANNEL } from '../../constants';
 
 type ComponentCardProps = {
   contentHit: ContentHit,
@@ -26,9 +27,13 @@ type ComponentCardProps = {
 const ComponentCardMenu = ({ usageKey }: { usageKey: string }) => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
+  const [clipboardBroadcastChannel] = useState(() => new BroadcastChannel(STUDIO_CLIPBOARD_CHANNEL));
   const updateClipboardClick = () => {
     updateClipboard(usageKey)
-      .then(() => showToast(intl.formatMessage(messages.copyToClipboardSuccess)))
+      .then((clipboardData) => {
+        clipboardBroadcastChannel.postMessage(clipboardData);
+        showToast(intl.formatMessage(messages.copyToClipboardSuccess))
+      })
       .catch(() => showToast(intl.formatMessage(messages.copyToClipboardError)));
   };