suneditor 2.46.1 → 3.0.0-alpha.1

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

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

package/src/plugins/submenu/align.js

@@ -1,160 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'align',
-    display: 'submenu',
-    add: function (core, targetElement) {
-        const icons = core.icons;
-        const context = core.context;
-        context.align = {
-            targetButton: targetElement,
-            _itemMenu: null,
-            _alignList: null,
-            currentAlign: '',
-            defaultDir: core.options.rtl ? 'right' : 'left',
-            icons: {
-                justify: icons.align_justify,
-                left: icons.align_left,
-                right: icons.align_right,
-                center: icons.align_center
-            }
-        };
-
-        /** set submenu */
-        let listDiv = this.setSubmenu(core);
-        let listUl = context.align._itemMenu = listDiv.querySelector('ul');
-
-        /** add event listeners */
-        listUl.addEventListener('click', this.pickup.bind(core));
-        context.align._alignList = listUl.querySelectorAll('li button');
-
-        /** append target button menu */
-        core.initMenuTarget(this.name, targetElement, listDiv);
-
-        /** empty memory */
-        listDiv = null, listUl = null;
-    },
-
-    setSubmenu: function (core) {
-        const lang = core.lang;
-        const icons = core.icons;
-        const listDiv = core.util.createElement('DIV');
-        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 + '" aria-label="' + 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">' +
-                    html +
-                '</ul>' +
-            '</div>';
-
-        return listDiv;
-    },
-
-    /**
-     * @Override core
-     */
-    active: function (element) {
-        const alignContext = this.context.align;
-        const targetButton = alignContext.targetButton;
-        const target = targetButton.firstElementChild;
-
-        if (!element) {
-            this.util.changeElement(target, alignContext.icons[alignContext.defaultDir]);
-            targetButton.removeAttribute('data-focus');
-        } else if (this.util.isFormatElement(element)) {
-            const textAlign = element.style.textAlign;
-            if (textAlign) {
-                this.util.changeElement(target, alignContext.icons[textAlign] || alignContext.icons[alignContext.defaultDir]);
-                targetButton.setAttribute('data-focus', textAlign);
-                return true;
-            }
-        }
-
-        return false;
-    },
-
-    /**
-     * @Override submenu
-     */
-    on: function () {
-        const alignContext = this.context.align;
-        const alignList = alignContext._alignList;
-        const currentAlign = alignContext.targetButton.getAttribute('data-focus') || alignContext.defaultDir;
-
-        if (currentAlign !== alignContext.currentAlign) {
-            for (let i = 0, len = alignList.length; i < len; i++) {
-                if (currentAlign === alignList[i].getAttribute('data-value')) {
-                    this.util.addClass(alignList[i], 'active');
-                } else {
-                    this.util.removeClass(alignList[i], 'active');
-                }
-            }
-
-            alignContext.currentAlign = currentAlign;
-        }
-    },
-
-    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();
-
-        let target = e.target;
-        let value = null;
-
-        while (!value && !/UL/i.test(target.tagName)) {
-            value = target.getAttribute('data-value');
-            target = target.parentNode;
-        }
-
-        if (!value) return;
-
-        const defaultDir = this.context.align.defaultDir;
-        const selectedFormsts = this.getSelectedElements();
-        for (let i = 0, len = selectedFormsts.length; i < len; i++) {
-            this.util.setStyle(selectedFormsts[i], 'textAlign', (value === defaultDir ? '' : value));
-        }
-
-        this.effectNode = null;
-        this.submenuOff();
-        this.focus();
-        
-        // history stack
-        this.history.push(false);
-    }
-};

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

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

package/src/plugins/submenu/font.js

@@ -1,123 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'font',
-    display: 'submenu',
-    add: function (core, targetElement) {
-        const context = core.context;
-        context.font = {
-            targetText: targetElement.querySelector('.txt'),
-            targetTooltip: targetElement.parentNode.querySelector('.se-tooltip-text'),
-            _fontList: null,
-            currentFont: ''
-        };
-
-        /** set submenu */
-        let listDiv = this.setSubmenu(core);
-
-        /** add event listeners */
-        listDiv.querySelector('.se-list-inner').addEventListener('click', this.pickup.bind(core));
-
-        context.font._fontList = listDiv.querySelectorAll('ul li button');
-
-        /** 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');
-
-        listDiv.className = 'se-submenu se-list-layer se-list-font-family';
-
-        let font, text, i, len;
-        let fontList = core.options.font;
-
-        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 (i = 0, len = fontList.length; i < len; i++) {
-            font = fontList[i];
-            text = font.split(',')[0];
-            list += '<li><button type="button" class="se-btn-list" data-value="' + font + '" data-txt="' + text + '" title="' + text + '" aria-label="' + text + '" style="font-family:' + font + ';">' + text + '</button></li>';
-        }
-        list += '</ul></div>';
-        listDiv.innerHTML = list;
-
-        return listDiv;
-    },
-
-     /**
-     * @Override core
-     */
-    active: function (element) {
-        const target = this.context.font.targetText;
-        const tooltip = this.context.font.targetTooltip;
-
-        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 + ')' : '') : font);
-        } else if (element.style && element.style.fontFamily.length > 0) {
-            const selectFont = element.style.fontFamily.replace(/["']/g,'');
-            this.util.changeTxt(target, selectFont);
-            this.util.changeTxt(tooltip, this.lang.toolbar.font + ' (' + selectFont + ')');
-            return true;
-        }
-
-        return false;
-    },
-
-     /**
-     * @Override submenu
-     */
-    on: function () {
-        const fontContext = this.context.font;
-        const fontList = fontContext._fontList;
-        const currentFont = fontContext.targetText.textContent;
-
-        if (currentFont !== fontContext.currentFont) {
-            for (let i = 0, len = fontList.length; i < len; i++) {
-                if (currentFont === (fontList[i].getAttribute('data-value') || '').replace(/'|"/g, '')) {
-                    this.util.addClass(fontList[i], 'active');
-                } else {
-                    this.util.removeClass(fontList[i], 'active');
-                }
-            }
-
-            fontContext.currentFont = currentFont;
-        }
-    },
-
-    pickup: function (e) {
-        if (!/^BUTTON$/i.test(e.target.tagName)) return false;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        let value = e.target.getAttribute('data-value');
-
-        if (value) {
-            const newNode = this.util.createElement('SPAN');
-            if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
-                value = '"' + value + '"';
-            }
-            newNode.style.fontFamily = value;
-            this.nodeChange(newNode, ['font-family'], null, null);
-        } else {
-            this.nodeChange(null, ['font-family'], ['span'], true);
-        }
-        
-        this.submenuOff();
-    }
-};

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

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

package/src/plugins/submenu/fontColor.js

@@ -1,101 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-import colorPicker from '../modules/_colorPicker';
-
-export default {
-    name: 'fontColor',
-    display: 'submenu',
-    add: function (core, targetElement) {
-        core.addModule([colorPicker]);
-
-        const context = core.context;
-        context.fontColor = {
-            previewEl: null,
-            colorInput: null,
-            colorList: null
-        };
-
-        /** set submenu */
-        let listDiv = this.setSubmenu(core);
-        context.fontColor.colorInput = listDiv.querySelector('._se_color_picker_input');
-
-        /** add event listeners */
-        context.fontColor.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.fontColor.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 contextFontColor = this.context.fontColor;
-
-        contextPicker._colorInput = contextFontColor.colorInput;
-        const color = this.wwComputedStyle.color;
-        contextPicker._defaultColor = color ? this.plugins.colorPicker.isHexColor(color) ? color : this.plugins.colorPicker.rgb2hex(color) : "#333333";
-        contextPicker._styleProperty = 'color';
-        contextPicker._colorList = contextFontColor.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.fontColor.applyColor.call(this, this.context.colorPicker._currentColor);
-    },
-
-    pickup: function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        this.plugins.fontColor.applyColor.call(this, e.target.getAttribute('data-value'));
-    },
-
-    remove: function () {
-        this.nodeChange(null, ['color'], ['span'], true);
-        this.submenuOff();
-    },
-
-    applyColor: function (color) {
-        if (!color) return;
-
-        const newNode = this.util.createElement('SPAN');
-        newNode.style.color = color;
-        this.nodeChange(newNode, ['color'], null, null);
-
-        this.submenuOff();
-    }
-};

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

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

package/src/plugins/submenu/fontSize.js

@@ -1,112 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'fontSize',
-    display: 'submenu',
-    add: function (core, targetElement) {
-        const context = core.context;
-        context.fontSize = {
-            targetText: targetElement.querySelector('.txt'),
-            _sizeList: null,
-            currentSize: ''
-        };
-
-        /** set submenu */
-        let listDiv = this.setSubmenu(core);
-        let listUl = listDiv.querySelector('ul');
-
-        /** add event listeners */
-        listUl.addEventListener('click', this.pickup.bind(core));
-        context.fontSize._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 se-list-font-size';
-
-        const sizeList = !option.fontSize ? [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72] : option.fontSize;
-
-        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, unit = option.fontSizeUnit, len = sizeList.length, size; i < len; i++) {
-            size = sizeList[i];
-            list += '<li><button type="button" class="se-btn-list" data-value="' + size + unit + '" title="' + size + unit + '" aria-label="' + size + unit + '" style="font-size:' + size + unit + ';">' + size + '</button></li>';
-        }
-        list += '</ul></div>';
-
-        listDiv.innerHTML = list;
-
-        return listDiv;
-    },
-
-     /**
-     * @Override core
-     */
-    active: function (element) {
-        if (!element) {
-            this.util.changeTxt(this.context.fontSize.targetText, this.hasFocus ? this._convertFontSize.call(this, this.options.fontSizeUnit, this.wwComputedStyle.fontSize) : this.lang.toolbar.fontSize);
-        } else if (element.style && element.style.fontSize.length > 0) {
-            this.util.changeTxt(this.context.fontSize.targetText, this._convertFontSize.call(this, this.options.fontSizeUnit, element.style.fontSize));
-            return true;
-        }
-
-        return false;
-    },
-
-     /**
-     * @Override submenu
-     */
-    on: function () {
-        const fontSizeContext = this.context.fontSize;
-        const sizeList = fontSizeContext._sizeList;
-        const currentSize = fontSizeContext.targetText.textContent;
-
-        if (currentSize !== fontSizeContext.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');
-                }
-            }
-
-            fontSizeContext.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');
-
-        if (value) {
-            const newNode = this.util.createElement('SPAN');
-            newNode.style.fontSize = value;
-            this.nodeChange(newNode, ['font-size'], null, null);
-        } else {
-            this.nodeChange(null, ['font-size'], ['span'], true);
-        }
-
-        this.submenuOff();
-    }
-};

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

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