Merge pull request #4322 from BookStackApp/comments_in_editor

Added read-only comments listing into page editor
2024-06-25 22:22:21 +00:00 · 2023-06-16 13:23:40 +01:00 · 2023-06-16 13:23:40 +01:00 · 9f4450fea9
commit 9f4450fea9
parent ec775aec02 88aae5b004
10 changed files with 83 additions and 31 deletions
--- a/app/Activity/Controllers/CommentController.php
+++ b/app/Activity/Controllers/CommentController.php
@ -42,6 +42,7 @@ class CommentController extends Controller
        $comment = $this->commentRepo->create($page, $request->get('text'), $request->get('parent_id'));

        return view('comments.comment-branch', [
+            'readOnly' => false,
            'branch' => [
                'comment' => $comment,
                'children' => [],
@ -66,7 +67,7 @@ class CommentController extends Controller

        $comment = $this->commentRepo->update($comment, $request->get('text'));

-        return view('comments.comment', ['comment' => $comment]);
+        return view('comments.comment', ['comment' => $comment, 'readOnly' => false]);
    }

    /**
--- a/app/Entities/Controllers/PageController.php
+++ b/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
+    ) {
    }

    /**
--- a/app/Entities/Tools/PageEditorData.php
+++ b/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),
        ];
    }

--- a/lang/en/entities.php
+++ b/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?',
--- a/resources/sass/_components.scss
+++ b/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;
 }
--- a/resources/views/comments/comment.blade.php
+++ b/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>
--- a/resources/views/comments/comments.blade.php
+++ b/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>

--- a/resources/views/pages/parts/editor-toolbox.blade.php
+++ b/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>
--- a/resources/views/pages/parts/toolbox-comments.blade.php
+++ b/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>
--- a/tests/Entity/CommentTest.php
+++ b/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');
+    }
 }