[newswires] add gu-note when dropping snippet which includes any us…

…age note (or fallback message)
guardian · Oct 24, 2024 · 1c9e0fe · 1c9e0fe
1 parent 91a08b7
commit 1c9e0fe
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/client/src/newswires/newswiresIntegration.tsx b/client/src/newswires/newswiresIntegration.tsx
@@ -23,7 +23,7 @@ export const NewswiresIntegration = () => {
 
   const [state, setState] = useState<{
     selectedHTML: string;
-    mountPoint: HTMLElement;
+    containerElement: HTMLElement;
     firstButtonPosition: ButtonPosition;
     lastButtonPosition: ButtonPosition;
   } | null>(null);
@@ -64,7 +64,7 @@ export const NewswiresIntegration = () => {
         );
         setState({
           selectedHTML: maybeClonedTargetEl.innerHTML,
-          mountPoint: maybeOriginalTargetEl,
+          containerElement: maybeOriginalTargetEl,
           firstButtonPosition: newFirstButtonCoords,
           lastButtonPosition: newLastButtonCoords,
         });
@@ -80,7 +80,7 @@ export const NewswiresIntegration = () => {
         );
         setState({
           selectedHTML: tempEl.innerHTML,
-          mountPoint: maybeOriginalTargetEl,
+          containerElement: maybeOriginalTargetEl,
           firstButtonPosition: newFirstButtonCoords,
           lastButtonPosition: newLastButtonCoords,
         });
@@ -124,6 +124,7 @@ export const NewswiresIntegration = () => {
         payload: {
           embeddableHtml: state.selectedHTML,
           embeddableUrl: window.location.href,
+          maybeUsageNote: state.containerElement.dataset.usageNote,
         },
       });
       setIsExpanded(true);
@@ -196,7 +197,7 @@ export const NewswiresIntegration = () => {
               )
             )}
           </root.div>,
-          state.mountPoint
+          state.containerElement
         )}
     </>
   );

diff --git a/client/src/payloadDisplay.tsx b/client/src/payloadDisplay.tsx
@@ -71,7 +71,13 @@ export const PayloadDisplay = ({
 
             event.dataTransfer.setData(
               "text/html",
-              sanitizeHtml(payloadAndType.payload.embeddableHtml)
+              // TODO consider also add a gu-note for who shared it and when
+              `${sanitizeHtml(
+                payloadAndType.payload.embeddableHtml
+              )}<br/><gu-note>${
+                payloadAndType.payload.maybeUsageNote ||
+                "NO USAGE NOTE IN THE WIRE"
+              }</gu-note>`
             );
           } else {
             event.dataTransfer.setData("URL", payload.embeddableUrl);

diff --git a/client/src/types/PayloadAndType.ts b/client/src/types/PayloadAndType.ts
@@ -33,6 +33,7 @@ export interface PayloadWithApiUrl extends PayloadCommon {
 
 export interface PayloadWithSnippet extends PayloadCommon {
   embeddableHtml: string;
+  maybeUsageNote: string | undefined;
 }
 
 type Payload =