0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-01 15:09:51 +00:00

Comments: Added input wysiwyg for creating/updating comments

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
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
8 changed files with 85 additions and 12 deletions
resources/js/components

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) {