Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

update wysiwyg to start positioning remote carets more accurately
Some checks failed
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone Build is failing
Details

Browse Source
This commit is contained in:
Garrett Mills 2021-01-02 21:55:58 -06:00
parent 96423d7145
commit 7b23e96a61
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/components/wysiwyg/wysiwyg.component.scss
View File

@ -64,7 +64,8 @@
.remote-cursor {
min-height: 20px;
width: 3px;
position: absolute;
//position: absolute;
position: fixed;
}
}

29
src/app/components/wysiwyg/wysiwyg.component.ts
View File

@ -117,7 +117,7 @@ export class WysiwygComponent implements OnInit {
}
const parts = path.split('.')
.map(x => x.split('#'))
.map(x => x.split('@'))
.map(([tagName, idxString]) => [tagName, Number(idxString)]);
let currentElem = this.editable.nativeElement;
@ -127,7 +127,7 @@ export class WysiwygComponent implements OnInit {
}
const [tagName, idx] = part;
const children = [...currentElem.getElementsByTagName(tagName)];
const children = [...(tagName === '#text' ? currentElem.childNodes : currentElem.getElementsByTagName(tagName))];
currentElem = children[idx];
}
@ -139,9 +139,11 @@ export class WysiwygComponent implements OnInit {
throw new Error('Cannot get path to element unless editable.');
}
debug('getPathToElement', elem);
const maxNest = 5000;
let currentNest = 0;
const parents = [];
const parents = [elem];
let currentParent = elem;
do {
@ -159,7 +161,9 @@ export class WysiwygComponent implements OnInit {
return parents.reverse()
.slice(1)
.map((element, idx) => {
const siblings = element.parentElement.getElementsByTagName(element.tagName);
const siblings = element.tagName ? element.parentElement.getElementsByTagName(element.tagName)
: element.parentElement.childNodes;
let siblingIdx = -1;
[...siblings].some((sibling, potentialIdx) => {
if ( sibling === element ) {
@ -168,7 +172,7 @@ export class WysiwygComponent implements OnInit {
}
});
return `${element.tagName}#${siblingIdx}`;
return `${element.tagName || '#text'}@${siblingIdx}`;
})
.join('.');
}
@ -176,8 +180,19 @@ export class WysiwygComponent implements OnInit {
processSelections() {
for ( const sel of this.privEditingUserSelections ) {
sel.element = this.getElementFromPath(sel.path);
sel.top = sel.element.offsetTop;
sel.left = sel.element.offsetLeft;
if ( sel.element ) {
sel.top = sel.element.offsetTop;
sel.left = sel.element.offsetLeft;
const range = document.createRange();
range.setStart(sel.element, sel.offset);
range.setEnd(sel.element, sel.offset);
const rect = range.getClientRects()[0];
sel.top = rect.top;
sel.left = rect.left;
}
console.log({sel, editable: this.editable});
}
}