Comments: Added back-end HTML support, fixed editor focus

Also fixed handling of editors when moved in DOM, to properly remove
then re-init before & after move to avoid issues.

app/Activity/CommentRepo.php

@@ -5,7 +5,7 @@ namespace BookStack\Activity;
 use BookStack\Activity\Models\Comment;
 use BookStack\Entities\Models\Entity;
 use BookStack\Facades\Activity as ActivityService;
-use League\CommonMark\CommonMarkConverter;
+use BookStack\Util\HtmlDescriptionFilter;
 
 class CommentRepo
 {
@@ -20,13 +20,12 @@ class CommentRepo
     /**
      * Create a new comment on an entity.
      */
-    public function create(Entity $entity, string $text, ?int $parent_id): Comment
+    public function create(Entity $entity, string $html, ?int $parent_id): Comment
     {
         $userId = user()->id;
         $comment = new Comment();
 
-        $comment->text = $text;
+        $comment->html = HtmlDescriptionFilter::filterFromString($html);
-        $comment->html = $this->commentToHtml($text);
         $comment->created_by = $userId;
         $comment->updated_by = $userId;
         $comment->local_id = $this->getNextLocalId($entity);
@@ -42,11 +41,10 @@ class CommentRepo
     /**
      * Update an existing comment.
      */
-    public function update(Comment $comment, string $text): Comment
+    public function update(Comment $comment, string $html): Comment
     {
         $comment->updated_by = user()->id;
-        $comment->text = $text;
+        $comment->html = HtmlDescriptionFilter::filterFromString($html);
-        $comment->html = $this->commentToHtml($text);
         $comment->save();
 
         ActivityService::add(ActivityType::COMMENT_UPDATE, $comment);
@@ -64,20 +62,6 @@ class CommentRepo
         ActivityService::add(ActivityType::COMMENT_DELETE, $comment);
     }
 
-    /**
-     * Convert the given comment Markdown to HTML.
-     */
-    public function commentToHtml(string $commentText): string
-    {
-        $converter = new CommonMarkConverter([
-            'html_input'         => 'strip',
-            'max_nesting_level'  => 10,
-            'allow_unsafe_links' => false,
-        ]);
-
-        return $converter->convert($commentText);
-    }
-
     /**
      * Get the next local ID relative to the linked entity.
      */

app/Activity/Controllers/CommentController.php

@@ -22,8 +22,8 @@ class CommentController extends Controller
      */
     public function savePageComment(Request $request, int $pageId)
     {
-        $this->validate($request, [
+        $input = $this->validate($request, [
-            'text'      => ['required', 'string'],
+            'html'      => ['required', 'string'],
             'parent_id' => ['nullable', 'integer'],
         ]);
 
@@ -39,7 +39,7 @@ class CommentController extends Controller
 
         // Create a new comment.
         $this->checkPermission('comment-create-all');
-        $comment = $this->commentRepo->create($page, $request->get('text'), $request->get('parent_id'));
+        $comment = $this->commentRepo->create($page, $input['html'], $input['parent_id'] ?? null);
 
         return view('comments.comment-branch', [
             'readOnly' => false,
@@ -57,17 +57,20 @@ class CommentController extends Controller
      */
     public function update(Request $request, int $commentId)
     {
-        $this->validate($request, [
+        $input = $this->validate($request, [
-            'text' => ['required', 'string'],
+            'html' => ['required', 'string'],
         ]);
 
         $comment = $this->commentRepo->getById($commentId);
         $this->checkOwnablePermission('page-view', $comment->entity);
         $this->checkOwnablePermission('comment-update', $comment);
 
-        $comment = $this->commentRepo->update($comment, $request->get('text'));
+        $comment = $this->commentRepo->update($comment, $input['html']);
 
-        return view('comments.comment', ['comment' => $comment, 'readOnly' => false]);
+        return view('comments.comment', [
+            'comment' => $comment,
+            'readOnly' => false,
+        ]);
     }
 
     /**

resources/js/components/page-comment.js

@@ -1,6 +1,6 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom';
-import {buildForInput} from "../wysiwyg/config";
+import {buildForInput} from '../wysiwyg/config';
 
 export class PageComment extends Component {
 
@@ -58,6 +58,7 @@ export class PageComment extends Component {
         this.toggleEditMode(true);
 
         if (this.wysiwygEditor) {
+            this.wysiwygEditor.focus();
             return;
         }
 
@@ -72,6 +73,7 @@ export class PageComment extends Component {
 
         window.tinymce.init(config).then(editors => {
             this.wysiwygEditor = editors[0];
+            setTimeout(() => this.wysiwygEditor.focus(), 50);
         });
     }
 
@@ -81,7 +83,7 @@ export class PageComment extends Component {
         this.form.toggleAttribute('hidden', true);
 
         const reqData = {
-            text: this.input.value,
+            html: this.wysiwygEditor.getContent(),
             parent_id: this.parentId || null,
         };
 

resources/js/components/page-comments.js

@@ -1,6 +1,6 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom';
-import {buildForInput} from "../wysiwyg/config";
+import {buildForInput} from '../wysiwyg/config';
 
 export class PageComments extends Component {
 
@@ -65,9 +65,8 @@ export class PageComments extends Component {
         this.form.after(loading);
         this.form.toggleAttribute('hidden', true);
 
-        const text = this.formInput.value;
         const reqData = {
-            text,
+            html: this.wysiwygEditor.getContent(),
             parent_id: this.parentId || null,
         };
 
@@ -92,6 +91,7 @@ export class PageComments extends Component {
     }
 
     resetForm() {
+        this.removeEditor();
         this.formInput.value = '';
         this.parentId = null;
         this.replyToRow.toggleAttribute('hidden', true);
@@ -99,6 +99,7 @@ export class PageComments extends Component {
     }
 
     showForm() {
+        this.removeEditor();
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);
         this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
@@ -118,6 +119,7 @@ export class PageComments extends Component {
 
     loadEditor() {
         if (this.wysiwygEditor) {
+            this.wysiwygEditor.focus();
             return;
         }
 
@@ -132,10 +134,17 @@ export class PageComments extends Component {
 
         window.tinymce.init(config).then(editors => {
             this.wysiwygEditor = editors[0];
-            this.wysiwygEditor.focus();
+            setTimeout(() => this.wysiwygEditor.focus(), 50);
         });
     }
 
+    removeEditor() {
+        if (this.wysiwygEditor) {
+            this.wysiwygEditor.remove();
+            this.wysiwygEditor = null;
+        }
+    }
+
     getCommentCount() {
         return this.container.querySelectorAll('[component="page-comment"]').length;
     }

resources/views/comments/comment.blade.php

@@ -77,7 +77,7 @@
     @if(!$readOnly && userCan('comment-update', $comment))
         <form novalidate refs="page-comment@form" hidden class="content pt-s px-s block">
             <div class="form-group description-input">
-                <textarea refs="page-comment@input" name="markdown" rows="3" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->text }}</textarea>
+                <textarea refs="page-comment@input" name="html" rows="3" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->html }}</textarea>
             </div>
             <div class="form-group text-right">
                 <button type="button" class="button outline" refs="page-comment@form-cancel">{{ trans('common.cancel') }}</button>

resources/views/comments/create.blade.php

@@ -16,7 +16,7 @@
         <div class="content px-s pt-s">
             <form refs="page-comments@form" novalidate>
                 <div class="form-group description-input">
-                <textarea refs="page-comments@form-input" name="markdown"
+                <textarea refs="page-comments@form-input" name="html"
                           rows="3"
                           placeholder="{{ trans('entities.comment_placeholder') }}"></textarea>
                 </div>