mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-11 13:48:13 +03:00
Comments: Split out page comment reference logic to own component
Started support for editor view. Moved comment elements to be added relative to content area instad of specific target reference element. Added relocating on screen size change.
This commit is contained in:
Dan Brown
@ -10,6 +10,10 @@ export class EditorToolbox extends Component {
|
||||
this.toggleButton = this.$refs.toggle;
|
||||
this.editorWrapEl = this.container.closest('.page-editor');
|
||||
|
||||
// State
|
||||
this.open = false;
|
||||
this.tab = '';
|
||||
|
||||
this.setupListeners();
|
||||
|
||||
// Set the first tab as active on load
|
||||
@ -34,6 +38,8 @@ export class EditorToolbox extends Component {
|
||||
const isOpen = this.container.classList.contains('open');
|
||||
this.toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
this.editorWrapEl.classList.toggle('toolbox-open', isOpen);
|
||||
this.open = isOpen;
|
||||
this.emitState();
|
||||
}
|
||||
|
||||
setActiveTab(tabName, openToolbox = false) {
|
||||
@ -54,6 +60,13 @@ export class EditorToolbox extends Component {
|
||||
if (openToolbox && !this.container.classList.contains('open')) {
|
||||
this.toggle();
|
||||
}
|
||||
|
||||
this.tab = tabName;
|
||||
this.emitState();
|
||||
}
|
||||
|
||||
emitState() {
|
||||
this.$emit('change', {tab: this.tab, open: this.open});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -36,6 +36,7 @@ export {NewUserPassword} from './new-user-password';
|
||||
export {Notification} from './notification';
|
||||
export {OptionalInput} from './optional-input';
|
||||
export {PageComment} from './page-comment';
|
||||
export {PageCommentReference} from './page-comment-reference';
|
||||
export {PageComments} from './page-comments';
|
||||
export {PageDisplay} from './page-display';
|
||||
export {PageEditor} from './page-editor';
|
||||
|
||||
223
resources/js/components/page-comment-reference.ts
Normal file
223
resources/js/components/page-comment-reference.ts
Normal file
@ -0,0 +1,223 @@
|
||||
import {Component} from "./component";
|
||||
import {findTargetNodeAndOffset, hashElement} from "../services/dom";
|
||||
import {el} from "../wysiwyg/utils/dom";
|
||||
import commentIcon from "@icons/comment.svg";
|
||||
import closeIcon from "@icons/close.svg";
|
||||
import {scrollAndHighlightElement} from "../services/util";
|
||||
|
||||
/**
|
||||
* Track the close function for the current open marker so it can be closed
|
||||
* when another is opened so we only show one marker comment thread at one time.
|
||||
*/
|
||||
let openMarkerClose: Function|null = null;
|
||||
|
||||
export class PageCommentReference extends Component {
|
||||
protected link: HTMLLinkElement;
|
||||
protected reference: string;
|
||||
protected markerWrap: HTMLElement|null = null;
|
||||
|
||||
protected viewCommentText: string;
|
||||
protected jumpToThreadText: string;
|
||||
protected closeText: string;
|
||||
|
||||
setup() {
|
||||
this.link = this.$el as HTMLLinkElement;
|
||||
this.reference = this.$opts.reference;
|
||||
this.viewCommentText = this.$opts.viewCommentText;
|
||||
this.jumpToThreadText = this.$opts.jumpToThreadText;
|
||||
this.closeText = this.$opts.closeText;
|
||||
|
||||
// Show within page display area if seen
|
||||
const pageContentArea = document.querySelector('.page-content');
|
||||
if (pageContentArea instanceof HTMLElement) {
|
||||
this.updateMarker(pageContentArea);
|
||||
}
|
||||
|
||||
// Handle editor view to show on comments toolbox view
|
||||
window.addEventListener('editor-toolbox-change', (event) => {
|
||||
const tabName: string = (event as {detail: {tab: string, open: boolean}}).detail.tab;
|
||||
const isOpen = (event as {detail: {tab: string, open: boolean}}).detail.open;
|
||||
if (tabName === 'comments' && isOpen) {
|
||||
this.showForEditor();
|
||||
} else {
|
||||
this.hideMarker();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected showForEditor() {
|
||||
const contentWrap = document.querySelector('.editor-content-wrap');
|
||||
if (contentWrap instanceof HTMLElement) {
|
||||
this.updateMarker(contentWrap);
|
||||
}
|
||||
|
||||
const onChange = () => {
|
||||
this.hideMarker();
|
||||
setTimeout(() => {
|
||||
window.$events.remove('editor-html-change', onChange);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
window.$events.listen('editor-html-change', onChange);
|
||||
}
|
||||
|
||||
protected updateMarker(contentContainer: HTMLElement) {
|
||||
// Reset link and existing marker
|
||||
this.link.classList.remove('outdated', 'missing');
|
||||
if (this.markerWrap) {
|
||||
this.markerWrap.remove();
|
||||
}
|
||||
|
||||
const [refId, refHash, refRange] = this.reference.split(':');
|
||||
const refEl = document.getElementById(refId);
|
||||
if (!refEl) {
|
||||
this.link.classList.add('outdated', 'missing');
|
||||
return;
|
||||
}
|
||||
|
||||
const refCloneToAssess = refEl.cloneNode(true) as HTMLElement;
|
||||
const toRemove = refCloneToAssess.querySelectorAll('[data-lexical-text]');
|
||||
refCloneToAssess.removeAttribute('style');
|
||||
for (const el of toRemove) {
|
||||
el.after(...el.childNodes);
|
||||
el.remove();
|
||||
}
|
||||
|
||||
const actualHash = hashElement(refCloneToAssess);
|
||||
if (actualHash !== refHash) {
|
||||
this.link.classList.add('outdated');
|
||||
}
|
||||
|
||||
const marker = el('button', {
|
||||
type: 'button',
|
||||
class: 'content-comment-marker',
|
||||
title: this.viewCommentText,
|
||||
});
|
||||
marker.innerHTML = <string>commentIcon;
|
||||
marker.addEventListener('click', event => {
|
||||
this.showCommentAtMarker(marker);
|
||||
});
|
||||
|
||||
this.markerWrap = el('div', {
|
||||
class: 'content-comment-highlight',
|
||||
}, [marker]);
|
||||
|
||||
contentContainer.append(this.markerWrap);
|
||||
this.positionMarker(refEl, refRange);
|
||||
|
||||
this.link.href = `#${refEl.id}`;
|
||||
this.link.addEventListener('click', (event: MouseEvent) => {
|
||||
event.preventDefault();
|
||||
scrollAndHighlightElement(refEl);
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.positionMarker(refEl, refRange);
|
||||
});
|
||||
}
|
||||
|
||||
protected positionMarker(targetEl: HTMLElement, range: string) {
|
||||
if (!this.markerWrap) {
|
||||
return;
|
||||
}
|
||||
|
||||
const markerParent = this.markerWrap.parentElement as HTMLElement;
|
||||
const parentBounds = markerParent.getBoundingClientRect();
|
||||
let targetBounds = targetEl.getBoundingClientRect();
|
||||
const [rangeStart, rangeEnd] = range.split('-');
|
||||
if (rangeStart && rangeEnd) {
|
||||
const range = new Range();
|
||||
const relStart = findTargetNodeAndOffset(targetEl, Number(rangeStart));
|
||||
const relEnd = findTargetNodeAndOffset(targetEl, Number(rangeEnd));
|
||||
if (relStart && relEnd) {
|
||||
range.setStart(relStart.node, relStart.offset);
|
||||
range.setEnd(relEnd.node, relEnd.offset);
|
||||
targetBounds = range.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
|
||||
const relLeft = targetBounds.left - parentBounds.left;
|
||||
const relTop = (targetBounds.top - parentBounds.top) + markerParent.scrollTop;
|
||||
|
||||
this.markerWrap.style.left = `${relLeft}px`;
|
||||
this.markerWrap.style.top = `${relTop}px`;
|
||||
this.markerWrap.style.width = `${targetBounds.width}px`;
|
||||
this.markerWrap.style.height = `${targetBounds.height}px`;
|
||||
}
|
||||
|
||||
protected hideMarker() {
|
||||
// Hide marker and close existing marker windows
|
||||
if (openMarkerClose) {
|
||||
openMarkerClose();
|
||||
}
|
||||
this.markerWrap?.remove();
|
||||
}
|
||||
|
||||
protected showCommentAtMarker(marker: HTMLElement): void {
|
||||
// Hide marker and close existing marker windows
|
||||
if (openMarkerClose) {
|
||||
openMarkerClose();
|
||||
}
|
||||
marker.hidden = true;
|
||||
|
||||
// Locate relevant comment
|
||||
const commentBox = this.link.closest('.comment-box') as HTMLElement;
|
||||
|
||||
// Build comment window
|
||||
const readClone = (commentBox.closest('.comment-branch') as HTMLElement).cloneNode(true) as HTMLElement;
|
||||
const toRemove = readClone.querySelectorAll('.actions, form');
|
||||
for (const el of toRemove) {
|
||||
el.remove();
|
||||
}
|
||||
|
||||
const close = el('button', {type: 'button', title: this.closeText});
|
||||
close.innerHTML = (closeIcon as string);
|
||||
const jump = el('button', {type: 'button', 'data-action': 'jump'}, [this.jumpToThreadText]);
|
||||
|
||||
const commentWindow = el('div', {
|
||||
class: 'content-comment-window'
|
||||
}, [
|
||||
el('div', {
|
||||
class: 'content-comment-window-actions',
|
||||
}, [jump, close]),
|
||||
el('div', {
|
||||
class: 'content-comment-window-content comment-container-compact comment-container-super-compact',
|
||||
}, [readClone]),
|
||||
]);
|
||||
|
||||
marker.parentElement?.append(commentWindow);
|
||||
|
||||
// Handle interaction within window
|
||||
const closeAction = () => {
|
||||
commentWindow.remove();
|
||||
marker.hidden = false;
|
||||
window.removeEventListener('click', windowCloseAction);
|
||||
openMarkerClose = null;
|
||||
};
|
||||
|
||||
const windowCloseAction = (event: MouseEvent) => {
|
||||
if (!(marker.parentElement as HTMLElement).contains(event.target as HTMLElement)) {
|
||||
closeAction();
|
||||
}
|
||||
};
|
||||
window.addEventListener('click', windowCloseAction);
|
||||
|
||||
openMarkerClose = closeAction;
|
||||
close.addEventListener('click', closeAction.bind(this));
|
||||
jump.addEventListener('click', () => {
|
||||
closeAction();
|
||||
commentBox.scrollIntoView({behavior: 'smooth'});
|
||||
const highlightTarget = commentBox.querySelector('.header') as HTMLElement;
|
||||
highlightTarget.classList.add('anim-highlight');
|
||||
highlightTarget.addEventListener('animationend', () => highlightTarget.classList.remove('anim-highlight'))
|
||||
});
|
||||
|
||||
// Position window within bounds
|
||||
const commentWindowBounds = commentWindow.getBoundingClientRect();
|
||||
const contentBounds = document.querySelector('.page-content')?.getBoundingClientRect();
|
||||
if (contentBounds && commentWindowBounds.right > contentBounds.right) {
|
||||
const diff = commentWindowBounds.right - contentBounds.right;
|
||||
commentWindow.style.left = `-${diff}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,28 +1,13 @@
|
||||
import {Component} from './component';
|
||||
import {findTargetNodeAndOffset, getLoading, hashElement, htmlToDom} from '../services/dom.ts';
|
||||
import {getLoading, htmlToDom} from '../services/dom.ts';
|
||||
import {buildForInput} from '../wysiwyg-tinymce/config';
|
||||
import {el} from "../wysiwyg/utils/dom";
|
||||
|
||||
import commentIcon from "@icons/comment.svg"
|
||||
import closeIcon from "@icons/close.svg"
|
||||
import {PageDisplay} from "./page-display";
|
||||
|
||||
/**
|
||||
* Track the close function for the current open marker so it can be closed
|
||||
* when another is opened so we only show one marker comment thread at one time.
|
||||
*/
|
||||
let openMarkerClose: Function|null = null;
|
||||
|
||||
export class PageComment extends Component {
|
||||
|
||||
protected commentId: string;
|
||||
protected commentLocalId: string;
|
||||
protected commentContentRef: string;
|
||||
protected deletedText: string;
|
||||
protected updatedText: string;
|
||||
protected viewCommentText: string;
|
||||
protected jumpToThreadText: string;
|
||||
protected closeText: string;
|
||||
|
||||
protected wysiwygEditor: any = null;
|
||||
protected wysiwygLanguage: string;
|
||||
@ -36,18 +21,13 @@ export class PageComment extends Component {
|
||||
protected deleteButton: HTMLElement;
|
||||
protected replyButton: HTMLElement;
|
||||
protected input: HTMLInputElement;
|
||||
protected contentRefLink: HTMLLinkElement|null;
|
||||
|
||||
setup() {
|
||||
// Options
|
||||
this.commentId = this.$opts.commentId;
|
||||
this.commentLocalId = this.$opts.commentLocalId;
|
||||
this.commentContentRef = this.$opts.commentContentRef;
|
||||
this.deletedText = this.$opts.deletedText;
|
||||
this.updatedText = this.$opts.updatedText;
|
||||
this.viewCommentText = this.$opts.viewCommentText;
|
||||
this.jumpToThreadText = this.$opts.jumpToThreadText;
|
||||
this.closeText = this.$opts.closeText;
|
||||
|
||||
// Editor reference and text options
|
||||
this.wysiwygLanguage = this.$opts.wysiwygLanguage;
|
||||
@ -62,10 +42,8 @@ export class PageComment extends Component {
|
||||
this.deleteButton = this.$refs.deleteButton;
|
||||
this.replyButton = this.$refs.replyButton;
|
||||
this.input = this.$refs.input as HTMLInputElement;
|
||||
this.contentRefLink = (this.$refs.contentRef || null) as HTMLLinkElement|null;
|
||||
|
||||
this.setupListeners();
|
||||
this.positionForReference();
|
||||
}
|
||||
|
||||
protected setupListeners(): void {
|
||||
@ -154,129 +132,4 @@ export class PageComment extends Component {
|
||||
this.container.append(loading);
|
||||
return loading;
|
||||
}
|
||||
|
||||
protected positionForReference() {
|
||||
if (!this.commentContentRef || !this.contentRefLink) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [refId, refHash, refRange] = this.commentContentRef.split(':');
|
||||
const refEl = document.getElementById(refId);
|
||||
if (!refEl) {
|
||||
this.contentRefLink.classList.add('outdated', 'missing');
|
||||
return;
|
||||
}
|
||||
|
||||
const actualHash = hashElement(refEl);
|
||||
if (actualHash !== refHash) {
|
||||
this.contentRefLink.classList.add('outdated');
|
||||
}
|
||||
|
||||
const refElBounds = refEl.getBoundingClientRect();
|
||||
let bounds = refElBounds;
|
||||
const [rangeStart, rangeEnd] = refRange.split('-');
|
||||
if (rangeStart && rangeEnd) {
|
||||
const range = new Range();
|
||||
const relStart = findTargetNodeAndOffset(refEl, Number(rangeStart));
|
||||
const relEnd = findTargetNodeAndOffset(refEl, Number(rangeEnd));
|
||||
if (relStart && relEnd) {
|
||||
range.setStart(relStart.node, relStart.offset);
|
||||
range.setEnd(relEnd.node, relEnd.offset);
|
||||
bounds = range.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
|
||||
const relLeft = bounds.left - refElBounds.left;
|
||||
const relTop = bounds.top - refElBounds.top;
|
||||
|
||||
const marker = el('button', {
|
||||
type: 'button',
|
||||
class: 'content-comment-marker',
|
||||
title: this.viewCommentText,
|
||||
});
|
||||
marker.innerHTML = <string>commentIcon;
|
||||
marker.addEventListener('click', event => {
|
||||
this.showCommentAtMarker(marker);
|
||||
});
|
||||
|
||||
const markerWrap = el('div', {
|
||||
class: 'content-comment-highlight',
|
||||
style: `left: ${relLeft}px; top: ${relTop}px; width: ${bounds.width}px; height: ${bounds.height}px;`
|
||||
}, [marker]);
|
||||
|
||||
refEl.style.position = 'relative';
|
||||
refEl.append(markerWrap);
|
||||
|
||||
this.contentRefLink.href = `#${refEl.id}`;
|
||||
this.contentRefLink.addEventListener('click', (event: MouseEvent) => {
|
||||
const pageDisplayComponent = window.$components.get('page-display')[0] as PageDisplay;
|
||||
event.preventDefault();
|
||||
pageDisplayComponent.goToText(refId);
|
||||
});
|
||||
}
|
||||
|
||||
protected showCommentAtMarker(marker: HTMLElement): void {
|
||||
// Hide marker and close existing marker windows
|
||||
if (openMarkerClose) {
|
||||
openMarkerClose();
|
||||
}
|
||||
marker.hidden = true;
|
||||
|
||||
// Build comment window
|
||||
const readClone = (this.container.closest('.comment-branch') as HTMLElement).cloneNode(true) as HTMLElement;
|
||||
const toRemove = readClone.querySelectorAll('.actions, form');
|
||||
for (const el of toRemove) {
|
||||
el.remove();
|
||||
}
|
||||
|
||||
const close = el('button', {type: 'button', title: this.closeText});
|
||||
close.innerHTML = (closeIcon as string);
|
||||
const jump = el('button', {type: 'button', 'data-action': 'jump'}, [this.jumpToThreadText]);
|
||||
|
||||
const commentWindow = el('div', {
|
||||
class: 'content-comment-window'
|
||||
}, [
|
||||
el('div', {
|
||||
class: 'content-comment-window-actions',
|
||||
}, [jump, close]),
|
||||
el('div', {
|
||||
class: 'content-comment-window-content comment-container-compact comment-container-super-compact',
|
||||
}, [readClone]),
|
||||
]);
|
||||
|
||||
marker.parentElement?.append(commentWindow);
|
||||
|
||||
// Handle interaction within window
|
||||
const closeAction = () => {
|
||||
commentWindow.remove();
|
||||
marker.hidden = false;
|
||||
window.removeEventListener('click', windowCloseAction);
|
||||
openMarkerClose = null;
|
||||
};
|
||||
|
||||
const windowCloseAction = (event: MouseEvent) => {
|
||||
if (!(marker.parentElement as HTMLElement).contains(event.target as HTMLElement)) {
|
||||
closeAction();
|
||||
}
|
||||
};
|
||||
window.addEventListener('click', windowCloseAction);
|
||||
|
||||
openMarkerClose = closeAction;
|
||||
close.addEventListener('click', closeAction.bind(this));
|
||||
jump.addEventListener('click', () => {
|
||||
closeAction();
|
||||
this.container.scrollIntoView({behavior: 'smooth'});
|
||||
const highlightTarget = this.container.querySelector('.header') as HTMLElement;
|
||||
highlightTarget.classList.add('anim-highlight');
|
||||
highlightTarget.addEventListener('animationend', () => highlightTarget.classList.remove('anim-highlight'))
|
||||
});
|
||||
|
||||
// Position window within bounds
|
||||
const commentWindowBounds = commentWindow.getBoundingClientRect();
|
||||
const contentBounds = document.querySelector('.page-content')?.getBoundingClientRect();
|
||||
if (contentBounds && commentWindowBounds.right > contentBounds.right) {
|
||||
const diff = commentWindowBounds.right - contentBounds.right;
|
||||
commentWindow.style.left = `-${diff}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,9 +57,6 @@ export class PageDisplay extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
goToText(text) {
|
||||
const idElem = document.getElementById(text);
|
||||
|
||||
|
||||
@ -24,6 +24,17 @@ export class EventManager {
|
||||
this.listeners[eventName].push(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove an event listener which is using the given callback for the given event name.
|
||||
*/
|
||||
remove(eventName: string, callback: Function): void {
|
||||
const listeners = this.listeners[eventName] || [];
|
||||
const index = listeners.indexOf(callback);
|
||||
if (index !== -1) {
|
||||
listeners.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit an event for public use.
|
||||
* Sends the event via the native DOM event handling system.
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
overflow-wrap: break-word;
|
||||
position: relative;
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -4,12 +4,8 @@
|
||||
<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-content-ref="{{ $comment->content_ref }}"
|
||||
option:page-comment:updated-text="{{ trans('entities.comment_updated_success') }}"
|
||||
option:page-comment:deleted-text="{{ trans('entities.comment_deleted_success') }}"
|
||||
option:page-comment:view-comment-text="{{ trans('entities.comment_view') }}"
|
||||
option:page-comment:jump-to-thread-text="{{ trans('entities.comment_jump_to_thread') }}"
|
||||
option:page-comment:close-text="{{ trans('common.close') }}"
|
||||
option:page-comment:wysiwyg-language="{{ $locale->htmlLang() }}"
|
||||
option:page-comment:wysiwyg-text-direction="{{ $locale->htmlDirection() }}"
|
||||
id="comment{{$comment->local_id}}"
|
||||
@ -79,7 +75,12 @@
|
||||
@endif
|
||||
@if($comment->content_ref)
|
||||
<div class="comment-reference-indicator-wrap">
|
||||
<a href="#" refs="page-comment@content-ref">@icon('bookmark')Reference <span>- Outdated</span></a>
|
||||
<a component="page-comment-reference"
|
||||
option:page-comment-reference:reference="{{ $comment->content_ref }}"
|
||||
option:page-comment-reference:view-comment-text="{{ trans('entities.comment_view') }}"
|
||||
option:page-comment-reference:jump-to-thread-text="{{ trans('entities.comment_jump_to_thread') }}"
|
||||
option:page-comment-reference:close-text="{{ trans('common.close') }}"
|
||||
href="#">@icon('bookmark')Reference <span>- Outdated</span></a>
|
||||
</div>
|
||||
@endif
|
||||
{!! $commentHtml !!}
|
||||
|
||||
Reference in New Issue
Block a user