From 1f2b1d64ae081883789213a83ada0b12b350e81a Mon Sep 17 00:00:00 2001 From: Brij Mandaliya Date: Thu, 21 Nov 2024 16:06:42 +0530 Subject: [PATCH 1/2] Add image upload functionality to page comments, also add test case --- app/Util/HtmlDescriptionFilter.php | 1 + resources/js/components/page-comments.js | 5 ++++- resources/js/wysiwyg-tinymce/config.js | 17 +++++++++++++---- resources/views/comments/comments.blade.php | 3 +++ tests/Entity/CommentTest.php | 12 ++++++++++++ 5 files changed, 33 insertions(+), 5 deletions(-) diff --git a/app/Util/HtmlDescriptionFilter.php b/app/Util/HtmlDescriptionFilter.php index cb091b869f8..a4c214ae58c 100644 --- a/app/Util/HtmlDescriptionFilter.php +++ b/app/Util/HtmlDescriptionFilter.php @@ -27,6 +27,7 @@ class HtmlDescriptionFilter 'strong' => [], 'em' => [], 'br' => [], + 'img' => ['src', 'alt'], ]; public static function filterFromString(string $html): string diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js index 1d6abfe2044..6313954b6ce 100644 --- a/resources/js/components/page-comments.js +++ b/resources/js/components/page-comments.js @@ -135,7 +135,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, }); diff --git a/resources/js/wysiwyg-tinymce/config.js b/resources/js/wysiwyg-tinymce/config.js index 1666aa50066..76d7e186017 100644 --- a/resources/js/wysiwyg-tinymce/config.js +++ b/resources/js/wysiwyg-tinymce/config.js @@ -318,6 +318,8 @@ 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 +345,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(' @@ -37,6 +39,7 @@ class="button outline">{{ trans('entities.comment_add') }} @if(userCan('comment-create-all') || $commentTree->canUpdateAny()) @push('body-end') + @include('pages.parts.image-manager', ['uploaded_to' => $page->id]) @include('form.editor-translations') @include('entities.selector-popup') diff --git a/tests/Entity/CommentTest.php b/tests/Entity/CommentTest.php index 73136235ce0..ac3e4f05915 100644 --- a/tests/Entity/CommentTest.php +++ b/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' => '

4.sm.webp

', + ]); + + $this->assertStringMatchesFormat('%A%A

%A', $page->comments()->first()->html); + } } From d1825dc80282c5ea7460467e4b6326da413183b3 Mon Sep 17 00:00:00 2001 From: Brij Mandaliya Date: Thu, 21 Nov 2024 16:24:39 +0530 Subject: [PATCH 2/2] Fix: Lint JS --- resources/js/components/page-comments.js | 1 - resources/js/wysiwyg-tinymce/config.js | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js index 6313954b6ce..22f35882c39 100644 --- a/resources/js/components/page-comments.js +++ b/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}); } diff --git a/resources/js/wysiwyg-tinymce/config.js b/resources/js/wysiwyg-tinymce/config.js index 76d7e186017..fdd734c9288 100644 --- a/resources/js/wysiwyg-tinymce/config.js +++ b/resources/js/wysiwyg-tinymce/config.js @@ -318,8 +318,9 @@ export function buildForInput(options) { // Set language window.tinymce.addI18n(options.language, options.translationMap); - //Add IMage Manager Plugin + // 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];