webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-13 00:41:59 +03:00
Code Activity

Comments: Added input wysiwyg for creating/updating comments

Browse Source 
Not supporting old content, existing HTML or updating yet.
This commit is contained in:
Dan Brown
2024-01-30 14:27:09 +00:00
parent 24e6dc4b37
commit 5c92b72fdd
8 changed files with 85 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/components/page-comment.js
View File

@ -1,5 +1,6 @@
import {Component} from './component';
import {getLoading, htmlToDom} from '../services/dom';
import {buildForInput} from "../wysiwyg/config";
export class PageComment extends Component {
@ -11,7 +12,12 @@ export class PageComment extends Component {
this.deletedText = this.$opts.deletedText;
this.updatedText = this.$opts.updatedText;
// Element References
// Editor reference and text options
this.wysiwygEditor = null;
this.wysiwygLanguage = this.$opts.wysiwygLanguage;
this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
// Element references
this.container = this.$el;
this.contentContainer = this.$refs.contentContainer;
this.form = this.$refs.form;
@ -50,8 +56,23 @@ export class PageComment extends Component {
startEdit() {
this.toggleEditMode(true);
const lineCount = this.$refs.input.value.split('\n').length;
this.$refs.input.style.height = `${(lineCount * 20) + 40}px`;
if (this.wysiwygEditor) {
return;
}
const config = buildForInput({
language: this.wysiwygLanguage,
containerElement: this.input,
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.wysiwygTextDirection,
translations: {},
translationMap: window.editor_translations,
});
window.tinymce.init(config).then(editors => {
this.wysiwygEditor = editors[0];
});
}
async update(event) {

30
resources/js/components/page-comments.js
View File

@ -1,5 +1,6 @@
import {Component} from './component';
import {getLoading, htmlToDom} from '../services/dom';
import {buildForInput} from "../wysiwyg/config";
export class PageComments extends Component {
@ -21,6 +22,11 @@ export class PageComments extends Component {
this.hideFormButton = this.$refs.hideFormButton;
this.removeReplyToButton = this.$refs.removeReplyToButton;
// WYSIWYG options
this.wysiwygLanguage = this.$opts.wysiwygLanguage;
this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
this.wysiwygEditor = null;
// Translations
this.createdText = this.$opts.createdText;
this.countText = this.$opts.countText;
@ -96,9 +102,7 @@ export class PageComments extends Component {
this.formContainer.toggleAttribute('hidden', false);
this.addButtonContainer.toggleAttribute('hidden', true);
this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
setTimeout(() => {
this.formInput.focus();
}, 100);
this.loadEditor();
}
hideForm() {
@ -112,6 +116,26 @@ export class PageComments extends Component {
this.addButtonContainer.toggleAttribute('hidden', false);
}
loadEditor() {
if (this.wysiwygEditor) {
return;
}
const config = buildForInput({
language: this.wysiwygLanguage,
containerElement: this.formInput,
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.wysiwygTextDirection,
translations: {},
translationMap: window.editor_translations,
});
window.tinymce.init(config).then(editors => {
this.wysiwygEditor = editors[0];
this.wysiwygEditor.focus();
});
}
getCommentCount() {
return this.container.querySelectorAll('[component="page-comment"]').length;
}

7
resources/js/components/wysiwyg-input.js
View File

@ -10,11 +10,8 @@ export class WysiwygInput extends Component {
language: this.$opts.language,
containerElement: this.elem,
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.textDirection,
translations: {
imageUploadErrorText: this.$opts.imageUploadErrorText,
serverUploadLimitText: this.$opts.serverUploadLimitText,
},
textDirection: this.$opts.textDirection,
translations: {},
translationMap: window.editor_translations,
});