suneditor 2.41.2 → 2.43.0

package/src/plugins/dialog/video.js

@@ -51,6 +51,7 @@ export default {
             _resizing: options.videoResizing,
             _resizeDotHide: !options.videoHeightShow,
             _rotation: options.videoRotation,
+            _alignHide: !options.videoAlignShow,
             _onlyPercentage: options.videoSizeOnlyPercentage,
             _ratio: false,
             _ratioX: 1,
@@ -175,7 +176,7 @@ export default {
             html += '' +
                 '</div>' +
                 '<div class="se-dialog-footer">' +
-                    '<div>' +
+                    '<div' + (option.videoAlignShow ? '' : ' style="display: none"') + '>' +
                         '<label><input type="radio" name="suneditor_video_radio" class="se-dialog-btn-radio" value="none" checked>' + lang.dialogBox.basic + '</label>' +
                         '<label><input type="radio" name="suneditor_video_radio" class="se-dialog-btn-radio" value="left">' + lang.dialogBox.left + '</label>' +
                         '<label><input type="radio" name="suneditor_video_radio" class="se-dialog-btn-radio" value="center">' + lang.dialogBox.center + '</label>' +
@@ -372,7 +373,7 @@ export default {
                 videoPlugin.submitAction.call(this, this.context.video.videoInputFile.files);
             } else if (contextVideo.videoUrlFile && contextVideo._linkValue.length > 0) {
                 this.showLoading();
-                videoPlugin.setup_url.call(this);
+                videoPlugin.setup_url.call(this, contextVideo._linkValue);
             }
         } catch (error) {
             this.closeLoading();
@@ -503,12 +504,11 @@ export default {
         this.closeLoading();
     },
 
-    setup_url: function () {
+    setup_url: function (url) {
         try {
             const contextVideo = this.context.video;
-            let url = contextVideo._linkValue;
-
-            if (url.length === 0) return false;
+            if (!url) url = contextVideo._linkValue;
+            if (!url) return false;
 
             /** iframe source */
             if (/^<iframe.*\/iframe>$/.test(url)) {
@@ -540,7 +540,7 @@ export default {
                 url = 'https://player.vimeo.com/video/' + url.slice(url.lastIndexOf('/') + 1);
             }
 
-            this.plugins.video.create_video.call(this, this.plugins.video.createIframeTag.call(this), url, contextVideo.inputX.value, contextVideo.inputY.value, contextVideo._align, null, this.context.dialog.updateModal);
+            this.plugins.video.create_video.call(this, this.plugins.video[(!/youtu\.?be/.test(url) && !/vimeo\.com/.test(url) ? "createVideoTag" : "createIframeTag")].call(this), url, contextVideo.inputX.value, contextVideo.inputY.value, contextVideo._align, null, this.context.dialog.updateModal);
         } catch (error) {
             throw Error('[SUNEDITOR.video.upload.fail] cause : "' + error.message + '"');
         } finally {
@@ -645,10 +645,8 @@ export default {
         if (/^video$/i.test(oFrame.nodeName)) this.plugins.video._setTagAttrs.call(this, oFrame);
         else this.plugins.video._setIframeAttrs.call(this, oFrame);
         
-        const existElement = this.util.getParentElement(oFrame, this.util.isMediaComponent) || 
-            this.util.getParentElement(oFrame, function (current) {
-                return this.isWysiwygDiv(current.parentNode);
-            }.bind(this.util));
+        const existElement = (this.util.isRangeFormatElement(oFrame.parentNode) || this.util.isWysiwygDiv(oFrame.parentNode)) ? 
+            oFrame : this.util.getFormatElement(oFrame) || oFrame;
 
         const prevFrame = oFrame;
         contextVideo._element = oFrame = oFrame.cloneNode(true);
@@ -673,7 +671,9 @@ export default {
             if (format) contextVideo._align = format.style.textAlign || format.style.float;
             this.plugins.video.setAlign.call(this, null, oFrame, cover, container);
 
-            if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
+            if (this.util.isListCell(existElement) || this.util.isFormatElement(existElement)) {
+                prevFrame.parentNode.replaceChild(container, prevFrame);
+            } else if (this.util.isFormatElement(existElement) && existElement.childNodes.length > 0) {
                 existElement.parentNode.insertBefore(container, existElement);
                 this.util.removeItem(prevFrame);
                 // clean format tag
@@ -732,7 +732,7 @@ export default {
         const contextVideo = this.context.video;
 
         if (contextVideo.videoUrlFile) contextVideo._linkValue = contextVideo.preview.textContent = contextVideo.videoUrlFile.value = (contextVideo._element.src || (contextVideo._element.querySelector('source') || '').src || '');
-        contextVideo.modal.querySelector('input[name="suneditor_video_radio"][value="' + contextVideo._align + '"]').checked = true;
+        (contextVideo.modal.querySelector('input[name="suneditor_video_radio"][value="' + contextVideo._align + '"]') || contextVideo.modal.querySelector('input[name="suneditor_video_radio"][value="none"]')).checked = true;
 
         if (contextVideo._resizing) {
             this.plugins.resizing._module_setModifyInputSize.call(this, contextVideo, this.plugins.video);
@@ -817,12 +817,13 @@ export default {
 
         if (!onlyH) w = this.util.getNumber(w, 0);
         if (!onlyW) h = this.util.isNumber(h) ? h + contextVideo.sizeUnit : !h ? '' : h;
+        w ? w + contextVideo.sizeUnit : '';
 
-        if (!onlyH) contextVideo._element.style.width = w ? w + contextVideo.sizeUnit : '';
+        if (!onlyH) contextVideo._element.style.width = w;
         if (!onlyW) contextVideo._cover.style.paddingBottom = contextVideo._cover.style.height = h;
 
         if (!onlyH && !/%$/.test(w)) {
-            contextVideo._cover.style.width = '';
+            contextVideo._cover.style.width = w;
             contextVideo._container.style.width = '';
         }
 

package/src/plugins/fileBrowser/imageGallery.js

@@ -49,7 +49,7 @@ export default {
      */
     drawItems: function (item) {
         const srcName = item.src.split('/').pop();
-        return  '<div class="se-file-item-img"><img src="' + item.src + '" alt="' + (item.alt || srcName) + '" data-command="pick">' +
+        return  '<div class="se-file-item-img"><img src="' + (item.thumbnail || item.src) + '" alt="' + (item.alt || srcName) + '" data-command="pick" data-value="' + (item.src || item.thumbnail) + '">' +
                     '<div class="se-file-img-name se-file-name-back"></div>' +
                     '<div class="se-file-img-name __se__img_name">' + (item.name || srcName) + '</div>' +
                 '</div>';
@@ -58,8 +58,7 @@ export default {
     setImage: function (target) {
         this.callPlugin('image', function () {
             const file = {name: target.parentNode.querySelector('.__se__img_name').textContent, size: 0};
-            this.context.image._altText = target.alt;
-            this.plugins.image.create_image.call(this, target.src, null, this.context.image._origin_w, this.context.image._origin_h, 'none', file);
+            this.plugins.image.create_image.call(this, target.getAttribute('data-value'), null, this.context.image._origin_w, this.context.image._origin_h, 'none', file, target.alt);
         }.bind(this), null);
     }
 };

package/src/plugins/modules/_anchor.js

@@ -119,24 +119,32 @@ export default {
     },
 
     on: function (contextAnchor, update) {
+        const anchorPlugin = this.plugins.anchor;
+
         if (!update) {
-            this.plugins.anchor.init.call(this, contextAnchor);
-            contextAnchor.anchorText.value = this.getSelection().toString();
+            anchorPlugin.init.call(this, contextAnchor);
+            contextAnchor.anchorText.value = this.getSelection().toString().trim();
+            contextAnchor.newWindowCheck.checked = this.options.linkTargetNewWindow;
         } else if (contextAnchor.linkAnchor) {
             this.context.dialog.updateModal = true;
-            const href = contextAnchor.linkAnchor.href;
-            contextAnchor.linkValue = contextAnchor.preview.textContent = contextAnchor.urlInput.value = /\#.+$/.test(href) ? href.substr(href.lastIndexOf('#')) : href;
-            contextAnchor.anchorText.value = contextAnchor.linkAnchor.textContent.trim() || contextAnchor.linkAnchor.getAttribute('alt');
+            const href = this.options.linkNoPrefix ? contextAnchor.linkAnchor.href.replace(contextAnchor.linkAnchor.origin + '/', '') : contextAnchor.linkAnchor.href;
+            contextAnchor.linkValue = contextAnchor.preview.textContent = contextAnchor.urlInput.value = anchorPlugin.selfPathBookmark.call(this, href) ? href.substr(href.lastIndexOf('#')) : href;
+            contextAnchor.anchorText.value = contextAnchor.linkAnchor.textContent || contextAnchor.linkAnchor.getAttribute('alt');
             contextAnchor.newWindowCheck.checked = (/_blank/i.test(contextAnchor.linkAnchor.target) ? true : false);
             contextAnchor.downloadCheck.checked = contextAnchor.linkAnchor.download;
         }
 
         this.context.anchor.callerContext = contextAnchor;
-        this.plugins.anchor.setRel.call(this, contextAnchor, (update && contextAnchor.linkAnchor) ? contextAnchor.linkAnchor.rel : contextAnchor.defaultRel);
-        this.plugins.anchor.setLinkPreview.call(this, contextAnchor, contextAnchor.linkValue);
+        anchorPlugin.setRel.call(this, contextAnchor, (update && contextAnchor.linkAnchor) ? contextAnchor.linkAnchor.rel : contextAnchor.defaultRel);
+        anchorPlugin.setLinkPreview.call(this, contextAnchor, contextAnchor.linkValue);
         this.plugins.selectMenu.on.call(this, contextAnchor.callerName, this.plugins.anchor.setHeaderBookmark);
     },
 
+    selfPathBookmark: function(path) {
+        const href = this._w.location.href.replace(/\/$/, '');
+        return path.indexOf('#') === 0 || (path.indexOf(href) === 0 && path.indexOf('#') === (href.indexOf("#") === -1 ? href.length : href.substr(0, href.indexOf("#")).length));
+    },
+
     _closeRelMenu: null,
     toggleRelList: function (contextAnchor, show) {
         if (!show) {
@@ -277,13 +285,13 @@ export default {
         const value = e.target.value.trim();
         this.plugins.anchor.setLinkPreview.call(this, contextAnchor, value);
 
-        if (/^#/.test(value)) this.plugins.anchor.createHeaderList.call(this, contextAnchor, this.context.selectMenu.callerContext, value);
+        if (this.plugins.anchor.selfPathBookmark.call(this, value)) this.plugins.anchor.createHeaderList.call(this, contextAnchor, this.context.selectMenu.callerContext, value);
         else this.plugins.selectMenu.close.call(this, this.context.selectMenu.callerContext);
     },
 
     onFocusUrlInput: function (contextAnchor, contextLink) {
         const value = contextAnchor.urlInput.value;
-        if (/^#/.test(value)) this.plugins.anchor.createHeaderList.call(this, contextAnchor, contextLink, value);
+        if (this.plugins.anchor.selfPathBookmark.call(this, value)) this.plugins.anchor.createHeaderList.call(this, contextAnchor, contextLink, value);
     },
 
     onBlurUrlInput: function (contextList) {
@@ -293,11 +301,12 @@ export default {
     setLinkPreview: function (context, value) {
         const preview = context.preview;
         const protocol = this.options.linkProtocol;
+        const noPrefix = this.options.linkNoPrefix;
         const reservedProtocol  = /^(mailto\:|tel\:|sms\:|https*\:\/\/|#)/.test(value);
         const sameProtocol = !protocol ? false : this._w.RegExp('^' + value.substr(0, protocol.length)).test(protocol);
-        context.linkValue = preview.textContent = !value ? '' : (protocol && !reservedProtocol && !sameProtocol) ? protocol + value : reservedProtocol ? value : /^www\./.test(value) ? 'http://' + value : this.context.anchor.host + (/^\//.test(value) ? '' : '/') + value;
+        value = context.linkValue = preview.textContent = !value ? '' : noPrefix ? value : (protocol && !reservedProtocol && !sameProtocol) ? protocol + value : reservedProtocol ? value : /^www\./.test(value) ? 'http://' + value : this.context.anchor.host + (/^\//.test(value) ? '' : '/') + value;
 
-        if (value.indexOf('#') === 0) {
+        if (this.plugins.anchor.selfPathBookmark.call(this, value)) {
             context.bookmark.style.display = 'block';
             this.util.addClass(context.bookmarkButton, 'active');
         } else {
@@ -305,7 +314,7 @@ export default {
             this.util.removeClass(context.bookmarkButton, 'active');
         }
 
-        if (value.indexOf('#') === -1 && context.downloadCheck.checked) {
+        if (!this.plugins.anchor.selfPathBookmark.call(this, value) && context.downloadCheck.checked) {
             context.download.style.display = 'block';
         } else {
             context.download.style.display = 'none';
@@ -321,7 +330,7 @@ export default {
 
     updateAnchor: function (anchor, url, alt, contextAnchor, notText) {
         // download
-        if (!/^\#/.test(url) && contextAnchor.downloadCheck.checked) {
+        if (!this.plugins.anchor.selfPathBookmark.call(this, url) && contextAnchor.downloadCheck.checked) {
             anchor.setAttribute('download', alt || url);
         } else {
             anchor.removeAttribute('download');
@@ -354,7 +363,7 @@ export default {
         const anchorText = anchor.value.length === 0 ? url : anchor.value;
 
         const oA = contextAnchor.linkAnchor || this.util.createElement('A');
-        this.plugins.anchor.updateAnchor(oA, url, anchorText, contextAnchor, notText);
+        this.plugins.anchor.updateAnchor.call(this, oA, url, anchorText, contextAnchor, notText);
 
         contextAnchor.linkValue = contextAnchor.preview.textContent = contextAnchor.urlInput.value = contextAnchor.anchorText.value = '';
 
@@ -363,7 +372,7 @@ export default {
 
     onClick_bookmarkButton: function (contextAnchor) {
         let url = contextAnchor.urlInput.value;
-        if (/^\#/.test(url)) {
+        if (this.plugins.anchor.selfPathBookmark.call(this, url)) {
             url = url.substr(1);
             contextAnchor.bookmark.style.display = 'none';
             this.util.removeClass(contextAnchor.bookmarkButton, 'active');

package/src/plugins/modules/component.d.ts

@@ -22,4 +22,4 @@ declare interface component extends Module {
     create_caption(): string;
 }
 
-export default resizing;
+export default component;

package/src/plugins/modules/fileBrowser.js

@@ -229,7 +229,12 @@
                 this.plugins.fileBrowser._xmlHttp = null;
                 if (xmlHttp.status === 200) {
                     try {
-                        this.plugins.fileBrowser._drawListItem.call(this, JSON.parse(xmlHttp.responseText).result, true);
+                        const res = JSON.parse(xmlHttp.responseText);
+                        if (res.result.length > 0) {
+                            this.plugins.fileBrowser._drawListItem.call(this, res.result, true);
+                        } else if (res.nullMessage) {
+                            this.context.fileBrowser.list.innerHTML = res.nullMessage;
+                        }
                     } catch (e) {
                         throw Error('[SUNEDITOR.fileBrowser.drawList.fail] cause : "' + e.message + '"');
                     } finally {

package/src/plugins/modules/fileManager.js

@@ -28,8 +28,6 @@
         _checkMediaComponent: function (tag) {
             if (/IMG/i.test(tag)) {
                 return !/FIGURE/i.test(tag.parentElement.nodeName) || !/FIGURE/i.test(tag.parentElement.parentElement.nodeName);
-            } else if (/VIDEO/i.test(tag)) {
-                return !/FIGURE/i.test(tag.parentElement.nodeName);
             }
             return true;
         },
@@ -98,7 +96,7 @@
         checkInfo: function (pluginName, tagNames, uploadEventHandler, modifyHandler, resizing) {
             let tags = [];
             for (let i = 0, len = tagNames.length; i < len; i++) {
-                tags = tags.concat([].slice.call(this.context.element.wysiwyg.getElementsByTagName(tagNames[i])));
+                tags = tags.concat([].slice.call(this.context.element.wysiwyg.querySelectorAll(tagNames[i] + ':not([data-se-embed="true"])')));
             }
 
             const fileManagerPlugin = this.plugins.fileManager;

package/src/plugins/modules/resizing.js

@@ -437,11 +437,16 @@
             }
     
             // align icon
-            const alignList = contextResizing.alignMenuList;
-            this.util.changeElement(contextResizing.alignButton.firstElementChild, contextResizing.alignIcons[align]);
-            for (let i = 0, len = alignList.length; i < len; i++) {
-                if (alignList[i].getAttribute('data-value') === align) this.util.addClass(alignList[i], 'on');
-                else this.util.removeClass(alignList[i], 'on');
+            if (contextPlugin._alignHide) {
+                contextResizing.alignButton.style.display = 'none';
+            } else {
+                contextResizing.alignButton.style.display = '';
+                const alignList = contextResizing.alignMenuList;
+                this.util.changeElement(contextResizing.alignButton.firstElementChild, contextResizing.alignIcons[align]);
+                for (let i = 0, len = alignList.length; i < len; i++) {
+                    if (alignList[i].getAttribute('data-value') === align) this.util.addClass(alignList[i], 'on');
+                    else this.util.removeClass(alignList[i], 'on');
+                }
             }
     
             // percentage active
@@ -478,7 +483,7 @@
             }
 
             this.setControllerPosition(contextResizing.resizeButton, resizeContainer, 'bottom', addOffset);
-            this.controllersOn(resizeContainer, contextResizing.resizeButton, this.util.setDisabledButtons.bind(this, false, this.resizingDisabledButtons), targetElement, plugin);
+            this.controllersOn(resizeContainer, contextResizing.resizeButton, this.util.setDisabledButtons.bind(this.util, false, this.resizingDisabledButtons), targetElement, plugin);
             this.util.setDisabledButtons(true, this.resizingDisabledButtons);
     
             contextResizing._resize_w = w;

package/src/plugins/submenu/align.js

@@ -15,9 +15,10 @@ export default {
         const context = core.context;
         context.align = {
             targetButton: targetElement,
+            _itemMenu: null,
             _alignList: null,
             currentAlign: '',
-            defaultDir: core.options.rtl ? 'right' : 'left', 
+            defaultDir: core.options.rtl ? 'right' : 'left',
             icons: {
                 justify: icons.align_justify,
                 left: icons.align_left,
@@ -28,7 +29,7 @@ export default {
 
         /** set submenu */
         let listDiv = this.setSubmenu(core);
-        let listUl = listDiv.querySelector('ul');
+        let listUl = context.align._itemMenu = listDiv.querySelector('ul');
 
         /** add event listeners */
         listUl.addEventListener('click', this.pickup.bind(core));
@@ -45,36 +46,24 @@ export default {
         const lang = core.lang;
         const icons = core.icons;
         const listDiv = core.util.createElement('DIV');
-        const leftDir = core.context.align.defaultDir === 'left';
-
-        const leftMenu = '<li>' +
-            '<button type="button" class="se-btn-list se-btn-align" data-command="justifyleft" data-value="left" title="' + lang.toolbar.alignLeft + '">' +
-                '<span class="se-list-icon">' + icons.align_left + '</span>' + lang.toolbar.alignLeft +
-            '</button>' +
-        '</li>';
-
-        const rightMenu = '<li>' +
-            '<button type="button" class="se-btn-list se-btn-align" data-command="justifyright" data-value="right" title="' + lang.toolbar.alignRight + '">' +
-                '<span class="se-list-icon">' + icons.align_right +'</span>' + lang.toolbar.alignRight +
-            '</button>' +
-        '</li>';
+        const alignItems = core.options.alignItems;
+
+        let html = '';
+        for (let i = 0, item, text; i < alignItems.length; i++) {
+            item = alignItems[i];
+            text = lang.toolbar['align' + item.charAt(0).toUpperCase() + item.slice(1)];
+            html += '<li>' +
+                '<button type="button" class="se-btn-list se-btn-align" data-value="' + item + '" title="' + text + '">' +
+                    '<span class="se-list-icon">' + icons['align_' + item] + '</span>' + text +
+                '</button>' +
+            '</li>';
+        }
 
         listDiv.className = 'se-submenu se-list-layer se-list-align';
         listDiv.innerHTML = '' +
             '<div class="se-list-inner">' +
                 '<ul class="se-list-basic">' +
-                    (leftDir ? leftMenu : rightMenu) +
-                    '<li>' +
-                        '<button type="button" class="se-btn-list se-btn-align" data-command="justifycenter" data-value="center" title="' + lang.toolbar.alignCenter + '">' +
-                            '<span class="se-list-icon">' + icons.align_center + '</span>' + lang.toolbar.alignCenter +
-                        '</button>' +
-                    '</li>' +
-                    (leftDir? rightMenu : leftMenu) +
-                    '<li>' +
-                        '<button type="button" class="se-btn-list se-btn-align" data-command="justifyfull" data-value="justify" title="' + lang.toolbar.alignJustify + '">' +
-                            '<span class="se-list-icon">' + icons.align_justify + '</span>' + lang.toolbar.alignJustify +
-                        '</button>' +
-                    '</li>' +
+                    html +
                 '</ul>' +
             '</div>';
 
@@ -125,6 +114,22 @@ export default {
         }
     },
 
+    exchangeDir: function () {
+        const dir = this.options.rtl ? 'right' : 'left';
+        if (!this.context.align || this.context.align.defaultDir === dir) return;
+
+        this.context.align.defaultDir = dir;
+        let menu = this.context.align._itemMenu;
+        let leftBtn = menu.querySelector('[data-value="left"]');
+        let rightBtn = menu.querySelector('[data-value="right"]');
+        if (leftBtn && rightBtn) {
+            const lp = leftBtn.parentElement;
+            const rp = rightBtn.parentElement;
+            lp.appendChild(rightBtn);
+            rp.appendChild(leftBtn);
+        }
+    },
+
     pickup: function (e) {
         e.preventDefault();
         e.stopPropagation();

package/src/plugins/submenu/font.js

@@ -78,7 +78,7 @@ export default {
         if (!element) {
             const font = this.hasFocus ? this.wwComputedStyle.fontFamily : this.lang.toolbar.font;
             this.util.changeTxt(target, font);
-            this.util.changeTxt(tooltip, this.hasFocus ? this.lang.toolbar.font + ' (' + font + ')' : font);
+            this.util.changeTxt(tooltip, this.hasFocus ? this.lang.toolbar.font + (font ? ' (' + font + ')' : '') : font);
         } else if (element.style && element.style.fontFamily.length > 0) {
             const selectFont = element.style.fontFamily.replace(/["']/g,'');
             this.util.changeTxt(target, selectFont);

package/src/plugins/submenu/fontSize.js

@@ -61,7 +61,7 @@ export default {
      */
     active: function (element) {
         if (!element) {
-            this.util.changeTxt(this.context.fontSize.targetText, this.hasFocus ? this.wwComputedStyle.fontSize : this.lang.toolbar.fontSize);
+            this.util.changeTxt(this.context.fontSize.targetText, this.hasFocus ? (this.options.__defaultFontSize || this.wwComputedStyle.fontSize) : this.lang.toolbar.fontSize);
         } else if (element.style && element.style.fontSize.length > 0) {
             this.util.changeTxt(this.context.fontSize.targetText, element.style.fontSize);
             return true;

package/src/plugins/submenu/horizontalRule.js

@@ -31,26 +31,22 @@ export default {
     setSubmenu: function (core) {
         const lang = core.lang;
         const listDiv = core.util.createElement('DIV');
-
+        const items = core.options.hrItems || [{name: lang.toolbar.hr_solid, class: '__se__solid'}, {name: lang.toolbar.hr_dashed, class: '__se__dashed'}, {name: lang.toolbar.hr_dotted, class: '__se__dotted'}];
+        
+        let list = '';
+        for (let i = 0, len = items.length; i < len; i++) {
+            list += '<li>' +
+                '<button type="button" class="se-btn-list btn_line" data-command="horizontalRule" data-value="' + items[i].class + '" title="' + items[i].name + '">' +
+                    '<hr' + (items[i].class ? ' class="' + items[i].class + '"' : '') + (items[i].style ? ' style="' + items[i].style + '"' : '') + '/>' +
+                '</button>' +
+            '</li>';
+        }
+        
         listDiv.className = 'se-submenu se-list-layer se-list-line';
         listDiv.innerHTML = '' +
             '<div class="se-list-inner">' +
                 '<ul class="se-list-basic">' +
-                    '<li>' +
-                        '<button type="button" class="se-btn-list btn_line" data-command="horizontalRule" data-value="solid" title="' + lang.toolbar.hr_solid + '">' +
-                            '<hr style="border-width: 1px 0 0; border-style: solid none none; border-color: black; border-image: initial; height: 1px;" />' +
-                        '</button>' +
-                    '</li>' +
-                    '<li>' +
-                        '<button type="button" class="se-btn-list btn_line" data-command="horizontalRule" data-value="dotted" title="' + lang.toolbar.hr_dotted + '">' +
-                            '<hr style="border-width: 1px 0 0; border-style: dotted none none; border-color: black; border-image: initial; height: 1px;" />' +
-                        '</button>' +
-                    '</li>' +
-                    '<li>' +
-                        '<button type="button" class="se-btn-list btn_line" data-command="horizontalRule" data-value="dashed" title="' + lang.toolbar.hr_dashed + '">' +
-                            '<hr style="border-width: 1px 0 0; border-style: dashed none none; border-color: black; border-image: initial; height: 1px;" />' +
-                        '</button>' +
-                    '</li>' +
+                    list +
                 '</ul>' +
             '</div>';
 
@@ -74,11 +70,9 @@ export default {
         return false;
     },
 
-    appendHr: function (className) {
-        const oHr = this.util.createElement('HR');
-        oHr.className = className;
+    appendHr: function (hrTemp) {
         this.focus();
-        return this.insertComponent(oHr, false, true, false);
+        return this.insertComponent(hrTemp.cloneNode(false), false, true, false);
     },
 
     horizontalRulePick: function (e) {
@@ -86,16 +80,16 @@ export default {
         e.stopPropagation();
 
         let target = e.target;
-        let value = null;
+        let command = target.getAttribute('data-command');
         
-        while (!value && !/UL/i.test(target.tagName)) {
-            value = target.getAttribute('data-value');
+        while (!command && !/UL/i.test(target.tagName)) {
             target = target.parentNode;
+            command = target.getAttribute('data-command');
         }
 
-        if (!value) return;
+        if (!command) return;
 
-        const oNode = this.plugins.horizontalRule.appendHr.call(this, '__se__' + value);
+        const oNode = this.plugins.horizontalRule.appendHr.call(this, target.firstElementChild);
         if (oNode) {
             this.setRange(oNode, 0, oNode, 0);
             this.submenuOff();

package/src/plugins/submenu/list.js

@@ -65,11 +65,7 @@ export default {
         const icon = button.firstElementChild;
         const util = this.util;
 
-        if (!element) {
-            button.removeAttribute('data-focus');
-            util.changeElement(icon, this.context.list.icons.number);
-            util.removeClass(button, 'active');
-        } else if (util.isList(element)) {
+        if (util.isList(element)) {
             const nodeName = element.nodeName;
             button.setAttribute('data-focus', nodeName);
             util.addClass(button, 'active');
@@ -80,6 +76,10 @@ export default {
             }
             
             return true;
+        } else {
+            button.removeAttribute('data-focus');
+            util.changeElement(icon, this.context.list.icons.number);
+            util.removeClass(button, 'active');
         }
 
         return false;
@@ -234,6 +234,14 @@ export default {
 
                 newCell = util.createElement('LI');
                 util.copyFormatAttributes(newCell, fTag);
+
+                if (i ===  0 && originRange.sc === fTag) {
+                    originRange.sc = newCell;
+                }
+                if (i === len - 1 && originRange.ec === fTag) {
+                    originRange.ec = newCell;
+                }
+
                 if (util.isComponent(fTag)) {
                     const isHR = /^HR$/i.test(fTag.nodeName);
                     if (!isHR) newCell.innerHTML = '<br>';

package/src/plugins/submenu/template.js

@@ -12,7 +12,9 @@ export default {
     display: 'submenu',
     add: function (core, targetElement) {
         const context = core.context;
-        context.template = {};
+        context.template = {
+            selectedIndex: -1
+        };
 
         /** set submenu */
         let templateDiv = this.setSubmenu(core);
@@ -55,7 +57,8 @@ export default {
         e.preventDefault();
         e.stopPropagation();
 
-        const temp = this.options.templates[e.target.getAttribute('data-value')];
+        this.context.template.selectedIndex = e.target.getAttribute('data-value') * 1;
+        const temp = this.options.templates[this.context.template.selectedIndex];
 
         if (temp.html) {
             this.setContents(temp.html);