Till Krüss
2014-02-10 334475a50bcc97a8c326aadff0dcbb61fad40a4f
program/js/tiny_mce/plugins/noneditable/editor_plugin_src.js
@@ -9,37 +9,515 @@
 */
(function() {
   var Event = tinymce.dom.Event;
   var TreeWalker = tinymce.dom.TreeWalker;
   var externalName = 'contenteditable', internalName = 'data-mce-' + externalName;
   var VK = tinymce.VK;
   function handleContentEditableSelection(ed) {
      var dom = ed.dom, selection = ed.selection, invisibleChar, caretContainerId = 'mce_noneditablecaret', invisibleChar = '\uFEFF';
      // Returns the content editable state of a node "true/false" or null
      function getContentEditable(node) {
         var contentEditable;
         // Ignore non elements
         if (node.nodeType === 1) {
            // Check for fake content editable
            contentEditable = node.getAttribute(internalName);
            if (contentEditable && contentEditable !== "inherit") {
               return contentEditable;
            }
            // Check for real content editable
            contentEditable = node.contentEditable;
            if (contentEditable !== "inherit") {
               return contentEditable;
            }
         }
         return null;
      };
      // Returns the noneditable parent or null if there is a editable before it or if it wasn't found
      function getNonEditableParent(node) {
         var state;
         while (node) {
            state = getContentEditable(node);
            if (state) {
               return state  === "false" ? node : null;
            }
            node = node.parentNode;
         }
      };
      // Get caret container parent for the specified node
      function getParentCaretContainer(node) {
         while (node) {
            if (node.id === caretContainerId) {
               return node;
            }
            node = node.parentNode;
         }
      };
      // Finds the first text node in the specified node
      function findFirstTextNode(node) {
         var walker;
         if (node) {
            walker = new TreeWalker(node, node);
            for (node = walker.current(); node; node = walker.next()) {
               if (node.nodeType === 3) {
                  return node;
               }
            }
         }
      };
      // Insert caret container before/after target or expand selection to include block
      function insertCaretContainerOrExpandToBlock(target, before) {
         var caretContainer, rng;
         // Select block
         if (getContentEditable(target) === "false") {
            if (dom.isBlock(target)) {
               selection.select(target);
               return;
            }
         }
         rng = dom.createRng();
         if (getContentEditable(target) === "true") {
            if (!target.firstChild) {
               target.appendChild(ed.getDoc().createTextNode('\u00a0'));
            }
            target = target.firstChild;
            before = true;
         }
         //caretContainer = dom.create('span', {id: caretContainerId, 'data-mce-bogus': true, style:'border: 1px solid red'}, invisibleChar);
         caretContainer = dom.create('span', {id: caretContainerId, 'data-mce-bogus': true}, invisibleChar);
         if (before) {
            target.parentNode.insertBefore(caretContainer, target);
         } else {
            dom.insertAfter(caretContainer, target);
         }
         rng.setStart(caretContainer.firstChild, 1);
         rng.collapse(true);
         selection.setRng(rng);
         return caretContainer;
      };
      // Removes any caret container except the one we might be in
      function removeCaretContainer(caretContainer) {
         var child, currentCaretContainer, lastContainer;
         if (caretContainer) {
               rng = selection.getRng(true);
               rng.setStartBefore(caretContainer);
               rng.setEndBefore(caretContainer);
               child = findFirstTextNode(caretContainer);
               if (child && child.nodeValue.charAt(0) == invisibleChar) {
                  child = child.deleteData(0, 1);
               }
               dom.remove(caretContainer, true);
               selection.setRng(rng);
         } else {
            currentCaretContainer = getParentCaretContainer(selection.getStart());
            while ((caretContainer = dom.get(caretContainerId)) && caretContainer !== lastContainer) {
               if (currentCaretContainer !== caretContainer) {
                  child = findFirstTextNode(caretContainer);
                  if (child && child.nodeValue.charAt(0) == invisibleChar) {
                     child = child.deleteData(0, 1);
                  }
                  dom.remove(caretContainer, true);
               }
               lastContainer = caretContainer;
            }
         }
      };
      // Modifies the selection to include contentEditable false elements or insert caret containers
      function moveSelection() {
         var nonEditableStart, nonEditableEnd, isCollapsed, rng, element;
         // Checks if there is any contents to the left/right side of caret returns the noneditable element or any editable element if it finds one inside
         function hasSideContent(element, left) {
            var container, offset, walker, node, len;
            container = rng.startContainer;
            offset = rng.startOffset;
            // If endpoint is in middle of text node then expand to beginning/end of element
            if (container.nodeType == 3) {
               len = container.nodeValue.length;
               if ((offset > 0 && offset < len) || (left ? offset == len : offset == 0)) {
                  return;
               }
            } else {
               // Can we resolve the node by index
               if (offset < container.childNodes.length) {
                  // Browser represents caret position as the offset at the start of an element. When moving right
                  // this is the element we are moving into so we consider our container to be child node at offset-1
                  var pos = !left && offset > 0 ? offset-1 : offset;
                  container = container.childNodes[pos];
                  if (container.hasChildNodes()) {
                     container = container.firstChild;
                  }
               } else {
                  // If not then the caret is at the last position in it's container and the caret container should be inserted after the noneditable element
                  return !left ? element : null;
               }
            }
            // Walk left/right to look for contents
            walker = new TreeWalker(container, element);
            while (node = walker[left ? 'prev' : 'next']()) {
               if (node.nodeType === 3 && node.nodeValue.length > 0) {
                  return;
               } else if (getContentEditable(node) === "true") {
                  // Found contentEditable=true element return this one to we can move the caret inside it
                  return node;
               }
            }
            return element;
         };
         // Remove any existing caret containers
         removeCaretContainer();
         // Get noneditable start/end elements
         isCollapsed = selection.isCollapsed();
         nonEditableStart = getNonEditableParent(selection.getStart());
         nonEditableEnd = getNonEditableParent(selection.getEnd());
         // Is any fo the range endpoints noneditable
         if (nonEditableStart || nonEditableEnd) {
            rng = selection.getRng(true);
            // If it's a caret selection then look left/right to see if we need to move the caret out side or expand
            if (isCollapsed) {
               nonEditableStart = nonEditableStart || nonEditableEnd;
               var start = selection.getStart();
               if (element = hasSideContent(nonEditableStart, true)) {
                  // We have no contents to the left of the caret then insert a caret container before the noneditable element
                  insertCaretContainerOrExpandToBlock(element, true);
               } else if (element = hasSideContent(nonEditableStart, false)) {
                  // We have no contents to the right of the caret then insert a caret container after the noneditable element
                  insertCaretContainerOrExpandToBlock(element, false);
               } else {
                  // We are in the middle of a noneditable so expand to select it
                  selection.select(nonEditableStart);
               }
            } else {
               rng = selection.getRng(true);
               // Expand selection to include start non editable element
               if (nonEditableStart) {
                  rng.setStartBefore(nonEditableStart);
               }
               // Expand selection to include end non editable element
               if (nonEditableEnd) {
                  rng.setEndAfter(nonEditableEnd);
               }
               selection.setRng(rng);
            }
         }
      };
      function handleKey(ed, e) {
         var keyCode = e.keyCode, nonEditableParent, caretContainer, startElement, endElement;
         function getNonEmptyTextNodeSibling(node, prev) {
            while (node = node[prev ? 'previousSibling' : 'nextSibling']) {
               if (node.nodeType !== 3 || node.nodeValue.length > 0) {
                  return node;
               }
            }
         };
         function positionCaretOnElement(element, start) {
            selection.select(element);
            selection.collapse(start);
         }
         function canDelete(backspace) {
            var rng, container, offset, nonEditableParent;
            function removeNodeIfNotParent(node) {
               var parent = container;
               while (parent) {
                  if (parent === node) {
                     return;
                  }
                  parent = parent.parentNode;
               }
               dom.remove(node);
               moveSelection();
            }
            function isNextPrevTreeNodeNonEditable() {
               var node, walker, nonEmptyElements = ed.schema.getNonEmptyElements();
               walker = new tinymce.dom.TreeWalker(container, ed.getBody());
               while (node = (backspace ? walker.prev() : walker.next())) {
                  // Found IMG/INPUT etc
                  if (nonEmptyElements[node.nodeName.toLowerCase()]) {
                     break;
                  }
                  // Found text node with contents
                  if (node.nodeType === 3 && tinymce.trim(node.nodeValue).length > 0) {
                     break;
                  }
                  // Found non editable node
                  if (getContentEditable(node) === "false") {
                     removeNodeIfNotParent(node);
                     return true;
                  }
               }
               // Check if the content node is within a non editable parent
               if (getNonEditableParent(node)) {
                  return true;
               }
               return false;
            }
            if (selection.isCollapsed()) {
               rng = selection.getRng(true);
               container = rng.startContainer;
               offset = rng.startOffset;
               container = getParentCaretContainer(container) || container;
               // Is in noneditable parent
               if (nonEditableParent = getNonEditableParent(container)) {
                  removeNodeIfNotParent(nonEditableParent);
                  return false;
               }
               // Check if the caret is in the middle of a text node
               if (container.nodeType == 3 && (backspace ? offset > 0 : offset < container.nodeValue.length)) {
                  return true;
               }
               // Resolve container index
               if (container.nodeType == 1) {
                  container = container.childNodes[offset] || container;
               }
               // Check if previous or next tree node is non editable then block the event
               if (isNextPrevTreeNodeNonEditable()) {
                  return false;
               }
            }
            return true;
         }
         startElement = selection.getStart()
         endElement = selection.getEnd();
         // Disable all key presses in contentEditable=false except delete or backspace
         nonEditableParent = getNonEditableParent(startElement) || getNonEditableParent(endElement);
         if (nonEditableParent && (keyCode < 112 || keyCode > 124) && keyCode != VK.DELETE && keyCode != VK.BACKSPACE) {
            // Is Ctrl+c, Ctrl+v or Ctrl+x then use default browser behavior
            if ((tinymce.isMac ? e.metaKey : e.ctrlKey) && (keyCode == 67 || keyCode == 88 || keyCode == 86)) {
               return;
            }
            e.preventDefault();
            // Arrow left/right select the element and collapse left/right
            if (keyCode == VK.LEFT || keyCode == VK.RIGHT) {
               var left = keyCode == VK.LEFT;
               // If a block element find previous or next element to position the caret
               if (ed.dom.isBlock(nonEditableParent)) {
                  var targetElement = left ? nonEditableParent.previousSibling : nonEditableParent.nextSibling;
                  var walker = new TreeWalker(targetElement, targetElement);
                  var caretElement = left ? walker.prev() : walker.next();
                  positionCaretOnElement(caretElement, !left);
               } else {
                  positionCaretOnElement(nonEditableParent, left);
               }
            }
         } else {
            // Is arrow left/right, backspace or delete
            if (keyCode == VK.LEFT || keyCode == VK.RIGHT || keyCode == VK.BACKSPACE || keyCode == VK.DELETE) {
               caretContainer = getParentCaretContainer(startElement);
               if (caretContainer) {
                  // Arrow left or backspace
                  if (keyCode == VK.LEFT || keyCode == VK.BACKSPACE) {
                     nonEditableParent = getNonEmptyTextNodeSibling(caretContainer, true);
                     if (nonEditableParent && getContentEditable(nonEditableParent) === "false") {
                        e.preventDefault();
                        if (keyCode == VK.LEFT) {
                           positionCaretOnElement(nonEditableParent, true);
                        } else {
                           dom.remove(nonEditableParent);
                           return;
                        }
                     } else {
                        removeCaretContainer(caretContainer);
                     }
                  }
                  // Arrow right or delete
                  if (keyCode == VK.RIGHT || keyCode == VK.DELETE) {
                     nonEditableParent = getNonEmptyTextNodeSibling(caretContainer);
                     if (nonEditableParent && getContentEditable(nonEditableParent) === "false") {
                        e.preventDefault();
                        if (keyCode == VK.RIGHT) {
                           positionCaretOnElement(nonEditableParent, false);
                        } else {
                           dom.remove(nonEditableParent);
                           return;
                        }
                     } else {
                        removeCaretContainer(caretContainer);
                     }
                  }
               }
               if ((keyCode == VK.BACKSPACE || keyCode == VK.DELETE) && !canDelete(keyCode == VK.BACKSPACE)) {
                  e.preventDefault();
                  return false;
               }
            }
         }
      };
      ed.onMouseDown.addToTop(function(ed, e) {
         var node = ed.selection.getNode();
         if (getContentEditable(node) === "false" && node == e.target) {
            // Expand selection on mouse down we can't block the default event since it's used for drag/drop
            moveSelection();
         }
      });
      ed.onMouseUp.addToTop(moveSelection);
      ed.onKeyDown.addToTop(handleKey);
      ed.onKeyUp.addToTop(moveSelection);
   };
   tinymce.create('tinymce.plugins.NonEditablePlugin', {
      init : function(ed, url) {
         var t = this, editClass, nonEditClass, state;
         var editClass, nonEditClass, nonEditableRegExps;
         t.editor = ed;
         editClass = ed.getParam("noneditable_editable_class", "mceEditable");
         nonEditClass = ed.getParam("noneditable_noneditable_class", "mceNonEditable");
         // Converts configured regexps to noneditable span items
         function convertRegExpsToNonEditable(ed, args) {
            var i = nonEditableRegExps.length, content = args.content, cls = tinymce.trim(nonEditClass);
         ed.onNodeChange.addToTop(function(ed, cm, n) {
            var sc, ec;
            // Block if start or end is inside a non editable element
            sc = ed.dom.getParent(ed.selection.getStart(), function(n) {
               return ed.dom.hasClass(n, nonEditClass);
            });
            ec = ed.dom.getParent(ed.selection.getEnd(), function(n) {
               return ed.dom.hasClass(n, nonEditClass);
            });
            // Block or unblock
            if (sc || ec) {
               state = 1;
               t._setDisabled(1);
               return false;
            } else if (state == 1) {
               t._setDisabled(0);
               state = 0;
            // Don't replace the variables when raw is used for example on undo/redo
            if (args.format == "raw") {
               return;
            }
            while (i--) {
               content = content.replace(nonEditableRegExps[i], function(match) {
                  var args = arguments, index = args[args.length - 2];
                  // Is value inside an attribute then don't replace
                  if (index > 0 && content.charAt(index - 1) == '"') {
                     return match;
                  }
                  return '<span class="' + cls + '" data-mce-content="' + ed.dom.encode(args[0]) + '">' + ed.dom.encode(typeof(args[1]) === "string" ? args[1] : args[0]) + '</span>';
               });
            }
            args.content = content;
         };
         editClass = " " + tinymce.trim(ed.getParam("noneditable_editable_class", "mceEditable")) + " ";
         nonEditClass = " " + tinymce.trim(ed.getParam("noneditable_noneditable_class", "mceNonEditable")) + " ";
         // Setup noneditable regexps array
         nonEditableRegExps = ed.getParam("noneditable_regexp");
         if (nonEditableRegExps && !nonEditableRegExps.length) {
            nonEditableRegExps = [nonEditableRegExps];
         }
         ed.onPreInit.add(function() {
            handleContentEditableSelection(ed);
            if (nonEditableRegExps) {
               ed.selection.onBeforeSetContent.add(convertRegExpsToNonEditable);
               ed.onBeforeSetContent.add(convertRegExpsToNonEditable);
            }
            // Apply contentEditable true/false on elements with the noneditable/editable classes
            ed.parser.addAttributeFilter('class', function(nodes) {
               var i = nodes.length, className, node;
               while (i--) {
                  node = nodes[i];
                  className = " " + node.attr("class") + " ";
                  if (className.indexOf(editClass) !== -1) {
                     node.attr(internalName, "true");
                  } else if (className.indexOf(nonEditClass) !== -1) {
                     node.attr(internalName, "false");
                  }
               }
            });
            // Remove internal name
            ed.serializer.addAttributeFilter(internalName, function(nodes, name) {
               var i = nodes.length, node;
               while (i--) {
                  node = nodes[i];
                  if (nonEditableRegExps && node.attr('data-mce-content')) {
                     node.name = "#text";
                     node.type = 3;
                     node.raw = true;
                     node.value = node.attr('data-mce-content');
                  } else {
                     node.attr(externalName, null);
                     node.attr(internalName, null);
                  }
               }
            });
            // Convert external name into internal name
            ed.parser.addAttributeFilter(externalName, function(nodes, name) {
               var i = nodes.length, node;
               while (i--) {
                  node = nodes[i];
                  node.attr(internalName, node.attr(externalName));
                  node.attr(externalName, null);
               }
            });
         });
      },
@@ -51,42 +529,6 @@
            infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/noneditable',
            version : tinymce.majorVersion + "." + tinymce.minorVersion
         };
      },
      _block : function(ed, e) {
         var k = e.keyCode;
         // Don't block arrow keys, pg up/down, and F1-F12
         if ((k > 32 && k < 41) || (k > 111 && k < 124))
            return;
         return Event.cancel(e);
      },
      _setDisabled : function(s) {
         var t = this, ed = t.editor;
         tinymce.each(ed.controlManager.controls, function(c) {
            c.setDisabled(s);
         });
         if (s !== t.disabled) {
            if (s) {
               ed.onKeyDown.addToTop(t._block);
               ed.onKeyPress.addToTop(t._block);
               ed.onKeyUp.addToTop(t._block);
               ed.onPaste.addToTop(t._block);
               ed.onContextMenu.addToTop(t._block);
            } else {
               ed.onKeyDown.remove(t._block);
               ed.onKeyPress.remove(t._block);
               ed.onKeyUp.remove(t._block);
               ed.onPaste.remove(t._block);
               ed.onContextMenu.remove(t._block);
            }
            t.disabled = s;
         }
      }
   });