Comments: Added read-only listing into page editor

app/Entities/Controllers/PageController.php

@@ -24,16 +24,10 @@ use Throwable;
 
 class PageController extends Controller
 {
-    protected PageRepo $pageRepo;
-    protected ReferenceFetcher $referenceFetcher;
-
-    /**
-     * PageController constructor.
-     */
-    public function __construct(PageRepo $pageRepo, ReferenceFetcher $referenceFetcher)
-    {
-        $this->pageRepo = $pageRepo;
-        $this->referenceFetcher = $referenceFetcher;
+    public function __construct(
+        protected PageRepo $pageRepo,
+        protected ReferenceFetcher $referenceFetcher
+    ) {
     }
 
     /**

app/Entities/Tools/PageEditorData.php

@@ -2,6 +2,7 @@
 
 namespace BookStack\Entities\Tools;
 
+use BookStack\Activity\Tools\CommentTree;
 use BookStack\Entities\Models\Page;
 use BookStack\Entities\Repos\PageRepo;
 use BookStack\Entities\Tools\Markdown\HtmlToMarkdown;
@@ -9,19 +10,14 @@ use BookStack\Entities\Tools\Markdown\MarkdownToHtml;
 
 class PageEditorData
 {
-    protected Page $page;
-    protected PageRepo $pageRepo;
-    protected string $requestedEditor;
-
     protected array $viewData;
     protected array $warnings;
 
-    public function __construct(Page $page, PageRepo $pageRepo, string $requestedEditor)
-    {
-        $this->page = $page;
-        $this->pageRepo = $pageRepo;
-        $this->requestedEditor = $requestedEditor;
-
+    public function __construct(
+        protected Page $page,
+        protected PageRepo $pageRepo,
+        protected string $requestedEditor
+    ) {
         $this->viewData = $this->build();
     }
 
@@ -69,6 +65,7 @@ class PageEditorData
             'draftsEnabled'   => $draftsEnabled,
             'templates'       => $templates,
             'editor'          => $editorType,
+            'comments'        => new CommentTree($page),
         ];
     }
 

lang/en/entities.php

@@ -371,6 +371,7 @@ return [
     'comment_updated_success' => 'Comment updated',
     'comment_delete_confirm' => 'Are you sure you want to delete this comment?',
     'comment_in_reply_to' => 'In reply to :commentId',
+    'comment_editor_explain' => 'Here are the comments that have been left on this page. Comments can be added & managed when viewing the saved page.',
 
     // Revision
     'revision_delete_confirm' => 'Are you sure you want to delete this revision?',

resources/sass/_components.scss

@@ -676,6 +676,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   @include lightDark(background-color, #FFF, #222);
   .content {
     font-size: 0.666em;
+    padding: $-m $-s;
     p, ul, ol {
       font-size: $fs-m;
       margin: .5em 0;
@@ -700,6 +701,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .comment-box .header {
   border-bottom: 1px solid #DDD;
+  padding: $-s;
   @include lightDark(border-color, #DDD, #000);
   button {
     font-size: .8rem;
@@ -710,6 +712,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   .text-muted {
     color: #999;
   }
+  .meta a, .meta span {
+    white-space: nowrap;
+  }
   .right-meta .text-muted {
     opacity: .8;
   }
@@ -735,6 +740,24 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   display: block;
 }
 
+.comment-container-compact .comment-box {
+  .meta {
+    font-size: 0.8rem;
+  }
+  .header {
+    padding: $-xs;
+  }
+  .right-meta {
+    display: none;
+  }
+  .content {
+    padding: $-xs $-s;
+  }
+}
+.comment-container-compact .comment-thread-indicator {
+  width: $-m;
+}
+
 #tag-manager .drag-card {
   max-width: 500px;
 }

resources/views/comments/comment.blade.php

@@ -1,4 +1,4 @@
-<div component="page-comment"
+<div component="{{ $readOnly ? '' : 'page-comment' }}"
      option:page-comment:comment-id="{{ $comment->id }}"
      option:page-comment:comment-local-id="{{ $comment->local_id }}"
      option:page-comment:comment-parent-id="{{ $comment->parent_id }}"
@@ -6,12 +6,15 @@
      option:page-comment:deleted-text="{{ trans('entities.comment_deleted_success') }}"
      id="comment{{$comment->local_id}}"
      class="comment-box">
-    <div class="header p-s">
-        <div class="flex-container-row justify-space-between wrap">
-            <div class="meta text-muted flex-container-row items-center">
+    <div class="header">
+        <div class="flex-container-row wrap items-center gap-x-xs">
+            @if ($comment->createdBy)
+                <div>
+                    <img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar block mx-xs" alt="{{ $comment->createdBy->name }}">
+                </div>
+            @endif
+            <div class="meta text-muted flex-container-row wrap items-center flex">
                 @if ($comment->createdBy)
-                    <img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar mx-xs" alt="{{ $comment->createdBy->name }}">
-                    &nbsp;
                     <a href="{{ $comment->createdBy->getProfileUrl() }}">{{ $comment->createdBy->getShortName(16) }}</a>
                 @else
                     {{ trans('common.deleted_user') }}
@@ -25,6 +28,7 @@
                 @endif
             </div>
             <div class="right-meta flex-container-row justify-flex-end items-center px-s">
+                @if(!$readOnly && (userCan('comment-create-all') || userCan('comment-update', $comment) || userCan('comment-delete', $comment)))
                 <div class="actions mr-s">
                     @if(userCan('comment-create-all'))
                         <button refs="page-comment@reply-button" type="button" class="text-button text-muted hover-underline p-xs">@icon('reply') {{ trans('common.reply') }}</button>
@@ -50,6 +54,7 @@
                         &nbsp;&bull;&nbsp;
                     </span>
                 </div>
+                @endif
                 <div>
                     <a class="bold text-muted" href="#comment{{$comment->local_id}}">#{{$comment->local_id}}</a>
                 </div>
@@ -58,7 +63,7 @@
 
     </div>
 
-    <div refs="page-comment@content-container" class="content px-m py-s">
+    <div refs="page-comment@content-container" class="content">
         @if ($comment->parent_id)
             <p class="comment-reply mb-xxs">
                 <a class="text-muted text-small" href="#comment{{ $comment->parent_id }}">@icon('reply'){{ trans('entities.comment_in_reply_to', ['commentId' => '#' . $comment->parent_id]) }}</a>
@@ -67,7 +72,7 @@
         {!! $comment->html  !!}
     </div>
 
-    @if(userCan('comment-update', $comment))
+    @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>

resources/views/comments/comments.blade.php

@@ -18,7 +18,7 @@
 
     <div refs="page-comments@commentContainer" class="comment-container">
         @foreach($commentTree->get() as $branch)
-            @include('comments.comment-branch', ['branch' => $branch])
+            @include('comments.comment-branch', ['branch' => $branch, 'readOnly' => false])
         @endforeach
     </div>
 

resources/views/pages/parts/editor-toolbox.blade.php

@@ -7,6 +7,9 @@
             <button type="button" refs="editor-toolbox@tab-button" data-tab="files" title="{{ trans('entities.attachments') }}">@icon('attach')</button>
         @endif
         <button type="button" refs="editor-toolbox@tab-button" data-tab="templates" title="{{ trans('entities.templates') }}">@icon('template')</button>
+        @if($comments->enabled())
+            <button type="button" refs="editor-toolbox@tab-button" data-tab="comments" title="{{ trans('entities.comments') }}">@icon('comment')</button>
+        @endif
     </div>
 
     <div refs="editor-toolbox@tab-content" data-tab-content="tags" class="toolbox-tab-content">
@@ -26,7 +29,10 @@
         <div class="px-l">
             @include('pages.parts.template-manager', ['page' => $page, 'templates' => $templates])
         </div>
-
     </div>
 
+    @if($comments->enabled())
+        @include('pages.parts.toolbox-comments')
+    @endif
+
 </div>

resources/views/pages/parts/toolbox-comments.blade.php

@@ -0,0 +1,15 @@
+<div refs="editor-toolbox@tab-content" data-tab-content="comments" class="toolbox-tab-content">
+    <h4>{{ trans('entities.comments') }}</h4>
+
+    <div class="comment-container-compact px-l">
+        <p class="text-muted small mb-m">
+            {{ trans('entities.comment_editor_explain') }}
+        </p>
+        @foreach($comments->get() as $branch)
+            @include('comments.comment-branch', ['branch' => $branch, 'readOnly' => true])
+        @endforeach
+        @if($comments->empty())
+            <p class="italic text-muted">{{ trans('common.no_items') }}</p>
+        @endif
+    </div>
+</div>

tests/Entity/CommentTest.php

@@ -135,4 +135,14 @@ class CommentTest extends TestCase
         $respHtml->assertElementCount('.comment-branch', 4);
         $respHtml->assertElementContains('.comment-branch .comment-branch', 'My nested comment');
     }
+
+    public function test_comments_are_visible_in_the_page_editor()
+    {
+        $page = $this->entities->page();
+
+        $this->asAdmin()->postJson("/comment/$page->id", ['text' => 'My great comment to see in the editor']);
+
+        $respHtml = $this->withHtml($this->get($page->getUrl('/edit')));
+        $respHtml->assertElementContains('.comment-box .content', 'My great comment to see in the editor');
+    }
 }