Integrate SafeDOM mounter pattern for content overlay mounting

Author: Jonathan D.A. Jewell

src/content.res

@@ -8,6 +8,50 @@ external runtime: runtime = "runtime"
 @send
 external sendMessage: (runtime, Js.Json.t) => Js.Promise.t<Js.Json.t> = "sendMessage"
 
+let ensureOverlayMountPoint: unit => unit = %raw(`() => {
+  if (document.querySelector("#blocky-writer-overlay") !== null) return;
+  const root = document.createElement("div");
+  root.id = "blocky-writer-overlay";
+  root.style.position = "fixed";
+  root.style.right = "16px";
+  root.style.bottom = "16px";
+  root.style.zIndex = "2147483647";
+  root.style.width = "320px";
+  root.style.maxWidth = "90vw";
+  root.style.fontFamily = "ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif";
+  document.body.appendChild(root);
+}`)
+
+let escapeHtml: string => string = %raw(`(value) =>
+  value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;")
+`)
+
+let renderPanel = (~title: string, ~detail: string): unit => {
+  let safeTitle = escapeHtml(title)
+  let safeDetail = escapeHtml(detail)
+  let html =
+    "<section style='background:#111827;color:#fff;border-radius:10px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);'>"
+    ++ "<div style='font-size:13px;font-weight:700;margin-bottom:6px;'>Blocky Writer</div>"
+    ++ "<div style='font-size:12px;line-height:1.4;'><strong>"
+    ++ safeTitle
+    ++ "</strong><br />"
+    ++ safeDetail
+    ++ "</div>"
+    ++ "</section>"
+
+  SafeDOM.mountWhenReady(
+    "#blocky-writer-overlay",
+    html,
+    ~onSuccess={_ => ()},
+    ~onError={error => Js.log2("Blocky Writer overlay mount error", error)},
+  )
+}
+
 let unsafeJson = (value: 'a): Js.Json.t => Obj.magic(value)
 
 let makeDetectMessage = (url: string): Js.Json.t => {
@@ -17,7 +61,12 @@ let makeDetectMessage = (url: string): Js.Json.t => {
   unsafeJson(payload)
 }
 
-let isPdfUrl = (url: string): bool => url->Js.String2.toLowerCase->Js.String2.endsWith(".pdf")
+let isPdfUrl = (url: string): bool => {
+  let lower = url->Js.String2.toLowerCase
+  lower->Js.String2.endsWith(".pdf")
+  || lower->Js.String2.includes(".pdf?")
+  || lower->Js.String2.includes(".pdf#")
+}
 
 let findPdfTarget = (): option<string> => {
   let currentUrl = Webapi.Dom.location->Webapi.Dom.Location.href
@@ -41,7 +90,7 @@ let findPdfTarget = (): option<string> => {
   }
 }
 
-let logDetectionResponse = (response: Js.Json.t): unit => {
+let handleDetectionResponse = (response: Js.Json.t): unit => {
   switch Js.Json.decodeObject(response) {
   | Some(payload) =>
     let ok =
@@ -53,29 +102,37 @@ let logDetectionResponse = (response: Js.Json.t): unit => {
         ->Belt.Option.flatMap(Js.Json.decodeArray)
         ->Belt.Option.map(Belt.Array.length)
         ->Belt.Option.getWithDefault(0)
-      Js.log2("Blocky Writer detected blocks", count)
+      if count == 0 {
+        renderPanel(~title="No widgets detected", ~detail="This PDF did not expose form widgets.")
+      } else {
+        renderPanel(
+          ~title="Detection successful",
+          ~detail="Detected " ++ Belt.Int.toString(count) ++ " PDF widgets ready for filling.",
+        )
+      }
     } else {
       let message =
         payload
         ->Js.Dict.get("error")
         ->Belt.Option.flatMap(Js.Json.decodeString)
         ->Belt.Option.getWithDefault("unknown error")
-      Js.log2("Blocky Writer detection failed", message)
+      renderPanel(~title="Detection failed", ~detail=message)
     }
-  | None => Js.log("Blocky Writer received non-object response")
+  | None => renderPanel(~title="Detection failed", ~detail="Background returned an invalid payload.")
   }
 }
 
 let requestBlockDetection = (targetUrl: string): unit => {
-  Js.log2("Blocky Writer detectBlocks target", targetUrl)
+  renderPanel(~title="Scanning PDF", ~detail="Requesting block detection...")
   let request = makeDetectMessage(targetUrl)
   let sendPromise = sendMessage(runtime, request)
   let loggedPromise = Js.Promise2.then(sendPromise, response => {
-    logDetectionResponse(response)
+    handleDetectionResponse(response)
     Js.Promise.resolve(response)
   })
   let _ = Js.Promise2.catch(loggedPromise, err => {
     Js.log2("Blocky Writer message failed", err)
+    renderPanel(~title="Detection failed", ~detail="Unable to contact extension background worker.")
     Js.Promise.resolve(Js.Json.null)
   })
   ()
@@ -84,8 +141,9 @@ let requestBlockDetection = (targetUrl: string): unit => {
 let currentUrl = Webapi.Dom.location->Webapi.Dom.Location.href
 
 if currentUrl->Js.String2.includes("gov.uk") {
+  ensureOverlayMountPoint()
   switch findPdfTarget() {
   | Some(targetUrl) => requestBlockDetection(targetUrl)
-  | None => Js.log("Blocky Writer found no PDF target on page")
+  | None => renderPanel(~title="No PDF target found", ~detail="Open a .pdf URL or include a direct PDF link on this page.")
   }
 }

src/core/SafeDOM.res

@@ -0,0 +1,146 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later WITH Palimpsest */
+/* Adapted from /mnt/eclipse/repos/rescript-ecosystem/packages/web/dom-mounter/src/SafeDOM.res */
+
+type mountResult =
+  | Mounted(Dom.element)
+  | MountPointNotFound(string)
+  | InvalidSelector(string)
+  | InvalidHTML(string)
+
+module ProvenSelector = {
+  type validated = ValidSelector(string)
+
+  let hasInvalidSelectorChars: string => bool = %raw(`(selector) => /[^\w\-#.\[\]():>~+= ]/.test(selector)`)
+
+  let validate = (selector: string): result<validated, string> => {
+    let len = selector->Js.String2.length
+    if len == 0 {
+      Error("Selector cannot be empty")
+    } else if len > 255 {
+      Error("Selector exceeds maximum length (255 characters)")
+    } else if hasInvalidSelectorChars(selector) {
+      Error("Selector contains invalid CSS characters")
+    } else {
+      Ok(ValidSelector(selector))
+    }
+  }
+
+  let toString = (ValidSelector(selector)) => selector
+}
+
+module ProvenHTML = {
+  type validated = ValidHTML(string)
+
+  let countOpenTags: string => int = %raw(`(html) => (html.match(/<[^\/][^>]*>/g) || []).length`)
+  let countCloseTags: string => int = %raw(`(html) => (html.match(/<\/[^>]+>/g) || []).length`)
+  let countSelfClosing: string => int = %raw(`(html) => (html.match(/<[^>]+\/>/g) || []).length`)
+
+  let validate = (html: string): result<validated, string> => {
+    let len = html->Js.String2.length
+    if len == 0 {
+      Ok(ValidHTML(""))
+    } else if len > 1048576 {
+      Error("HTML content exceeds maximum size (1MB)")
+    } else {
+      let openTags = countOpenTags(html)
+      let closeTags = countCloseTags(html)
+      let selfClosing = countSelfClosing(html)
+      if openTags - selfClosing != closeTags {
+        Error(
+          "Unbalanced HTML tags: "
+          ++ Belt.Int.toString(openTags - selfClosing)
+          ++ " open, "
+          ++ Belt.Int.toString(closeTags)
+          ++ " close",
+        )
+      } else {
+        Ok(ValidHTML(html))
+      }
+    }
+  }
+
+  let toString = (ValidHTML(html)) => html
+}
+
+let findMountPoint = (selector: ProvenSelector.validated): option<Dom.element> =>
+  Webapi.Dom.document->Webapi.Dom.Document.querySelector(selector->ProvenSelector.toString)
+
+let mount = (selector: ProvenSelector.validated, html: ProvenHTML.validated): mountResult => {
+  switch findMountPoint(selector) {
+  | None => MountPointNotFound(selector->ProvenSelector.toString)
+  | Some(element) =>
+    element->Webapi.Dom.Element.setInnerHTML(html->ProvenHTML.toString)
+    Mounted(element)
+  }
+}
+
+let mountString = (selector: string, html: string): mountResult => {
+  switch ProvenSelector.validate(selector) {
+  | Error(error) => InvalidSelector(error)
+  | Ok(validSelector) =>
+    switch ProvenHTML.validate(html) {
+    | Error(error) => InvalidHTML(error)
+    | Ok(validHtml) => mount(validSelector, validHtml)
+    }
+  }
+}
+
+let mountSafe = (
+  selector: string,
+  html: string,
+  ~onSuccess: Dom.element => unit,
+  ~onError: string => unit,
+): unit => {
+  switch mountString(selector, html) {
+  | Mounted(element) => onSuccess(element)
+  | MountPointNotFound(value) => onError("Mount point not found: " ++ value)
+  | InvalidSelector(value) => onError("Invalid selector: " ++ value)
+  | InvalidHTML(value) => onError("Invalid HTML: " ++ value)
+  }
+}
+
+type mountSpec = {
+  selector: string,
+  html: string,
+}
+
+let mountBatch = (specs: array<mountSpec>): result<array<Dom.element>, string> => {
+  let mounted = []
+  let rec loop = (index: int): result<array<Dom.element>, string> => {
+    if index >= Belt.Array.length(specs) {
+      Ok(mounted)
+    } else {
+      switch specs[index] {
+      | spec =>
+        switch mountString(spec.selector, spec.html) {
+        | Mounted(element) =>
+          mounted->Belt.Array.push(element)
+          loop(index + 1)
+        | MountPointNotFound(value) => Error("Mount point not found: " ++ value)
+        | InvalidSelector(value) => Error("Invalid selector: " ++ value)
+        | InvalidHTML(value) => Error("Invalid HTML: " ++ value)
+        }
+      }
+    }
+  }
+  loop(0)
+}
+
+let domReadyState: unit => string = %raw(`() => document.readyState`)
+let onDOMContentLoaded: (unit => unit) => unit = %raw(`(callback) => document.addEventListener("DOMContentLoaded", callback)`)
+
+let onDOMReady = (callback: unit => unit): unit => {
+  let state = domReadyState()
+  if state == "complete" || state == "interactive" {
+    callback()
+  } else {
+    onDOMContentLoaded(callback)
+  }
+}
+
+let mountWhenReady = (
+  selector: string,
+  html: string,
+  ~onSuccess: Dom.element => unit,
+  ~onError: string => unit,
+): unit => onDOMReady(() => mountSafe(selector, html, ~onSuccess, ~onError))