From: Radek Czajka Date: Thu, 20 Jul 2023 21:07:53 +0000 (+0200) Subject: Fix errors in caret placement on box open and in annotation browser. X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/fdb9aaea02d3e78cb8e97b967435239672f23217?ds=inline Fix errors in caret placement on box open and in annotation browser. --- diff --git a/src/redakcja/static/js/wiki/caret.js b/src/redakcja/static/js/wiki/caret.js index cedf8aa0..97336f98 100644 --- a/src/redakcja/static/js/wiki/caret.js +++ b/src/redakcja/static/js/wiki/caret.js @@ -3,37 +3,39 @@ class Caret { let self = this; self.view = view; self.singleClick = false; - + let caret = this.element = $(''); - + // When user writes into caret, add it to the document. $('textarea', caret).on('input', function() { let v = $(this).val(); $(this).val(''); self.insertChar(v); - + }); - + // On click on x-node element, set caret position. self.view.on('click', '*[x-node]', function(e) { if (e.redakcja_caret_ignore) return; e.redakcja_caret_ignore = true; - + if (self.singleClick) { self.singleClick = false; return; } - + self.detach(); - + var selection = window.getSelection(); if (!selection.isCollapsed) return; var anchorNode = selection.anchorNode; if (anchorNode.nodeType != Node.TEXT_NODE) return; + // This selection is not from this click. Ignore it. + if (anchorNode.parentNode != e.target) return; // Is selection still inside a node? if (!$(anchorNode).closest('[x-node]').length) return; if ($(anchorNode).parents('[x-annotation-box]').not('.editing').length) return; - + self.singleClick = true; setTimeout(function() { if (self.singleClick) { @@ -47,25 +49,25 @@ class Caret { } self.singleClick = false; }, 250); - + }); - + self.element.on('keydown', function(e) { // TODO: // delete selection? - + // cases: // we are in (no going up) // we are in (can go up) // we are next to (can go inside) - + switch (e.key) { case "ArrowRight": if (e.shiftKey) { self.detach(); return; } - + self.moveRight(); break; case "ArrowLeft": @@ -73,7 +75,7 @@ class Caret { self.detach(); return; } - + self.moveLeft(); break; case "ArrowUp": @@ -102,11 +104,11 @@ class Caret { } }) } - + get attached() { return this.element.parent().length; } - + detach() { let p; if (this.attached) { @@ -115,15 +117,15 @@ class Caret { p.normalize() } } - + focus() { $("textarea", self.element).focus(); } - + normalize() { this.element.parent()[0].normalize(); } - + insert(elem) { elem.insertBefore(this.element); } @@ -139,20 +141,20 @@ class Caret { let contents = this.element.parent().contents(); // Find the text before caret. let textBefore = contents[contents.index(this.element) - 1]; - + // Should be text, but what if not? textBefore.textContent = textBefore.textContent.substr(0, textBefore.textContent.length - 1); this.normalize(); - + } - + deleteAfter() { let contents = this.element.parent().contents(); // Find the text after caret. let textAfter = contents[contents.index(this.element) + 1]; textAfter.textContent = textAfter.textContent.substr(1); } - + splitBlock() { let splitter = this.element; let parent, newParent, splitIndex, index; @@ -182,11 +184,11 @@ class Caret { -- index; } newParent.insertBefore(parent); - + splitter = parent; } } - + moveLeft() { this.move({ move: -1, @@ -196,7 +198,7 @@ class Caret { noSplitTarget: (t) => {return t.splitText(t.length);}, }) } - + moveRight() { this.move({ move: 1, @@ -206,24 +208,24 @@ class Caret { noSplitTarget: (t) => {return t;}, }) } - + move(opts) { if (!this.attached) return; $.wiki.activePerspective().flush(); - + this.normalize(); - + let contents = this.element.parent().contents(); let index = contents.index(this.element); let target, moved, oldparent; - + let parent = this.element.parent()[0]; if (opts.edge(index, contents.length)) { // We're at the end -- what to do? // can we go up? - + if (parent.nodeName == 'EM') { oldparent = parent; parent = parent.parentNode; @@ -231,22 +233,22 @@ class Caret { index = contents.index(oldparent); } } - + index += opts.move; target = contents[index]; moved = false; - + while (target !== undefined && target.nodeType == Node.ELEMENT_NODE) { // we've encountered a node. // can we go inside? - + if (target.nodeName == 'EM') { // enter parent = $(target); contents = parent.contents(); index = opts.enter(contents.length); target = contents[index]; - + // what if it has no elements? } else { // skip @@ -254,19 +256,19 @@ class Caret { target = contents[index]; moved = true; } - + // if editable? // what if editable but empty? - + } - + if (target !== undefined && target.nodeType == Node.TEXT_NODE ) { if (!moved) { target = opts.splitTarget(target); } else { target = opts.noSplitTarget(target); } - + this.element.insertBefore(target); } this.normalize(); diff --git a/src/redakcja/static/js/wiki/view_annotations.js b/src/redakcja/static/js/wiki/view_annotations.js index 97479cd0..8e3671ab 100644 --- a/src/redakcja/static/js/wiki/view_annotations.js +++ b/src/redakcja/static/js/wiki/view_annotations.js @@ -32,7 +32,7 @@ } updateAnnotationIds() { - let selt = this; + let self = this; self.annotationToAnchor = {}; $('#html-view').find('.annotation-inline-box').each( function(i, annoBox) { @@ -65,9 +65,10 @@ var anchor = self.annotationToAnchor[content]; if (anchor != undefined) { var $htmlView = $("#html-view"); - var top = $htmlView.offset().top + - $("[name=" + anchor + "]", $htmlView).offset().top - - $htmlView.children().eq(0).offset().top; + var top = $("[name=" + anchor + "]", $htmlView).offset().top - + $htmlView.offset().top + + $htmlView.scrollTop() + ; $htmlView.animate({scrollTop: top}, 250); }