I have a Drupal website and some of its webpages are very long, very scrollable and have many h2
headings.
I have created the following user script by which I can access the Drupal edit mode of a webpage directly with the keyboard, without scrolling up to the top of the webpage and to click the Edit button.
This way, no matter where the scroller is on the scrolling bar, I could always access the edit mode quickly.
window.addEventListener('keydown', function(event) {
if (event.altKey && event.shiftKey && event.key === 'E') {
document.querySelector('#block-olivero-primary-local-tasks > div.block__content > nav > ul > li:nth-child(2) > a').click();
}
});
So far so good.
My problem
Sometimes I just want to quickly edit a chapter in a webpage (defined by an h2
or h3
etc.) and not the entire webpage itself.
In Wikipedia for example, one can access the edit mode for a specific chapter of an article, so for example the user could edit text from one heading of a certain type (say, h2
) to the next heading of that certain type (h2
).
This way, there is no necessity to open the edit mode of the entire article. To illustrate:
Currently, Drupal does not have an option to edit only chapter and one must open the edit mode of an entire webpage and locate the relevant chapter she/he wants to edit.
A possible solution to my problem
As we scroll down in a page, we can have several h2
appearing in the screen fold or window fold.
Is there any chance to somehow “capture” the first heading of these several headings and then, when edit mode is opened – the WYSIWYG editor would automatically scroll down to this heading?
The challenges are:
- I don’t know if such “capturing” (capture the first heading in a given scrolling position) is even possible in JavaScript
- Even if we capture the first heading in a given scrolling position and it is stored in some browser session storage, how could Drupal WYSIWYG editor know to scroll down to it in its own edit-window?