Improved caret position before/after blocks
authorAlexander Ebert <ebert@woltlab.com>
Mon, 5 Sep 2016 12:42:30 +0000 (14:42 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 5 Sep 2016 13:15:19 +0000 (15:15 +0200)
wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js

index b108e5108bb1b96166441b50637ec468cba32d19..6b00feb703e57629ce4021e1c0afc03fd7aa2e24 100644 (file)
@@ -140,10 +140,6 @@ $.Redactor.prototype.WoltLabCaret = function() {
                },
                
                _handleEditorClick: function (event) {
-                       if (event.target !== this.$editor[0]) {
-                               return;
-                       }
-                       
                        if (!this.selection.get().isCollapsed) {
                                return;
                        }
@@ -153,6 +149,16 @@ $.Redactor.prototype.WoltLabCaret = function() {
                                return;
                        }
                        
+                       // get block element that received the click
+                       var targetBlock = event.target;
+                       while (targetBlock && !this.utils.isBlockTag(targetBlock.nodeName)) {
+                               targetBlock = targetBlock.parentNode;
+                       }
+                       
+                       if (!targetBlock || targetBlock === block) {
+                               return;
+                       }
+                       
                        if (block.nodeName === 'P') {
                                block = block.parentNode;
                                if (block === this.$editor[0] || !this.utils.isBlockTag(block.nodeName)) {
@@ -171,12 +177,37 @@ $.Redactor.prototype.WoltLabCaret = function() {
                                return;
                        }
                        
-                       // click occurred onto the empty editor space, but before or after a block element
-                       var insertBefore = (event.clientY < block.getBoundingClientRect().top);
+                       // handle nested blocks
+                       var insertBefore, rect;
+                       var parent = block;
+                       while (parent) {
+                               rect = parent.getBoundingClientRect();
+                               
+                               if (event.clientY < rect.top) {
+                                       insertBefore = true;
+                                       block = parent;
+                               }
+                               else if (event.clientY > rect.bottom) {
+                                       insertBefore = false;
+                                       block = parent;
+                               }
+                               else {
+                                       break;
+                               }
+                               
+                               if (parent.parentNode && parent.parentNode !== this.$editor[0]) {
+                                       parent = parent.parentNode;
+                               }
+                               else {
+                                       break;
+                               }
+                       }
                        
                        // check if there is already a paragraph in place
                        var sibling = block[(insertBefore ? 'previous' : 'next') + 'ElementSibling'];
                        if (sibling && sibling.nodeName === 'P') {
+                               this.caret.end(sibling);
+                               
                                return;
                        }