X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/3957e054be29921a1ace348bdebdcb805a1f89ff..fdb9aaea02d3e78cb8e97b967435239672f23217:/src/redakcja/static/js/wiki/caret.js diff --git a/src/redakcja/static/js/wiki/caret.js b/src/redakcja/static/js/wiki/caret.js index 0e34f34d..97336f98 100644 --- a/src/redakcja/static/js/wiki/caret.js +++ b/src/redakcja/static/js/wiki/caret.js @@ -3,40 +3,43 @@ 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) { + $.wiki.activePerspective().flush(); self.element.insertBefore( anchorNode.splitText( selection.anchorOffset @@ -46,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": @@ -72,7 +75,7 @@ class Caret { self.detach(); return; } - + self.moveLeft(); break; case "ArrowUp": @@ -101,11 +104,11 @@ class Caret { } }) } - + get attached() { return this.element.parent().length; } - + detach() { let p; if (this.attached) { @@ -114,15 +117,15 @@ class Caret { p.normalize() } } - + focus() { $("textarea", self.element).focus(); } - + normalize() { this.element.parent()[0].normalize(); } - + insert(elem) { elem.insertBefore(this.element); } @@ -138,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; @@ -181,11 +184,11 @@ class Caret { -- index; } newParent.insertBefore(parent); - + splitter = parent; } } - + moveLeft() { this.move({ move: -1, @@ -195,7 +198,7 @@ class Caret { noSplitTarget: (t) => {return t.splitText(t.length);}, }) } - + moveRight() { this.move({ move: 1, @@ -205,22 +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; @@ -228,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 @@ -251,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();