Confluence: add anchor link to all headings

[Finkregh]

Feel free to add this to your collection:

// ==UserScript==
// @name         Confluence heading linker
// @version      0.0.1
// @description  Add permalink to conflucence headings
// @author       FIXME
// @match        https://FIXME/wiki/display/*
// @grant        GM_log
// @license      MIT

// ==/UserScript==

(function() {
    'use strict';

    window.addEventListener('load', function () {
        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
        const addedElements = [];

        headings.forEach(heading => {
            // Check if the heading already contains a link
            if (!heading.querySelector('a[href^="#"]')) {
                const id = heading.id;
                const space_span = document.createElement('span');
                space_span.textContent = ' ';
                const a = document.createElement('a');
                a.href = `#${id}`;
                a.textContent = '#';
                heading.appendChild(space_span);
                addedElements.push(space_span);
                heading.appendChild(a);
                addedElements.push(a);
                GM_log(`Added link to heading ${heading.textContent.replace(/\s+/g, ' ')}`);
            }
        });

        const editPageLink = document.getElementById('editPageLink');
        if (editPageLink) {
            editPageLink.addEventListener('click', function() {
                addedElements.forEach(link => {
                    link.remove();
                });
                GM_log('Removed all added links');
            });
        }
    });
})();

[rybak]

Thank you for your contribution. The script seems like a good fit for Atlassian Tweaks.

I assume that this is useful for cases when there is no {table of contents} macro on a page? And also to avoid scrolling to the ToC on very log pages. Could you please clarify how you use it in your workflow?

I don't have access to a Confluence Server instance at the moment, so I've only tested the script a little bit on Confluence Cloud. I'll test the script on a private Confluence Server instance later, probably next week. If you know of a public instance of Confluence Server, let us know in discussion #9. So far, I found the following issues:

1. The script tracks going into "Edit" mode, but not going back from "Edit" mode
2. When switching between pages, sometimes Confluence Cloud doesn't do a full reload, which means that the script isn't triggered.
   • Side note: none of the Confluence scripts in Atlassian Tweaks (confluence-copy-link-buttons.user.js and confluence-space-avatar-favicons.user.js) have support for this so far, because
     • a) I only use Confluence Cloud for testing, not for actual work, so I might never get around to adding support for it.
     • and b) it can be really tricky to get right. For examples, see method setUpReadder in class BitbucketCloud of bitbucket-copy-commit-reference.user.js and similar setUpReadder for GitHub (documentation of this method in copy-commit-reference-lib.js).

3. The added # overlaps with Confluence Cloud's "Copy link to heading" button with 🔗 icon, which shows up when hovering:

   Before	After

   How about adding the # to the left of the headings, similarly to what GitHub does in rendered Markdown? They also show up in the margins only when hovering the cursor over the heading.	GitHub heading links in Markdown

[Finkregh]

I assume that this is useful for cases when there is no {table of contents} macro on a page? And also to avoid scrolling to the ToC on very log pages. Could you please clarify how you use it in your workflow?

Something like: I scrolled somewhere down on a page and would like to get a link to the heading.

If you know of a public instance of Confluence Server.

Nope, sorry

1. The script tracks going into "Edit" mode, but not going back from "Edit" mode
2. When switching between pages, sometimes Confluence Cloud doesn't do a full reload, which means that the script isn't triggered.

I was fiddling around with this behaviour for some github stuff and uugh, it's a real PITA. I'll have a look at what you came up with, thanks.

3. The added `#` overlaps with Confluence Cloud's "Copy link to heading" button with 🔗 icon, which shows up when hovering:

I was not aware that this is already a function that is available there, I guess the instance I work with is older or has the feature disabled.

   How about adding the `#` to the left of the headings, similarly to what GitHub does in rendered Markdown? They also show up in the margins only when hovering the cursor over the heading.

I'll try that when I find some time.

Thanks for your input!

[rybak]

I'll test the script on a private Confluence Server instance later

The script works OK. One problem is that the {table of contents} macro is filled in on the fly. Depending on which script finishes first, sometimes the ToC is messed up a bit:

and sometimes it's fine: