[PR #875] [MERGED] Adds edit icon to highlighted content in the page. #5729

New Issue

OVERLORD · 2026-02-05T10:15:29+03:00

OVERLORD commented

2026-02-05 10:15:29 +03:00

📋 Pull Request Information

Original PR: https://github.com/BookStackApp/BookStack/pull/875
Author: @Abijeet
Created: 6/3/2018
Status: ✅ Merged
Merged: 7/14/2018
Merged by: @ssddanbrown

Base: master ← Head: feature/edit-link-headers

📝 Commits (6)

134a96f Adds edit icon to each header in the page.
b936e1f Added code to handle scroll for markdown.
562225a Added code to set the cursor at end of line while scrolling.
6c4c1cc Changed the way we were displaying the edit icon.
78be853 Removed previous code that is now unneeded
771f781 Fixes a corner case with exclamation in the ID.

📊 Changes

20 files changed (+129 additions, -18 deletions)

View changed files

📝 resources/assets/js/components/markdown-editor.js (+39 -0)
📝 resources/assets/js/components/page-display.js (+15 -4)
📝 resources/assets/js/components/wysiwyg-editor.js (+24 -1)
📝 resources/assets/sass/_pages.scss (+20 -3)
📝 resources/lang/de/entities.php (+1 -0)
📝 resources/lang/en/entities.php (+1 -0)
📝 resources/lang/es/entities.php (+1 -0)
📝 resources/lang/es_AR/entities.php (+2 -1)
📝 resources/lang/fr/entities.php (+1 -0)
📝 resources/lang/it/entities.php (+1 -0)
📝 resources/lang/ja/entities.php (+1 -0)
📝 resources/lang/nl/entities.php (+7 -6)
📝 resources/lang/pl/entities.php (+1 -0)
📝 resources/lang/pt_BR/entities.php (+1 -0)
📝 resources/lang/ru/entities.php (+1 -0)
📝 resources/lang/sk/entities.php (+1 -0)
📝 resources/lang/sv/entities.php (+1 -0)
📝 resources/lang/zh_CN/entities.php (+1 -0)
📝 resources/lang/zh_TW/entities.php (+1 -0)
📝 resources/views/pages/show.blade.php (+9 -3)

📄 Description

Towards #618

See updated code and description below as per review.

This adds an edit icon next to each header in the page. On clicking of this edit icon, the editing window is opened and the header text is put in focus. This works on the WYSIWYG editor.

Not sure how to implement it on the Makrdown editor as the headings in the markdown editor have no unique ID associated with them. One option is to disable the edit icon if the application editor is set to Markdown. Another not very flexible option is,

Recreate the heading text from the bookmark ID - #bkmrk-hello-world --> hello world
Fetch all the elements with class cm-header, and find the one that contains text that starts with the above.
With the help of this element, find the CodeMirror-linenumber element, which is sort of a cousin to this element. Get the line number inside it.
Use scrollIntoView (https://codemirror.net/doc/manual.html#scrollIntoView) to scroll the line into view.

@ssddanbrown, What do you think?

How does it look?

The edit icon appears only on hover.

Signed-off-by: Abijeet abijeetpatro@gmail.com

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/BookStackApp/BookStack/pull/875 **Author:** [@Abijeet](https://github.com/Abijeet) **Created:** 6/3/2018 **Status:** ✅ Merged **Merged:** 7/14/2018 **Merged by:** [@ssddanbrown](https://github.com/ssddanbrown) **Base:** `master` ← **Head:** `feature/edit-link-headers` --- ### 📝 Commits (6) - [`134a96f`](https://github.com/BookStackApp/BookStack/commit/134a96fa32d6e5efff8a912864c9a2a2862ddb39) Adds edit icon to each header in the page. - [`b936e1f`](https://github.com/BookStackApp/BookStack/commit/b936e1f403e0565adc9a619d8b9426dfd6b9492c) Added code to handle scroll for markdown. - [`562225a`](https://github.com/BookStackApp/BookStack/commit/562225a77b1cde623bad3f51f12fc26bef38402a) Added code to set the cursor at end of line while scrolling. - [`6c4c1cc`](https://github.com/BookStackApp/BookStack/commit/6c4c1ccb583835ec794468767bc645d7fcdb0db9) Changed the way we were displaying the edit icon. - [`78be853`](https://github.com/BookStackApp/BookStack/commit/78be8535f7c9e83e39c1bc3bad7357f2e6c7e14a) Removed previous code that is now unneeded - [`771f781`](https://github.com/BookStackApp/BookStack/commit/771f781e7faf5823bf3aee905ab5610674149ad2) Fixes a corner case with exclamation in the ID. ### 📊 Changes **20 files changed** (+129 additions, -18 deletions) <details> <summary>View changed files</summary> 📝 `resources/assets/js/components/markdown-editor.js` (+39 -0) 📝 `resources/assets/js/components/page-display.js` (+15 -4) 📝 `resources/assets/js/components/wysiwyg-editor.js` (+24 -1) 📝 `resources/assets/sass/_pages.scss` (+20 -3) 📝 `resources/lang/de/entities.php` (+1 -0) 📝 `resources/lang/en/entities.php` (+1 -0) 📝 `resources/lang/es/entities.php` (+1 -0) 📝 `resources/lang/es_AR/entities.php` (+2 -1) 📝 `resources/lang/fr/entities.php` (+1 -0) 📝 `resources/lang/it/entities.php` (+1 -0) 📝 `resources/lang/ja/entities.php` (+1 -0) 📝 `resources/lang/nl/entities.php` (+7 -6) 📝 `resources/lang/pl/entities.php` (+1 -0) 📝 `resources/lang/pt_BR/entities.php` (+1 -0) 📝 `resources/lang/ru/entities.php` (+1 -0) 📝 `resources/lang/sk/entities.php` (+1 -0) 📝 `resources/lang/sv/entities.php` (+1 -0) 📝 `resources/lang/zh_CN/entities.php` (+1 -0) 📝 `resources/lang/zh_TW/entities.php` (+1 -0) 📝 `resources/views/pages/show.blade.php` (+9 -3) </details> ### 📄 Description Towards #618 > See updated code and description below as per review. This adds an edit icon next to each header in the page. On clicking of this edit icon, the editing window is opened and the header text is put in focus. This works on the WYSIWYG editor. Not sure how to implement it on the Makrdown editor as the headings in the markdown editor have no unique ID associated with them. One option is to disable the edit icon if the application editor is set to Markdown. Another not very flexible option is, 1. Recreate the heading text from the bookmark ID - #bkmrk-hello-world --> hello world 2. Fetch all the elements with class `cm-header`, and find the one that contains text that starts with the above. 3. With the help of this element, find the `CodeMirror-linenumber` element, which is sort of a cousin to this element. Get the line number inside it. 4. Use `scrollIntoView` (https://codemirror.net/doc/manual.html#scrollIntoView) to scroll the line into view. @ssddanbrown, What do you think? # How does it look? The edit icon appears only on hover. ![edit-icon-header](https://user-images.githubusercontent.com/1685517/40884737-f3ccf526-6736-11e8-96d7-916593bffd07.png) Signed-off-by: Abijeet <abijeetpatro@gmail.com> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

OVERLORD added the pull-request label 2026-02-05 10:15:29 +03:00

OVERLORD closed this issue

2026-02-05 10:15:31 +03:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#5729