@leafer-in/text-editor 1.8.0 → 1.9.0

package/dist/text-editor.cjs

@@ -1,109 +1,94 @@
-'use strict';
+"use strict";
 
-var core = require('@leafer-ui/core');
-var editor = require('@leafer-in/editor');
+var core = require("@leafer-ui/core");
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+var editor = require("@leafer-in/editor");
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
 const textCaseMap = {
-    'none': 'none',
-    'title': 'capitalize',
-    'upper': 'uppercase',
-    'lower': 'lowercase',
-    'small-caps': 'small-caps'
+    none: "none",
+    title: "capitalize",
+    upper: "uppercase",
+    lower: "lowercase",
+    "small-caps": "small-caps"
 };
+
 const verticalAlignMap = {
-    'top': 'flex-start',
-    'middle': 'center',
-    'bottom': 'flex-end'
+    top: "flex-start",
+    middle: "center",
+    bottom: "flex-end"
 };
+
 const textDecorationMap = {
-    'none': 'none',
-    'under': 'underline',
-    'delete': 'line-through',
-    'under-delete': 'underline line-through'
+    none: "none",
+    under: "underline",
+    delete: "line-through",
+    "under-delete": "underline line-through"
 };
+
 function updateStyle(textDom, text, textScale) {
-    const { style } = textDom;
-    const { fill, padding, textWrap, textOverflow, textDecoration } = text;
+    const {style: style} = textDom;
+    const {fill: fill, padding: padding, textWrap: textWrap, textOverflow: textOverflow, textDecoration: textDecoration} = text;
     style.fontFamily = text.fontFamily;
-    style.fontSize = text.fontSize * textScale + 'px';
+    style.fontSize = text.fontSize * textScale + "px";
     setFill(style, fill);
-    style.fontStyle = text.italic ? 'italic' : 'normal';
+    style.fontStyle = text.italic ? "italic" : "normal";
     style.fontWeight = text.fontWeight;
     let decorationType;
-    if (typeof textDecoration === 'object') {
+    if (core.isObject(textDecoration)) {
         decorationType = textDecoration.type;
-        if (textDecoration.color)
-            style.textDecorationColor = core.ColorConvert.string(textDecoration.color);
-    }
-    else {
+        if (textDecoration.color) style.textDecorationColor = core.ColorConvert.string(textDecoration.color);
+    } else {
         decorationType = textDecoration;
     }
     style.textDecoration = textDecorationMap[decorationType];
     style.textTransform = textCaseMap[text.textCase];
-    style.textAlign = text.textAlign === 'both' ? 'justify' : text.textAlign;
-    style.display = 'flex';
-    style.flexDirection = 'column';
+    style.textAlign = text.textAlign === "both" ? "justify" : text.textAlign;
+    style.display = "flex";
+    style.flexDirection = "column";
     style.justifyContent = verticalAlignMap[text.verticalAlign];
-    style.lineHeight = (text.__.__lineHeight || 0) * textScale + 'px';
-    style.letterSpacing = (text.__.__letterSpacing || 0) * textScale + 'px';
-    style.whiteSpace = (textWrap === 'none' || text.__.__autoWidth) ? 'nowrap' : 'normal';
-    style.wordBreak = textWrap === 'break' ? 'break-all' : 'normal';
-    style.textIndent = (text.paraIndent || 0) * textScale + 'px';
-    style.padding = padding instanceof Array ? padding.map(item => item * textScale + 'px').join(' ') : (padding || 0) * textScale + 'px';
-    style.textOverflow = textOverflow === 'show' ? '' : (textOverflow === 'hide' ? 'clip' : textOverflow);
+    style.lineHeight = (text.__.__lineHeight || 0) * textScale + "px";
+    style.letterSpacing = (text.__.__letterSpacing || 0) * textScale + "px";
+    style.whiteSpace = textWrap === "none" || text.__.__autoWidth ? "nowrap" : "normal";
+    style.wordBreak = textWrap === "break" ? "break-all" : "normal";
+    style.textIndent = (text.paraIndent || 0) * textScale + "px";
+    style.padding = core.isArray(padding) ? padding.map(item => item * textScale + "px").join(" ") : (padding || 0) * textScale + "px";
+    style.textOverflow = textOverflow === "show" ? "" : textOverflow === "hide" ? "clip" : textOverflow;
 }
+
 function setFill(style, fill) {
-    let color = 'black';
-    if (fill instanceof Array)
-        fill = fill[0];
-    if (typeof fill === 'object') {
+    let color = "black";
+    if (core.isArray(fill)) fill = fill[0];
+    if (core.isObject(fill)) {
         switch (fill.type) {
-            case 'solid':
-                color = core.ColorConvert.string(fill.color);
-                break;
-            case 'image':
-                break;
-            case 'linear':
-            case 'radial':
-            case 'angular':
-                const stop = fill.stops[0];
-                color = core.ColorConvert.string(typeof stop === 'string' ? stop : stop.color);
-                break;
-            default:
-                if (fill.r !== undefined)
-                    color = core.ColorConvert.string(fill);
+          case "solid":
+            color = core.ColorConvert.string(fill.color);
+            break;
+
+          case "image":
+            break;
+
+          case "linear":
+          case "radial":
+          case "angular":
+            const stop = fill.stops[0];
+            color = core.ColorConvert.string(core.isString(stop) ? stop : stop.color);
+            break;
+
+          default:
+            if (!core.isUndefined(fill.r)) color = core.ColorConvert.string(fill);
         }
-    }
-    else {
+    } else {
         color = fill;
     }
     style.color = color;
@@ -117,36 +102,34 @@ exports.TextEditor = class TextEditor extends editor.InnerEditor {
         };
         this.eventIds = [];
     }
-    get tag() { return 'TextEditor'; }
+    get tag() {
+        return "TextEditor";
+    }
     onLoad() {
-        const { editor } = this;
-        const { config } = editor.app;
+        const {editor: editor} = this;
+        const {config: config} = editor.app;
         const text = this.editTarget;
         text.textEditing = true;
         this.isHTMLText = !(text instanceof core.Text);
         this._keyEvent = config.keyEvent;
         config.keyEvent = false;
-        const div = this.editDom = document.createElement('div');
-        const { style } = div;
-        div.contentEditable = 'true';
-        style.position = 'fixed';
-        style.transformOrigin = 'left top';
-        style.boxSizing = 'border-box';
+        const div = this.editDom = document.createElement("div");
+        const {style: style} = div;
+        div.contentEditable = "true";
+        style.position = "fixed";
+        style.transformOrigin = "left top";
+        style.boxSizing = "border-box";
         this.isHTMLText ? div.innerHTML = String(text.text) : div.innerText = String(text.text);
-        const { view } = editor.app;
+        const {view: view} = editor.app;
         (this.inBody = view instanceof HTMLCanvasElement) ? document.body.appendChild(div) : view.appendChild(div);
-        this.eventIds = [
-            editor.app.on_(core.PointerEvent.DOWN, (e) => {
-                let { target } = e.origin, find;
-                while (target) {
-                    if (target === div)
-                        find = true;
-                    target = target.parentElement;
-                }
-                if (!find)
-                    editor.closeInnerEditor();
-            })
-        ];
+        this.eventIds = [ editor.app.on_(core.PointerEvent.DOWN, e => {
+            let {target: target} = e.origin, find;
+            while (target) {
+                if (target === div) find = true;
+                target = target.parentElement;
+            }
+            if (!find) editor.closeInnerEditor();
+        }) ];
         this.onFocus = this.onFocus.bind(this);
         this.onInput = this.onInput.bind(this);
         this.onPaste = this.onPaste.bind(this);
@@ -155,14 +138,13 @@ exports.TextEditor = class TextEditor extends editor.InnerEditor {
         div.addEventListener("focus", this.onFocus);
         div.addEventListener("input", this.onInput);
         div.addEventListener("paste", this.onPaste);
-        window.addEventListener('keydown', this.onKeydown);
-        window.addEventListener('scroll', this.onUpdate);
+        window.addEventListener("keydown", this.onKeydown);
+        window.addEventListener("scroll", this.onUpdate);
         const selection = window.getSelection();
         const range = document.createRange();
         if (this.config.selectAll) {
             range.selectNodeContents(div);
-        }
-        else {
+        } else {
             const node = div.childNodes[0];
             range.setStartAfter(node);
             range.setEndAfter(node);
@@ -172,19 +154,18 @@ exports.TextEditor = class TextEditor extends editor.InnerEditor {
         selection.addRange(range);
     }
     onInput() {
-        const { editDom } = this;
+        const {editDom: editDom} = this;
         this.editTarget.text = this.isHTMLText ? editDom.innerHTML : editDom.innerText;
     }
     onFocus() {
-        this.editDom.style.outline = 'none';
+        this.editDom.style.outline = "none";
     }
     onKeydown(e) {
-        if (e.code === 'Escape')
-            this.editor.closeInnerEditor();
-        if (e.key === 'Enter') {
+        if (e.code === "Escape") this.editor.closeInnerEditor();
+        if (e.key === "Enter") {
             e.preventDefault();
-            const br = document.createElement('br');
-            const zwsp = document.createTextNode('\u200B');
+            const br = document.createElement("br");
+            const zwsp = document.createTextNode("​");
             const selection = window.getSelection();
             const range = selection.getRangeAt(0);
             range.deleteContents();
@@ -196,23 +177,19 @@ exports.TextEditor = class TextEditor extends editor.InnerEditor {
         }
     }
     onPaste(event) {
-        if (this.isHTMLText)
-            return;
+        if (this.isHTMLText) return;
         event.preventDefault();
         const clipboardData = event.clipboardData;
-        if (!clipboardData)
-            return;
-        let text = clipboardData.getData('text/plain').replace(/\r\n?/g, '\n');
+        if (!clipboardData) return;
+        let text = clipboardData.getData("text/plain").replace(/\r\n?/g, "\n");
         const selection = window.getSelection();
-        if (!selection || !selection.rangeCount)
-            return;
+        if (!selection || !selection.rangeCount) return;
         const range = selection.getRangeAt(0);
         range.deleteContents();
-        const lines = text.split('\n');
+        const lines = text.split("\n");
         const fragment = document.createDocumentFragment();
         lines.forEach((line, index) => {
-            if (index > 0)
-                fragment.appendChild(document.createElement('br'));
+            if (index > 0) fragment.appendChild(document.createElement("br"));
             fragment.appendChild(document.createTextNode(line));
         });
         range.insertNode(fragment);
@@ -222,27 +199,28 @@ exports.TextEditor = class TextEditor extends editor.InnerEditor {
         this.onInput();
     }
     onUpdate() {
-        const { editTarget: text } = this;
+        const {editTarget: text} = this;
         let textScale = 1;
         if (!this.isHTMLText) {
-            const { scaleX, scaleY } = text.worldTransform;
+            const {scaleX: scaleX, scaleY: scaleY} = text.worldTransform;
             textScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
             const fontSize = text.fontSize * textScale;
-            if (fontSize < 12)
-                textScale *= 12 / text.fontSize;
+            if (fontSize < 12) textScale *= 12 / text.fontSize;
         }
         this.textScale = textScale;
-        let { width, height } = text, offsetX = 0, offsetY = 0;
+        let {width: width, height: height} = text, offsetX = 0, offsetY = 0;
         width *= textScale, height *= textScale;
         const data = text.__;
         if (data.__autoWidth) {
             width += 20;
             if (data.autoSizeAlign) {
                 switch (data.textAlign) {
-                    case 'center':
-                        offsetX = -width / 2;
-                        break;
-                    case 'right': offsetX = -width;
+                  case "center":
+                    offsetX = -width / 2;
+                    break;
+
+                  case "right":
+                    offsetX = -width;
                 }
             }
         }
@@ -250,45 +228,44 @@ exports.TextEditor = class TextEditor extends editor.InnerEditor {
             height += 20;
             if (data.autoSizeAlign) {
                 switch (data.verticalAlign) {
-                    case 'middle':
-                        offsetY = -height / 2;
-                        break;
-                    case 'bottom': offsetY = -height;
+                  case "middle":
+                    offsetY = -height / 2;
+                    break;
+
+                  case "bottom":
+                    offsetY = -height;
                 }
             }
         }
-        const { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
-        const { a, b, c, d, e, f } = new core.Matrix(text.worldTransform).scale(1 / textScale).translateInner(offsetX, offsetY);
-        const { style } = this.editDom;
+        const {x: x, y: y} = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
+        const {a: a, b: b, c: c, d: d, e: e, f: f} = new core.Matrix(text.worldTransform).scale(1 / textScale).translateInner(offsetX, offsetY);
+        const {style: style} = this.editDom;
         style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
-        style.left = x + 'px';
-        style.top = y + 'px';
-        style.width = width + 'px';
-        style.height = height + 'px';
+        style.left = x + "px";
+        style.top = y + "px";
+        style.width = width + "px";
+        style.height = height + "px";
         this.isHTMLText || updateStyle(this.editDom, text, textScale);
     }
     onUnload() {
-        const { editTarget: text, editor, editDom: dom } = this;
+        const {editTarget: text, editor: editor, editDom: dom} = this;
         if (text) {
             this.onInput();
-            if (text.text === '\n')
-                text.text = '';
+            if (text.text === "\n") text.text = "";
             text.textEditing = undefined;
-            if (editor.app)
-                editor.app.config.keyEvent = this._keyEvent;
+            if (editor.app) editor.app.config.keyEvent = this._keyEvent;
             editor.off_(this.eventIds);
             dom.removeEventListener("focus", this.onFocus);
             dom.removeEventListener("input", this.onInput);
             dom.removeEventListener("paste", this.onPaste);
-            window.removeEventListener('keydown', this.onKeydown);
-            window.removeEventListener('scroll', this.onUpdate);
+            window.removeEventListener("keydown", this.onKeydown);
+            window.removeEventListener("scroll", this.onUpdate);
             dom.remove();
             this.editDom = this.eventIds = undefined;
         }
     }
 };
-exports.TextEditor = __decorate([
-    editor.registerInnerEditor()
-], exports.TextEditor);
 
-core.Plugin.add('text-editor', 'editor');
+exports.TextEditor = __decorate([ editor.registerInnerEditor() ], exports.TextEditor);
+
+core.Plugin.add("text-editor", "editor");