Comments: Added input wysiwyg for creating/updating comments

Not supporting old content, existing HTML or updating yet.

Author: ssddanbrown

app/Activity/Tools/CommentTree.php

@@ -41,6 +41,17 @@ public function get(): array
         return $this->tree;
     }
 
+    public function canUpdateAny(): bool
+    {
+        foreach ($this->comments as $comment) {
+            if (userCan('comment-update', $comment)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     /**
      * @param Comment[] $comments
      */

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

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;
     }

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,
         });
 

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;

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">

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 @@ class="button outline">{{ trans('entities.comment_add') }}</button>
 
     @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 @@ class="button outline">{{ trans('entities.comment_add') }}</button>
         @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>

resources/views/layouts/base.blade.php

@@ -68,10 +68,13 @@ class="@stack('body-class')">
     </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>