suneditor - npm Package Compare versions

Comparing version 2.0.15 to 2.1.0

bower.json

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

package.json

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

src/lang/en.js

@@ -49,3 +49,4 @@ /*
         tag_div: 'Normal (DIV)',
-        tag_h: 'Header'
+        tag_h: 'Header',
+        tag_quote: 'Quote'
     },
@@ -52,0 +53,0 @@ dialogBox: {

src/lang/ko.js

@@ -42,3 +42,4 @@ export default {
         tag_div: '기본 (DIV)',
-        tag_h: '제목'
+        tag_h: '제목',
+        tag_quote: '인용문'
     },
@@ -45,0 +46,0 @@ dialogBox: {

src/lib/util.js

@@ -99,6 +99,7 @@ 'use strict';
 
-            if (!this.isFormatElement(tag[i])) {
-                const textArray = baseHtml.split(/\n|\r/g);
+            if (!this.isFormatElement(tag[i]) && !this.isRangeFormatElement(tag[i])) {
+                const textArray = baseHtml.split(/\n/g);
                 let text = '';
                 for (let t = 0, tLen = textArray.length; t < tLen; t++) {
+                    if (textArray[t].nodeType !== 3) continue;
                     text = textArray[t].trim();
@@ -133,3 +134,3 @@ if (text.length > 0) innerHTML += '<P>' + text + '</p>';
     /**
-     * @description It is judged whether it is the format element. (P, DIV, H1-6, Table...)
+     * @description It is judged whether it is the format element (P, DIV, H1-6)
      * @param {Element} element - The element to check
@@ -139,3 +140,3 @@ * @returns {Boolean}
     isFormatElement: function (element) {
-        if (element && element.nodeType === 1 && /^(?:P|DIV|H[1-6]|TABLE)$/i.test(element.tagName)) return true;
+        if (element && element.nodeType === 1 && /^(?:P|DIV|H[1-6])$/i.test(element.tagName)) return true;
         return false;
@@ -145,3 +146,15 @@ },
     /**
-     * @description Get format element of the argument value (P, DIV, Table, H1, H2, H3, H4, H5, H6...)
+     * @description It is judged whether it is the range format element. (blockquote, TABLE)
+     * * Range format element is wrap the format element  (P, DIV, H1-6)
+     * @param {Element} element - The element to check
+     * @returns {Boolean}
+     */
+    isRangeFormatElement: function (element) {
+        if (element && element.nodeType === 1 && /^BLOCKQUOTE|TABLE$/i.test(element.tagName)) return true;
+        return false;
+    },
+
+    /**
+     * @description Get format element of the argument value (P, DIV, H[1-6])
+     * Or a tag whose parent tag is the editing area. (table, blockquote)
      * @param {Element} element - Reference element if null or no value, it is relative to the current focus node.
@@ -153,10 +166,14 @@ * @returns {Element}
 
-        if (!element || this.isWysiwygDiv(element)) {
-            element = context.element.wysiwyg.firstChild;
-        } else {
-            while (!this.isWysiwygDiv(element.parentNode)) {
-                element = element.parentNode;
-            }
+        if (this.isWysiwygDiv(element)) {
+            const firstFormatElement = this.getListChildren(element, function (current) {
+                return this.isFormatElement(current);
+            }.bind(this))[0];
+
+            return firstFormatElement;
         }
 
+        while (!this.isFormatElement(element) && !this.isWysiwygDiv(element.parentNode)) {
+            element = element.parentNode;
+        }
+
         return element;
@@ -163,0 +180,0 @@ },

src/plugins/modules/resizing.js

@@ -99,4 +99,4 @@ /*
         this.context.resizing._resize_plugin = plugin;
-        targetElement.setAttribute('unselectable', 'on');
-        targetElement.contentEditable = false;
+        // targetElement.setAttribute('unselectable', 'on');
+        // targetElement.contentEditable = false;
 
@@ -103,0 +103,0 @@ const resizeContainer = this.context.resizing.resizeContainer;

src/plugins/submenu/formatBlock.js

@@ -29,3 +29,3 @@ /*
 
-        listDiv.className = 'layer_editor layer_size';
+        listDiv.className = 'layer_editor layer_block';
         listDiv.style.display = 'none';
@@ -35,10 +35,14 @@ listDiv.innerHTML = '' +
             '   <ul class="list_editor format_list">' +
-            '       <li style="border-bottom:1px solid #dedede;"><button type="button" class="btn_edit" data-value="P" title="' + lang.toolbar.tag_p + '" style="height:24px;"><span style="font-size:13px;">' + lang.toolbar.tag_p + '</span></button></li>' +
-            '       <li><button type="button" class="btn_edit" data-value="DIV" title="' + lang.toolbar.tag_div + '" style="height:24px; border-bottom:1px solid #dedede;"><span style="font-size:13px;">' + lang.toolbar.tag_div + '</span></button></li>' +
-            '       <li><button type="button" class="btn_edit" data-value="H1" title="' + lang.toolbar.tag_h + ' 1" style="height:45px;"><h1>' + lang.toolbar.tag_h + ' 1</h1></button></li>' +
-            '       <li><button type="button" class="btn_edit" data-value="H2" title="' + lang.toolbar.tag_h + ' 2" style="height:34px;"><h2>' + lang.toolbar.tag_h + ' 2</h2></button></li>' +
-            '       <li><button type="button" class="btn_edit" data-value="H3" title="' + lang.toolbar.tag_h + ' 3" style="height:26px;"><h3>' + lang.toolbar.tag_h + ' 3</h3></button></li>' +
-            '       <li><button type="button" class="btn_edit" data-value="H4" title="' + lang.toolbar.tag_h + ' 4" style="height:23px;"><h4>' + lang.toolbar.tag_h + ' 4</h4></button></li>' +
-            '       <li><button type="button" class="btn_edit" data-value="H5" title="' + lang.toolbar.tag_h + ' 5" style="height:19px;"><h5>' + lang.toolbar.tag_h + ' 5</h5></button></li>' +
-            '       <li><button type="button" class="btn_edit" data-value="H6" title="' + lang.toolbar.tag_h + ' 6" style="height:15px;"><h6>' + lang.toolbar.tag_h + ' 6</h6></button></li>' +
+            '       <li><button type="button" class="btn_edit" data-command="replace" data-value="P" title="' + lang.toolbar.tag_p + '"><p style="font-size:13px; height:22px; line-height:1.5;">' + lang.toolbar.tag_p + '</p></button></li>' +
+            '       <li><button type="button" class="btn_edit" data-command="replace" data-value="DIV" title="' + lang.toolbar.tag_div + '"><div style="font-size:13px; height:22px; line-height:1.5;">' + lang.toolbar.tag_div + '</div></button></li>' +
+            '       <li><button type="button" class="btn_edit" data-command="range" data-value="BLOCKQUOTE" title="' + lang.toolbar.tag_quote + '">' +
+            '               <blockquote style="font-size:13px; height:22px; line-height:1.5; border-style:solid; border-color:#8baab7; padding-left:20px; border-left-width:5px;">' + lang.toolbar.tag_quote + '</blockquote>' +
+            '           </button>' +
+            '       </li>' +
+            '       <li><button type="button" class="btn_edit" data-command="replace" data-value="H1" title="' + lang.toolbar.tag_h + ' 1" style="height:40px;"><h1>' + lang.toolbar.tag_h + ' 1</h1></button></li>' +
+            '       <li><button type="button" class="btn_edit" data-command="replace" data-value="H2" title="' + lang.toolbar.tag_h + ' 2" style="height:34px;"><h2>' + lang.toolbar.tag_h + ' 2</h2></button></li>' +
+            '       <li><button type="button" class="btn_edit" data-command="replace" data-value="H3" title="' + lang.toolbar.tag_h + ' 3" style="height:26px;"><h3>' + lang.toolbar.tag_h + ' 3</h3></button></li>' +
+            '       <li><button type="button" class="btn_edit" data-command="replace" data-value="H4" title="' + lang.toolbar.tag_h + ' 4" style="height:23px;"><h4>' + lang.toolbar.tag_h + ' 4</h4></button></li>' +
+            '       <li><button type="button" class="btn_edit" data-command="replace" data-value="H5" title="' + lang.toolbar.tag_h + ' 5" style="height:19px;"><h5>' + lang.toolbar.tag_h + ' 5</h5></button></li>' +
+            '       <li><button type="button" class="btn_edit" data-command="replace" data-value="H6" title="' + lang.toolbar.tag_h + ' 6" style="height:15px;"><h6>' + lang.toolbar.tag_h + ' 6</h6></button></li>' +
             '   </ul>' +
@@ -55,5 +59,6 @@ '</div>';
         let target = e.target;
-        let value = null;
+        let command = null, value = null;
         
-        while (!value && !/UL/i.test(target.tagName)) {
+        while (!command && !/UL/i.test(target.tagName)) {
+            command = target.getAttribute('data-command');
             value = target.getAttribute('data-value');
@@ -64,6 +69,18 @@ target = target.parentNode;
         this.focus();
-        this.util.changeTxt(this.commandMap['FORMAT'], value);
-        this.execCommand('formatBlock', false, value);
+
+        // blockquote
+        if (command === 'range') {
+            const oQuote = document.createElement(value);
+            this.wrapToTags(oQuote);
+            this.setRange(oQuote.firstChild, 0, oQuote.firstChild, 0);
+            this.appendP(oQuote);
+        }
+        // others
+        else {
+            this.execCommand('formatBlock', false, value);
+            this.util.changeTxt(this.commandMap['FORMAT'], value);
+        }
+
         this.submenuOff();
     }
 };

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2590913

increased by0.65%

Lines of code

36221

increased by0.43%

Worsened metrics

Number of medium maintenance alerts

1

increased byInfinity%

No dependency changes