Link previews: use selector field from API (#619)

Requires:
* readthedocs/readthedocs.org#12301
* readthedocs/ext-theme#626

Closes #554

Author: humitos

public/_/readthedocs-addons.json

@@ -121,6 +121,7 @@
     },
     "linkpreviews": {
       "enabled": true
+      "selector": "[role=main] a",
     },
     "notifications": {
       "enabled": true,

src/data-validation.js

@@ -534,9 +534,10 @@ const addons_linkpreviews = {
         },
         linkpreviews: {
           type: "object",
-          required: ["enabled"],
+          required: ["enabled", "selector"],
           properties: {
             enabled: { type: "boolean" },
+            selector: { type: ["string", "null"] },
           },
         },
       },

src/linkpreviews.js

@@ -247,7 +247,8 @@ export class LinkPreviewsElement extends LitElement {
     const rootSelector =
       this.config.addons.options.root_selector || docTool.getRootSelector();
 
-    const selector = docTool.getLinkSelector();
+    const selector =
+      this.config.addons.linkpreviews.selector || docTool.getLinkSelector();
 
     console.debug(
       `${LinkPreviewsAddon.addonName}: Using '${selector}' as CSS selector.`,

tests/linkpreviews.test.html

@@ -30,6 +30,7 @@
               },
               linkpreviews: {
                 enabled: true,
+                selector: null,
               },
             },
           };
@@ -40,6 +41,9 @@
           server.restore();
 
           document.querySelectorAll("div.tooltip").forEach((el) => el.remove());
+          document
+            .querySelectorAll(".link-preview")
+            .forEach((el) => el.classList.remove("link-preview"));
         });
 
         describe("Link previews tests", () => {
@@ -61,6 +65,28 @@
             expect(linkExternal).to.not.have.class("link-preview");
           });
 
+          it("use CSS selector from API", async () => {
+            config.addons.linkpreviews.selector = "section p a";
+            let linkInternal = document.querySelector("#linkpreview-internal");
+            let linkExternal = document.querySelector("#linkpreview-external");
+            let linkCustom = document.querySelector("#linkpreview-custom");
+
+            expect(linkInternal).to.not.have.class("link-preview");
+            expect(linkExternal).to.not.have.class("link-preview");
+            expect(linkCustom).to.not.have.class("link-preview");
+
+            const addon = new linkpreviews.LinkPreviewsAddon(config);
+            const element = document.querySelector("readthedocs-linkpreviews");
+            await elementUpdated(element);
+
+            // Custom link should have a specific class
+            expect(linkCustom).to.have.class("link-preview");
+
+            // Intenrnal and external link shouldn't be previewed
+            expect(linkExternal).to.not.have.class("link-preview");
+            expect(linkInternal).to.not.have.class("link-preview");
+          });
+
           it("trigger mouseenter event without response to show Loading... tooltip", async () => {
             const addon = new linkpreviews.LinkPreviewsAddon(config);
             const element = document.querySelector("readthedocs-linkpreviews");
@@ -150,5 +176,15 @@
         >.
       </p>
     </main>
+
+    <!-- Add a link _outside_ main to use with a custom CSS selector -->
+    <section>
+      <p>
+        Link with
+        <a id="linkpreview-custom" href="http://localhost:8000/custom.html"
+          >custom CSS selector</a
+        >.
+      </p>
+    </section>
   </body>
 </html>

tests/linkpreviews.test.js

@@ -23,6 +23,7 @@ describe("LinkPreviews addon", () => {
           },
           linkpreviews: {
             enabled: false,
+            selector: "[role=main] a.internal",
           },
         },
       }),
@@ -38,6 +39,7 @@ describe("LinkPreviews addon", () => {
           },
           linkpreviews: {
             enabled: true,
+            selector: "[role=main] a.internal",
           },
         },
       }),