ntp: support window->window drop in favorites (#1260)

* ntp: support window->window drop in favorites * favor the known format * prefer `DDG_MIME_TYPE` --------- Co-authored-by: Shane Osbourne <[email protected]>
duckduckgo · Nov 22, 2024 · 2b90f9d · 2b90f9d
1 parent dfaf48d
commit 2b90f9d
Showing 1 changed file with 32 additions and 16 deletions.
diff --git a/special-pages/pages/new-tab/app/favorites/components/PragmaticDND.js b/special-pages/pages/new-tab/app/favorites/components/PragmaticDND.js
@@ -52,22 +52,8 @@ function useGridState(favorites, itemsDidReOrder, instanceId) {
             monitorForExternal({
                 onDrop(payload) {
                     // const data = '<meta name="application/vnd.duckduckgo.bookmark-by-id" content="3" />';
-                    const data = getHTML(payload);
-                    if (!data) return console.warn('missing text/html payload');
-
-                    // Create a document fragment using the safer createContextualFragment
-                    const fragment = document.createRange().createContextualFragment(data);
-
-                    // Get the first element
-                    const node = fragment.firstElementChild;
-                    if (!node) return console.warn('missing first element');
-
-                    // check the name attribute
-                    if (node.getAttribute('name') !== DDG_MIME_TYPE) return console.warn(`attribute name was not ${DDG_MIME_TYPE}`);
-
-                    // check the id
-                    const id = node.getAttribute('content');
-                    if (!id) return console.warn('id missing from `content` attribute');
+                    const id = idFromPayload(payload);
+                    if (!id) return;
 
                     const location = payload.location;
                     const target = location.current.dropTargets[0];
@@ -290,3 +276,33 @@ export function useItemState(url, id) {
 function getInstanceId() {
     return Symbol('instance-id');
 }
+
+/**
+ * @import {ContainsSource} from "@atlaskit/pragmatic-drag-and-drop/dist/types/public-utils/external/native-types.js"
+ * @param {ContainsSource} payload
+ */
+function idFromPayload(payload) {
+    // return the external DDG type first
+    const ddg = payload.source.getStringData(DDG_MIME_TYPE);
+    if (ddg && ddg.length > 0) return ddg;
+
+    // now try and parse the HTML, which might be `<meta name="application/vnd.duckduckgo.bookmark-by-id" content="3" />`
+    const html = getHTML(payload);
+    if (!html) return console.warn(`missing text/html payload + missing ${DDG_MIME_TYPE} mime type`);
+
+    // Create a document fragment using the safer createContextualFragment
+    const fragment = document.createRange().createContextualFragment(html);
+
+    // Get the first element
+    const node = fragment.firstElementChild;
+    if (!node) return console.warn('missing first element');
+
+    // check the name attribute
+    if (node.getAttribute('name') !== DDG_MIME_TYPE) return console.warn(`attribute name was not ${DDG_MIME_TYPE}`);
+
+    // check the id
+    const id = node.getAttribute('content');
+    if (!id) return console.warn('id missing from `content` attribute');
+
+    return id;
+}