suneditor - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

bower.json

 {
   "name": "suneditor",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
@@ -5,0 +5,0 @@ "main": "src/suneditor.js",

package.json

@@ -6,3 +6,3 @@ {
   ],
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
@@ -9,0 +9,0 @@ "main": "src/suneditor.js",

src/lang/en.js

@@ -86,6 +86,12 @@ /*
     },
-    editLink: {
+    controller: {
         edit: 'Edit',
-        remove: 'Remove'
+        remove: 'Remove',
+        insertRowAbove: 'Insert row above',
+        insertRowBelow: 'Insert row below',
+        deleteRow: 'Delete row',
+        insertColumnBefore: 'Insert column before',
+        insertColumnAfter: 'Insert column after',
+        deleteColumn: 'Delete column'
     }
 };

src/lang/ko.js

@@ -79,6 +79,12 @@ export default {
     },
-    editLink: {
+    controller: {
         edit: '편집',
-        remove: '삭제'
+        remove: '삭제',
+        insertRowAbove: '위에 행 삽입',
+        insertRowBelow: '아래에 행 삽입',
+        deleteRow: '행 삭제',
+        insertColumnBefore: '왼쪽에 열 삽입',
+        insertColumnAfter: '오른쪽에 열 삽입',
+        deleteColumn: '열 삭제'
     }
 };

src/lib/constructor.js

@@ -310,3 +310,3 @@ 'use strict';
         if (_plugins) {
-            const pluginsValues = _plugins.length ? _plugins : Object.values(_plugins);
+            const pluginsValues = _plugins.length ? _plugins : Object.keys(_plugins).map(function(e) { return _plugins[e] });
             for (let i = 0, len = pluginsValues.length; i < len; i++) {
@@ -313,0 +313,0 @@ plugins[pluginsValues[i].name] = pluginsValues[i];

src/lib/util.js

@@ -138,3 +138,3 @@ 'use strict';
     isFormatElement: function (element) {
-        if (element && element.nodeType === 1 && /^(?:P|DIV|H[1-6])$/i.test(element.tagName)) return true;
+        if (element && element.nodeType === 1 && /^(?:P|DIV|H[1-6])$/i.test(element.nodeName)) return true;
         return false;
@@ -150,3 +150,3 @@ },
     isRangeFormatElement: function (element) {
-        if (element && element.nodeType === 1 && /^BLOCKQUOTE|TABLE$/i.test(element.tagName)) return true;
+        if (element && element.nodeType === 1 && /^BLOCKQUOTE|TABLE$/i.test(element.nodeName)) return true;
         return false;
@@ -153,0 +153,0 @@ },

src/plugins/dialog/image.js

@@ -520,17 +520,18 @@ /*
     init: function () {
-        this.context.image.imgInputFile.value = '';
-        this.context.image.imgUrlFile.value = '';
-        this.context.image.altText.value = '';
-        this.context.image.imgLink.value = '';
-        this.context.image.imgLinkNewWindowCheck.checked = false;
-        this.context.image.modal.querySelector('#suneditor_image_radio_none').checked = true;
-        this.context.image.caption.checked = false;
-        this.context.image.proportion.checked = false;
-        this.context.image.imageX.value = this.context.user.imageSize;
-        this.context.image.imageY.value = '';
-        this.context.image.imageY.disabled = true;
-        this.context.image.proportion.disabled = true;
-        this.context.image._element = null;
+        const contextImage = this.context.image;
+        contextImage.imgInputFile.value = '';
+        contextImage.imgUrlFile.value = '';
+        contextImage.altText.value = '';
+        contextImage.imgLink.value = '';
+        contextImage.imgLinkNewWindowCheck.checked = false;
+        contextImage.modal.querySelector('#suneditor_image_radio_none').checked = true;
+        contextImage.caption.checked = false;
+        contextImage.proportion.checked = false;
+        contextImage.imageX.value = this.context.user.imageSize;
+        contextImage.imageY.value = '';
+        contextImage.imageY.disabled = true;
+        contextImage.proportion.disabled = true;
+        contextImage._element = null;
         this.plugins.image.openTab.call(this, 'init');
     }
 };

src/plugins/dialog/link.js

@@ -27,3 +27,3 @@ /*
         /** link button */
-        let link_button = eval(this.setController_LinkBtn(core.lang));
+        let link_button = eval(this.setController_LinkButton(core.lang));
         context.link.linkBtn = link_button;
@@ -77,3 +77,3 @@ context.link._linkAnchor = null;
     /** modify controller button */
-    setController_LinkBtn: function (lang) {
+    setController_LinkButton: function (lang) {
         const link_btn = document.createElement('DIV');
@@ -87,4 +87,4 @@
             '   <div class="btn-group">' +
-            '     <button type="button" data-command="update" tabindex="-1" title="' + lang.editLink.edit + '"><div class="icon-link"></div></button>' +
-            '     <button type="button" data-command="delete" tabindex="-1" title="' + lang.editLink.remove + '"><div class="icon-cancel"></div></button>' +
+            '     <button type="button" data-command="update" tabindex="-1" title="' + lang.controller.edit + '"><div class="icon-link"></div></button>' +
+            '     <button type="button" data-command="delete" tabindex="-1" title="' + lang.controller.remove + '"><div class="icon-delete"></div></button>' +
             '   </div>' +
@@ -146,4 +146,21 @@ '</div>';
 
-        linkBtn.style.left = selectionATag.offsetLeft + 'px';
-        linkBtn.style.top = (selectionATag.offsetTop + selectionATag.offsetHeight - this.context.element.wysiwyg.scrollTop + 10) + 'px';
+        let tableOffsetLeft = 0;
+        let tableOffsetTop = 0;
+        let tdElement = selectionATag.parentNode;
+        while (!this.util.isWysiwygDiv(tdElement) && !/^TD$/i.test(tdElement.nodeName)) {
+            tdElement = tdElement.parentNode;
+        }
+
+        if (/^TD$/i.test(tdElement.nodeName)) {
+            let table = tdElement;
+            while (!/^TABLE$/i.test(table.nodeName)) {
+                table = table.parentNode;
+            }
+
+            tableOffsetLeft = tdElement.offsetLeft + table.offsetLeft;
+            tableOffsetTop = tdElement.offsetTop + table.offsetTop;
+        }
+
+        linkBtn.style.left = (selectionATag.offsetLeft + tableOffsetLeft) + 'px';
+        linkBtn.style.top = (selectionATag.offsetTop + selectionATag.offsetHeight + tableOffsetTop - this.context.element.wysiwyg.scrollTop + 10) + 'px';
         linkBtn.style.display = 'block';
@@ -175,12 +192,13 @@
 
-        this.context.link.linkBtn.style.display = 'none';
+        this.controllersOff();
     },
 
     init: function () {
-        this.context.link.linkBtn.style.display = 'none';
-        this.context.link._linkAnchor = null;
-        this.context.link.focusElement.value = '';
-        this.context.link.linkAnchorText.value = '';
-        this.context.link.linkNewWindowCheck.checked = false;
+        const contextLink = this.context.link;
+        contextLink.linkBtn.style.display = 'none';
+        contextLink._linkAnchor = null;
+        contextLink.focusElement.value = '';
+        contextLink.linkAnchorText.value = '';
+        contextLink.linkNewWindowCheck.checked = false;
     }
 };

src/plugins/dialog/video.js

@@ -157,4 +157,4 @@ /*
             /** cover event */
-            coverSpan.addEventListener('mouseenter', this.plugins.video.onMouseEnter_cover.bind(this));
-            coverSpan.addEventListener('mouseleave', this.plugins.video.onMouseLeave_cover.bind(this).bind(this));
+            coverSpan.addEventListener('mouseenter', this.plugins.video.onMouseenter_cover.bind(this));
+            coverSpan.addEventListener('mouseleave', this.plugins.video.onMouseleave_cover.bind(this).bind(this));
 
@@ -186,3 +186,3 @@ oIframe.width = '100%';
 
-    onMouseEnter_cover: function (e) {
+    onMouseenter_cover: function (e) {
         const target = e.target;
@@ -194,3 +194,3 @@ if (target === this.context.video._coverElementInner.parentNode) return;
 
-    onMouseLeave_cover: function (e) {
+    onMouseleave_cover: function (e) {
         const target = e.target;
@@ -257,8 +257,9 @@ if (target === this.context.video._coverElementInner.parentNode) target.removeChild(this.context.video._coverElementInner);
     init: function () {
-        this.context.video.focusElement.value = '';
-        this.context.video.videoX.value = this.context.user.videoX;
-        this.context.video.videoY.value = this.context.user.videoY;
-        this.context.video.proportion.checked = false;
-        this.context.video.proportion.disabled = true;
+        const contextVideo = this.context.video;
+        contextVideo.focusElement.value = '';
+        contextVideo.videoX.value = this.context.user.videoX;
+        contextVideo.videoY.value = this.context.user.videoY;
+        contextVideo.proportion.checked = false;
+        contextVideo.proportion.disabled = true;
     }
 };

src/plugins/modules/resizing.js

@@ -91,3 +91,3 @@ /*
             '<div class="btn-group remove">' +
-            '   <button type="button" data-command="delete" title="' + lang.dialogBox.remove + '"><div aria-hidden="true" class="icon-cancel"></div></button>' +
+            '   <button type="button" data-command="delete" title="' + lang.dialogBox.remove + '"><div aria-hidden="true" class="icon-delete"></div></button>' +
             '</div>';
@@ -147,5 +147,4 @@
 
+        this.controllersOff();
         this.context.element.resizeBackground.style.display = 'none';
-        this.context.resizing.resizeContainer.style.display = 'none';
-        this.context.resizing.resizeButton.style.display = 'none';
         this.plugins[this.context.resizing._resize_plugin].init.call(this);
@@ -152,0 +151,0 @@ },

src/plugins/submenu/align.js

@@ -57,5 +57,5 @@ /*
         this.focus();
-        this.execCommand(command, false);
+        this.execCommand(command, false, null);
         this.submenuOff();
     }
 };

src/plugins/submenu/table.js

@@ -14,2 +14,13 @@ /*
         const context = core.context;
+        context.table = {
+            _element: null,
+            _tdElement: null,
+            _trElement: null,
+            _trElements: null,
+            _tdIndex: 0,
+            _trIndex: 0,
+            _tdCnt: 0,
+            _trCnt: 0,
+            _tableXY: []
+        };
 
@@ -20,16 +31,21 @@ /** set submenu */
 
-        context.submenu.tableHighlight = listDiv.getElementsByClassName('sun-editor-id-table-highlighted')[0];
-        context.submenu.tableUnHighlight = listDiv.getElementsByClassName('sun-editor-id-table-unhighlighted')[0];
-        context.submenu.tableDisplay = listDiv.getElementsByClassName('sun-editor-table-display')[0];
-        context.submenu._tableXY = [];
+        context.table.tableHighlight = listDiv.getElementsByClassName('sun-editor-id-table-highlighted')[0];
+        context.table.tableUnHighlight = listDiv.getElementsByClassName('sun-editor-id-table-unhighlighted')[0];
+        context.table.tableDisplay = listDiv.getElementsByClassName('sun-editor-table-display')[0];
 
+        /** set resizing */
+        let resizeDiv = eval(this.setController_tableEditor(core.lang));
+        context.table.resizeDiv = resizeDiv;
+        
         /** add event listeners */
         tablePicker.addEventListener('mousemove', this.onMouseMove_tablePicker.bind(core));
         tablePicker.addEventListener('click', this.appendTable.bind(core));
+        resizeDiv.addEventListener('click', this.onClick_resizeDiv.bind(core));
 
         /** append html */
         targetElement.parentNode.appendChild(listDiv);
+        context.element.relative.appendChild(resizeDiv);
 
         /** empty memory */
-        listDiv = null, tablePicker = null;
+        listDiv = null, tablePicker = null, resizeDiv = null;
     },
@@ -53,7 +69,33 @@
 
+    setController_tableEditor: function (lang) {
+        const tableResize = document.createElement('DIV');
+
+        tableResize.className = 'sun-editor-id-table-edit';
+        tableResize.style.display = 'none';
+        tableResize.innerHTML = '' +
+            '<div class="arrow"></div>' +
+            '<div>' +
+            '   <div class="btn-group">' +
+            '     <button type="button" data-command="insert" data-value="row" data-option="up" title="' + lang.controller.insertRowAbove + '"><div class="icon-insert-row-above"></div></button>' +
+            '     <button type="button" data-command="insert" data-value="row" data-option="down" title="' + lang.controller.insertRowBelow + '"><div class="icon-insert-row-below"></div></button>' +
+            '     <button type="button" data-command="delete" data-value="row" title="' + lang.controller.deleteRow + '"><div class="icon-delete-row"></div></button>' +
+            '   </div>' +
+            '</div>' +
+            '<div style="margin-top: -5px;">' +
+            '   <div class="btn-group">' +
+            '     <button type="button" data-command="insert" data-value="cell" data-option="left" title="' + lang.controller.insertColumnBefore + '"><div class="icon-insert-column-left"></div></button>' +
+            '     <button type="button" data-command="insert" data-value="cell" data-option="right" title="' + lang.controller.insertColumnAfter + '"><div class="icon-insert-column-right"></div></button>' +
+            '     <button type="button" data-command="delete" data-value="cell" title="' + lang.controller.deleteColumn + '"><div class="icon-delete-column"></div></button>' +
+            '     <button type="button" data-command="remove" title="' + lang.controller.remove + '"><div class="icon-delete"></div></button>' +
+            '   </div>' +
+            '</div>';
+
+        return tableResize;
+    },
+
     appendTable: function () {
         const oTable = document.createElement('TABLE');
 
-        let x = this.context.submenu._tableXY[0];
-        let y = this.context.submenu._tableXY[1];
+        let x = this.context.table._tableXY[0];
+        let y = this.context.table._tableXY[1];
         let tableHTML = '<tbody>';
@@ -65,3 +107,3 @@
             while (tdCnt > 0) {
-                tableHTML += '<td><p>&#65279</p></td>';
+                tableHTML += '<td><div>&#65279</div></td>';
                 --tdCnt;
@@ -89,19 +131,19 @@ }
         y = y < 1 ? 1 : y;
-        this.context.submenu.tableHighlight.style.width = x + 'em';
-        this.context.submenu.tableHighlight.style.height = y + 'em';
+        this.context.table.tableHighlight.style.width = x + 'em';
+        this.context.table.tableHighlight.style.height = y + 'em';
 
         let x_u = x < 5 ? 5 : (x > 9 ? 10 : x + 1);
         let y_u = y < 5 ? 5 : (y > 9 ? 10 : y + 1);
-        this.context.submenu.tableUnHighlight.style.width = x_u + 'em';
-        this.context.submenu.tableUnHighlight.style.height = y_u + 'em';
+        this.context.table.tableUnHighlight.style.width = x_u + 'em';
+        this.context.table.tableUnHighlight.style.height = y_u + 'em';
 
-        this.util.changeTxt(this.context.submenu.tableDisplay, x + ' x ' + y);
-        this.context.submenu._tableXY = [x, y];
+        this.util.changeTxt(this.context.table.tableDisplay, x + ' x ' + y);
+        this.context.table._tableXY = [x, y];
     },
 
     reset_table_picker: function () {
-        if (!this.context.submenu.tableHighlight) return;
+        if (!this.context.table.tableHighlight) return;
 
-        const highlight = this.context.submenu.tableHighlight.style;
-        const unHighlight = this.context.submenu.tableUnHighlight.style;
+        const highlight = this.context.table.tableHighlight.style;
+        const unHighlight = this.context.table.tableUnHighlight.style;
 
@@ -113,5 +155,142 @@ highlight.width = '1em';
 
-        this.util.changeTxt(this.context.submenu.tableDisplay, '1 x 1');
+        this.util.changeTxt(this.context.table.tableDisplay, '1 x 1');
         this.submenuOff();
+    },
+
+    init: function () {
+        const contextTable = this.context.table;
+        
+        if (contextTable._tdElement) this.util.removeClass(contextTable._tdElement, 'sun-editor-selected-cell');
+
+        contextTable._element = null;
+        contextTable._tdElement = null;
+        contextTable._trElement = null;
+        contextTable._trElements = 0;
+        contextTable._tdIndex = 0;
+        contextTable._trIndex = 0;
+        contextTable._trCnt = 0;
+        contextTable._tdCnt = 0;
+        contextTable._tableXY = [];
+        contextTable._resizeBars = [];
+    },
+
+    /** table edit controller */
+    call_controller_tableEdit: function (tdElement) {
+        const contextTable = this.context.table;
+        const resizeDiv = contextTable.resizeDiv;
+        
+        this.plugins.table.setPositionControllerDiv.call(this, tdElement, false);
+        resizeDiv.style.display = 'block';
+
+        this.controllerArray = [resizeDiv];
+        this.controllerFunction = [this.plugins.table.init.bind(this)];
+    },
+
+    setPositionControllerDiv: function (tdElement, reset) {
+        const contextTable = this.context.table;
+        const resizeDiv = contextTable.resizeDiv;
+        let table = contextTable._element;
+
+        if (!table) {
+            table = tdElement;
+            while (!/^TABLE$/i.test(table.nodeName)) {
+                table = table.parentNode;
+            }
+            contextTable._element = table;
+        }
+
+        if (contextTable._tdElement !== tdElement) {
+            if (contextTable._tdElement) this.util.removeClass(contextTable._tdElement, 'sun-editor-selected-cell');
+            this.util.addClass(tdElement, 'sun-editor-selected-cell');
+            contextTable._tdElement = tdElement;
+            contextTable._trElement = tdElement.parentNode;
+        }
+
+        if (reset || contextTable._trCnt === 0) {
+            contextTable._trElements = table.rows;
+            contextTable._tdIndex = tdElement.cellIndex;
+            contextTable._trIndex = contextTable._trElement.rowIndex;
+            contextTable._trCnt = table.rows.length;
+            contextTable._tdCnt = contextTable._trElement.cells.length;
+        }
+
+        resizeDiv.style.left = (tdElement.offsetLeft + table.offsetLeft) + 'px';
+        resizeDiv.style.top = (tdElement.offsetTop + tdElement.offsetHeight + table.offsetTop - this.context.element.wysiwyg.scrollTop + 10) + 'px';
+    },
+
+    insertRowCell: function (type, option) {
+        const contextTable = this.context.table;
+
+        if (type === 'row') {
+            const rowIndex = option === 'up' ? contextTable._trIndex : contextTable._trIndex + 1;
+            let cells = '';
+
+            for (let i = 0, len = contextTable._tdCnt; i < len; i++) {
+                cells += '<td><div>&#65279</div></td>';
+            }
+
+            const newRow = contextTable._element.insertRow(rowIndex);
+            newRow.innerHTML = cells;
+        }
+        // cell
+        else {
+            const trArray = contextTable._trElements;
+            const cellIndex = option === 'left' ? contextTable._tdIndex : contextTable._tdIndex + 1;
+            let cell = null;
+            
+            for (let i = 0, len = contextTable._trCnt; i < len; i++) {
+                cell = trArray[i].insertCell(cellIndex);
+                cell.innerHTML = '<div>&#65279</div>';
+            }
+        }
+
+        this.plugins.table.setPositionControllerDiv.call(this, contextTable._tdElement, true);
+    },
+
+    deleteRowCell: function (type) {
+        const contextTable = this.context.table;
+
+        if (type === 'row') {
+            contextTable._element.deleteRow(contextTable._trIndex);
+        }
+        // cell
+        else {
+            const trArray = contextTable._trElements;
+            const cellIndex = contextTable._tdIndex;
+            
+            for (let i = 0, len = contextTable._trCnt; i < len; i++) {
+                trArray[i].deleteCell(cellIndex);
+            }
+        }
+
+        this.controllersOff();
+    },
+
+    onClick_resizeDiv: function (e) {
+        e.stopPropagation();
+        const target = e.target;
+
+        const command = target.getAttribute('data-command') || target.parentNode.getAttribute('data-command');
+        const value = target.getAttribute('data-value') || target.parentNode.getAttribute('data-value');
+        const option = target.getAttribute('data-option') || target.parentNode.getAttribute('data-option');
+        
+        if (!command) return;
+
+        e.preventDefault();
+        const contextTable = this.context.table;
+
+        switch (command) {
+            case 'insert':
+                this.plugins.table.insertRowCell.call(this, value, option);
+                break;
+            case 'delete':
+                this.plugins.table.deleteRowCell.call(this, value);
+                break;
+            case 'remove':
+            this.util.removeItem(contextTable._element);
+            this.controllersOff();
+            this.focus();
+        }
+
     }
 };

src/suneditor.js

@@ -49,3 +49,9 @@ /*
         if (_init_options) {
-            options = Object.assign(this.util.copyObj(_init_options), options);
+            // options = Object.assign(this.util.copyObj(_init_options), options);
+            options =  [this.util.copyObj(_init_options), options].reduce(function (init, option) {
+                            Object.keys(option).forEach(function (key) {
+                                init[key] = option[key];
+                            });
+                            return init;
+                        }, {});
         }
@@ -52,0 +58,0 @@

No alert changes

Improved metrics

Total package byte prevSize

2667122

increased by2.93%

Lines of code

36464

increased by0.67%

No dependency changes