Add image upload functionality to page comments, also add test case

app/Util/HtmlDescriptionFilter.php

@@ -27,6 +27,7 @@ class HtmlDescriptionFilter
         'strong' => [],
         'em' => [],
         'br' => [],
+        'img' => ['src', 'alt'],
     ];
 
     public static function filterFromString(string $html): string

resources/js/components/page-comments.js

@@ -93,7 +93,6 @@ export class PageComments extends Component {
 
     updateCount() {
         const count = this.getCommentCount();
-        console.log('update count', count, this.container);
         this.commentsTitle.textContent = window.$trans.choice(this.countText, count, {count});
     }
 
@@ -135,7 +134,10 @@ export class PageComments extends Component {
             containerElement: this.formInput,
             darkMode: document.documentElement.classList.contains('dark-mode'),
             textDirection: this.wysiwygTextDirection,
-            translations: {},
+            translations: {
+                imageUploadErrorText: this.$opts.imageUploadErrorText,
+                serverUploadLimitText: this.$opts.serverUploadLimitText,
+            },
             translationMap: window.editor_translations,
         });
 

resources/js/wysiwyg-tinymce/config.js

@@ -318,6 +318,9 @@ export function buildForInput(options) {
     // Set language
     window.tinymce.addI18n(options.language, options.translationMap);
 
+    // Add IMage Manager Plugin
+    window.tinymce.PluginManager.add('imagemanager', getImagemanagerPlugin());
+
     // BookStack Version
     const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1];
 
@@ -343,13 +346,20 @@ export function buildForInput(options) {
         remove_trailing_brs: false,
         statusbar: false,
         menubar: false,
-        plugins: 'link autolink lists',
+        plugins: 'link autolink lists imagemanager',
         contextmenu: false,
-        toolbar: 'bold italic link bullist numlist',
+        toolbar: 'bold italic link bullist numlist imagemanager-insert',
         content_style: getContentStyle(options),
-        file_picker_types: 'file',
-        valid_elements: 'p,a[href|title|target],ol,ul,li,strong,em,br',
+        file_picker_types: 'file image',
+        automatic_uploads: false,
+        valid_elements: 'p,a[href|title|target],ol,ul,li,strong,em,br,+div[pre|img],img[src|alt|width|height|class|style]',
         file_picker_callback: filePickerCallback,
+        paste_preprocess(plugin, args) {
+            const {content} = args;
+            if (content.indexOf('<img src="file://') !== -1) {
+                args.content = '';
+            }
+        },
         init_instance_callback(editor) {
             addCustomHeadContent(editor.getDoc());
 

resources/views/comments/comments.blade.php

@@ -4,6 +4,8 @@
          option:page-comments:count-text="{{ trans('entities.comment_count') }}"
          option:page-comments:wysiwyg-language="{{ $locale->htmlLang() }}"
          option:page-comments:wysiwyg-text-direction="{{ $locale->htmlDirection() }}"
+         option:page-comments:image-upload-error-text="{{ trans('errors.image_upload_error') }}"
+         option:page-comments:server-upload-limit-text="{{ trans('errors.server_upload_limit') }}"
          class="comments-list"
          aria-label="{{ trans('entities.comments') }}">
 
@@ -37,6 +39,7 @@ class="button outline">{{ trans('entities.comment_add') }}</button>
 
     @if(userCan('comment-create-all') || $commentTree->canUpdateAny())
         @push('body-end')
+            @include('pages.parts.image-manager', ['uploaded_to' => $page->id])
             <script src="{{ versioned_asset('libs/tinymce/tinymce.min.js') }}" nonce="{{ $cspNonce }}" defer></script>
             @include('form.editor-translations')
             @include('entities.selector-popup')

tests/Entity/CommentTest.php

@@ -214,4 +214,16 @@ public function test_comment_editor_js_loaded_with_create_or_edit_permissions()
         $resp->assertSee('window.editor_translations', false);
         $resp->assertSee('component="entity-selector"', false);
     }
+
+    public function test_images_can_add_in_comment()
+    {
+        $this->asEditor();
+        $page = $this->entities->page();
+
+        $this->postJson("/comment/$page->id", [
+            'html' => '<p><a href="http://localhost:8080/uploads/images/gallery/2024-10/4-sm.webp" target="_blank" rel="noopener" data-mce-href="http://localhost:8080/uploads/images/gallery/2024-10/4-sm.webp" data-mce-selected="inline-boundary"><img src="http://localhost:8080/uploads/images/gallery/2024-10/scaled-1680-/4-sm.webp" alt="4.sm.webp" data-mce-src="http://localhost:8080/uploads/images/gallery/2024-10/scaled-1680-/4-sm.webp" data-mce-selected="1"></a></p>',
+        ]);
+
+        $this->assertStringMatchesFormat('%A<p%A><a%A><img src="http://localhost:8080/uploads/images/gallery/%A.webp">%A</p>%A', $page->comments()->first()->html);
+    }
 }