github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-25 00:00:00 +08:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Adds edit icon to each header in the page.

Browse Source 
Towards #618

Signed-off-by: Abijeet <abijeetpatro@gmail.com>
This commit is contained in:
Abijeet
2018-06-03 13:47:07 +05:30
parent 86f43c8a65
commit 134a96fa32
5 changed files with 71 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/assets/js/components/page-display.js
View File

@ -11,6 +11,7 @@ class PageDisplay {
this.setupPointer();
this.setupStickySidebar();
this.setupNavHighlighting();
this.setupEditOnHeader();
// Check the hash on load
if (window.location.hash) {
@ -219,7 +220,31 @@ class PageDisplay {
}
}
}
setupEditOnHeader() {
const headingEditIcon = document.querySelector('.heading-edit-icon');
if (headingEditIcon.length === 0) {
// user does not have permission to edit.
return;
}
// Create a clone of the edit icon without the hidden class
const visibleHeadingEditIcon = headingEditIcon.cloneNode(true);
visibleHeadingEditIcon.style.display = '';
const headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
// add an edit icon to each header.
for (let i = 0; i !== headings.length; ++i) {
const currHeading = headings[i];
const headingId = currHeading.id;
let editIcon = visibleHeadingEditIcon.cloneNode(true);
editIcon.href += `#${headingId}`;
currHeading.appendChild(editIcon);
}
}
}
module.exports = PageDisplay;
module.exports = PageDisplay;

13
resources/assets/js/components/wysiwyg-editor.js
View File

@ -497,6 +497,19 @@ class WysiwygEditor {
editorChange(html);
});
window.$events.listen('editor-scroll-to-text', textId => {
const element = editor.dom.get(textId)
if (!element) {
return;
}
// scroll the element into the view and put the cursor at the end.
element.scrollIntoView();
editor.selection.select(element, true);
editor.selection.collapse(false);
editor.focus();
});
registerEditorShortcuts(editor);
let wrap;