suneditor 2.46.1 → 3.0.0-alpha.1

package/src/plugins/dialog/link.js

@@ -1,223 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-'use strict';
-
-import dialog from '../modules/dialog';
-import anchor from '../modules/_anchor';
-
-export default {
-    name: 'link',
-    display: 'dialog',
-    add: function (core) {
-        core.addModule([dialog, anchor]);
-
-        const context = core.context;
-        const contextLink = context.link = {
-            focusElement: null, // @Override dialog // This element has focus when the dialog is opened.
-            _linkAnchor: null,
-            anchorCtx: null
-        };
-
-        /** link dialog */
-        let link_dialog = this.setDialog(core);
-        contextLink.modal = link_dialog;
-        
-        /** link controller */
-        let link_controller = this.setController_LinkButton(core);
-        contextLink.linkController = link_controller;
-
-        link_dialog.querySelector('form').addEventListener('submit', this.submit.bind(core));
-        link_controller.addEventListener('click', this.onClick_linkController.bind(core));
-
-        /** append html */
-        context.dialog.modal.appendChild(link_dialog);
-
-        /** append controller */
-        context.element.relative.appendChild(link_controller);
-
-        /** link event */
-        core.plugins.anchor.initEvent.call(core, 'link', link_dialog);
-        contextLink.focusElement = context.anchor.caller.link.urlInput;
-
-        /** empty memory */
-        link_dialog = null, link_controller = null;
-    },
-
-    /** dialog */
-    setDialog: function (core) {
-        const lang = core.lang;
-        const dialog = core.util.createElement('DIV');
-        const icons = core.icons;
-
-        dialog.className = 'se-dialog-content';
-        dialog.style.display = 'none';
-        let html = '' +
-            '<form>' +
-                '<div class="se-dialog-header">' +
-                    '<button type="button" data-command="close" class="se-btn se-dialog-close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
-                        icons.cancel +
-                    '</button>' +
-                    '<span class="se-modal-title">' + lang.dialogBox.linkBox.title + '</span>' +
-                '</div>' +
-                core.context.anchor.forms.innerHTML +
-                '<div class="se-dialog-footer">' +
-                    '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
-                '</div>' +
-            '</form>';
-
-        dialog.innerHTML = html;
-        return dialog;
-    },
-
-    /** modify controller button */
-    setController_LinkButton: function (core) {
-        const lang = core.lang;
-        const icons = core.icons;
-        const link_btn = core.util.createElement('DIV');
-
-        link_btn.className = 'se-controller se-controller-link';
-        link_btn.innerHTML = '' +
-            '<div class="se-arrow se-arrow-up"></div>' +
-            '<div class="link-content"><span><a target="_blank" href=""></a>&nbsp;</span>' +
-                '<div class="se-btn-group">' +
-                    '<button type="button" data-command="update" tabindex="-1" class="se-btn se-tooltip">' +
-                        icons.edit +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="unlink" tabindex="-1" class="se-btn se-tooltip">' +
-                        icons.unlink +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.unlink + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="delete" tabindex="-1" class="se-btn se-tooltip">' +
-                        icons.delete +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' +
-                    '</button>' +
-                '</div>' +
-            '</div>';
-
-        return link_btn;
-    },
-
-    /**
-     * @Override dialog
-     */
-    open: function () {
-        this.plugins.dialog.open.call(this, 'link', 'link' === this.currentControllerName);
-    },
-
-    submit: function (e) {
-        this.showLoading();
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        try {
-            const oA = this.plugins.anchor.createAnchor.call(this, this.context.anchor.caller.link, false);
-            if (oA === null) return;
-    
-            if (!this.context.dialog.updateModal) {
-                const selectedFormats = this.getSelectedElements();
-                if (selectedFormats.length > 1) {
-                    const oFormat = this.util.createElement(selectedFormats[0].nodeName);
-                    oFormat.appendChild(oA);
-                    if (!this.insertNode(oFormat, null, true)) return;
-                } else {
-                    if (!this.insertNode(oA, null, true)) return;
-                }
-    
-                this.setRange(oA.childNodes[0], 0, oA.childNodes[0], oA.textContent.length);
-            } else {
-                // set range
-                const textNode = this.context.link._linkAnchor.childNodes[0];
-                this.setRange(textNode, 0, textNode, textNode.textContent.length);
-            }
-        } finally {
-            this.plugins.dialog.close.call(this);
-            this.closeLoading();
-            // history stack
-            this.history.push(false);
-        }
-
-        return false;
-    },
-
-    /**
-     * @Override core
-     */
-    active: function (element) {
-        if (!element) {
-            if (this.controllerArray.indexOf(this.context.link.linkController) > -1) {
-                this.controllersOff();
-            }
-        } else if (this.util.isAnchor(element) && element.getAttribute('data-image-link') === null) {
-            if (this.controllerArray.indexOf(this.context.link.linkController) < 0) {
-                this.plugins.link.call_controller.call(this, element);
-            }
-            return true;
-        }
-
-        return false;
-    },
-
-    /**
-     * @Override dialog
-     */
-    on: function (update) {
-        this.plugins.anchor.on.call(this, this.context.anchor.caller.link, update);
-    },
-
-    call_controller: function (selectionATag) {
-        this.editLink = this.context.link._linkAnchor = this.context.anchor.caller.link.linkAnchor = selectionATag;
-        const linkBtn = this.context.link.linkController;
-        const link = linkBtn.querySelector('a');
-
-        link.href = selectionATag.href;
-        link.title = selectionATag.textContent;
-        link.textContent = selectionATag.textContent;
-
-        this.util.addClass(selectionATag, 'on');
-        this.setControllerPosition(linkBtn, selectionATag, 'bottom', {left: 0, top: 0});
-        this.controllersOn(linkBtn, selectionATag, 'link', this.util.removeClass.bind(this.util, this.context.link._linkAnchor, 'on'));
-    },
-
-    onClick_linkController: function (e) {
-        e.stopPropagation();
-
-        const command = e.target.getAttribute('data-command') || e.target.parentNode.getAttribute('data-command');
-        if (!command) return;
-
-        e.preventDefault();
-
-        if (/update/.test(command)) {
-            this.plugins.dialog.open.call(this, 'link', true);
-        } else if (/unlink/.test(command)) {
-            const sc = this.util.getChildElement(this.context.link._linkAnchor, function (current) { return current.childNodes.length === 0 || current.nodeType === 3; }, false);
-            const ec = this.util.getChildElement(this.context.link._linkAnchor, function (current) { return current.childNodes.length === 0 || current.nodeType === 3; }, true);
-            this.setRange(sc, 0, ec, ec.textContent.length);
-            this.nodeChange(null, null, ['A'], false);
-        } else {
-            /** delete */
-            this.util.removeItem(this.context.link._linkAnchor);
-            this.context.anchor.caller.link.linkAnchor = null;
-            this.focus();
-
-            // history stack
-            this.history.push(false);
-        }
-
-        this.controllersOff();
-    },
-
-    /**
-     * @Override dialog
-     */
-    init: function () {
-        this.context.link.linkController.style.display = 'none';
-        this.plugins.anchor.init.call(this, this.context.anchor.caller.link);
-    }
-};

package/src/plugins/dialog/math.js

@@ -1,295 +0,0 @@
-'use strict';
-
-import dialog from '../modules/dialog';
-
-const KATEX_WEBSITE = "https://katex.org/docs/supported.html";
-
-export default {
-    name: 'math',
-    display: 'dialog',
-    add: function (core) {
-        core.addModule([dialog]);
-
-        const context = core.context;
-        context.math = {
-            focusElement: null, // @Override dialog // This element has focus when the dialog is opened.
-            previewElement: null,
-            fontSizeElement: null,
-            defaultFontSize: '',
-            _mathExp: null
-        };
-
-        /** math dialog */
-        let math_dialog = this.setDialog(core);
-        context.math.modal = math_dialog;
-        context.math.focusElement = math_dialog.querySelector('.se-math-exp');
-        context.math.previewElement = math_dialog.querySelector('.se-math-preview');
-        context.math.fontSizeElement = math_dialog.querySelector('.se-math-size');
-        context.math.focusElement.addEventListener(core.util.isIE ? 'textinput' : 'input', this._renderMathExp.bind(core, context.math), false);
-        context.math.fontSizeElement.addEventListener('change', function (e) { this.fontSize = e.target.value; }.bind(context.math.previewElement.style), false);
-
-        /** math controller */
-        let math_controller = this.setController_MathButton(core);
-        context.math.mathController = math_controller;
-        context.math._mathExp = null;
-
-        /** add event listeners */
-        math_dialog.querySelector('form').addEventListener('submit', this.submit.bind(core), false);
-        math_controller.addEventListener('click', this.onClick_mathController.bind(core));
-        context.math.previewElement.style.fontSize = context.math.defaultFontSize;
-
-        /** append html */
-        context.dialog.modal.appendChild(math_dialog);
-        context.element.relative.appendChild(math_controller);
-
-        /** empty memory */
-        math_dialog = null, math_controller = null;
-    },
-
-    /** dialog */
-    setDialog: function (core) {
-        const lang = core.lang;
-        const dialog = core.util.createElement('DIV');
-        const fontSize = core.options.mathFontSize;
-        let defaultFontSize = fontSize[0].value;
-
-        dialog.className = 'se-dialog-content';
-        dialog.style.display = 'none';
-        let html = '' +
-        '<form>' +
-            '<div class="se-dialog-header">' +
-                '<button type="button" data-command="close" class="se-btn se-dialog-close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
-                    core.icons.cancel +
-                '</button>' +
-                '<span class="se-modal-title">' + lang.dialogBox.mathBox.title + '</span>' +
-            '</div>' +
-            '<div class="se-dialog-body">' +
-                '<div class="se-dialog-form">' +
-                    '<label>' + lang.dialogBox.mathBox.inputLabel + ' (<a href="' + KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</label>' +
-                    '<textarea class="se-input-form se-math-exp" type="text"></textarea>' +
-                '</div>' +
-                '<div class="se-dialog-form">' +
-                    '<label>' + lang.dialogBox.mathBox.fontSizeLabel + '</label>' +
-                    '<select class="se-input-select se-math-size">';
-                    for (let i = 0, len = fontSize.length, f; i < len; i++) {
-                        f = fontSize[i];
-                        if (f.default) defaultFontSize = f.value;
-                        html += '<option value="' + f.value + '"' + (f.default ? ' selected' : '') + '>' + f.text + '</option>';
-                    }
-                html += '</select>' +
-                '</div>' +
-                '<div class="se-dialog-form">' +
-                    '<label>' + lang.dialogBox.mathBox.previewLabel + '</label>' +
-                    '<p class="se-math-preview"></p>' +
-                '</div>' +
-            '</div>' +
-            '<div class="se-dialog-footer">' +
-                '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
-            '</div>' +
-        '</form>';
-
-        core.context.math.defaultFontSize = defaultFontSize;
-        dialog.innerHTML = html;
-        return dialog;
-    },
-
-    /** modify controller button */
-    setController_MathButton: function (core) {
-        const lang = core.lang;
-        const math_btn = core.util.createElement('DIV');
-
-        math_btn.className = 'se-controller se-controller-link';
-        math_btn.innerHTML = '' +
-        '<div class="se-arrow se-arrow-up"></div>' +
-        '<div class="link-content">' +
-            '<div class="se-btn-group">' +
-                '<button type="button" data-command="update" tabindex="-1" class="se-btn se-tooltip">' +
-                    core.icons.edit +
-                    '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' +
-                '</button>' +
-                '<button type="button" data-command="delete" tabindex="-1" class="se-btn se-tooltip">' +
-                    core.icons.delete +
-                    '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' +
-                '</button>' +
-            '</div>' +
-        '</div>' +
-        '';
-
-        return math_btn;
-    },
-
-    /**
-     * @Required @Override dialog
-     */
-    open: function () {
-        this.plugins.dialog.open.call(this, 'math', 'math' === this.currentControllerName);
-    },
-
-    /**
-     * @Override core - managedTagsInfo
-     */
-    managedTags: function () {
-        return {
-            className: 'katex',
-            method: function (element) {
-                if (!element.getAttribute('data-exp') || !this.options.katex) return;
-                const dom = this._d.createRange().createContextualFragment(this.plugins.math._renderer.call(this, this.util.HTMLDecoder(element.getAttribute('data-exp'))));
-                element.innerHTML = dom.querySelector('.katex').innerHTML;
-                element.setAttribute('contenteditable', false);
-            }
-        };
-    },
-
-    _renderer: function (exp) {
-        let result = '';
-        try {
-            this.util.removeClass(this.context.math.focusElement, 'se-error');
-            result = this.options.katex.src.renderToString(exp, {throwOnError: true, displayMode: true});
-        } catch(error) {
-            this.util.addClass(this.context.math.focusElement, 'se-error');
-            result = '<span class="se-math-katex-error">Katex syntax error. (Refer <a href="' + KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</span>';
-            console.warn('[SUNEDITOR.math.Katex.error] ', error);
-        }
-        return result;
-    },
-
-    _renderMathExp: function (contextMath, e) {
-        contextMath.previewElement.innerHTML = this.plugins.math._renderer.call(this, e.target.value);
-    },
-
-    submit: function (e) {
-        this.showLoading();
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const submitAction = function () {
-            if (this.context.math.focusElement.value.trim().length === 0) return false;
-
-            const contextMath = this.context.math;
-            const mathExp = contextMath.focusElement.value;
-            const katexEl = contextMath.previewElement.querySelector('.katex');
-
-            if (!katexEl) return false;
-            katexEl.className = '__se__katex ' + katexEl.className;
-            katexEl.setAttribute('contenteditable', false);
-            katexEl.setAttribute('data-exp', this.util.HTMLEncoder(mathExp));
-            katexEl.setAttribute('data-font-size', contextMath.fontSizeElement.value);
-            katexEl.style.fontSize = contextMath.fontSizeElement.value;
-
-            if (!this.context.dialog.updateModal) {
-                const selectedFormats = this.getSelectedElements();
-
-                if (selectedFormats.length > 1) {
-                    const oFormat = this.util.createElement(selectedFormats[0].nodeName);
-                    oFormat.appendChild(katexEl);
-                    if (!this.insertNode(oFormat, null, true)) return false;
-                } else {
-                    if (!this.insertNode(katexEl, null, true)) return false;
-                }
-
-                const empty = this.util.createTextNode(this.util.zeroWidthSpace);
-                katexEl.parentNode.insertBefore(empty, katexEl.nextSibling);
-                this.setRange(katexEl, 0, katexEl, 1);
-            } else {
-                const containerEl = this.util.getParentElement(contextMath._mathExp, '.katex');
-                containerEl.parentNode.replaceChild(katexEl, containerEl);
-                this.setRange(katexEl, 0, katexEl, 1);
-            }
-
-            contextMath.focusElement.value = '';
-            contextMath.fontSizeElement.value = '1em';
-            contextMath.previewElement.style.fontSize = '1em';
-            contextMath.previewElement.innerHTML = '';
-
-            return true;
-        }.bind(this);
-
-        try {
-            if (submitAction()) {
-                this.plugins.dialog.close.call(this);
-                // history stack
-                this.history.push(false);
-            }
-        } catch (e) {
-            this.plugins.dialog.close.call(this);
-        } finally {
-            this.closeLoading();
-        }
-
-        return false;
-    },
-
-    active: function (element) {
-        if (!element) {
-            if (this.controllerArray.indexOf(this.context.math.mathController) > -1) {
-                this.controllersOff();
-            }
-        } else if (element.getAttribute('data-exp')) {
-            if (this.controllerArray.indexOf(this.context.math.mathController) < 0) {
-                this.setRange(element, 0, element, 1);
-                this.plugins.math.call_controller.call(this, element);
-            }
-            return true;
-        }
-
-        return false;
-    },
-
-    on: function (update) {
-        if (!update) {
-            this.plugins.math.init.call(this);
-        } else {
-            const contextMath = this.context.math;
-            if (contextMath._mathExp) {
-                const exp = this.util.HTMLDecoder(contextMath._mathExp.getAttribute('data-exp'));
-                const fontSize = contextMath._mathExp.getAttribute('data-font-size') || '1em';
-                this.context.dialog.updateModal = true;
-                contextMath.focusElement.value = exp;
-                contextMath.fontSizeElement.value = fontSize;
-                contextMath.previewElement.innerHTML = this.plugins.math._renderer.call(this, exp);
-                contextMath.previewElement.style.fontSize = fontSize;
-            }
-        }
-    },
-
-    call_controller: function (mathTag) {
-        this.context.math._mathExp = mathTag;
-        const mathBtn = this.context.math.mathController;
-
-        this.setControllerPosition(mathBtn, mathTag, 'bottom', {left: 0, top: 0});
-        this.controllersOn(mathBtn, mathTag, 'math');
-    },
-
-    onClick_mathController: function (e) {
-        e.stopPropagation();
-
-        const command = e.target.getAttribute('data-command') || e.target.parentNode.getAttribute('data-command');
-        if (!command) return;
-
-        e.preventDefault();
-
-        if (/update/.test(command)) {
-            this.context.math.focusElement.value = this.util.HTMLDecoder(this.context.math._mathExp.getAttribute('data-exp'));
-            this.plugins.dialog.open.call(this, 'math', true);
-        } else {
-            /** delete */
-            this.util.removeItem(this.context.math._mathExp);
-            this.context.math._mathExp = null;
-            this.focus();
-
-            // history stack
-            this.history.push(false);
-        }
-
-        this.controllersOff();
-    },
-
-    init: function () {
-        const contextMath = this.context.math;
-        contextMath.mathController.style.display = 'none';
-        contextMath._mathExp = null;
-        contextMath.focusElement.value = '';
-        contextMath.previewElement.innerHTML = '';
-    }
-};