Drag-and-drop behavior — especially around links — can be inconsistent across browsers. We wish to implement robust cross-browser and standards based behavior in federated wiki to replace the original mechanism - one that also works with the wasm tooling:
# Problem Summary * **What works now:** Dropping a URL from the browser bar (works in most browsers). * **What doesn't work consistently:** Dropping an HTML link (e.g. dragging an anchor `<a>` element into your drop area). * **Goal:** Support both, cross-browser.
# Cross-Browser Strategy To reliably detect URLs and links across browsers: 1. Check multiple data types in `e.dataTransfer.types`. 2. Try to read from `text/uri-list`, `text/html`, and `text/plain`. 3. Parse `text/html` to extract links if needed.
# Updated JavaScript Code
Here is an analysis of a first go at improving the drag-drop javascript - chatgpt 
The script is broken up into sequential elements so we can understand and write about them one at a time.
- Javascript Formatting
const dArea = document.getElementById("d-area"); const dOutput = document.getElementById("d-output");
Defines constant variable for dom elements we use.
// Prevent default behaviors ["dragenter", "dragover", "dragleave", "drop"]. forEach(eventName => { dropArea.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); }); });
Above we loop through the frag events and prevents and stops default propogation. Next we add a "drop" listener:
dropArea.addEventListener("drop", (e) => { let data = "";
First let's try to parse `text/html`:
// Parse HTML for <a> tag first if (e.dataTransfer.types.includes("text/html")) { const html = e.dataTransfer.getData("text/html"); const doc = new DOMParser(). parseFromString(html, "text/html"); const anchor = doc.querySelector("a[href]"); if (anchor) { data = anchor.href; } }
Next try to get `text/uri-list`:
// Fallback to uri-list (good for browser bar drops) if (!data && e.dataTransfer.types. includes("text/uri-list")) { data = e.dataTransfer.getData("text/uri-list"); }
And if this is missing `text/plain`:
// Fallback to plain text if (!data && e.dataTransfer.types. includes("text/plain")) { data = e.dataTransfer.getData("text/plain"); }
Display result and log to console:
console.log("Dropped URL:", data);
If 'data' contains something we should call the `processStack()` function:
if (data) { processStack(data); dropOutput.textContent = "Dropped URL: " + data; } else { dropOutput.textContent = "No valid link or URL found in drop."; }
The `processStack()` function finds and messages a named Livecode stack:
function processStack(url) { if (document.liveCode) { const myStack = document.liveCode. findStackWithName("View|Wiki|Panel"); if (myStack) { myStack.strip_Journal(url); } }}});
# Why This Works
* `text/uri-list` used by browsers for dropped URLs. * `text/plain` is a good fallback. * `text/html` is especially useful for dragging actual HTML links (anchor tags).
Ideally we use `text/html`. We can parse this to extract an `href` and other data embedded in the flag-link. Unfortunatley Safari does not play well here.
# Browser Compatibility Notes | Browser | `text/uri-list` | `text/plain` | `text/html` | | ------- | --------------- | ------------ | ------------------------- | | Chrome | ✅ | ✅ | ✅ | | Firefox | ✅ | ✅ | ✅ | | Safari | ✅ | ✅ | ✅ (somewhat inconsistent) | | Edge | ✅ | ✅ | ✅ | Safari is often the most quirky. If it fails to fire any data type, there's very little you can do other than guide users.
When a user: * **Drags a URL from the browser address bar**: * `text/uri-list` is populated. * `text/plain` often contains the same URL. * `text/html` may be empty or contain an anchor tag. When a user: * **Drags an HTML link (i.e. an `<a href="...">`) from a page**: * `text/html` is usually the most structured and reliable. * `text/uri-list` is **not always** present. * `text/plain` link text or `href` depending on browser. To Prioritize Links (Anchor Tags) — you should **check `text/html` first**, because that's where the structured HTML is stored.
# Tip: Show the Types Available You can inspect the actual types present in the drag/drop event to better understand what’s being offered:
console.log("Available:", e.dataTransfer.types);
Try dropping different types of content (browser bar URL, link, etc.) and observe.
# See