suneditor 2.46.2 → 3.0.0-alpha.10

package/src/plugins/submenu/formatBlock.js

@@ -1,273 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'formatBlock',
-    display: 'submenu',
-    add: function (core, targetElement) {
-        const context = core.context;
-        context.formatBlock = {
-            targetText: targetElement.querySelector('.txt'),
-            targetTooltip: targetElement.parentNode.querySelector('.se-tooltip-text'),
-            _formatList: null,
-            currentFormat: ''
-        };
-
-        /** set submenu */
-        let listDiv = this.setSubmenu(core);
-
-        /** add event listeners */
-        listDiv.querySelector('ul').addEventListener('click', this.pickUp.bind(core));
-        context.formatBlock._formatList = listDiv.querySelectorAll('li button');
-
-        /** append target button menu */
-        core.initMenuTarget(this.name, targetElement, listDiv);
-
-        /** empty memory */
-        listDiv = null;
-    },
-
-    setSubmenu: function (core) {
-        const option = core.options;
-        const lang_toolbar = core.lang.toolbar;
-        const listDiv = core.util.createElement('DIV');
-        listDiv.className = 'se-submenu se-list-layer se-list-format';
-
-        const defaultFormats = ['p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-        const formatList = !option.formats || option.formats.length === 0 ? defaultFormats : option.formats;
-
-        let list = '<div class="se-list-inner"><ul class="se-list-basic">';
-        for (let i = 0, len = formatList.length, format, tagName, command, name, h, attrs, className; i < len; i++) {
-            format = formatList[i];
-            
-            if (typeof format === 'string' && defaultFormats.indexOf(format) > -1) {
-                tagName = format.toLowerCase();
-                command = tagName === 'blockquote' ? 'range' : tagName === 'pre' ? 'free' : 'replace';
-                h = /^h/.test(tagName) ? tagName.match(/\d+/)[0] : '';
-                name = lang_toolbar['tag_' + (h ? 'h' : tagName)] + h;
-                className = '';
-                attrs = '';
-            } else {
-                tagName = format.tag.toLowerCase();
-                command = format.command;
-                name = format.name || tagName;
-                className = format.class;
-                attrs = className ? ' class="' + className + '"' : '';
-            }
-
-            list += '<li>' +
-                '<button type="button" class="se-btn-list" data-command="' + command + '" data-value="' + tagName + '" data-class="' + className + '" title="' + name + '" aria-label="' + name + '">' +
-                    '<' + tagName + attrs + '>' + name + '</' + tagName + '>' +
-                '</button></li>';
-        }
-        list += '</ul></div>';
-
-        listDiv.innerHTML = list;
-
-        return listDiv;
-    },
-
-     /**
-     * @Override core
-     */
-    active: function (element) {
-        let formatTitle = this.lang.toolbar.formats;
-        const target = this.context.formatBlock.targetText;
-
-        if (!element) {
-            this.util.changeTxt(target, formatTitle);
-        } else if (this.util.isFormatElement(element)) {
-            const formatContext = this.context.formatBlock;
-            const formatList = formatContext._formatList;
-            const nodeName = element.nodeName.toLowerCase();
-            const className = (element.className.match(/(\s|^)__se__format__[^\s]+/) || [''])[0].trim();
-
-            for (let i = 0, len = formatList.length, f; i < len; i++) {
-                f = formatList[i];
-                if (nodeName === f.getAttribute('data-value') && className === f.getAttribute('data-class')) {
-                    formatTitle = f.title;
-                    break;
-                }
-            }
-
-            this.util.changeTxt(target, formatTitle);
-            target.setAttribute('data-value', nodeName);
-            target.setAttribute('data-class', className);
-
-            return true;
-        }
-
-        return false;
-    },
-
-     /**
-     * @Override submenu
-     */
-    on: function () {
-        const formatContext = this.context.formatBlock;
-        const formatList = formatContext._formatList;
-        const target = formatContext.targetText;
-        const currentFormat = (target.getAttribute('data-value') || '') + (target.getAttribute('data-class') || '');
-
-        if (currentFormat !== formatContext.currentFormat) {
-            for (let i = 0, len = formatList.length, f; i < len; i++) {
-                f = formatList[i];
-                if (currentFormat === f.getAttribute('data-value') + f.getAttribute('data-class')) {
-                    this.util.addClass(f, 'active');
-                } else {
-                    this.util.removeClass(f, 'active');
-                }
-            }
-
-            formatContext.currentFormat = currentFormat;
-        }
-    },
-
-    pickUp: function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        let target = e.target;
-        let command = null, value = null, tag = null, className = '';
-        
-        while (!command && !/UL/i.test(target.tagName)) {
-            command = target.getAttribute('data-command');
-            value = target.getAttribute('data-value');
-            className = target.getAttribute('data-class');
-            if (command) {
-                tag = target.firstChild;
-                break;
-            }
-            target = target.parentNode;
-        }
-
-        if (!command) return;
-
-        // blockquote
-        if (command === 'range') {
-            const rangeElement = tag.cloneNode(false);
-            this.applyRangeFormatElement(rangeElement);
-        }
-        // free, replace
-        else {
-            let range = this.getRange();
-            let selectedFormsts = this.getSelectedElementsAndComponents(false);
-
-            if (selectedFormsts.length === 0) {
-                range = this.getRange_addLine(range, null);
-                selectedFormsts = this.getSelectedElementsAndComponents(false);
-                if (selectedFormsts.length === 0) return;
-            }
-
-            const startOffset = range.startOffset;
-            const endOffset = range.endOffset;
-
-            const util = this.util;
-            let first = selectedFormsts[0];
-            let last = selectedFormsts[selectedFormsts.length - 1];
-            const firstPath = util.getNodePath(range.startContainer, first, null, null);
-            const lastPath = util.getNodePath(range.endContainer, last, null, null);
-            
-            // remove selected list
-            const rlist = this.detachList(selectedFormsts, false);
-            if (rlist.sc) first = rlist.sc;
-            if (rlist.ec) last = rlist.ec;
-
-            // change format tag
-            this.setRange(util.getNodeFromPath(firstPath, first), startOffset, util.getNodeFromPath(lastPath, last), endOffset);
-            const modifiedFormsts = this.getSelectedElementsAndComponents(false);
-
-            // free format
-            if (command === 'free') {
-                const len = modifiedFormsts.length - 1;
-                let parentNode = modifiedFormsts[len].parentNode;
-                let freeElement = tag.cloneNode(false);
-                const focusElement = freeElement;
-    
-                for (let i = len, f, html, before, next, inner, isComp, first = true; i >= 0; i--) {
-                    f = modifiedFormsts[i];
-                    if (f === (!modifiedFormsts[i + 1] ? null : modifiedFormsts[i + 1].parentNode)) continue;
-    
-                    isComp = util.isComponent(f);
-                    html = isComp ? '' : f.innerHTML.replace(/(?!>)\s+(?=<)|\n/g, ' ');
-                    before = util.getParentElement(f, function (current) {
-                        return current.parentNode === parentNode;
-                    });
-    
-                    if (parentNode !== f.parentNode || isComp) {
-                        if (util.isFormatElement(parentNode)) {
-                            parentNode.parentNode.insertBefore(freeElement, parentNode.nextSibling);
-                            parentNode = parentNode.parentNode;
-                        } else {
-                            parentNode.insertBefore(freeElement, before ? before.nextSibling : null);
-                            parentNode = f.parentNode;
-                        }
-
-                        next = freeElement.nextSibling;
-                        if (next && freeElement.nodeName === next.nodeName && util.isSameAttributes(freeElement, next)) {
-                            freeElement.innerHTML += '<BR>' + next.innerHTML;
-                            util.removeItem(next);
-                        }
-
-                        freeElement = tag.cloneNode(false);
-                        first = true;
-                    }
-    
-                    inner = freeElement.innerHTML;
-                    freeElement.innerHTML = ((first || !html || !inner || /<br>$/i.test(html)) ? html : html + '<BR>') + inner;
-
-                    if (i === 0) {
-                        parentNode.insertBefore(freeElement, f);
-                        next = f.nextSibling;
-                        if (next && freeElement.nodeName === next.nodeName && util.isSameAttributes(freeElement, next)) {
-                            freeElement.innerHTML += '<BR>' + next.innerHTML;
-                            util.removeItem(next);
-                        }
-
-                        const prev = freeElement.previousSibling;
-                        if (prev && freeElement.nodeName === prev.nodeName && util.isSameAttributes(freeElement, prev)) {
-                            prev.innerHTML += '<BR>' + freeElement.innerHTML;
-                            util.removeItem(freeElement);
-                        }
-                    }
-
-                    if (!isComp) util.removeItem(f);
-                    if (!!html) first = false;
-                }
-    
-                this.setRange(focusElement, 0, focusElement, 0);
-            }
-            // replace format
-            else {
-                for (let i = 0, len = modifiedFormsts.length, node, newFormat; i < len; i++) {
-                    node = modifiedFormsts[i];
-                    
-                    if ((node.nodeName.toLowerCase() !== value.toLowerCase() || (node.className.match(/(\s|^)__se__format__[^\s]+/) || [''])[0].trim() !== className) && !util.isComponent(node)) {
-                        newFormat = tag.cloneNode(false);
-                        util.copyFormatAttributes(newFormat, node);
-                        newFormat.innerHTML = node.innerHTML;
-    
-                        node.parentNode.replaceChild(newFormat, node);
-                    }
-    
-                    if (i === 0) first = newFormat || node;
-                    if (i === len - 1) last = newFormat || node;
-                    newFormat = null;
-                }
-    
-                this.setRange(util.getNodeFromPath(firstPath, first), startOffset, util.getNodeFromPath(lastPath, last), endOffset);
-            }
-
-            // history stack
-            this.history.push(false);
-        }
-
-        this.submenuOff();
-    }
-};

package/src/plugins/submenu/hiliteColor.d.ts

@@ -1,5 +0,0 @@
-import { SubmenuPlugin } from '../SubmenuPlugin';
-
-declare const hiliteColor: SubmenuPlugin;
-
-export default hiliteColor;

package/src/plugins/submenu/hiliteColor.js

@@ -1,102 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-import colorPicker from '../modules/_colorPicker';
-
-export default {
-    name: 'hiliteColor',
-    display: 'submenu',
-    add: function (core, targetElement) {
-        core.addModule([colorPicker]);
-
-        const context = core.context;
-        context.hiliteColor = {
-            previewEl: null,
-            colorInput: null,
-            colorList: null
-        };
-
-        /** set submenu */
-        let listDiv = this.setSubmenu(core);
-        context.hiliteColor.colorInput = listDiv.querySelector('._se_color_picker_input');
-
-        /** add event listeners */
-        context.hiliteColor.colorInput.addEventListener('keyup', this.onChangeInput.bind(core));
-        listDiv.querySelector('._se_color_picker_submit').addEventListener('click', this.submit.bind(core));
-        listDiv.querySelector('._se_color_picker_remove').addEventListener('click', this.remove.bind(core));
-        listDiv.addEventListener('click', this.pickup.bind(core));
-
-        context.hiliteColor.colorList = listDiv.querySelectorAll('li button');
-
-        /** append target button menu */
-        core.initMenuTarget(this.name, targetElement, listDiv);
-
-        /** empty memory */
-        listDiv = null;
-    },
-
-    setSubmenu: function (core) {
-        const colorArea = core.context.colorPicker.colorListHTML;
-        const listDiv = core.util.createElement('DIV');
-
-        listDiv.className = 'se-submenu se-list-layer';
-        listDiv.innerHTML = colorArea;
-
-        return listDiv;
-    },
-
-     /**
-     * @Override submenu
-     */
-    on: function () {
-        const contextPicker = this.context.colorPicker;
-        const contextHiliteColor = this.context.hiliteColor;
-
-        contextPicker._colorInput = contextHiliteColor.colorInput;
-        const color = this.wwComputedStyle.backgroundColor;
-        contextPicker._defaultColor = color ? this.plugins.colorPicker.isHexColor(color) ? color : this.plugins.colorPicker.rgb2hex(color) : "#ffffff";
-        contextPicker._styleProperty = 'backgroundColor';
-        contextPicker._colorList = contextHiliteColor.colorList;
-        
-        this.plugins.colorPicker.init.call(this, this.getSelectionNode(), null);
-    },
-
-     /**
-     * @Override _colorPicker
-     */
-    onChangeInput: function (e) {
-        this.plugins.colorPicker.setCurrentColor.call(this, e.target.value);
-    },
-
-    submit: function () {
-        this.plugins.hiliteColor.applyColor.call(this, this.context.colorPicker._currentColor);
-    },
-
-    pickup: function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        this.plugins.hiliteColor.applyColor.call(this, e.target.getAttribute('data-value'));
-    },
-
-    remove: function () {
-        this.nodeChange(null, ['background-color'], ['span'], true);
-        this.submenuOff();
-    },
-
-    applyColor: function (color) {
-        if (!color) return;
-        
-        const newNode = this.util.createElement('SPAN');
-        newNode.style.backgroundColor = color;
-        this.nodeChange(newNode, ['background-color'], null, null);
-        
-        this.submenuOff();
-    }
-};

package/src/plugins/submenu/horizontalRule.d.ts

@@ -1,5 +0,0 @@
-import { SubmenuPlugin } from '../SubmenuPlugin';
-
-declare const horizontalRule: SubmenuPlugin;
-
-export default horizontalRule;

package/src/plugins/submenu/horizontalRule.js

@@ -1,98 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'horizontalRule',
-    display: 'submenu',
-    add: function (core, targetElement) {
-        core.context.horizontalRule = {
-            currentHR: null,
-        };
-
-        /** set submenu */
-        let listDiv = this.setSubmenu(core);
-
-        /** add event listeners */
-        listDiv.querySelector('ul').addEventListener('click', this.horizontalRulePick.bind(core));
-
-        /** append target button menu */
-        core.initMenuTarget(this.name, targetElement, listDiv);
-
-        /** empty memory */
-        listDiv = null;
-    },
-
-    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 + '" aria-label="' + 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">' +
-                    list +
-                '</ul>' +
-            '</div>';
-
-        return listDiv;
-    },
-
-    active: function (element) {
-        if (!element) {
-            if (this.util.hasClass(this.context.horizontalRule.currentHR, 'on')) {
-                this.controllersOff();
-            }
-        } else if (/HR/i.test(element.nodeName)) {
-            this.context.horizontalRule.currentHR = element;
-            if (!this.util.hasClass(element, 'on')) {
-                this.util.addClass(element, 'on');
-                this.controllersOn('hr', this.util.removeClass.bind(this.util, element, 'on'));
-            }
-            return true;
-        }
-
-        return false;
-    },
-
-    appendHr: function (hrTemp) {
-        this.focus();
-        return this.insertComponent(hrTemp.cloneNode(false), false, true, false);
-    },
-
-    horizontalRulePick: function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        let target = e.target;
-        let command = target.getAttribute('data-command');
-        
-        while (!command && !/UL/i.test(target.tagName)) {
-            target = target.parentNode;
-            command = target.getAttribute('data-command');
-        }
-
-        if (!command) return;
-
-        const oNode = this.plugins.horizontalRule.appendHr.call(this, target.firstElementChild);
-        if (oNode) {
-            this.setRange(oNode, 0, oNode, 0);
-            this.submenuOff();
-        }
-    }
-};

package/src/plugins/submenu/lineHeight.d.ts

@@ -1,5 +0,0 @@
-import { SubmenuPlugin } from '../SubmenuPlugin';
-
-declare const lineHeight: SubmenuPlugin;
-
-export default lineHeight;

package/src/plugins/submenu/lineHeight.js

@@ -1,104 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 20197 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'lineHeight',
-    display: 'submenu',
-    add: function (core, targetElement) {
-        const context = core.context;
-        context.lineHeight = {
-            _sizeList: null,
-            currentSize: -1
-        };
-
-        /** set submenu */
-        let listDiv = this.setSubmenu(core);
-        let listUl = listDiv.querySelector('ul');
-
-        /** add event listeners */
-        listUl.addEventListener('click', this.pickup.bind(core));
-
-        context.lineHeight._sizeList = listUl.querySelectorAll('li button');
-
-        /** append target button menu */
-        core.initMenuTarget(this.name, targetElement, listDiv);
-
-        /** empty memory */
-        listDiv = null, listUl = null;
-    },
-
-    setSubmenu: function (core) {
-        const option = core.options;
-        const lang = core.lang;
-        const listDiv = core.util.createElement('DIV');
-
-        listDiv.className = 'se-submenu se-list-layer';
-
-        const sizeList = !option.lineHeights ? [
-            {text: '1', value: 1},
-            {text: '1.15', value: 1.15},
-            {text: '1.5', value: 1.5},
-            {text: '2', value: 2}
-        ] : option.lineHeights;
-
-        let list = '<div class="se-list-inner">' +
-                '<ul class="se-list-basic">' +
-                    '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '" aria-label="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
-        for (let i = 0, len = sizeList.length, size; i < len; i++) {
-            size = sizeList[i];
-            list += '<li><button type="button" class="se-btn-list" data-value="' + size.value + '" title="' + size.text + '" aria-label="' + size.text + '">' + size.text + '</button></li>';
-        }
-        list += '</ul></div>';
-
-        listDiv.innerHTML = list;
-
-        return listDiv;
-    },
-
-     /**
-     * @Override submenu
-     */
-    on: function () {
-        const lineHeightContext = this.context.lineHeight;
-        const sizeList = lineHeightContext._sizeList;
-        const format = this.util.getFormatElement(this.getSelectionNode());
-        const currentSize = !format ? '' : format.style.lineHeight + '';
-
-        if (currentSize !== lineHeightContext.currentSize) {
-            for (let i = 0, len = sizeList.length; i < len; i++) {
-                if (currentSize === sizeList[i].getAttribute('data-value')) {
-                    this.util.addClass(sizeList[i], 'active');
-                } else {
-                    this.util.removeClass(sizeList[i], 'active');
-                }
-            }
-
-            lineHeightContext.currentSize = currentSize;
-        }
-    },
-
-    pickup: function (e) {
-        if (!/^BUTTON$/i.test(e.target.tagName)) return false;
-        
-        e.preventDefault();
-        e.stopPropagation();
-
-        const value = e.target.getAttribute('data-value') || '';
-        const formats = this.getSelectedElements();
-
-        for (let i = 0, len = formats.length; i < len; i++) {
-            formats[i].style.lineHeight = value;
-        }
-
-        this.submenuOff();
-
-        // history stack
-        this.history.push(false);
-    }
-};

package/src/plugins/submenu/list.d.ts

@@ -1,5 +0,0 @@
-import { SubmenuPlugin } from '../SubmenuPlugin';
-
-declare const list: SubmenuPlugin;
-
-export default list;