diff --git a/public/_/readthedocs-addons.json b/public/_/readthedocs-addons.json index ccf7c01b..b0ce29d9 100644 --- a/public/_/readthedocs-addons.json +++ b/public/_/readthedocs-addons.json @@ -121,6 +121,7 @@ }, "linkpreviews": { "enabled": true + "selector": "[role=main] a", }, "notifications": { "enabled": true, diff --git a/src/data-validation.js b/src/data-validation.js index ca666e0b..0d9a19d2 100644 --- a/src/data-validation.js +++ b/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"] }, }, }, }, diff --git a/src/linkpreviews.js b/src/linkpreviews.js index 6fc2ccc8..0974af38 100644 --- a/src/linkpreviews.js +++ b/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.`, diff --git a/tests/linkpreviews.test.html b/tests/linkpreviews.test.html index f83edb9d..37a206ef 100644 --- a/tests/linkpreviews.test.html +++ b/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 @@ >.

+ + +
+

+ Link with + custom CSS selector. +

+
diff --git a/tests/linkpreviews.test.js b/tests/linkpreviews.test.js index fccb450d..de708bce 100644 --- a/tests/linkpreviews.test.js +++ b/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", }, }, }),