all files / editor-manager/base/ editor-manager.js

99.08% Statements 216/218
94% Branches 94/100
100% Functions 19/19
99.08% Lines 216/218
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328   1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907×   1907× 1907× 1907× 1907× 1907× 1907× 1907× 1907×   1762× 1762× 1762× 1762× 1762× 1762× 1762× 1762×   164×     415×   87×     1390×   122×   122×   163×     163×   44×       44×   87×       87×   56× 56×         105×     105×   19×     19×   48×     48×   112×   43× 43×     12× 12×                     13× 13×       112×         208× 208×   218× 218×     11× 11×   40× 40×   141× 141×         408×                                   1764×   1762× 1762× 1762× 1761×   1762× 1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1762×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762× 1761×   1762×   16× 16× 16× 16× 32× 32×   16× 16× 16× 16× 16×   16× 16×            
define(["require", "exports", "@syncfusion/ej2-base", "./constant", "./../plugin/lists", "./../../selection/index", "./../plugin/dom-node", "./../plugin/formats", "./../plugin/link", "./../plugin/alignments", "./../plugin/indents", "./../plugin/image", "./../plugin/audio", "./../plugin/video", "./../plugin/table", "./../plugin/selection-exec", "./../plugin/inserthtml-exec", "./../plugin/clearformat-exec", "./../plugin/undo", "../plugin/ms-word-clean-up", "./../../common/constant", "../plugin/insert-text", "../plugin/nodecutter", "../plugin/format-painter-actions", "../plugin/emoji-picker-action", "../plugin/table-selection"], function (require, exports, ej2_base_1, CONSTANT, lists_1, index_1, dom_node_1, formats_1, link_1, alignments_1, indents_1, image_1, audio_1, video_1, table_1, selection_exec_1, inserthtml_exec_1, clearformat_exec_1, undo_1, ms_word_clean_up_1, EVENTS, insert_text_1, nodecutter_1, format_painter_actions_1, emoji_picker_action_1, table_selection_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var EditorManager = (function () {
        function EditorManager(options) {
            this.currentDocument = options.document;
            this.editableElement = options.editableElement;
            this.nodeSelection = new index_1.NodeSelection(this.editableElement);
            this.nodeCutter = new nodecutter_1.NodeCutter();
            this.domNode = new dom_node_1.DOMNode(this.editableElement, this.currentDocument);
            this.observer = new ej2_base_1.Observer(this);
            this.listObj = new lists_1.Lists(this);
            this.formatObj = new formats_1.Formats(this);
            this.alignmentObj = new alignments_1.Alignments(this);
            this.indentsObj = new indents_1.Indents(this);
            this.linkObj = new link_1.LinkCommand(this);
            this.imgObj = new image_1.ImageCommand(this);
            this.audioObj = new audio_1.AudioCommand(this);
            this.videoObj = new video_1.VideoCommand(this);
            this.selectionObj = new selection_exec_1.SelectionBasedExec(this);
            this.inserthtmlObj = new inserthtml_exec_1.InsertHtmlExec(this);
            this.insertTextObj = new insert_text_1.InsertTextExec(this);
            this.clearObj = new clearformat_exec_1.ClearFormatExec(this);
            this.tableObj = new table_1.TableCommand(this);
            this.undoRedoManager = new undo_1.UndoRedoManager(this, options.options);
            this.msWordPaste = new ms_word_clean_up_1.MsWordPaste(this);
            this.formatPainterEditor = new format_painter_actions_1.FormatPainterActions(this, options.formatPainterSettings);
            this.emojiPickerObj = new emoji_picker_action_1.EmojiPickerAction(this);
            this.tableCellSelection = new table_selection_1.TableSelection(this.editableElement, this.currentDocument);
            this.wireEvents();
            this.isDestroyed = false;
        }
        EditorManager.prototype.wireEvents = function () {
            this.observer.on(EVENTS.KEY_DOWN, this.editorKeyDown, this);
            this.observer.on(EVENTS.KEY_UP, this.editorKeyUp, this);
            this.observer.on(EVENTS.KEY_UP, this.editorKeyUp, this);
            this.observer.on(EVENTS.MODEL_CHANGED, this.onPropertyChanged, this);
            this.observer.on(EVENTS.MS_WORD_CLEANUP, this.onWordPaste, this);
            this.observer.on(EVENTS.ON_BEGIN, this.onBegin, this);
            this.observer.on(EVENTS.MOUSE_DOWN, this.editorMouseDown, this);
            this.observer.on(EVENTS.DESTROY, this.destroy, this);
        };
        EditorManager.prototype.unwireEvents = function () {
            this.observer.off(EVENTS.KEY_DOWN, this.editorKeyDown);
            this.observer.off(EVENTS.KEY_UP, this.editorKeyUp);
            this.observer.off(EVENTS.KEY_UP, this.editorKeyUp);
            this.observer.off(EVENTS.MODEL_CHANGED, this.onPropertyChanged);
            this.observer.off(EVENTS.MS_WORD_CLEANUP, this.onWordPaste);
            this.observer.off(EVENTS.ON_BEGIN, this.onBegin);
            this.observer.off(EVENTS.MOUSE_DOWN, this.editorMouseDown);
            this.observer.off(EVENTS.DESTROY, this.destroy);
        };
        EditorManager.prototype.onWordPaste = function (e) {
            this.observer.notify(EVENTS.MS_WORD_CLEANUP_PLUGIN, e);
        };
        EditorManager.prototype.onPropertyChanged = function (props) {
            this.observer.notify(EVENTS.MODEL_CHANGED_PLUGIN, props);
        };
        EditorManager.prototype.editorKeyDown = function (e) {
            this.observer.notify(EVENTS.KEY_DOWN_HANDLER, e);
        };
        EditorManager.prototype.editorKeyUp = function (e) {
            this.observer.notify(EVENTS.KEY_UP_HANDLER, e);
        };
        EditorManager.prototype.onBegin = function (e) {
            this.observer.notify(EVENTS.SPACE_ACTION, e);
        };
        EditorManager.prototype.execCommand = function (command, value, event, callBack, text, exeValue, selector, enterAction) {
            switch (command.toLowerCase()) {
                case 'lists':
                    this.observer.notify(EVENTS.LIST_TYPE, { subCommand: value, event: event, callBack: callBack,
                        selector: selector, item: exeValue, enterAction: enterAction });
                    break;
                case 'formats':
                    this.observer.notify(EVENTS.FORMAT_TYPE, { subCommand: value, event: event, callBack: callBack,
                        selector: selector, exeValue: exeValue, enterAction: enterAction
                    });
                    break;
                case 'alignments':
                    this.observer.notify(CONSTANT.ALIGNMENT_TYPE, {
                        subCommand: value, event: event, callBack: callBack,
                        selector: selector, value: exeValue, enterAction: enterAction
                    });
                    break;
                case 'indents':
                    this.observer.notify(CONSTANT.INDENT_TYPE, {
                        subCommand: value, event: event, callBack: callBack,
                        selector: selector, enterAction: enterAction
                    });
                    break;
                case 'links':
                    this.observer.notify(CONSTANT.LINK, { command: command, value: value, item: exeValue, event: event, callBack: callBack });
                    break;
                case 'files':
                    this.observer.notify(CONSTANT.IMAGE, {
                        command: command, value: 'Image', item: exeValue, event: event, callBack: callBack, selector: selector
                    });
                    break;
                case 'images':
                    this.observer.notify(CONSTANT.IMAGE, {
                        command: command, value: value, item: exeValue, event: event, callBack: callBack, selector: selector
                    });
                    break;
                case 'audios':
                    this.observer.notify(CONSTANT.AUDIO, {
                        command: command, value: value, item: exeValue, event: event, callBack: callBack, selector: selector
                    });
                    break;
                case 'videos':
                    this.observer.notify(CONSTANT.VIDEO, {
                        command: command, value: value, item: exeValue, event: event, callBack: callBack, selector: selector
                    });
                    break;
                case 'table':
                    switch (value.toString().toLocaleLowerCase()) {
                        case 'createtable':
                            this.observer.notify(CONSTANT.TABLE, { item: exeValue, event: event, callBack: callBack, enterAction: enterAction });
                            break;
                        case 'insertrowbefore':
                        case 'insertrowafter':
                            this.observer.notify(CONSTANT.INSERT_ROW, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'insertcolumnleft':
                        case 'insertcolumnright':
                            this.observer.notify(CONSTANT.INSERT_COLUMN, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'deleterow':
                            this.observer.notify(CONSTANT.DELETEROW, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'deletecolumn':
                            this.observer.notify(CONSTANT.DELETECOLUMN, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'tableremove':
                            this.observer.notify(CONSTANT.REMOVETABLE, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'tableheader':
                            this.observer.notify(CONSTANT.TABLEHEADER, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'aligntop':
                        case 'alignmiddle':
                        case 'alignbottom':
                            this.observer.notify(CONSTANT.TABLE_VERTICAL_ALIGN, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'merge':
                            this.observer.notify(CONSTANT.TABLE_MERGE, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'horizontalsplit':
                            this.observer.notify(CONSTANT.TABLE_HORIZONTAL_SPLIT, { item: exeValue, event: event, callBack: callBack });
                            break;
                        case 'verticalsplit':
                            this.observer.notify(CONSTANT.TABLE_VERTICAL_SPLIT, { item: exeValue, event: event, callBack: callBack });
                            break;
                    }
                    break;
                case 'font':
                case 'style':
                case 'effects':
                case 'casing':
                    this.observer.notify(CONSTANT.SELECTION_TYPE, { subCommand: value, event: event, callBack: callBack, value: text, selector: selector, enterAction: enterAction });
                    break;
                case 'inserthtml':
                    this.observer.notify(CONSTANT.INSERTHTML_TYPE, { subCommand: value, callBack: callBack, value: text, enterAction: enterAction });
                    break;
                case 'inserttext':
                    this.observer.notify(CONSTANT.INSERT_TEXT_TYPE, { subCommand: value, callBack: callBack, value: text });
                    break;
                case 'clear':
                    this.observer.notify(CONSTANT.CLEAR_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector, enterAction: enterAction });
                    break;
                case 'actions':
                    this.observer.notify(EVENTS.ACTION, { subCommand: value, event: event, callBack: callBack, selector: selector });
                    break;
                case 'formatpainter':
                    this.observer.notify(EVENTS.FORMAT_PAINTER_ACTIONS, { item: exeValue, subCommand: value, event: event, callBack: callBack });
                    break;
                case 'emojipicker':
                    this.observer.notify(EVENTS.EMOJI_PICKER_ACTIONS, { item: exeValue, subCommand: value, value: text,
                        event: event, callBack: callBack });
            }
        };
        EditorManager.prototype.editorMouseDown = function (e) {
            if (e.args.detail === 3) {
                this.tripleClickSelection(e.args);
            }
        };
        EditorManager.prototype.tripleClickSelection = function (e) {
            var range = this.nodeSelection.getRange(this.currentDocument);
            var selection = this.nodeSelection.get(this.currentDocument);
            if (selection.rangeCount > 0 && selection.toString() !== '') {
                var startBlockNode = this.getParentBlockNode(range.startContainer);
                var endBlockNode = this.getParentBlockNode(range.endContainer);
                Eif (startBlockNode && endBlockNode && startBlockNode === endBlockNode) {
                    var newRange = this.currentDocument.createRange();
                    var startTextNode = this.getFirstTextNode(startBlockNode);
                    var endTextNode = this.getLastTextNode(endBlockNode);
                    Eif (startTextNode && endTextNode) {
                        newRange.setStart(startTextNode, 0);
                        newRange.setEnd(endTextNode, endTextNode.textContent.length);
                        this.nodeSelection.setRange(this.currentDocument, newRange);
                        e.preventDefault();
                    }
                }
            }
        };
        EditorManager.prototype.getParentBlockNode = function (node) {
            var treeWalker = this.currentDocument.createTreeWalker(this.editableElement, NodeFilter.SHOW_ELEMENT, {
                acceptNode: function (currentNode) {
                    var displayStyle = window.getComputedStyle(currentNode).display;
                    Eif (displayStyle.indexOf('inline') < 0) {
                        return NodeFilter.FILTER_ACCEPT;
                    }
                    else {
                        return NodeFilter.FILTER_SKIP;
                    }
                }
            });
            treeWalker.currentNode = node;
            var blockParent = treeWalker.parentNode();
            return blockParent;
        };
        EditorManager.prototype.getLastTextNode = function (node) {
            var treeWalker = this.currentDocument.createTreeWalker(node, NodeFilter.SHOW_TEXT, null);
            var lastTextNode = null;
            var currentNode = treeWalker.nextNode();
            while (currentNode) {
                lastTextNode = currentNode;
                currentNode = treeWalker.nextNode();
            }
            return lastTextNode;
        };
        EditorManager.prototype.getFirstTextNode = function (node) {
            var treeWalker = this.currentDocument.createTreeWalker(node, NodeFilter.SHOW_TEXT, null);
            var firstTextNode = treeWalker.nextNode();
            return firstTextNode;
        };
        EditorManager.prototype.destroy = function () {
            if (this.isDestroyed) {
                return;
            }
            this.unwireEvents();
            this.observer.notify(EVENTS.INTERNAL_DESTROY);
            if (this.editableElement) {
                this.editableElement = null;
            }
            this.currentDocument = null;
            if (this.nodeCutter) {
                this.nodeCutter = null;
            }
            if (this.domNode) {
                this.domNode = null;
            }
            if (this.listObj) {
                this.listObj = null;
            }
            if (this.formatObj) {
                this.formatObj = null;
            }
            if (this.alignmentObj) {
                this.alignmentObj = null;
            }
            if (this.indentsObj) {
                this.indentsObj = null;
            }
            if (this.linkObj) {
                this.linkObj = null;
            }
            Eif (this.imgObj) {
                this.imgObj = null;
            }
            if (this.audioObj) {
                this.audioObj = null;
            }
            if (this.videoObj) {
                this.videoObj = null;
            }
            if (this.selectionObj) {
                this.selectionObj = null;
            }
            if (this.inserthtmlObj) {
                this.inserthtmlObj = null;
            }
            if (this.insertTextObj) {
                this.insertTextObj = null;
            }
            if (this.clearObj) {
                this.clearObj = null;
            }
            if (this.tableObj) {
                this.tableObj = null;
            }
            if (this.msWordPaste) {
                this.msWordPaste = null;
            }
            if (this.formatPainterEditor) {
                this.formatPainterEditor = null;
            }
            if (this.emojiPickerObj) {
                this.emojiPickerObj = null;
            }
            if (this.tableCellSelection) {
                this.tableCellSelection = null;
            }
            this.isDestroyed = true;
        };
        EditorManager.prototype.beforeSlashMenuApplyFormat = function () {
            var currentRange = this.nodeSelection.getRange(this.currentDocument);
            var node = this.nodeSelection.getNodeCollection(currentRange)[0];
            var startPoint = currentRange.startOffset;
            while (this.nodeSelection.getRange(document).toString().indexOf('/') === -1) {
                this.nodeSelection.setSelectionText(document, node, node, startPoint, currentRange.endOffset);
                startPoint--;
            }
            var slashRange = this.nodeSelection.getRange(this.currentDocument);
            var slashNode = this.nodeCutter.GetSpliceNode(slashRange, node);
            var previouNode = slashNode.previousSibling;
            Eif (slashNode.parentElement && slashNode.parentElement.innerHTML.length === 1) {
                slashNode.parentElement.appendChild(document.createElement('br'));
            }
            slashNode.parentNode.removeChild(slashNode);
            Iif (previouNode) {
                this.nodeSelection.setCursorPoint(document, previouNode, previouNode.textContent.length);
            }
        };
        return EditorManager;
    }());
    exports.EditorManager = EditorManager;
});