mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Comments: Added back-end HTML support, fixed editor focus
Also fixed handling of editors when moved in DOM, to properly remove then re-init before & after move to avoid issues.
This commit is contained in:
parent
5c92b72fdd
commit
adf0baebb9
@ -5,7 +5,7 @@ namespace BookStack\Activity;
|
||||
use BookStack\Activity\Models\Comment;
|
||||
use BookStack\Entities\Models\Entity;
|
||||
use BookStack\Facades\Activity as ActivityService;
|
||||
use League\CommonMark\CommonMarkConverter;
|
||||
use BookStack\Util\HtmlDescriptionFilter;
|
||||
|
||||
class CommentRepo
|
||||
{
|
||||
@ -20,13 +20,12 @@ class CommentRepo
|
||||
/**
|
||||
* Create a new comment on an entity.
|
||||
*/
|
||||
public function create(Entity $entity, string $text, ?int $parent_id): Comment
|
||||
public function create(Entity $entity, string $html, ?int $parent_id): Comment
|
||||
{
|
||||
$userId = user()->id;
|
||||
$comment = new Comment();
|
||||
|
||||
$comment->text = $text;
|
||||
$comment->html = $this->commentToHtml($text);
|
||||
$comment->html = HtmlDescriptionFilter::filterFromString($html);
|
||||
$comment->created_by = $userId;
|
||||
$comment->updated_by = $userId;
|
||||
$comment->local_id = $this->getNextLocalId($entity);
|
||||
@ -42,11 +41,10 @@ class CommentRepo
|
||||
/**
|
||||
* Update an existing comment.
|
||||
*/
|
||||
public function update(Comment $comment, string $text): Comment
|
||||
public function update(Comment $comment, string $html): Comment
|
||||
{
|
||||
$comment->updated_by = user()->id;
|
||||
$comment->text = $text;
|
||||
$comment->html = $this->commentToHtml($text);
|
||||
$comment->html = HtmlDescriptionFilter::filterFromString($html);
|
||||
$comment->save();
|
||||
|
||||
ActivityService::add(ActivityType::COMMENT_UPDATE, $comment);
|
||||
@ -64,20 +62,6 @@ class CommentRepo
|
||||
ActivityService::add(ActivityType::COMMENT_DELETE, $comment);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert the given comment Markdown to HTML.
|
||||
*/
|
||||
public function commentToHtml(string $commentText): string
|
||||
{
|
||||
$converter = new CommonMarkConverter([
|
||||
'html_input' => 'strip',
|
||||
'max_nesting_level' => 10,
|
||||
'allow_unsafe_links' => false,
|
||||
]);
|
||||
|
||||
return $converter->convert($commentText);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the next local ID relative to the linked entity.
|
||||
*/
|
||||
|
@ -22,8 +22,8 @@ class CommentController extends Controller
|
||||
*/
|
||||
public function savePageComment(Request $request, int $pageId)
|
||||
{
|
||||
$this->validate($request, [
|
||||
'text' => ['required', 'string'],
|
||||
$input = $this->validate($request, [
|
||||
'html' => ['required', 'string'],
|
||||
'parent_id' => ['nullable', 'integer'],
|
||||
]);
|
||||
|
||||
@ -39,7 +39,7 @@ class CommentController extends Controller
|
||||
|
||||
// Create a new comment.
|
||||
$this->checkPermission('comment-create-all');
|
||||
$comment = $this->commentRepo->create($page, $request->get('text'), $request->get('parent_id'));
|
||||
$comment = $this->commentRepo->create($page, $input['html'], $input['parent_id'] ?? null);
|
||||
|
||||
return view('comments.comment-branch', [
|
||||
'readOnly' => false,
|
||||
@ -57,17 +57,20 @@ class CommentController extends Controller
|
||||
*/
|
||||
public function update(Request $request, int $commentId)
|
||||
{
|
||||
$this->validate($request, [
|
||||
'text' => ['required', 'string'],
|
||||
$input = $this->validate($request, [
|
||||
'html' => ['required', 'string'],
|
||||
]);
|
||||
|
||||
$comment = $this->commentRepo->getById($commentId);
|
||||
$this->checkOwnablePermission('page-view', $comment->entity);
|
||||
$this->checkOwnablePermission('comment-update', $comment);
|
||||
|
||||
$comment = $this->commentRepo->update($comment, $request->get('text'));
|
||||
$comment = $this->commentRepo->update($comment, $input['html']);
|
||||
|
||||
return view('comments.comment', ['comment' => $comment, 'readOnly' => false]);
|
||||
return view('comments.comment', [
|
||||
'comment' => $comment,
|
||||
'readOnly' => false,
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -1,6 +1,6 @@
|
||||
import {Component} from './component';
|
||||
import {getLoading, htmlToDom} from '../services/dom';
|
||||
import {buildForInput} from "../wysiwyg/config";
|
||||
import {buildForInput} from '../wysiwyg/config';
|
||||
|
||||
export class PageComment extends Component {
|
||||
|
||||
@ -58,6 +58,7 @@ export class PageComment extends Component {
|
||||
this.toggleEditMode(true);
|
||||
|
||||
if (this.wysiwygEditor) {
|
||||
this.wysiwygEditor.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -72,6 +73,7 @@ export class PageComment extends Component {
|
||||
|
||||
window.tinymce.init(config).then(editors => {
|
||||
this.wysiwygEditor = editors[0];
|
||||
setTimeout(() => this.wysiwygEditor.focus(), 50);
|
||||
});
|
||||
}
|
||||
|
||||
@ -81,7 +83,7 @@ export class PageComment extends Component {
|
||||
this.form.toggleAttribute('hidden', true);
|
||||
|
||||
const reqData = {
|
||||
text: this.input.value,
|
||||
html: this.wysiwygEditor.getContent(),
|
||||
parent_id: this.parentId || null,
|
||||
};
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import {Component} from './component';
|
||||
import {getLoading, htmlToDom} from '../services/dom';
|
||||
import {buildForInput} from "../wysiwyg/config";
|
||||
import {buildForInput} from '../wysiwyg/config';
|
||||
|
||||
export class PageComments extends Component {
|
||||
|
||||
@ -65,9 +65,8 @@ export class PageComments extends Component {
|
||||
this.form.after(loading);
|
||||
this.form.toggleAttribute('hidden', true);
|
||||
|
||||
const text = this.formInput.value;
|
||||
const reqData = {
|
||||
text,
|
||||
html: this.wysiwygEditor.getContent(),
|
||||
parent_id: this.parentId || null,
|
||||
};
|
||||
|
||||
@ -92,6 +91,7 @@ export class PageComments extends Component {
|
||||
}
|
||||
|
||||
resetForm() {
|
||||
this.removeEditor();
|
||||
this.formInput.value = '';
|
||||
this.parentId = null;
|
||||
this.replyToRow.toggleAttribute('hidden', true);
|
||||
@ -99,6 +99,7 @@ export class PageComments extends Component {
|
||||
}
|
||||
|
||||
showForm() {
|
||||
this.removeEditor();
|
||||
this.formContainer.toggleAttribute('hidden', false);
|
||||
this.addButtonContainer.toggleAttribute('hidden', true);
|
||||
this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
|
||||
@ -118,6 +119,7 @@ export class PageComments extends Component {
|
||||
|
||||
loadEditor() {
|
||||
if (this.wysiwygEditor) {
|
||||
this.wysiwygEditor.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -132,10 +134,17 @@ export class PageComments extends Component {
|
||||
|
||||
window.tinymce.init(config).then(editors => {
|
||||
this.wysiwygEditor = editors[0];
|
||||
this.wysiwygEditor.focus();
|
||||
setTimeout(() => this.wysiwygEditor.focus(), 50);
|
||||
});
|
||||
}
|
||||
|
||||
removeEditor() {
|
||||
if (this.wysiwygEditor) {
|
||||
this.wysiwygEditor.remove();
|
||||
this.wysiwygEditor = null;
|
||||
}
|
||||
}
|
||||
|
||||
getCommentCount() {
|
||||
return this.container.querySelectorAll('[component="page-comment"]').length;
|
||||
}
|
||||
|
@ -77,7 +77,7 @@
|
||||
@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>
|
||||
<textarea refs="page-comment@input" name="html" rows="3" placeholder="{{ trans('entities.comment_placeholder') }}">{{ $comment->html }}</textarea>
|
||||
</div>
|
||||
<div class="form-group text-right">
|
||||
<button type="button" class="button outline" refs="page-comment@form-cancel">{{ trans('common.cancel') }}</button>
|
||||
|
@ -16,7 +16,7 @@
|
||||
<div class="content px-s pt-s">
|
||||
<form refs="page-comments@form" novalidate>
|
||||
<div class="form-group description-input">
|
||||
<textarea refs="page-comments@form-input" name="markdown"
|
||||
<textarea refs="page-comments@form-input" name="html"
|
||||
rows="3"
|
||||
placeholder="{{ trans('entities.comment_placeholder') }}"></textarea>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user