suneditor 2.46.2 → 3.0.0-alpha.2

package/src/plugins/modules/_colorPicker.js

@@ -1,201 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2018 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'colorPicker',
-    /**
-     * @description Constructor
-     * @param {Object} core Core object 
-     */
-    add: function (core) {
-        const context = core.context;
-        context.colorPicker = {
-            colorListHTML: '',
-            _colorInput: '',
-            _defaultColor: '#000',
-            _styleProperty: 'color',
-            _currentColor: '',
-            _colorList: []
-        };
-
-        /** set submenu */
-        context.colorPicker.colorListHTML = this.createColorList(core, this._makeColorList);
-    },
-
-    /**
-     * @description Create color list
-     * @param {Object} core Core object 
-     * @param {Function} makeColor this._makeColorList
-     * @returns {String} HTML string
-     */
-    createColorList: function (core, makeColor) {
-        const option = core.options;
-        const lang = core.lang;
-        const colorList = !option.colorList || option.colorList.length === 0 ?
-            [
-                '#ff0000', '#ff5e00', '#ffe400', '#abf200', '#00d8ff', '#0055ff', '#6600ff', '#ff00dd', '#000000',
-                '#ffd8d8', '#fae0d4', '#faf4c0', '#e4f7ba', '#d4f4fa', '#d9e5ff', '#e8d9ff', '#ffd9fa', '#f1f1f1',
-                '#ffa7a7', '#ffc19e', '#faed7d', '#cef279', '#b2ebf4', '#b2ccff', '#d1b2ff', '#ffb2f5', '#bdbdbd',
-                '#f15f5f', '#f29661', '#e5d85c', '#bce55c', '#5cd1e5', '#6699ff', '#a366ff', '#f261df', '#8c8c8c',
-                '#980000', '#993800', '#998a00', '#6b9900', '#008299', '#003399', '#3d0099', '#990085', '#353535',
-                '#670000', '#662500', '#665c00', '#476600', '#005766', '#002266', '#290066', '#660058', '#222222'
-            ] : option.colorList;
-
-        let colorArr = [];
-        let list = '<div class="se-list-inner">';
-            for (let i = 0, len = colorList.length, color; i < len; i++) {
-                color = colorList[i];
-                if (!color) continue;
-                
-                if (typeof color === 'string') {
-                    colorArr.push(color);
-                    if (i < len - 1) continue;
-                }
-                if (colorArr.length > 0) {
-                    list += '<div class="se-selector-color">' + makeColor(colorArr) + '</div>';
-                    colorArr = [];
-                }
-                if (typeof color === 'object') {
-                    list += '<div class="se-selector-color">' + makeColor(color) + '</div>';
-                }
-            }
-            list += '' +
-            '<form class="se-form-group">' +
-                '<input type="text" maxlength="9" class="_se_color_picker_input se-color-input"/>' +
-                '<button type="submit" class="se-btn-primary _se_color_picker_submit" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '">' +
-                    core.icons.checked +
-                '</button>' +
-                '<button type="button" class="se-btn _se_color_picker_remove" title="' + lang.toolbar.removeFormat + '" aria-label="' + lang.toolbar.removeFormat + '">' +
-                    core.icons.erase +
-                '</button>' +
-            '</form>' +
-            '</div>';
-
-        return list;
-    },
-
-    /**
-     * @description Internal function used by this.createColorList
-     * @param {Array} colorList Color list
-     * @private
-     */
-    _makeColorList: function (colorList) {
-        let list = '';
-
-        list += '<ul class="se-color-pallet">';
-        for (let i = 0, len = colorList.length, color; i < len; i++) {
-            color = colorList[i];
-            if (typeof color === 'string') {
-                list += '<li>' +
-                            '<button type="button" data-value="' + color + '" title="' + color + '" aria-label="' + color + '" style="background-color:' + color + ';"></button>' +
-                        '</li>';
-            }
-        }
-        list += '</ul>';
-
-        return list;
-    },
-    
-    /**
-     * @description Displays or resets the currently selected color at color list.
-     * @param {Node} node Current Selected node
-     * @param {String|null} color Color value
-     */
-    init: function (node, color) {
-        const colorPicker = this.plugins.colorPicker;
-        let fillColor = color ? color : colorPicker.getColorInNode.call(this, node) || this.context.colorPicker._defaultColor;
-        fillColor = colorPicker.isHexColor(fillColor) ? fillColor : colorPicker.rgb2hex(fillColor) || fillColor;
-
-        const colorList = this.context.colorPicker._colorList;
-        if (colorList) {
-            for (let i = 0, len = colorList.length; i < len; i++) {
-                if (fillColor.toLowerCase() === colorList[i].getAttribute('data-value').toLowerCase()) {
-                    this.util.addClass(colorList[i], 'active');
-                } else {
-                    this.util.removeClass(colorList[i], 'active');
-                }
-            }
-        }
-
-        colorPicker.setInputText.call(this, colorPicker.colorName2hex.call(this, fillColor));
-    },
-
-    /**
-     * @description Store color values
-     * @param {String} hexColorStr Hax color value
-     */
-    setCurrentColor: function (hexColorStr) {
-        this.context.colorPicker._currentColor = hexColorStr;
-        this.context.colorPicker._colorInput.style.borderColor = hexColorStr;
-    },
-
-    /**
-     * @description Set color at input element
-     * @param {String} hexColorStr Hax color value
-     */
-    setInputText: function (hexColorStr) {
-        hexColorStr = /^#/.test(hexColorStr) ? hexColorStr : '#' + hexColorStr;
-        this.context.colorPicker._colorInput.value = hexColorStr;
-        this.plugins.colorPicker.setCurrentColor.call(this, hexColorStr);
-    },
-
-    /**
-     * @description Gets color value at color property of node
-     * @param {Node} node Selected node 
-     * @returns {String}
-     */
-    getColorInNode: function (node) {
-        let findColor = '';
-        const styleProperty = this.context.colorPicker._styleProperty;
-
-        while (node && !this.util.isWysiwygDiv(node) && findColor.length === 0) {
-            if (node.nodeType === 1 && node.style[styleProperty]) findColor = node.style[styleProperty];
-            node = node.parentNode;
-        }
-
-        return findColor;
-    },
-
-    /**
-     * @description Function to check hex format color
-     * @param {String} str Color value
-     */
-    isHexColor: function (str) {
-        return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(str);
-    },
-
-    /**
-     * @description Function to convert hex format to a rgb color
-     * @param {String} rgb RGB color format
-     * @returns {String}
-     */
-    rgb2hex: function (rgb) {
-        const rgbMatch = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-
-        return (rgbMatch && rgbMatch.length === 4) ? "#" +
-            ("0" + parseInt(rgbMatch[1],10).toString(16)).slice(-2) +
-            ("0" + parseInt(rgbMatch[2],10).toString(16)).slice(-2) +
-            ("0" + parseInt(rgbMatch[3],10).toString(16)).slice(-2) : '';
-    },
-
-    /**
-     * @description Converts color values of other formats to hex color values and returns.
-     * @param {String} colorName Color value
-     * @returns {String}
-     */
-    colorName2hex: function (colorName) {
-        if (/^#/.test(colorName)) return colorName;
-        var temp = this.util.createElement('div');
-        temp.style.display = 'none';
-        temp.style.color = colorName;
-        var colors = this._w.getComputedStyle(this._d.body.appendChild(temp)).color.match(/\d+/g).map(function (a) { return parseInt(a,10); });
-        this.util.removeItem(temp);
-        return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : false;
-    }
-};

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

@@ -1,21 +0,0 @@
-import { Module } from '../Module';
-
-declare interface _notice extends Module {
-    /**
-     * @description Event when clicking the cancel button
-     * @param e Event object
-     */
-    onClick_cancel(e: MouseEvent): void;
-    /**
-     * @description  Open the notice panel
-     * @param text Notice message
-     */
-    open(text: string): void;
-
-    /**
-     * @description  Open the notice panel
-     */
-    close(): void;
-}
-
-export default _notice;

package/src/plugins/modules/_notice.js

@@ -1,72 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'notice',
-    /**
-     * @description Constructor
-     * @param {Object} core Core object 
-     */
-    add: function (core) {
-        const context = core.context;
-        context.notice = {};
-
-        /** dialog */
-        let notice_div = core.util.createElement('DIV');
-        let notice_span = core.util.createElement('SPAN');
-        let notice_button = core.util.createElement('BUTTON');
-
-        notice_div.className = 'se-notice';
-        notice_button.className = 'close';
-        notice_button.setAttribute('aria-label', 'Close');
-        notice_button.setAttribute('title', core.lang.dialogBox.close);
-        notice_button.innerHTML = core.icons.cancel;
-        
-        notice_div.appendChild(notice_span);
-        notice_div.appendChild(notice_button);
-
-        context.notice.modal = notice_div;
-        context.notice.message = notice_span;
-
-        /** add event listeners */
-        notice_button.addEventListener('click', this.onClick_cancel.bind(core));
-        
-        /** append html */
-        context.element.editorArea.appendChild(notice_div);
-        
-        /** empty memory */
-        notice_div = null;
-    },
-
-    /**
-     * @description Event when clicking the cancel button
-     * @param {MouseEvent} e Event object
-     */
-    onClick_cancel: function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.plugins.notice.close.call(this);
-    },
-
-    /**
-     * @description  Open the notice panel
-     * @param {String} text Notice message
-     */
-    open: function (text)  {
-        this.context.notice.message.textContent = text;
-        this.context.notice.modal.style.display = 'block';
-    },
-
-    /**
-     * @description  Open the notice panel
-     */
-    close: function () {
-        this.context.notice.modal.style.display = 'none';
-    }
-};

package/src/plugins/modules/_selectMenu.js

@@ -1,119 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2018 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-export default {
-    name: 'selectMenu',
-    add: function (core) {
-        core.context.selectMenu = {
-            caller: {},
-            callerContext: null
-        };
-    },
-
-    setForm: function () {
-        return '<div class="se-select-list"></div>';
-    },
-
-    createList: function (listContext, items, html) {
-        listContext.form.innerHTML = '<ul>' + html + '</ul>';
-        listContext.items = items;
-        listContext.menus = listContext.form.querySelectorAll('li');
-    },
-
-    initEvent: function (pluginName, forms) {
-        const form = forms.querySelector('.se-select-list');
-        const context = this.context.selectMenu.caller[pluginName] = {
-            form: form,
-            items: [],
-            menus: [],
-            index: -1,
-            item: null,
-            clickMethod: null,
-            callerName: pluginName
-        };
-
-        form.addEventListener('mousedown', this.plugins.selectMenu.onMousedown_list);
-        form.addEventListener('mousemove', this.plugins.selectMenu.onMouseMove_list.bind(this, context));
-        form.addEventListener('click', this.plugins.selectMenu.onClick_list.bind(this, context));
-    },
-
-    onMousedown_list: function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-    },
-
-    onMouseMove_list: function (context, e) {
-        this.util.addClass(context.form, '__se_select-menu-mouse-move');
-        const index = e.target.getAttribute('data-index');
-        if (!index) return;
-        context.index = index * 1;
-    },
-
-    onClick_list: function (context, e) {
-        const index = e.target.getAttribute('data-index');
-        if (!index) return;
-        context.clickMethod.call(this, context.items[index]);
-    },
-
-    moveItem: function (listContext, num) {
-        this.util.removeClass(listContext.form, '__se_select-menu-mouse-move');
-        num = listContext.index + num;
-        const menus = listContext.menus;
-        const len = menus.length;
-        const selectIndex = listContext.index = num >= len ? 0 : num < 0 ? len - 1 : num;
-        
-        for (let i = 0; i < len; i++) {
-            if (i === selectIndex) {
-                this.util.addClass(menus[i], 'active');
-            } else {
-                this.util.removeClass(menus[i], 'active');
-            }
-        }
-
-        listContext.item = listContext.items[selectIndex];
-    },
-
-    getItem: function (listContext, index) {
-        index = (!index || index < 0) ? listContext.index : index;
-        return listContext.items[index];
-    },
-
-    on: function (callerName, clickMethod) {
-        const listContext = this.context.selectMenu.caller[callerName];
-        this.context.selectMenu.callerContext = listContext;
-        listContext.clickMethod = clickMethod;
-        listContext.callerName = callerName;
-    },
-
-    open: function (listContext, positionHandler) {
-        const form = listContext.form;
-        form.style.visibility = 'hidden';
-        form.style.display = 'block';
-        positionHandler(form);
-        form.style.visibility = '';
-    },
-
-    close: function (listContext) {
-        listContext.form.style.display = 'none';
-        listContext.items = [];
-        listContext.menus = [];
-        listContext.index = -1;
-        listContext.item = null;
-    },
-
-    init: function (listContext) {
-        if (!listContext) return;
-        listContext.items = [];
-        listContext.menus = [];
-        listContext.index = -1;
-        listContext.item = null;
-        listContext.callerName = '';
-        this.context.selectMenu.callerContext = null;
-    }
-};

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

@@ -1,25 +0,0 @@
-import { Module } from '../Module';
-
-declare interface component extends Module {
-    /**
-     * @description Create a container for the resizing component and insert the element.
-     * @param cover Cover element (FIGURE)
-     * @param className Class name of container (fixed: se-component)
-     * @returns Created container element
-     */
-    set_container(cover: Element, className: string): Element;
-
-    /**
-     * @description Cover the target element with a FIGURE element.
-     * @param element Target element
-     */
-    set_cover(element: Element): void;
-
-    /**
-     * @description Return HTML string of caption(FIGCAPTION) element
-     * @returns
-     */
-    create_caption(): string;
-}
-
-export default component;

package/src/plugins/modules/component.js

@@ -1,81 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-(function (global, factory) {
-    if (typeof module === 'object' && typeof module.exports === 'object') {
-        module.exports = global.document ?
-            factory(global, true) :
-            function (w) {
-                if (!w.document) {
-                    throw new Error('SUNEDITOR_MODULES a window with a document');
-                }
-                return factory(w);
-            };
-    } else {
-        factory(global);
-    }
-}(typeof window !== 'undefined' ? window : this, function (window, noGlobal) {
-    const component = {
-        name: 'component',
-        /**
-         * @description Create a container for the resizing component and insert the element.
-         * @param {Element} cover Cover element (FIGURE)
-         * @param {String} className Class name of container (fixed: se-component)
-         * @returns {Element} Created container element
-         */
-        set_container: function (cover, className) {
-            const container = this.util.createElement('DIV');
-            container.className = 'se-component ' + className;
-            container.appendChild(cover);
-    
-            return container;
-        },
-
-        /**
-         * @description Cover the target element with a FIGURE element.
-         * @param {Element} element Target element
-         */
-        set_cover: function (element) {
-            const cover = this.util.createElement('FIGURE');
-            cover.appendChild(element);
-    
-            return cover;
-        },
-
-        /**
-         * @description Return HTML string of caption(FIGCAPTION) element
-         * @returns {String}
-         */
-        create_caption: function () {
-            const caption = this.util.createElement('FIGCAPTION');
-            caption.innerHTML = '<div>' + this.lang.dialogBox.caption + '</div>';
-            return caption;
-        }
-    };
-
-    if (typeof noGlobal === typeof undefined) {
-        if (!window.SUNEDITOR_MODULES) {
-            Object.defineProperty(window, 'SUNEDITOR_MODULES', {
-                enumerable: true,
-                writable: false,
-                configurable: false,
-                value: {}
-            });
-        }
-
-        Object.defineProperty(window.SUNEDITOR_MODULES, 'component', {
-            enumerable: true,
-            writable: false,
-            configurable: false,
-            value: component
-        });
-    }
-
-    return component;
-}));

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

@@ -1,28 +0,0 @@
-import { Module } from '../Module';
-
-/**
- * @description This is a required module of dialog plugin.
- */
-declare interface dialog extends Module {
-    /**
-     * @description Open a Dialog plugin
-     * @param kind Dialog plugin name
-     * @param update Whether it will open for update ('image' === this.currentControllerName)
-     * @example this.plugins.dialog.open.call(this, 'image', 'image' === this.currentControllerName);
-     */
-    open(kind: string, update: boolean): void;
-
-    /**
-     * @description Called after the submenu has been rendered
-     */
-    on?: () => void;
-
-    /**
-     * @description Close a Dialog plugin
-     * The plugin's "init" method is called.
-     * @example this.plugins.dialog.close.call(this);
-     */
-    close(): void;
-}
-
-export default dialog;