From 8e898b526f67bb969c53748f61ecfa55cc409851 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Mon, 16 Dec 2024 21:17:40 -0800
Subject: [PATCH] remove deep selector syntax for iframes

---
 demo/cross-iframe-sticky-html-arrow.html |  2 +-
 demo/cross-iframe-xanadu-links.html      |  7 ++-----
 src/common/folk-observer.ts              | 16 ++++++++++++++--
 src/folk-base-connection.ts              | 18 ++++++++++++------
 4 files changed, 29 insertions(+), 14 deletions(-)
diff --git a/demo/cross-iframe-sticky-html-arrow.html b/demo/cross-iframe-sticky-html-arrow.html
index 2237bb2..04bddf6 100644
--- a/demo/cross-iframe-sticky-html-arrow.html
+++ b/demo/cross-iframe-sticky-html-arrow.html
@@ -36,7 +36,7 @@
       <iframe id="frame2" src="./sticky-html-arrow.html"></iframe>
     </folk-shape>
 
-    <folk-rope source="#frame1 >>> #box1" target="#frame2 >>> #box2"></folk-rope>
+    <folk-rope source="iframe#frame1 #box1" target="iframe#frame2 #box2"></folk-rope>
 
     <script type="module">
       import '../src/standalone/folk-shape.ts';
diff --git a/demo/cross-iframe-xanadu-links.html b/demo/cross-iframe-xanadu-links.html
index 3c99a33..2d0a7b2 100644
--- a/demo/cross-iframe-xanadu-links.html
+++ b/demo/cross-iframe-xanadu-links.html
@@ -57,12 +57,9 @@
   </head>
   <body>
     <iframe id="frame1" src="./_xanadu-article.html"></iframe>
-
     <iframe id="frame2" src="./_xanadu-article.html"></iframe>
-
-    <folk-xanadu source="#frame1 >>> p:nth-child(2)" target="#frame2 >>> p:nth-child(8)"></folk-xanadu>
-
-    <folk-xanadu source="#frame1 >>> p:nth-child(6)" target="#frame2 >>> p:nth-child(4)"></folk-xanadu>
+    <folk-xanadu source="iframe#frame1 p:nth-child(2)" target="iframe#frame2 p:nth-child(8)"></folk-xanadu>
+    <folk-xanadu source="iframe#frame1 p:nth-child(6)" target="iframe#frame2 p:nth-child(4)"></folk-xanadu>
 
     <script type="module">
       import '../src/standalone/folk-xanadu.ts';
diff --git a/src/common/folk-observer.ts b/src/common/folk-observer.ts
index e71cd90..b4e682d 100644
--- a/src/common/folk-observer.ts
+++ b/src/common/folk-observer.ts
@@ -233,6 +233,18 @@ export class FolkObserver {
   }
 }
 
-export function parseDeepCSSSelector(selector: string): string[] {
-  return selector.split('>>>').map((s) => s.trim());
+const regex = /(.*iframe.*)\s+(.*)/;
+
+export function parseDeepCSSSelector(selectorList: string): [Element, string | undefined][] {
+  const array: [Element, string | undefined][] = [];
+
+  for (const selector of selectorList.split(/,(?![^()]*\))/g)) {
+    const [, elementSelector, iframeSelector] = regex.exec(selector) || [undefined, selector, undefined];
+
+    document.querySelectorAll(elementSelector).forEach((el) => {
+      array.push([el, iframeSelector]);
+    });
+  }
+
+  return array;
 }
diff --git a/src/folk-base-connection.ts b/src/folk-base-connection.ts
index 8b795b3..efe451d 100644
--- a/src/folk-base-connection.ts
+++ b/src/folk-base-connection.ts
@@ -52,9 +52,12 @@ export class FolkBaseConnection extends FolkElement {
       if (vertex) {
         this.sourceRect = DOMRectReadOnly.fromRect(vertex);
       } else {
-        const [selector, iframeSelector] = parseDeepCSSSelector(this.source);
-        this.#sourceIframeSelector = iframeSelector;
-        this.sourceElement = document.querySelector(selector);
+        const [el] = parseDeepCSSSelector(this.source);
+
+        if (el !== undefined) {
+          this.sourceElement = el[0];
+          this.#sourceIframeSelector = el[1];
+        }
       }
     }
 
@@ -76,9 +79,12 @@ export class FolkBaseConnection extends FolkElement {
       if (vertex) {
         this.targetRect = DOMRectReadOnly.fromRect(vertex);
       } else {
-        const [selector, iframeSelector] = parseDeepCSSSelector(this.target);
-        this.#targetIframeSelector = iframeSelector;
-        this.targetElement = document.querySelector(selector);
+        const [el] = parseDeepCSSSelector(this.target);
+
+        if (el !== undefined) {
+          this.targetElement = el[0];
+          this.#targetIframeSelector = el[1];
+        }
       }
     }
 
