Merge pull request #3685 from AlchemyCMS/backport/8.0-stable/pr-3683

[8.0-stable] fix(LinkDialog): Fix anchor regex to handle hyphens in URL fragments

Author: tvdeyen

app/components/alchemy/admin/toolbar_button.rb

@@ -106,7 +106,7 @@ def permissions_from_url
         action_controller = url.delete_prefix("/").split("/")
         [
           action_controller.last.to_sym,
-          action_controller[0..action_controller.length - 2].join("_").to_sym
+          action_controller[0..-2].join("_").to_sym
         ]
       end
     end

app/javascript/alchemy_admin/link_dialog.js

@@ -1,6 +1,11 @@
 import { translate } from "alchemy_admin/i18n"
 import { Dialog } from "alchemy_admin/dialog"
 
+// Matches a URL fragment (#anchor) at the end of a string.
+// Covers RFC 3986 unreserved characters (ALPHA, DIGIT, "-", ".", "_", "~")
+// which are the characters valid in URL fragments and common in DOM element IDs.
+const ANCHOR_REGEX = /#[\w.~-]+$/
+
 // Represents the link Dialog that appears, if a user clicks the link buttons
 // in TinyMCE or on an Ingredient that has links enabled (e.g. Picture)
 //
@@ -103,7 +108,7 @@ export class LinkDialog extends Dialog {
 
     if (linkType === "internal" && elementAnchor.value !== "") {
       // remove possible fragments on the url and attach the fragment (which contains the #)
-      url = url.replace(/#\w+$/, "") + elementAnchor.value
+      url = url.replace(ANCHOR_REGEX, "") + elementAnchor.value
     } else if (linkType === "external" && !url.match(Alchemy.link_url_regexp)) {
       // show validation error and prevent link creation
       this.#showValidationError()

spec/javascript/alchemy_admin/link_dialog.spec.js

@@ -0,0 +1,76 @@
+import { vi } from "vitest"
+import { LinkDialog } from "alchemy_admin/link_dialog"
+
+vi.mock("alchemy_admin/spinner")
+vi.mock("alchemy_admin/hotkeys")
+
+describe("LinkDialog", () => {
+  beforeEach(() => {
+    document.body.innerHTML = ""
+    Alchemy.routes.link_admin_pages_path = "/admin/pages/link"
+  })
+
+  /**
+   * Helper to create a LinkDialog, inject form HTML, and submit the internal form.
+   * Returns the promise that resolves with the link data on form submission.
+   */
+  function submitInternalForm(internalLinkValue, anchorValue) {
+    const dialog = new LinkDialog({
+      url: internalLinkValue,
+      type: "internal"
+    })
+
+    const promise = dialog.open()
+
+    // Build the form HTML that the server would render
+    const formHtml = `
+      <div data-link-form-type="internal">
+        <input id="internal_link" value="${internalLinkValue}" />
+        <select id="element_anchor">
+          <option value="">None</option>
+          ${anchorValue ? `<option value="${anchorValue}" selected>${anchorValue}</option>` : ""}
+        </select>
+        <input id="internal_link_title" value="" />
+        <select id="internal_link_target"><option value="">Default</option></select>
+        <alchemy-dom-id-api-select></alchemy-dom-id-api-select>
+      </div>
+      <div data-link-form-type="file">
+        <alchemy-attachment-select></alchemy-attachment-select>
+        <input id="file_link" value="" />
+        <input id="file_link_title" value="" />
+        <select id="file_link_target"><option value="">Default</option></select>
+      </div>
+    `
+
+    // replace() injects HTML into dialog body and attaches event listeners
+    dialog.replace(formHtml)
+
+    // Submit the internal form
+    const form = document.querySelector('[data-link-form-type="internal"]')
+    form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }))
+
+    return promise
+  }
+
+  describe("submitting an internal link with anchor", () => {
+    it("strips anchor with hyphens before appending new anchor", async () => {
+      const result = await submitInternalForm("/page#my-section", "#new-section")
+      expect(result.url).toBe("/page#new-section")
+    })
+
+    it("does not create double hash when anchor contains hyphens", async () => {
+      const result = await submitInternalForm("/page#my-section", "#my-section")
+      expect(result.url).toBe("/page#my-section")
+    })
+
+    it("strips simple word-only anchors correctly", async () => {
+      const result = await submitInternalForm("/page#section", "#other")
+      expect(result.url).toBe("/page#other")
+    })
+
+    it("handles url without existing anchor", async () => {
+      const result = await submitInternalForm("/page", "#section")
+      expect(result.url).toBe("/page#section")
+    })
+  })
+})

spec/libraries/auth_accessors_spec.rb

@@ -40,7 +40,7 @@ class MyCustomUser
 
         context "and the default user class does not exist" do
           before do
-            if Object.constants.include?(:User)
+            if Object.const_defined?(:User)
               Object.send(:remove_const, :User)
             end
           end