github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-24 22:51:23 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Comments: Added inline comment marker/highlight logic
Some checks failed
test-migrations / build (8.3) (push) Has been cancelled
Details
analyse-php / build (push) Has been cancelled
Details
lint-js / build (push) Has been cancelled
Details
lint-php / build (push) Has been cancelled
Details
test-js / build (push) Has been cancelled
Details
test-migrations / build (8.2) (push) Has been cancelled
Details
test-migrations / build (8.4) (push) Has been cancelled
Details
test-php / build (8.2) (push) Has been cancelled
Details
test-php / build (8.3) (push) Has been cancelled
Details
test-php / build (8.4) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Dan Brown
2025-04-19 14:07:52 +01:00
parent 2e7544a865
commit 18ede9bbd3
5 changed files with 126 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
resources/js/components/page-comment.ts
View File

@ -1,6 +1,7 @@
import {Component} from './component';
import {getLoading, htmlToDom} from '../services/dom.ts';
import {findTargetNodeAndOffset, getLoading, hashElement, htmlToDom} from '../services/dom.ts';
import {buildForInput} from '../wysiwyg-tinymce/config';
import {el} from "../wysiwyg/utils/dom";
export class PageComment extends Component {
@ -46,6 +47,7 @@ export class PageComment extends Component {
this.input = this.$refs.input as HTMLInputElement;
this.setupListeners();
this.positionForReference();
}
protected setupListeners(): void {
@ -135,4 +137,47 @@ export class PageComment extends Component {
return loading;
}
protected positionForReference() {
if (!this.commentContentRef) {
return;
}
const [refId, refHash, refRange] = this.commentContentRef.split(':');
const refEl = document.getElementById(refId);
if (!refEl) {
// TODO - Show outdated marker for comment
return;
}
const actualHash = hashElement(refEl);
if (actualHash !== refHash) {
// TODO - Show outdated marker for comment
return;
}
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;
// TODO - Extract to class, Use theme color
const marker = el('div', {
class: 'content-comment-highlight',
style: `left: ${relLeft}px; top: ${relTop}px; width: ${bounds.width}px; height: ${bounds.height}px;`
}, ['']);
refEl.style.position = 'relative';
refEl.append(marker);
}
}

6
resources/js/components/pointer.ts
View File

@ -1,8 +1,7 @@
import * as DOM from '../services/dom.ts';
import {Component} from './component';
import {copyTextToClipboard} from '../services/clipboard.ts';
import {cyrb53} from "../services/util";
import {normalizeNodeTextOffsetToParent} from "../services/dom.ts";
import {hashElement, normalizeNodeTextOffsetToParent} from "../services/dom.ts";
import {PageComments} from "./page-comments";
export class Pointer extends Component {
@ -183,9 +182,8 @@ export class Pointer extends Component {
return;
}
const normalisedElemHtml = this.targetElement.outerHTML.replace(/\s{2,}/g, '');
const refId = this.targetElement.id;
const hash = cyrb53(normalisedElemHtml);
const hash = hashElement(this.targetElement);
let range = '';
if (this.targetSelectionRange) {
const commonContainer = this.targetSelectionRange.commonAncestorContainer;