diff --git a/app/Activity/Tools/CommentTree.php b/app/Activity/Tools/CommentTree.php
index 3303add39..16f6804ea 100644
--- a/app/Activity/Tools/CommentTree.php
+++ b/app/Activity/Tools/CommentTree.php
@@ -41,6 +41,17 @@ class CommentTree
return $this->tree;
}
+ public function canUpdateAny(): bool
+ {
+ foreach ($this->comments as $comment) {
+ if (userCan('comment-update', $comment)) {
+ return true;
+ }
+ }
+
+ return false;
+ }
+
/**
* @param Comment[] $comments
*/
diff --git a/resources/js/components/page-comment.js b/resources/js/components/page-comment.js
index 8284d7f20..dc6ca8264 100644
--- a/resources/js/components/page-comment.js
+++ b/resources/js/components/page-comment.js
@@ -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) {
diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js
index e2911afc6..ebcc95f07 100644
--- a/resources/js/components/page-comments.js
+++ b/resources/js/components/page-comments.js
@@ -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;
}
diff --git a/resources/js/components/wysiwyg-input.js b/resources/js/components/wysiwyg-input.js
index 88c06a334..ad964aed2 100644
--- a/resources/js/components/wysiwyg-input.js
+++ b/resources/js/components/wysiwyg-input.js
@@ -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,
});
diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index c4336da7c..fb5ea7e6f 100644
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -30,6 +30,13 @@
display: block;
}
+.wysiwyg-input.mce-content-body:before {
+ padding: 1rem;
+ top: 4px;
+ font-style: italic;
+ color: rgba(34,47,62,.5)
+}
+
// Default styles for our custom root nodes
.page-content.mce-content-body doc-root {
display: block;
diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php
index 1cb709160..4340cfdf5 100644
--- a/resources/views/comments/comment.blade.php
+++ b/resources/views/comments/comment.blade.php
@@ -4,6 +4,8 @@
option:page-comment:comment-parent-id="{{ $comment->parent_id }}"
option:page-comment:updated-text="{{ trans('entities.comment_updated_success') }}"
option:page-comment:deleted-text="{{ trans('entities.comment_deleted_success') }}"
+ option:page-comment:wysiwyg-language="{{ $locale->htmlLang() }}"
+ option:page-comment:wysiwyg-text-direction="{{ $locale->htmlDirection() }}"
id="comment{{$comment->local_id}}"
class="comment-box">
<div class="header">
diff --git a/resources/views/comments/comments.blade.php b/resources/views/comments/comments.blade.php
index 26d286290..2c314864b 100644
--- a/resources/views/comments/comments.blade.php
+++ b/resources/views/comments/comments.blade.php
@@ -2,6 +2,8 @@
option:page-comments:page-id="{{ $page->id }}"
option:page-comments:created-text="{{ trans('entities.comment_created_success') }}"
option:page-comments:count-text="{{ trans('entities.comment_count') }}"
+ option:page-comments:wysiwyg-language="{{ $locale->htmlLang() }}"
+ option:page-comments:wysiwyg-text-direction="{{ $locale->htmlDirection() }}"
class="comments-list"
aria-label="{{ trans('entities.comments') }}">
@@ -24,7 +26,6 @@
@if(userCan('comment-create-all'))
@include('comments.create')
-
@if (!$commentTree->empty())
<div refs="page-comments@addButtonContainer" class="text-right">
<button type="button"
@@ -34,4 +35,11 @@
@endif
@endif
+ @if(userCan('comment-create-all') || $commentTree->canUpdateAny())
+ @push('post-app-scripts')
+ <script src="{{ versioned_asset('libs/tinymce/tinymce.min.js') }}" nonce="{{ $cspNonce }}"></script>
+ @include('form.editor-translations')
+ @endpush
+ @endif
+
</section>
\ No newline at end of file
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index cf15e5426..43cca6b14 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -68,10 +68,13 @@
</div>
@yield('bottom')
+
+
@if($cspNonce ?? false)
<script src="{{ versioned_asset('dist/app.js') }}" nonce="{{ $cspNonce }}"></script>
@endif
@yield('scripts')
+ @stack('post-app-scripts')
@include('layouts.parts.base-body-end')
</body>