archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-17 05:42:06 +00:00
Code Issues Projects Releases Wiki Activity

Polished up code editor design

Browse source
This commit is contained in:
Dan Brown 2022-06-20 17:11:34 +01:00
parent 96d9077479
commit 77cd550fae
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
3 changed files with 66 additions and 31 deletions
resources/js/components
code-editor.js

21
resources/js/components/code-editor.js
View file

@ -33,10 +33,11 @@ class CodeEditor {
onSelect(this.languageLinks, event => {
const language = event.target.dataset.lang;
this.languageInput.value = language;
this.updateEditorMode(language);
this.languageInputChange(language);
});
onEnterPress(this.languageInput, e => this.save());
this.languageInput.addEventListener('input', e => this.languageInputChange(this.languageInput.value));
onSelect(this.saveButton, e => this.save());
onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
@ -60,7 +61,7 @@ class CodeEditor {
this.callback = callback;
this.show()
.then(() => this.updateEditorMode(language))
.then(() => this.languageInputChange(language))
.then(() => window.importVersioned('code'))
.then(Code => Code.setContent(this.editor, code));
}
@ -90,6 +91,22 @@ class CodeEditor {
Code.setMode(this.editor, language, this.editor.getValue());
}
languageInputChange(language) {
this.updateEditorMode(language);
const inputLang = language.toLowerCase();
let matched = false;
for (const link of this.languageLinks) {
const lang = link.dataset.lang.toLowerCase().trim();
const isMatch = inputLang && lang.startsWith(inputLang);
link.classList.toggle('active', isMatch);
if (isMatch && !matched) {
link.scrollIntoView({block: "center", behavior: "smooth"});
matched = true;
}
}
}
loadHistory() {
this.history = JSON.parse(window.sessionStorage.getItem(this.historyKey) || '{}');
const historyKeys = Object.keys(this.history).reverse();