@huynhduluong/suneditor-custom - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "@huynhduluong/suneditor-custom",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Vanilla javascript based WYSIWYG web editor, with no dependencies",
@@ -5,0 +5,0 @@ "author": "huynhduluong",

src/plugins/dialog/image.js

@@ -21,3 +21,3 @@ /*
         core.addModule([dialog, anchor, component, resizing, fileManager]);
-        
+
         const options = core.options;
@@ -35,3 +35,3 @@ const context = core.context;
             _floatClassRegExp: '__se__float\\-[a-z]+',
-            _v_src: {_linkValue: ''},
+            _v_src: { _linkValue: '' },
             svgDefaultSize: '30%',
@@ -88,3 +88,3 @@ base64RenderIndex: 0,
         if (imageGalleryButton) imageGalleryButton.addEventListener('click', this._openGallery.bind(core));
-        
+
         contextImage.proportion = {};
@@ -99,3 +99,3 @@ contextImage.inputX = {};
             contextImage.inputY.value = options.imageHeight;
-            
+
             contextImage.inputX.addEventListener('keyup', this.setInputSize.bind(core, 'x'));
@@ -107,3 +107,3 @@ contextImage.inputY.addEventListener('keyup', this.setInputSize.bind(core, 'y'));
             contextImage.proportion.addEventListener('change', this.setRatio.bind(core));
-            
+
             image_dialog.querySelector('.se-dialog-btn-revert').addEventListener('click', this.sizeRevert.bind(core));
@@ -134,88 +134,88 @@ }
             '<div class="se-dialog-header">' +
-                '<button type="button" data-command="close" class="se-btn se-dialog-close" class="close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
-                    core.icons.cancel +
-                '</button>' +
-                '<span class="se-modal-title">' + lang.dialogBox.imageBox.title + '</span>' +
+            '<button type="button" data-command="close" class="se-btn se-dialog-close" class="close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
+            core.icons.cancel +
+            '</button>' +
+            '<span class="se-modal-title">' + lang.dialogBox.imageBox.title + '</span>' +
             '</div>' +
             '<div class="se-dialog-tabs">' +
-                '<button type="button" class="_se_tab_link active" data-tab-link="image">' + lang.toolbar.image + '</button>' +
-                '<button type="button" class="_se_tab_link" data-tab-link="url">' + lang.toolbar.link + '</button>' +
+            '<button type="button" class="_se_tab_link active" data-tab-link="image">' + lang.toolbar.image + '</button>' +
+            '<button type="button" class="_se_tab_link" data-tab-link="url">' + lang.toolbar.link + '</button>' +
             '</div>' +
             '<form method="post" enctype="multipart/form-data">' +
-                '<div class="_se_tab_content _se_tab_content_image">' +
-                    '<div class="se-dialog-body"><div style="border-bottom: 1px dashed #ccc;">';
-                    
-                    if (option.imageFileInput) {
-                        html += '' +
-                            '<div class="se-dialog-form">' +
-                                '<label>' + lang.dialogBox.imageBox.file + '</label>' +
-                                '<div class="se-dialog-form-files">' +
-                                    '<input class="se-input-form _se_image_file" type="file" accept="' + option.imageAccept + '"' + (option.imageMultipleFile ? ' multiple="multiple"' : '') + '/>' +
-                                    '<button type="button" class="se-btn se-dialog-files-edge-button se-file-remove" title="' + lang.controller.remove + '" aria-label="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' +
-                                '</div>' +
-                            '</div>' ;
-                    }
-        
-                    if (option.imageUrlInput) {
-                        html += '' +
-                            '<div class="se-dialog-form">' +
-                                '<label>' + lang.dialogBox.imageBox.url + '</label>' +
-                                '<div class="se-dialog-form-files">' +
-                                    '<input class="se-input-form se-input-url _se_image_url" type="text" />' +
-                                    ((option.imageGalleryUrl && core.plugins.imageGallery) ? '<button type="button" class="se-btn se-dialog-files-edge-button __se__gallery" title="' + lang.toolbar.imageGallery + '" aria-label="' + lang.toolbar.imageGallery + '">' + core.icons.image_gallery + '</button>' : '') +
-                                '</div>' +
-                                '<pre class="se-link-preview"></pre>' +
-                            '</div>';
-                    }
-        
-                    html += '</div>' +
-                        '<div class="se-dialog-form">' +
-                            '<label>' + lang.dialogBox.imageBox.altText + '</label><input class="se-input-form _se_image_alt" type="text" />' +
-                        '</div>';
+            '<div class="_se_tab_content _se_tab_content_image">' +
+            '<div class="se-dialog-body"><div style="border-bottom: 1px dashed #ccc;">';
 
-            if (option.imageResizing) {
-                const onlyPercentage = option.imageSizeOnlyPercentage;
-                const onlyPercentDisplay = onlyPercentage ? ' style="display: none !important;"' : '';
-                const heightDisplay = !option.imageHeightShow ? ' style="display: none !important;"' : '';
-                html += '<div class="se-dialog-form">';
-                        if (onlyPercentage || !option.imageHeightShow) {
-                            html += '' +
-                            '<div class="se-dialog-size-text">' +
-                                '<label class="size-w">' + lang.dialogBox.size + '</label>' +
-                            '</div>';
-                        } else {
-                            html += '' +
-                            '<div class="se-dialog-size-text">' +
-                                '<label class="size-w">' + lang.dialogBox.width + '</label>' +
-                                '<label class="se-dialog-size-x">&nbsp;</label>' +
-                                '<label class="size-h">' + lang.dialogBox.height + '</label>' +
-                            '</div>';
-                        }
-                        html += '' +
-                            '<input class="se-input-control _se_image_size_x" placeholder="auto"' + (onlyPercentage ? ' type="number" min="1"' : 'type="text"') + (onlyPercentage ? ' max="100"' : '') + ' />' +
-                            '<label class="se-dialog-size-x"' + heightDisplay + '>' + (onlyPercentage ? '%' : 'x') + '</label>' +
-                            '<input type="text" class="se-input-control _se_image_size_y" placeholder="auto"' + onlyPercentDisplay + (onlyPercentage ? ' max="100"' : '') + heightDisplay + '/>' +
-                            '<label' + onlyPercentDisplay + heightDisplay + '><input type="checkbox" class="se-dialog-btn-check _se_image_check_proportion" checked/>&nbsp;' + lang.dialogBox.proportion + '</label>' +
-                            '<button type="button" title="' + lang.dialogBox.revertButton + '" aria-label="' + lang.dialogBox.revertButton + '" class="se-btn se-dialog-btn-revert" style="float: right;">' + core.icons.revert + '</button>' +
-                        '</div>' ;
-            }
+        if (option.imageFileInput) {
+            html += '' +
+                '<div class="se-dialog-form">' +
+                '<label>' + lang.dialogBox.imageBox.file + '</label>' +
+                '<div class="se-dialog-form-files">' +
+                '<input class="se-input-form _se_image_file" type="file" accept="' + option.imageAccept + '"' + (option.imageMultipleFile ? ' multiple="multiple"' : '') + '/>' +
+                '<button type="button" class="se-btn se-dialog-files-edge-button se-file-remove" title="' + lang.controller.remove + '" aria-label="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' +
+                '</div>' +
+                '</div>';
+        }
 
+        if (option.imageUrlInput) {
             html += '' +
-                        '<div class="se-dialog-form se-dialog-form-footer">' +
-                            '<label><input type="checkbox" class="se-dialog-btn-check _se_image_check_caption" />&nbsp;' + lang.dialogBox.caption + '</label>' +
-                        '</div>' +
-                    '</div>' +
+                '<div class="se-dialog-form">' +
+                '<label>' + lang.dialogBox.imageBox.url + '</label>' +
+                '<div class="se-dialog-form-files">' +
+                '<input class="se-input-form se-input-url _se_image_url" type="text" />' +
+                ((option.imageGalleryUrl && core.plugins.imageGallery) ? '<button type="button" class="se-btn se-dialog-files-edge-button __se__gallery" title="' + lang.toolbar.imageGallery + '" aria-label="' + lang.toolbar.imageGallery + '">' + core.icons.image_gallery + '</button>' : '') +
                 '</div>' +
-                '<div class="_se_tab_content _se_tab_content_url" style="display: none">' +
-                    core.context.anchor.forms.innerHTML +
-                '</div>' +
-                '<div class="se-dialog-footer">' +
-                    '<div' + (option.imageAlignShow ? '' : ' style="display: none"') + '>' +
-                        '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="none" checked>' + lang.dialogBox.basic + '</label>' +
-                        '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="left">' + lang.dialogBox.left + '</label>' +
-                        '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="center">' + lang.dialogBox.center + '</label>' +
-                        '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="right">' + lang.dialogBox.right + '</label>' +
-                    '</div>' +
-                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
-                '</div>' +
+                '<pre class="se-link-preview"></pre>' +
+                '</div>';
+        }
+
+        html += '</div>' +
+            '<div class="se-dialog-form">' +
+            '<label>' + lang.dialogBox.imageBox.altText + '</label><input class="se-input-form _se_image_alt" type="text" />' +
+            '</div>';
+
+        if (option.imageResizing) {
+            const onlyPercentage = option.imageSizeOnlyPercentage;
+            const onlyPercentDisplay = onlyPercentage ? ' style="display: none !important;"' : '';
+            const heightDisplay = !option.imageHeightShow ? ' style="display: none !important;"' : '';
+            html += '<div class="se-dialog-form">';
+            if (onlyPercentage || !option.imageHeightShow) {
+                html += '' +
+                    '<div class="se-dialog-size-text">' +
+                    '<label class="size-w">' + lang.dialogBox.size + '</label>' +
+                    '</div>';
+            } else {
+                html += '' +
+                    '<div class="se-dialog-size-text">' +
+                    '<label class="size-w">' + lang.dialogBox.width + '</label>' +
+                    '<label class="se-dialog-size-x">&nbsp;</label>' +
+                    '<label class="size-h">' + lang.dialogBox.height + '</label>' +
+                    '</div>';
+            }
+            html += '' +
+                '<input class="se-input-control _se_image_size_x" placeholder="auto"' + (onlyPercentage ? ' type="number" min="1"' : 'type="text"') + (onlyPercentage ? ' max="100"' : '') + ' />' +
+                '<label class="se-dialog-size-x"' + heightDisplay + '>' + (onlyPercentage ? '%' : 'x') + '</label>' +
+                '<input type="text" class="se-input-control _se_image_size_y" placeholder="auto"' + onlyPercentDisplay + (onlyPercentage ? ' max="100"' : '') + heightDisplay + '/>' +
+                '<label' + onlyPercentDisplay + heightDisplay + '><input type="checkbox" class="se-dialog-btn-check _se_image_check_proportion" checked/>&nbsp;' + lang.dialogBox.proportion + '</label>' +
+                '<button type="button" title="' + lang.dialogBox.revertButton + '" aria-label="' + lang.dialogBox.revertButton + '" class="se-btn se-dialog-btn-revert" style="float: right;">' + core.icons.revert + '</button>' +
+                '</div>';
+        }
+
+        html += '' +
+            '<div class="se-dialog-form se-dialog-form-footer">' +
+            '<label><input type="checkbox" class="se-dialog-btn-check _se_image_check_caption" />&nbsp;' + lang.dialogBox.caption + '</label>' +
+            '</div>' +
+            '</div>' +
+            '</div>' +
+            '<div class="_se_tab_content _se_tab_content_url" style="display: none">' +
+            core.context.anchor.forms.innerHTML +
+            '</div>' +
+            '<div class="se-dialog-footer">' +
+            '<div' + (option.imageAlignShow ? '' : ' style="display: none"') + '>' +
+            '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="none" checked>' + lang.dialogBox.basic + '</label>' +
+            '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="left">' + lang.dialogBox.left + '</label>' +
+            '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="center">' + lang.dialogBox.center + '</label>' +
+            '<label><input type="radio" name="suneditor_image_radio" class="se-dialog-btn-radio" value="right">' + lang.dialogBox.right + '</label>' +
+            '</div>' +
+            '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
+            '</div>' +
             '</form>';
@@ -283,3 +283,3 @@
         let focusEl = (imageContainer.previousElementSibling || imageContainer.nextElementSibling);
-        
+
         const emptyDiv = imageContainer.parentNode;
@@ -294,3 +294,3 @@ this.util.removeItem(imageContainer);
         this.focusEdge(focusEl);
-        
+
         // event
@@ -308,3 +308,3 @@ this.plugins.fileManager.deleteInfo.call(this, 'image', dataIndex, this.functions.onImageUpload);
         const contextImage = this.context.image;
-        
+
         if (!update) {
@@ -382,3 +382,3 @@ contextImage.inputX.value = contextImage._origin_w = this.options.imageWidth === contextImage._defaultSizeX ? '' : this.options.imageWidth;
             }
-            
+
             if (contextImage.imgInputFile && contextImage.imgInputFile.files.length > 0) {
@@ -423,3 +423,3 @@ this.showLoading();
                 this.closeLoading();
-                const err = '[SUNEDITOR.imageUpload.fail] Size of uploadable total images: ' + (limitSize/1000) + 'KB';
+                const err = '[SUNEDITOR.imageUpload.fail] Size of uploadable total images: ' + (limitSize / 1000) + 'KB';
                 if (typeof this.functions.onImageUploadError !== 'function' || this.functions.onImageUploadError(err, { 'limitSize': limitSize, 'currentSize': infoSize, 'uploadSize': fileSize }, this)) {
@@ -434,3 +434,3 @@ this.functions.noticeOpen(err);
         contextImage._uploadFileLength = files.length;
-        
+
         const anchor = this.plugins.anchor.createAnchor.call(this, contextImage.anchorCtx, true);
@@ -455,3 +455,3 @@ const info = {
             }.bind(this));
-            
+
             if (typeof result === 'undefined') return;
@@ -526,3 +526,3 @@ if (!result) {
         }
-        
+
         this.closeLoading();
@@ -538,7 +538,7 @@ },
             this.context.image.inputY.value = height;
-    
+
             for (let i = 0, reader, file; i < filesLen; i++) {
                 reader = new wFileReader();
                 file = files[i];
-    
+
                 reader.onload = function (reader, update, updateElement, file, index) {
@@ -564,3 +564,3 @@ filesStack[index] = { result: reader.result, file: file };
         const createMethod = this.plugins.image.create_image;
-        
+
         for (let i = 0, len = filesStack.length; i < len; i++) {
@@ -583,3 +583,3 @@ if (update) {
         try {
-            const file = {name: url.split('/').pop(), size: 0};
+            const file = { name: url.split('/').pop(), size: 0 };
             if (this.context.dialog.updateModal) this.plugins.image.update_src.call(this, url, contextImage._element, file);
@@ -644,3 +644,3 @@ else this.plugins.image.create_image.call(this, url, this.plugins.anchor.createAnchor.call(this, contextImage.anchorCtx, true), contextImage.inputX.value, contextImage.inputY.value, contextImage._align, file, contextImage._altText);
             if (this.util.isAnchor(tag.parentNode) && !contextImage.anchorCtx.linkValue) contextImage.anchorCtx.linkValue = ' ';
-            
+
             imagePlugin.update_image.call(this, true, false, true);
@@ -669,3 +669,3 @@ imagePlugin.init.call(this);
         oImg.setAttribute('data-rotate', '0');
-        anchor = imagePlugin.onRender_link.call(this, oImg, anchor ?  anchor.cloneNode(false) : null);
+        anchor = imagePlugin.onRender_link.call(this, oImg, anchor ? anchor.cloneNode(false) : null);
 
@@ -717,9 +717,15 @@ if (contextImage._resizing) {
         let isNewContainer = false;
+        let parentElement = imageEl.parentElement
+        let parentElementName = parentElement.nodeName
 
+        while (parentElementName !== 'SPAN' && parentElementName !== 'P' && parentElementName !== 'DIV') {
+            parentElement = parentElement.parentElement
+            parentElementName = parentElement.nodeName
+        }
+
         if (cover === null) {
             isNewContainer = true;
             imageEl = contextImage._element.cloneNode(true);
-            cover = this.plugins.component.set_cover.call(this, imageEl);
+            cover = this.plugins.component.set_cover.call(this, imageEl, parentElementName === 'SPAN' ? "SPAN" : undefined);
         }
-
         if (container === null) {
@@ -729,3 +735,3 @@ cover = cover.cloneNode(true);
             isNewContainer = true;
-            container = this.plugins.component.set_container.call(this, cover, 'se-image-container');
+            container = this.plugins.component.set_container.call(this, cover, 'se-image-container', parentElementName === 'SPAN' ? "SPAN" : undefined);
         } else if (isNewContainer) {
@@ -751,3 +757,3 @@ container.innerHTML = '';
         imageEl.alt = contextImage._altText;
-        
+
         // caption
@@ -793,6 +799,6 @@ let modifiedCaption = false;
         if (isNewContainer) {
-            existElement = (this.util.isRangeFormatElement(contextImage._element.parentNode) || this.util.isWysiwygDiv(contextImage._element.parentNode)) ? 
-                contextImage._element : 
+            existElement = (this.util.isRangeFormatElement(contextImage._element.parentNode) || this.util.isWysiwygDiv(contextImage._element.parentNode)) ?
+                contextImage._element :
                 this.util.isAnchor(contextImage._element.parentNode) ? contextImage._element.parentNode : this.util.getFormatElement(contextImage._element) || contextImage._element;
-                
+
             if (this.util.getParentElement(contextImage._element, this.util.isNotCheckingNode)) {
@@ -887,3 +893,3 @@ existElement = isNewAnchor ? anchor : contextImage._element;
         if (!element) return;
-        
+
         const contextImage = this.context.image;
@@ -895,3 +901,3 @@ contextImage._linkElement = contextImage.anchorCtx.linkAnchor = this.util.isAnchor(element.parentNode) ? element.parentNode : null;
         contextImage._caption = this.util.getChildElement(contextImage._cover, 'FIGCAPTION');
-        contextImage._align =  element.getAttribute('data-align') || element.style.float || 'none';
+        contextImage._align = element.getAttribute('data-align') || element.style.float || 'none';
         element.style.float = '';
@@ -934,3 +940,3 @@ this.plugins.anchor.setCtx(contextImage._linkElement, contextImage.anchorCtx);
         contextImage._captionChecked = contextImage.captionCheckEl.checked = !!contextImage._caption;
-        
+
         if (contextImage._resizing) {
@@ -951,3 +957,3 @@ this.plugins.resizing._module_setModifyInputSize.call(this, contextImage, this.plugins.image);
         if (!h) h = contextImage.inputY.value || this.options.imageHeight;
-        
+
         if ((contextImage._onlyPercentage && !!w) || /%$/.test(w)) {
@@ -1017,3 +1023,3 @@ this.plugins.image.setPercentSize.call(this, w, h);
     },
-    
+
     /**
@@ -1075,3 +1081,3 @@ * @Override resizing
         const contextImage = this.context.image;
-        
+
         contextImage._cover.style.width = '';
@@ -1093,3 +1099,3 @@ contextImage._cover.style.height = '';
         const contextImage = this.context.image;
-        
+
         if (!align) align = contextImage._align;
@@ -1112,3 +1118,3 @@ if (!element) element = contextImage._element;
         }
-        
+
         element.setAttribute('data-align', align);
@@ -1115,0 +1121,0 @@ },

src/plugins/modules/component.js

@@ -32,7 +32,9 @@ /*
          */
-        set_container: function (cover, className) {
-            const container = this.util.createElement('DIV');
+        set_container: function (cover, className, elementCreate = 'DIV') {
+            const container = this.util.createElement(elementCreate);
             container.className = 'se-component ' + className;
             container.appendChild(cover);
-    
+            if (elementCreate == 'SPAN') {
+                container.style.display = 'inline-block'
+            }
             return container;
@@ -45,6 +47,6 @@ },
          */
-        set_cover: function (element) {
-            const cover = this.util.createElement('FIGURE');
+        set_cover: function (element, elementCreate = 'FIGURE') {
+            const cover = this.util.createElement(elementCreate);
             cover.appendChild(element);
-    
+
             return cover;
@@ -51,0 +53,0 @@ },

No alert changes

Improved metrics

Lines of code

28980

increased by0.03%

Worsened metrics

Total package byte prevSize

4021368

decreased by-0.01%

No dependency changes