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