lakelib 0.1.8 → 0.1.9

package/lib/lake.js

@@ -37,8 +37,12 @@ var checkCircle = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height
 
 var warningCircle = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z\"></path></svg>";
 
+var file$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z\"></path></svg>";
+
 var open = "<svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z\" fill=\"#000000\"/></svg>";
 
+var download = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z\"></path></svg>";
+
 var copy$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z\"></path></svg>";
 
 var remove = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z\"></path></svg>";
@@ -133,6 +137,8 @@ var hr$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\"
 
 var image$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z\"></path></svg>";
 
+var attachment = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M209.66,122.34a8,8,0,0,1,0,11.32l-82.05,82a56,56,0,0,1-79.2-79.21L147.67,35.73a40,40,0,1,1,56.61,56.55L105,193A24,24,0,1,1,71,159L154.3,74.38A8,8,0,1,1,165.7,85.6L82.39,170.31a8,8,0,1,0,11.27,11.36L192.93,81A24,24,0,1,0,159,47L59.76,147.68a40,40,0,1,0,56.53,56.62l82.06-82A8,8,0,0,1,209.66,122.34Z\"></path></svg>";
+
 var codeBlock$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M58.34,101.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,69.66,37.66L43.31,64,69.66,90.34a8,8,0,0,1-11.32,11.32Zm40,0a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0,0-11.32l-32-32A8,8,0,0,0,98.34,37.66L124.69,64,98.34,90.34A8,8,0,0,0,98.34,101.66ZM200,40H176a8,8,0,0,0,0,16h24V200H56V136a8,8,0,0,0-16,0v64a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Z\"></path></svg>";
 
 var table = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM40,112H80v32H40Zm56,0H216v32H96ZM216,64V96H40V64ZM40,160H80v32H40Zm176,32H96V160H216v32Z\"></path></svg>";
@@ -160,7 +166,9 @@ const icons = new Map([
     ['check', check],
     ['checkCircle', checkCircle],
     ['warningCircle', warningCircle],
+    ['file', file$1],
     ['open', open],
+    ['download', download],
     ['copy', copy$1],
     ['remove', remove],
     ['maximize', maximize],
@@ -208,6 +216,7 @@ const icons = new Map([
     ['unlink', unlink],
     ['hr', hr$1],
     ['image', image$1],
+    ['attachment', attachment],
     ['codeBlock', codeBlock$1],
     ['table', table],
 ]);
@@ -324,12 +333,29 @@ function denormalizeValue(value) {
 // Mac: mod+Z returns ⌘+Z
 // Windows / Linux: mod+Z returns Ctrl+Z
 function modifierText(value, userAgent) {
+    // for generating i18n files
+    if (typeof window === 'undefined') {
+        return value;
+    }
     userAgent = userAgent !== null && userAgent !== void 0 ? userAgent : navigator.userAgent;
     const isMac = userAgent.indexOf('Mac OS X') >= 0;
     const modText = isMac ? '⌘' : 'Ctrl';
     return value.replace(/(^|\+|\s)mod(\+|\s|$)/g, `$1${modText}$2`);
 }
 
+// Returns a human-readable file size string from a number.
+function fileSize(size) {
+    const units = ['KB', 'MB', 'GB'];
+    let i = 0;
+    size /= 1024;
+    while (size > 1024 && i < 2) {
+        size /= 1024;
+        i++;
+    }
+    const sizeString = size > 0 ? Math.max(size, 0.1).toFixed(1) : 0;
+    return `${sizeString} ${units[i]}`;
+}
+
 // Returns a property value of all CSS properties of an element
 function getCSS(element, propertyName) {
     const camelPropertyName = camelCase(propertyName);
@@ -2678,184 +2704,46 @@ function morph(node, otherNode, config = {}) {
     morphNormalizedContent(node.get(0), normalizedContent, ctx);
 }
 
-/**
-The MIT License (MIT)
-
-Copyright (c) 2016-present react-component
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-Repository: https://github.com/react-component/upload
-*/
-function getError(option, xhr) {
-    const msg = `Cannot ${option.method} ${option.action} ${xhr.status}'`;
-    const err = new Error(msg);
-    err.status = xhr.status;
-    err.method = option.method;
-    err.url = option.action;
-    return err;
-}
-function getBody(xhr) {
-    const text = xhr.responseText || xhr.response;
-    if (!text) {
-        return text;
-    }
-    try {
-        return JSON.parse(text);
-    }
-    catch (e) {
-        return text;
-    }
-}
-function request(option) {
-    const xhr = new XMLHttpRequest();
-    if (option.onProgress && xhr.upload) {
-        xhr.upload.onprogress = (e) => {
-            if (e.total > 0) {
-                e.percent = (e.loaded / e.total) * 100;
-            }
-            if (option.onProgress) {
-                option.onProgress(e);
+// Returns an object that indicates the specified node's position relative to the viewport.
+function nodeAndView(node) {
+    const nativeNode = node.get(0);
+    const rect = nativeNode.getBoundingClientRect();
+    let left = rect.left;
+    let right = rect.right;
+    let top = rect.top;
+    let bottom = rect.bottom;
+    let viewportWidth = window.innerWidth;
+    let viewportHeight = window.innerHeight;
+    const container = node.closestContainer();
+    if (container.length > 0) {
+        const viewport = container.closestScroller();
+        if (viewport.length > 0) {
+            const containerWrapper = container.parent();
+            if (containerWrapper.length > 0) {
+                const nativeContainerWrapper = containerWrapper.get(0);
+                const offsetLeft = nativeContainerWrapper.offsetLeft - window.scrollX;
+                const offsetTop = nativeContainerWrapper.offsetTop - window.scrollY;
+                left -= offsetLeft;
+                right -= offsetLeft;
+                top -= offsetTop;
+                bottom -= offsetTop;
             }
-        };
-    }
-    const formData = new FormData();
-    const data = option.data || {};
-    Object.keys(data).forEach(key => {
-        const value = data[key];
-        // support key-value array data
-        if (Array.isArray(value)) {
-            value.forEach(item => {
-                // { list: [ 11, 22 ] }
-                // formData.append('list[]', 11);
-                formData.append(`${key}[]`, item);
-            });
-            return;
+            const nativeViewport = viewport.get(0);
+            const viewportRect = nativeViewport.getBoundingClientRect();
+            viewportWidth = viewportRect.width;
+            viewportHeight = viewportRect.height;
         }
-        formData.append(key, value);
-    });
-    const filename = option.filename || 'file';
-    if (option.file instanceof Blob) {
-        formData.append(filename, option.file, option.file.name);
-    }
-    else {
-        formData.append(filename, option.file);
     }
-    xhr.onerror = (e) => {
-        if (option.onError) {
-            option.onError(e);
-        }
+    const position = {
+        left,
+        right: viewportWidth - right,
+        top,
+        bottom: viewportHeight - bottom,
     };
-    xhr.onload = () => {
-        // allow success when 2xx status
-        // see https://github.com/react-component/upload/issues/34
-        if (xhr.status < 200 || xhr.status >= 300) {
-            if (!option.onError) {
-                return;
-            }
-            return option.onError(getError(option, xhr), getBody(xhr));
-        }
-        if (!option.onSuccess) {
-            return;
-        }
-        return option.onSuccess(getBody(xhr), xhr);
-    };
-    xhr.open(option.method, option.action, true);
-    // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179
-    if (option.withCredentials && 'withCredentials' in xhr) {
-        xhr.withCredentials = true;
-    }
-    const headers = option.headers || {};
-    // when set headers['X-Requested-With'] = null , can close default XHR header
-    // see https://github.com/react-component/upload/issues/33
-    if (headers['X-Requested-With'] !== null) {
-        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-    }
-    Object.keys(headers).forEach(h => {
-        if (headers[h] !== null) {
-            xhr.setRequestHeader(h, headers[h]);
-        }
-    });
-    xhr.send(formData);
-    return xhr;
+    return position;
 }
 
-// String
-
-var index = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    appendDeepest: appendDeepest,
-    camelCase: camelCase,
-    changeTagName: changeTagName,
-    debug: debug,
-    denormalizeValue: denormalizeValue,
-    encode: encode,
-    fixNumberedList: fixNumberedList,
-    getCSS: getCSS,
-    getDeepest: getDeepest,
-    inString: inString,
-    mergeNodes: mergeNodes,
-    modifierText: modifierText,
-    morph: morph,
-    normalizeValue: normalizeValue,
-    parseStyle: parseStyle,
-    query: query,
-    removeBr: removeBr,
-    removeZWS: removeZWS,
-    request: request,
-    safeTemplate: safeTemplate,
-    setBlockIndent: setBlockIndent,
-    splitNodes: splitNodes,
-    template: template,
-    toHex: toHex,
-    toNodeList: toNodeList,
-    wrapNodeList: wrapNodeList
-});
-
-class Fragment {
-    constructor(fragment) {
-        this.fragment = fragment !== null && fragment !== void 0 ? fragment : document.createDocumentFragment();
-    }
-    // Returns the descendants of the fragment which are selected by the specified CSS selector.
-    find(selector) {
-        const nodeList = [];
-        let child = new Nodes(this.fragment.firstChild);
-        while (child.length > 0) {
-            if (child.matches(selector)) {
-                nodeList.push(child.get(0));
-            }
-            else if (child.isElement) {
-                child.find(selector).each(node => {
-                    nodeList.push(node);
-                });
-            }
-            child = child.next();
-        }
-        return new Nodes(nodeList);
-    }
-    // Inserts the specified node as the last child.
-    append(node) {
-        node.each(nativeNode => {
-            this.fragment.appendChild(nativeNode);
-        });
-    }
-}
+const boxInstances = new Map();
 
 const boxes = new Map();
 
@@ -2867,7 +2755,7 @@ const boxData = {};
 const effectData = {};
 const framework = safeTemplate `
   <span class="lake-box-strip"><br /></span>
-  <div class="lake-box-container" contenteditable="false" draggable="true"></div>
+  <div class="lake-box-container" contenteditable="false"></div>
   <span class="lake-box-strip"><br /></span>
 `;
 class Box {
@@ -2932,6 +2820,9 @@ class Box {
             debug(`Box '${this.name}' (id = ${this.node.id}) value:`);
             debug(this.value);
         });
+        if (this.type === 'block') {
+            container.attr('draggable', 'true');
+        }
     }
     // Returns the type of the box.
     get type() {
@@ -3009,28 +2900,235 @@ class Box {
         }
         debug(`Box '${this.name}' (id = ${this.node.id}) rendered`);
     }
-    // Destroys a rendered box.
-    unmount() {
-        for (const cleanup of effectData[this.node.id].cleanup) {
-            cleanup();
+    // Destroys a rendered box.
+    unmount() {
+        this.event.emit('blur');
+        for (const cleanup of effectData[this.node.id].cleanup) {
+            cleanup();
+        }
+        boxData[this.node.id] = {};
+        effectData[this.node.id].setup = [];
+        effectData[this.node.id].cleanup = [];
+        this.event.removeAllListeners();
+        this.node.empty();
+        debug(`Box '${this.name}' (id = ${this.node.id}) unmounted`);
+    }
+    // Returns a HTML string of the box.
+    getHTML() {
+        const component = boxes.get(this.name);
+        if (component === undefined) {
+            return '';
+        }
+        if (component.html === undefined) {
+            return this.node.outerHTML();
+        }
+        return component.html(this);
+    }
+}
+
+// Returns an already generated box instance or generates a new instance if it does not exist.
+function getBox(boxNode) {
+    if (typeof boxNode === 'string') {
+        return new Box(boxNode);
+    }
+    boxNode = query(boxNode);
+    const container = boxNode.closestContainer();
+    if (container.length === 0) {
+        return new Box(boxNode);
+    }
+    let instanceMap = boxInstances.get(container.id);
+    if (!instanceMap) {
+        instanceMap = new Map();
+        boxInstances.set(container.id, instanceMap);
+    }
+    let box = instanceMap.get(boxNode.id);
+    if (box) {
+        return box;
+    }
+    box = new Box(boxNode);
+    instanceMap.set(box.node.id, box);
+    return box;
+}
+
+/**
+The MIT License (MIT)
+
+Copyright (c) 2016-present react-component
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Repository: https://github.com/react-component/upload
+*/
+function getError(option, xhr) {
+    const msg = `Cannot ${option.method} ${option.action} ${xhr.status}'`;
+    const err = new Error(msg);
+    err.status = xhr.status;
+    err.method = option.method;
+    err.url = option.action;
+    return err;
+}
+function getBody(xhr) {
+    const text = xhr.responseText || xhr.response;
+    if (!text) {
+        return text;
+    }
+    try {
+        return JSON.parse(text);
+    }
+    catch (e) {
+        return text;
+    }
+}
+function request(option) {
+    const xhr = new XMLHttpRequest();
+    if (option.onProgress && xhr.upload) {
+        xhr.upload.onprogress = (e) => {
+            if (e.total > 0) {
+                e.percent = (e.loaded / e.total) * 100;
+            }
+            if (option.onProgress) {
+                option.onProgress(e);
+            }
+        };
+    }
+    const formData = new FormData();
+    const data = option.data || {};
+    Object.keys(data).forEach(key => {
+        const value = data[key];
+        // support key-value array data
+        if (Array.isArray(value)) {
+            value.forEach(item => {
+                // { list: [ 11, 22 ] }
+                // formData.append('list[]', 11);
+                formData.append(`${key}[]`, item);
+            });
+            return;
+        }
+        formData.append(key, value);
+    });
+    const filename = option.filename || 'file';
+    if (option.file instanceof Blob) {
+        formData.append(filename, option.file, option.file.name);
+    }
+    else {
+        formData.append(filename, option.file);
+    }
+    xhr.onerror = (e) => {
+        if (option.onError) {
+            option.onError(e);
+        }
+    };
+    xhr.onload = () => {
+        // allow success when 2xx status
+        // see https://github.com/react-component/upload/issues/34
+        if (xhr.status < 200 || xhr.status >= 300) {
+            if (!option.onError) {
+                return;
+            }
+            return option.onError(getError(option, xhr), getBody(xhr));
+        }
+        if (!option.onSuccess) {
+            return;
+        }
+        return option.onSuccess(getBody(xhr), xhr);
+    };
+    xhr.open(option.method, option.action, true);
+    // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179
+    if (option.withCredentials && 'withCredentials' in xhr) {
+        xhr.withCredentials = true;
+    }
+    const headers = option.headers || {};
+    // when set headers['X-Requested-With'] = null , can close default XHR header
+    // see https://github.com/react-component/upload/issues/33
+    if (headers['X-Requested-With'] !== null) {
+        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+    }
+    Object.keys(headers).forEach(h => {
+        if (headers[h] !== null) {
+            xhr.setRequestHeader(h, headers[h]);
+        }
+    });
+    xhr.send(formData);
+    return xhr;
+}
+
+// String
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    appendDeepest: appendDeepest,
+    camelCase: camelCase,
+    changeTagName: changeTagName,
+    debug: debug,
+    denormalizeValue: denormalizeValue,
+    encode: encode,
+    fileSize: fileSize,
+    fixNumberedList: fixNumberedList,
+    getBox: getBox,
+    getCSS: getCSS,
+    getDeepest: getDeepest,
+    inString: inString,
+    mergeNodes: mergeNodes,
+    modifierText: modifierText,
+    morph: morph,
+    nodeAndView: nodeAndView,
+    normalizeValue: normalizeValue,
+    parseStyle: parseStyle,
+    query: query,
+    removeBr: removeBr,
+    removeZWS: removeZWS,
+    request: request,
+    safeTemplate: safeTemplate,
+    setBlockIndent: setBlockIndent,
+    splitNodes: splitNodes,
+    template: template,
+    toHex: toHex,
+    toNodeList: toNodeList,
+    wrapNodeList: wrapNodeList
+});
+
+class Fragment {
+    constructor(fragment) {
+        this.fragment = fragment !== null && fragment !== void 0 ? fragment : document.createDocumentFragment();
+    }
+    // Returns the descendants of the fragment which are selected by the specified CSS selector.
+    find(selector) {
+        const nodeList = [];
+        let child = new Nodes(this.fragment.firstChild);
+        while (child.length > 0) {
+            if (child.matches(selector)) {
+                nodeList.push(child.get(0));
+            }
+            else if (child.isElement) {
+                child.find(selector).each(node => {
+                    nodeList.push(node);
+                });
+            }
+            child = child.next();
         }
-        boxData[this.node.id] = {};
-        effectData[this.node.id].setup = [];
-        effectData[this.node.id].cleanup = [];
-        this.event.removeAllListeners();
-        this.node.empty();
-        debug(`Box '${this.name}' (id = ${this.node.id}) unmounted`);
+        return new Nodes(nodeList);
     }
-    // Returns a HTML string of the box.
-    getHTML() {
-        const component = boxes.get(this.name);
-        if (component === undefined) {
-            return '';
-        }
-        if (component.html === undefined) {
-            return this.node.outerHTML();
-        }
-        return component.html(this);
+    // Inserts the specified node as the last child.
+    append(node) {
+        node.each(nativeNode => {
+            this.fragment.appendChild(nativeNode);
+        });
     }
 }
 
@@ -3440,7 +3538,7 @@ function toBookmark(range, bookmark) {
     }
     if (focus.length > 0 && anchor.length === 0) {
         if (focus.isBox) {
-            const box = new Box(focus);
+            const box = getBox(focus);
             if (box.getContainer().length === 0) {
                 box.render();
             }
@@ -3861,7 +3959,7 @@ function addMark(range, value) {
     if (range.isCollapsed) {
         if (range.isBox) {
             const boxNode = range.startNode.closest('lake-box');
-            const box = new Box(boxNode);
+            const box = getBox(boxNode);
             if (box.type === 'block') {
                 const newBlock = query('<p><br /></p>');
                 if (range.isBoxStart) {
@@ -4160,6 +4258,7 @@ var enUS = {
         fontColor: 'Font color',
         highlight: 'Highlight',
         image: 'Image',
+        file: 'File',
         removeColor: 'Remove color',
     },
     link: {
@@ -4181,6 +4280,10 @@ var enUS = {
         zoomOut: 'Zoom out',
         zoomIn: 'Zoom in',
     },
+    file: {
+        download: 'Download',
+        remove: 'Delete',
+    },
     codeBlock: {
         langType: 'Select language',
     },
@@ -4230,6 +4333,7 @@ var zhCN = {
         fontColor: '文字颜色',
         highlight: '文字背景',
         image: '图片',
+        file: '文件',
         removeColor: '默认',
     },
     link: {
@@ -4251,6 +4355,10 @@ var zhCN = {
         zoomOut: '缩小',
         zoomIn: '放大',
     },
+    file: {
+        download: '下载',
+        remove: '删除',
+    },
     codeBlock: {
         langType: '选择代码语言',
     },
@@ -4300,6 +4408,7 @@ var ja = {
         fontColor: '文字色',
         highlight: '文字の背景',
         image: '画像',
+        file: 'ファイル',
         removeColor: 'デフォルト',
     },
     link: {
@@ -4321,6 +4430,10 @@ var ja = {
         zoomOut: '縮小',
         zoomIn: '拡大',
     },
+    file: {
+        download: 'ダウンロード',
+        remove: '削除',
+    },
     codeBlock: {
         langType: 'コード言語を選択',
     },
@@ -4370,6 +4483,7 @@ var ko = {
         fontColor: '글자 색상',
         highlight: '글자 배경',
         image: '이미지',
+        file: '파일',
         removeColor: '기본색',
     },
     link: {
@@ -4391,6 +4505,10 @@ var ko = {
         zoomOut: '축소',
         zoomIn: '확대',
     },
+    file: {
+        download: '다운로드',
+        remove: '삭제',
+    },
     codeBlock: {
         langType: '코드언어 선택',
     },
@@ -4673,14 +4791,14 @@ class Dropdown {
     }
 }
 
-var version = "0.1.8";
+var version = "0.1.9";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
     if (range.commonAncestor.isOutside) {
         return null;
     }
-    const box = new Box(boxName);
+    const box = getBox(boxName);
     if (boxValue) {
         box.value = boxValue;
     }
@@ -4719,7 +4837,7 @@ function removeBox(range) {
     if (boxNode.length === 0) {
         return null;
     }
-    const box = new Box(boxNode);
+    const box = getBox(boxNode);
     if (box.type === 'block') {
         const paragraph = query('<p><br /></p>');
         boxNode.before(paragraph);
@@ -4823,20 +4941,20 @@ class Selection {
         return new Range();
     }
     // Adds the saved range to the native selection.
-    addRangeToNativeSelection() {
+    sync() {
         this.selection.removeAllRanges();
         this.selection.addRange(this.range.get());
     }
-    // Synchronizes the saved range with the range of the native selection.
-    syncByRange() {
+    // Updates the saved range with the range of the native selection.
+    updateByRange() {
         const newRange = this.getRangeFromNativeSelection();
         if (this.range.get() === newRange.get()) {
             return;
         }
         this.range = newRange;
     }
-    // Synchronizes the saved range with the range represented by the bookmark.
-    synByBookmark() {
+    // Updates the saved range with the range represented by the bookmark.
+    updateByBookmark() {
         const range = this.range;
         const container = this.container;
         const boxFocus = container.find('lake-box[focus]');
@@ -4845,7 +4963,7 @@ class Selection {
                 anchor: new Nodes(),
                 focus: boxFocus,
             });
-            this.addRangeToNativeSelection();
+            this.sync();
             return;
         }
         const anchor = container.find('lake-bookmark[type="anchor"]');
@@ -4854,7 +4972,7 @@ class Selection {
             anchor,
             focus,
         });
-        this.addRangeToNativeSelection();
+        this.sync();
     }
     getAppliedItems() {
         const appliedItems = [];
@@ -4961,8 +5079,6 @@ class Command {
     }
 }
 
-const boxInstances = new Map();
-
 // Saves and controls the history of the value of the editor.
 // Example:
 // before initialization: value: 'a', list: [], index: 0, canUndo: false
@@ -5040,7 +5156,7 @@ class History {
         const range = this.selection.range;
         const newContainer = this.container.clone(true);
         newContainer.find('lake-box').each(nativeNode => {
-            const box = new Box(nativeNode);
+            const box = getBox(nativeNode);
             box.getContainer().empty();
         });
         if (range.commonAncestor.isOutside) {
@@ -5090,7 +5206,7 @@ class History {
             }
             this.index--;
         }
-        this.selection.synByBookmark();
+        this.selection.updateByBookmark();
         debug(`History undone, the last index is ${this.index}`);
     }
     redo() {
@@ -5112,7 +5228,7 @@ class History {
                 break;
             }
         }
-        this.selection.synByBookmark();
+        this.selection.updateByBookmark();
         debug(`History redone, the last index is ${this.index}`);
     }
     continue() {
@@ -5219,17 +5335,17 @@ class BoxManager {
     getNames() {
         return Array.from(boxes.keys());
     }
-    getInstances(editor) {
-        let instanceMap = boxInstances.get(editor.container.id);
+    getInstances(container) {
+        let instanceMap = boxInstances.get(container.id);
         if (!instanceMap) {
             instanceMap = new Map();
-            boxInstances.set(editor.container.id, instanceMap);
+            boxInstances.set(container.id, instanceMap);
             return instanceMap;
         }
         return instanceMap;
     }
-    rectifyInstances(editor) {
-        const instanceMap = this.getInstances(editor);
+    rectifyInstances(container) {
+        const instanceMap = this.getInstances(container);
         for (const box of instanceMap.values()) {
             if (!box.node.get(0).isConnected) {
                 box.unmount();
@@ -5237,20 +5353,16 @@ class BoxManager {
             }
         }
     }
-    findAll(editor) {
-        return editor.container.find('lake-box');
-    }
-    renderAll(editor) {
-        this.rectifyInstances(editor);
-        const instanceMap = this.getInstances(editor);
-        this.findAll(editor).each(boxNativeNode => {
-            const boxNode = new Nodes(boxNativeNode);
+    renderAll(container) {
+        this.rectifyInstances(container);
+        const instanceMap = this.getInstances(container);
+        container.find('lake-box').each(boxNativeNode => {
+            const boxNode = query(boxNativeNode);
             if (instanceMap.get(boxNode.id)) {
                 return;
             }
-            const box = new Box(boxNode);
+            const box = getBox(boxNode);
             box.render();
-            instanceMap.set(box.node.id, box);
         });
     }
 }
@@ -5278,6 +5390,22 @@ const defaultConfig = {
     indentWithTab: true,
     lang: 'en-US',
     minChangeSize: 5,
+    onMessage: (type, message) => {
+        if (type === 'success') {
+            // eslint-disable-next-line no-console
+            console.log(message);
+            return;
+        }
+        if (type === 'warning') {
+            // eslint-disable-next-line no-console
+            console.warn(message);
+            return;
+        }
+        if (type === 'error') {
+            // eslint-disable-next-line no-console
+            console.error(message);
+        }
+    },
 };
 class Editor {
     constructor(config) {
@@ -5316,13 +5444,13 @@ class Editor {
             this.history.save();
         };
         this.selectionchangeListener = () => {
-            this.selection.syncByRange();
+            this.selection.updateByRange();
             this.updateBoxSelectionStyle();
             this.emitStateChangeEvent();
         };
         this.clickListener = event => {
             const targetNode = new Nodes(event.target);
-            if (targetNode.closest('.lake-popup').length > 0) {
+            if (!targetNode.get(0).isConnected || targetNode.closest('.lake-popup').length > 0) {
                 return;
             }
             this.event.emit('click', targetNode);
@@ -5338,8 +5466,8 @@ class Editor {
             const range = this.selection.range;
             const clonedRange = range.clone();
             clonedRange.adaptBox();
-            this.box.findAll(this).each(boxNode => {
-                const box = new Box(boxNode);
+            this.container.find('lake-box').each(boxNativeNode => {
+                const box = getBox(boxNativeNode);
                 const boxContainer = box.getContainer();
                 if (boxContainer.length === 0) {
                     return;
@@ -5350,6 +5478,7 @@ class Editor {
                         boxContainer.removeClass('lake-box-selected');
                         boxContainer.removeClass('lake-box-focused');
                         boxContainer.addClass('lake-box-activated');
+                        box.event.emit('focus');
                         return;
                     }
                 }
@@ -5359,16 +5488,19 @@ class Editor {
                         boxContainer.removeClass('lake-box-hovered');
                         boxContainer.removeClass('lake-box-selected');
                         boxContainer.addClass('lake-box-focused');
+                        box.event.emit('focus');
                     }
                     else {
                         boxContainer.removeClass('lake-box-focused');
                         boxContainer.addClass('lake-box-selected');
+                        box.event.emit('blur');
                     }
                     return;
                 }
                 boxContainer.removeClass('lake-box-activated');
                 boxContainer.removeClass('lake-box-focused');
                 boxContainer.removeClass('lake-box-selected');
+                box.event.emit('blur');
             });
             this.event.emit('boxselectionstylechange');
         }, 50, {
@@ -5473,7 +5605,7 @@ class Editor {
         const range = selection.range;
         const stripNode = range.startNode.closest('.lake-box-strip');
         const boxNode = stripNode.closest('lake-box');
-        const box = new Box(boxNode);
+        const box = getBox(boxNode);
         if (box.type === 'inline') {
             if (range.isBoxStart) {
                 range.setStartBefore(boxNode);
@@ -5555,15 +5687,15 @@ class Editor {
     }
     bindHistoryEvents() {
         this.history.event.on('undo', value => {
-            this.box.renderAll(this);
+            this.box.renderAll(this.container);
             this.emitChangeEvent(value);
         });
         this.history.event.on('redo', value => {
-            this.box.renderAll(this);
+            this.box.renderAll(this.container);
             this.emitChangeEvent(value);
         });
         this.history.event.on('save', value => {
-            this.box.rectifyInstances(this);
+            this.box.rectifyInstances(this.container);
             this.emitChangeEvent(value);
         });
     }
@@ -5710,8 +5842,8 @@ class Editor {
         this.container.empty();
         this.togglePlaceholderClass(htmlParser.getHTML());
         this.container.append(fragment);
-        Editor.box.renderAll(this);
-        this.selection.synByBookmark();
+        Editor.box.renderAll(this.container);
+        this.selection.updateByBookmark();
     }
     // Returns the contents from the editor.
     getValue() {
@@ -5721,21 +5853,35 @@ class Editor {
         this.selection.toBookmark(bookmark);
         return value;
     }
+    // Sets the current range to the center position of the box.
+    selectBox(box) {
+        let boxNode = box;
+        if (box instanceof Box) {
+            boxNode = box.node;
+        }
+        else {
+            boxNode = box;
+        }
+        this.selection.range.selectBox(boxNode);
+    }
     // Inserts a box into the position of the selection.
     insertBox(boxName, boxValue) {
         const box = insertBox(this.selection.range, boxName, boxValue);
         if (!box) {
             throw new Error(`Box '${boxName}' cannot be inserted outside the editor.`);
         }
-        const instanceMap = this.box.getInstances(this);
+        const instanceMap = this.box.getInstances(this.container);
         instanceMap.set(box.node.id, box);
         return box;
     }
     // Removes the selected box.
-    removeBox() {
-        const box = removeBox(this.selection.range);
+    removeBox(box = null) {
+        if (box) {
+            this.selectBox(box);
+        }
+        box = removeBox(this.selection.range);
         if (box) {
-            const instanceMap = this.box.getInstances(this);
+            const instanceMap = this.box.getInstances(this.container);
             instanceMap.delete(box.node.id);
         }
         return box;
@@ -5754,10 +5900,10 @@ class Editor {
         this.container.append(fragment);
         Editor.plugin.loadAll(this);
         if (!this.readonly) {
-            this.selection.synByBookmark();
+            this.selection.updateByBookmark();
             this.history.save();
         }
-        Editor.box.renderAll(this);
+        Editor.box.renderAll(this.container);
         if (this.toolbar) {
             this.toolbar.render(this);
         }
@@ -6414,15 +6560,26 @@ const toolbarItems = [
         accept: 'image/*',
         multiple: true,
     },
+    {
+        name: 'file',
+        type: 'upload',
+        icon: icons.get('attachment'),
+        tooltip: locale => locale.toolbar.file(),
+        accept: '*',
+        multiple: true,
+    },
 ];
 
-function uploadImage(config) {
-    const { editor, file, onError, onSuccess } = config;
-    const { requestMethod, requestAction, requestTypes } = editor.config.image;
+function uploadFile(config) {
+    const { editor, name, file, onError, onSuccess } = config;
+    const { requestMethod, requestAction, requestTypes } = editor.config[name];
     if (requestTypes.indexOf(file.type) < 0) {
-        throw new Error(`Cannot upload file because its type '${file.type}' is not found in ['${requestTypes.join('\', \'')}'].`);
+        if (onError) {
+            onError(`File '${file.name}' is not allowed for uploading.`);
+        }
+        throw new Error(`Cannot upload file '${file.name}' because its type '${file.type}' is not found in ['${requestTypes.join('\', \'')}'].`);
     }
-    const box = editor.insertBox('image', {
+    const box = editor.insertBox(name, {
         url: URL.createObjectURL(file),
         status: 'uploading',
         name: file.name,
@@ -6441,7 +6598,7 @@ function uploadImage(config) {
             box.updateValue('status', 'error');
             box.render();
             if (onError) {
-                onError();
+                onError(error.toString());
             }
         },
         onSuccess: body => {
@@ -6449,7 +6606,7 @@ function uploadImage(config) {
                 box.updateValue('status', 'error');
                 box.render();
                 if (onError) {
-                    onError();
+                    onError('Cannot find the url field.');
                 }
                 return;
             }
@@ -6492,9 +6649,9 @@ const defaultItems = [
     'blockQuote',
     'hr',
 ];
-const toolbarItemMap = new Map();
+const toolbarItemMap$1 = new Map();
 toolbarItems.forEach(item => {
-    toolbarItemMap.set(item.name, item);
+    toolbarItemMap$1.set(item.name, item);
 });
 class Toolbar {
     constructor(config) {
@@ -6581,9 +6738,11 @@ class Toolbar {
             const target = event.target;
             const files = target.files || [];
             for (const file of files) {
-                uploadImage({
+                uploadFile({
                     editor,
+                    name: item.name,
                     file,
+                    onError: error => editor.config.onMessage('error', error),
                 });
             }
         });
@@ -6658,7 +6817,7 @@ class Toolbar {
             }
             let item;
             if (typeof name === 'string') {
-                item = toolbarItemMap.get(name);
+                item = toolbarItemMap$1.get(name);
                 if (!item) {
                     return;
                 }
@@ -6695,7 +6854,7 @@ const hrBox = {
         box.useEffect(() => {
             const hrNode = box.getContainer().find('.lake-hr');
             hrNode.on('click', () => {
-                editor.selection.range.selectBox(box.node);
+                editor.selectBox(box);
             });
         });
         return '<div class="lake-hr"><hr /></div>';
@@ -6839,7 +6998,7 @@ function openFullScreen(box) {
     let currentIndex = 0;
     const allImageBox = editor.container.find('lake-box[name="image"]');
     allImageBox.each((node, index) => {
-        const imageBox = new Box(node);
+        const imageBox = getBox(node);
         const imageValue = imageBox.value;
         if (imageValue.status !== 'done') {
             return;
@@ -6922,7 +7081,7 @@ function openFullScreen(box) {
             if (savedRange) {
                 // fix(image): lose focus when zooming in the iOS
                 editor.selection.range = savedRange;
-                editor.selection.addRangeToNativeSelection();
+                editor.selection.sync();
             }
             box.event.emit('closefullscreen');
         }, 0);
@@ -6930,20 +7089,6 @@ function openFullScreen(box) {
     lightbox.init();
     lightbox.loadAndOpen(currentIndex);
 }
-// Removes current box.
-function removeImageBox(box) {
-    const editor = box.getEditor();
-    if (!editor) {
-        return;
-    }
-    const xhr = box.getData('xhr');
-    if (xhr) {
-        xhr.abort();
-    }
-    editor.selection.range.selectBox(box.node);
-    editor.removeBox();
-    editor.history.save();
-}
 // Displays error icon and filename.
 function renderError(imageNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -7167,13 +7312,19 @@ const imageBox = {
             else {
                 imageNode.find('.lake-button-remove').on('click', event => {
                     event.stopPropagation();
-                    removeImageBox(box);
+                    const xhr = box.getData('xhr');
+                    if (xhr) {
+                        xhr.abort();
+                    }
+                    editor.removeBox(box);
+                    editor.history.save();
+                    editor.selection.sync();
                 });
             }
             box.event.emit('render');
         });
         imageNode.on('click', () => {
-            editor.selection.range.selectBox(box.node);
+            editor.selectBox(box);
         });
     },
     html: box => {
@@ -7182,6 +7333,232 @@ const imageBox = {
     },
 };
 
+const toolbarItemMap = new Map();
+class BoxToolbar {
+    constructor(config) {
+        this.placement = 'top';
+        this.buttonItemList = [];
+        this.dropdownItemList = [];
+        this.root = query(config.root);
+        this.editor = config.editor;
+        this.box = config.box;
+        this.items = config.items;
+        if (config.placement) {
+            this.placement = config.placement;
+        }
+        this.container = query('<div class="lake-box-toolbar" />');
+        this.root.addClass('lake-custom-properties');
+    }
+    appendDivider() {
+        this.container.append('<div class="lake-box-toolbar-divider" />');
+    }
+    appendButton(item) {
+        const button = new Button({
+            root: this.container,
+            name: item.name,
+            icon: item.icon,
+            tooltip: typeof item.tooltip === 'string' ? item.tooltip : item.tooltip(this.editor.locale),
+            tabIndex: -1,
+            onClick: () => {
+                item.onClick(this.box, item.name);
+            },
+        });
+        button.render();
+    }
+    appendDropdown(item) {
+        const dropdown = new Dropdown({
+            root: this.container,
+            locale: this.editor.locale,
+            name: item.name,
+            icon: item.icon,
+            accentIcon: item.accentIcon,
+            downIcon: item.downIcon,
+            defaultValue: item.defaultValue,
+            tooltip: item.tooltip,
+            width: item.width,
+            menuType: item.menuType,
+            menuItems: item.menuItems,
+            tabIndex: -1,
+            placement: this.placement === 'top' ? 'bottom' : 'top',
+            onSelect: value => {
+                item.onSelect(this.box, value);
+            },
+        });
+        dropdown.render();
+    }
+    updatePosition() {
+        const boxNode = this.box.node;
+        const position = nodeAndView(boxNode);
+        if (position.left < 0 || position.right < 0 || position.top < 0 || position.bottom < 0) {
+            this.container.hide();
+            return;
+        }
+        this.container.show('flex');
+        const boxNativeNode = this.box.node.get(0);
+        const boxRect = boxNativeNode.getBoundingClientRect();
+        const boxX = boxRect.x + window.scrollX;
+        const boxY = boxRect.y + window.scrollY;
+        const left = (boxX + boxRect.width / 2 - this.container.width() / 2).toFixed(1);
+        const top = (boxY - this.container.height() - 6).toFixed(1);
+        this.container.css({
+            left: `${left}px`,
+            top: `${top}px`,
+        });
+    }
+    // Renders a toolbar for the specified box.
+    render() {
+        this.root.empty();
+        this.root.append(this.container);
+        this.items.forEach(name => {
+            if (name === '|') {
+                this.appendDivider();
+                return;
+            }
+            let item;
+            if (typeof name === 'string') {
+                item = toolbarItemMap.get(name);
+                if (!item) {
+                    return;
+                }
+            }
+            else {
+                item = name;
+            }
+            if (item.type === 'button') {
+                this.buttonItemList.push(item);
+                this.appendButton(item);
+                return;
+            }
+            if (item.type === 'dropdown') {
+                this.dropdownItemList.push(item);
+                this.appendDropdown(item);
+            }
+        });
+        this.updatePosition();
+    }
+    unmount() {
+        this.container.remove();
+    }
+}
+
+const boxToolbarItems = [
+    {
+        name: 'download',
+        type: 'button',
+        icon: icons.get('download'),
+        tooltip: locale => locale.file.download(),
+        onClick: box => {
+            window.open(box.value.url);
+        },
+    },
+    {
+        name: 'remove',
+        type: 'button',
+        icon: icons.get('remove'),
+        tooltip: locale => locale.file.remove(),
+        onClick: box => {
+            const editor = box.getEditor();
+            if (!editor) {
+                return;
+            }
+            editor.removeBox(box);
+            editor.history.save();
+            editor.selection.sync();
+        },
+    },
+];
+function appendContent(fileNode, box) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const editor = box.getEditor();
+        if (!editor) {
+            return;
+        }
+        const value = box.value;
+        const infoNode = query(safeTemplate `
+    <div class="lake-file-info">
+      <div class="lake-file-type"></div>
+      <div class="lake-file-name">${value.name} (${fileSize(value.size)})</div>
+    </div>
+  `);
+        const typeNode = infoNode.find('.lake-file-type');
+        if (value.status === 'uploading') {
+            const percent = Math.round(value.percent || 0);
+            const progressNode = query(safeTemplate `
+      <div class="lake-progress">
+        <div class="lake-percent">${percent} %</div>
+      </div>
+    `);
+            const circleNotchIcon = icons.get('circleNotch');
+            if (circleNotchIcon) {
+                progressNode.prepend(circleNotchIcon);
+            }
+            typeNode.replaceWith(progressNode);
+        }
+        else {
+            const fileIcon = value.status === 'error' ? icons.get('warningCircle') : icons.get('file');
+            if (fileIcon) {
+                typeNode.append(fileIcon);
+            }
+        }
+        fileNode.append(infoNode);
+    });
+}
+const fileBox = {
+    type: 'inline',
+    name: 'file',
+    render: box => {
+        const editor = box.getEditor();
+        if (!editor) {
+            return;
+        }
+        const value = box.value;
+        const container = box.getContainer();
+        const fileNode = query('<div class="lake-file" />');
+        fileNode.addClass(`lake-file-${value.status}`);
+        if (editor.readonly) {
+            fileNode.addClass('lake-file-readonly');
+        }
+        appendContent(fileNode, box);
+        container.empty();
+        container.append(fileNode);
+        if (!editor.readonly) {
+            fileNode.on('click', () => {
+                editor.selectBox(box);
+            });
+            let toolbar = null;
+            const scrollListener = () => {
+                if (toolbar) {
+                    toolbar.updatePosition();
+                }
+            };
+            box.event.on('focus', () => {
+                const items = value.status === 'done' ? boxToolbarItems : boxToolbarItems.filter(item => item.name === 'remove');
+                toolbar = new BoxToolbar({
+                    root: editor.popupContainer,
+                    editor,
+                    box,
+                    items,
+                });
+                toolbar.render();
+                editor.root.on('scroll', scrollListener);
+            });
+            box.event.on('blur', () => {
+                if (toolbar) {
+                    toolbar.unmount();
+                    toolbar = null;
+                }
+                editor.root.off('scroll', scrollListener);
+            });
+        }
+        else {
+            fileNode.on('click', () => {
+                window.open(value.url);
+            });
+        }
+        box.event.emit('render');
+    },
+};
+
 const config = {
     comment: '#57606a',
     name: '#444d56',
@@ -7286,7 +7663,7 @@ const codeBlockBox = {
         Please check if the "lake-codemirror" library is added to this page.
       `.trim());
             codeBlockNode.on('click', () => {
-                editor.selection.range.selectBox(box.node);
+                editor.selectBox(box);
             });
             return;
         }
@@ -7391,7 +7768,7 @@ var copy = (editor) => {
         if (!dataTransfer) {
             return;
         }
-        const box = new Box(boxNode);
+        const box = getBox(boxNode);
         const content = box.getHTML();
         dataTransfer.setData('text/html', content);
     });
@@ -7418,7 +7795,7 @@ var cut = (editor) => {
         if (!dataTransfer) {
             return;
         }
-        const box = new Box(boxNode);
+        const box = getBox(boxNode);
         const content = box.getHTML();
         dataTransfer.setData('text/html', content);
         editor.removeBox();
@@ -7484,7 +7861,7 @@ function insertFirstNode(editor, otherNode) {
     const range = editor.selection.range;
     const boxNode = range.startNode.closest('lake-box');
     if (boxNode.length > 0) {
-        const box = new Box(boxNode);
+        const box = getBox(boxNode);
         if (box.type === 'inline') {
             if (range.isBoxStart) {
                 range.setStartBefore(boxNode);
@@ -7515,7 +7892,7 @@ function insertFirstNode(editor, otherNode) {
     }
     const block = range.startNode.closestBlock();
     if (otherNode.isBlockBox) {
-        const box = new Box(otherNode);
+        const box = getBox(otherNode);
         const value = otherNode.attr('value') !== '' ? box.value : undefined;
         editor.insertBox(box.name, value);
         otherNode.remove();
@@ -7527,7 +7904,7 @@ function insertFirstNode(editor, otherNode) {
     if (block.isEmpty && block.name === 'p') {
         block.replaceWith(otherNode);
         otherNode.find('lake-box').each(node => {
-            new Box(node).render();
+            getBox(node).render();
         });
         range.shrinkAfter(otherNode);
         return;
@@ -7601,9 +7978,11 @@ var paste = (editor) => {
         if (dataTransfer.files.length > 0) {
             for (const file of dataTransfer.files) {
                 if (requestTypes.indexOf(file.type) >= 0) {
-                    uploadImage({
+                    uploadFile({
                         editor,
+                        name: file.type.indexOf('image/') === 0 ? 'image' : 'file',
                         file,
+                        onError: error => editor.config.onMessage('error', error),
                     });
                 }
             }
@@ -7626,7 +8005,7 @@ var paste = (editor) => {
         editor.event.emit('beforepaste', fragment);
         fixClipboardData(fragment);
         pasteFragment(editor, fragment);
-        editor.box.renderAll(editor);
+        editor.box.renderAll(editor.container);
     });
 };
 
@@ -7654,7 +8033,7 @@ var drop = (editor) => {
             dragEvent.preventDefault();
             return;
         }
-        const box = new Box(boxNode);
+        const box = getBox(boxNode);
         if (box.type === 'inline') {
             dragEvent.preventDefault();
             return;
@@ -7752,7 +8131,7 @@ var drop = (editor) => {
                 return;
             }
             dragEvent.preventDefault();
-            const draggedBox = new Box(draggedNode);
+            const draggedBox = getBox(draggedNode);
             const range = editor.selection.range;
             if (targetBlock.isBox) {
                 if (dropPosition === 'top') {
@@ -8494,15 +8873,17 @@ class LinkPopup {
         if (!this.linkNode) {
             return;
         }
+        const position = nodeAndView(this.linkNode);
+        if (position.left < 0 || position.right < 0 || position.top < 0 || position.bottom < 0) {
+            this.container.css('visibility', 'hidden');
+            return;
+        }
+        this.container.css('visibility', '');
         const linkNativeNode = this.linkNode.get(0);
         // Returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
         const linkRect = linkNativeNode.getBoundingClientRect();
         const linkX = linkRect.x + window.scrollX;
         const linkY = linkRect.y + window.scrollY;
-        if (linkX < 0 || linkY < 0) {
-            this.hide();
-            return;
-        }
         // link.x + popup.width > window.width
         if (linkRect.x + this.container.width() > window.innerWidth) {
             // link.x + window.scrollX - (popup.width - link.width)
@@ -8564,14 +8945,14 @@ var link = (editor) => {
             const range = editor.selection.range;
             range.setStartAfter(node);
             range.collapseToStart();
-            editor.selection.addRangeToNativeSelection();
+            editor.selection.sync();
             editor.history.save();
         },
         onRemove: node => {
             const range = editor.selection.range;
             range.setStartAfter(node);
             range.collapseToStart();
-            editor.selection.addRangeToNativeSelection();
+            editor.selection.sync();
             editor.history.save();
         },
     });
@@ -8618,7 +8999,7 @@ var hr = (editor) => {
         const fragment = new Fragment(nativeFragment);
         fragment.find('hr').each(nativeNode => {
             const node = query(nativeNode);
-            const box = new Box('hr');
+            const box = getBox('hr');
             node.replaceWith(box.node);
         });
     });
@@ -8642,7 +9023,7 @@ var image = (editor) => {
         const fragment = new Fragment(nativeFragment);
         fragment.find('img').each(nativeNode => {
             const node = query(nativeNode);
-            const box = new Box('image');
+            const box = getBox('image');
             const value = node.attr('data-lake-value');
             if (value === '') {
                 box.value = {
@@ -8664,6 +9045,39 @@ var image = (editor) => {
     });
 };
 
+var file = (editor) => {
+    editor.setPluginConfig('file', {
+        requestMethod: 'POST',
+        requestTypes: [
+            'application/zip',
+            'application/x-zip-compressed',
+            'application/vnd.rar',
+            'image/gif',
+            'image/jpeg',
+            'image/png',
+            'image/svg+xml',
+            'text/plain',
+            'text/html',
+            'application/pdf',
+            'application/msword',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            'application/vnd.ms-powerpoint',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        ],
+    });
+    if (editor.readonly) {
+        return;
+    }
+    editor.command.add('file', {
+        execute: (value) => {
+            editor.insertBox('file', value);
+            editor.history.save();
+        },
+    });
+};
+
 const langList = [
     'text',
     'c',
@@ -9288,8 +9702,7 @@ var backspaceKey = (editor) => {
         const prevNode = range.getPrevNode();
         if (prevNode.isBox) {
             event.preventDefault();
-            range.selectBox(prevNode);
-            editor.removeBox();
+            editor.removeBox(prevNode);
             editor.history.save();
             return;
         }
@@ -9408,8 +9821,7 @@ var deleteKey = (editor) => {
         const nextNode = range.getNextNode();
         if (nextNode.isBox) {
             event.preventDefault();
-            range.selectBox(nextNode);
-            editor.removeBox();
+            editor.removeBox(nextNode);
             editor.history.save();
             return;
         }
@@ -9590,7 +10002,7 @@ var escapeKey = (editor) => {
             event.preventDefault();
             const boxNode = range.commonAncestor.closest('lake-box');
             range.selectBoxEnd(boxNode);
-            selection.addRangeToNativeSelection();
+            selection.sync();
             return;
         }
         if (editor.hasFocus) {
@@ -9602,6 +10014,7 @@ var escapeKey = (editor) => {
 
 Editor.box.add(hrBox);
 Editor.box.add(imageBox);
+Editor.box.add(fileBox);
 Editor.box.add(codeBlockBox);
 Editor.plugin.add(copy);
 Editor.plugin.add(cut);
@@ -9631,6 +10044,7 @@ Editor.plugin.add(formatPainter);
 Editor.plugin.add(link);
 Editor.plugin.add(hr);
 Editor.plugin.add(image);
+Editor.plugin.add(file);
 Editor.plugin.add(codeBlock);
 Editor.plugin.add(markdown);
 Editor.plugin.add(enterKey);