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..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}); } @@ -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, }); diff --git a/resources/js/wysiwyg-tinymce/config.js b/resources/js/wysiwyg-tinymce/config.js index 1666aa50066..fdd734c9288 100644 --- a/resources/js/wysiwyg-tinymce/config.js +++ b/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(' @@ -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); + } }