lakelib 0.3.2 → 0.3.4

package/lib/lake.js

@@ -194,7 +194,7 @@ var danger = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32
 //
 // Phosphor Icons (https://phosphoricons.com/).
 // - other icons
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// eslint-disable-next-line ts/ban-ts-comment
 // @ts-nocheck
 // common
 const icons = new Map([
@@ -397,19 +397,25 @@ function camelCase(value) {
     return camelString;
 }
 
-// Converts an alpha value to a hex value.
+/**
+ * Converts an alpha value to a hex value.
+ */
 function alphaToHex(value) {
     const hexString = Math.round(Number.parseFloat(value) * 255).toString(16);
     return hexString.length > 1 ? hexString : `0${hexString}`;
 }
-// Converts a decimal to a hex value.
+/**
+ * Converts a decimal to a hex value.
+ */
 function hex(value) {
     const hexString = Number.parseInt(value, 10).toString(16).toLowerCase();
     return hexString.length > 1 ? hexString : `0${hexString}`;
 }
-// Converts a color in RGB or RGBA format to hex format.
+/**
+ * Converts a color in RGB or RGBA format to hex format.
+ */
 function toHex(value) {
-    return value.replace(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/ig, (match, p1, p2, p3, p4) => {
+    return value.replace(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/gi, (match, p1, p2, p3, p4) => {
         if (p4 === undefined) {
             return `#${hex(p1)}${hex(p2)}${hex(p3)}`;
         }
@@ -433,14 +439,20 @@ function debug(...data) {
     }
 }
 
-// A key-value object for storing all events.
-// value is an array which include types and listeners.
+/**
+ * A key-value object for storing all events.
+ * The value is an array which include types and listeners.
+ */
 const eventData = {};
 let lastNodeId = 0;
-// The Nodes interface represents a collection of the document's nodes.
+/**
+ * The Nodes interface represents a collection of the nodes.
+ * It is similar to jQuery, but its implementation is much simpler.
+ * Its methods can be considered aliases of native DOM interfaces, designed to simplify DOM manipulation.
+ */
 class Nodes {
     constructor(node) {
-        node = node !== null && node !== undefined ? node : [];
+        node = node !== null && node !== void 0 ? node : [];
         this.nodeList = Array.isArray(node) ? node : [node];
         for (let i = 0; i < this.nodeList.length; i++) {
             // lakeId is an expando for preserving node ID.
@@ -451,12 +463,16 @@ class Nodes {
         }
         this.length = this.nodeList.length;
     }
-    // The unique ID of the first node.
+    /**
+     * The unique ID of the first node.
+     */
     get id() {
         const node = this.get(0);
         return node.lakeId;
     }
-    // The name of the first node.
+    /**
+     * The name of the first node.
+     */
     get name() {
         if (this.length === 0) {
             return '';
@@ -464,7 +480,9 @@ class Nodes {
         const node = this.get(0);
         return node.nodeName.toLowerCase();
     }
-    // A boolean value indicating whether the first node is an element.
+    /**
+     * A boolean value indicating whether the first node is an element.
+     */
     get isElement() {
         if (this.length === 0) {
             return false;
@@ -472,7 +490,9 @@ class Nodes {
         const node = this.get(0);
         return node.nodeType === Node.ELEMENT_NODE;
     }
-    // A boolean value indicating whether the first node is a text.
+    /**
+     * A boolean value indicating whether the first node is a text.
+     */
     get isText() {
         if (this.length === 0) {
             return false;
@@ -480,65 +500,87 @@ class Nodes {
         const node = this.get(0);
         return node.nodeType === Node.TEXT_NODE;
     }
-    // A boolean value indicating whether the first node is a block.
+    /**
+     * A boolean value indicating whether the first node is a block.
+     */
     get isBlock() {
         if (this.length === 0) {
             return false;
         }
         return blockTagNames.has(this.name);
     }
-    // A boolean value indicating whether the first node is a mark.
+    /**
+     * A boolean value indicating whether the first node is a mark.
+     */
     get isMark() {
         if (this.length === 0) {
             return false;
         }
         return markTagNames.has(this.name);
     }
-    // A boolean value indicating whether the first node is a void element that cannot have any child nodes.
+    /**
+     * A boolean value indicating whether the first node is a void element that cannot have any child nodes.
+     */
     get isVoid() {
         if (this.length === 0) {
             return false;
         }
         return voidTagNames.has(this.name);
     }
-    // A boolean value indicating whether the first node is a heading.
+    /**
+     * A boolean value indicating whether the first node is a heading.
+     */
     get isHeading() {
         if (this.length === 0) {
             return false;
         }
         return headingTagNames.has(this.name);
     }
-    // A boolean value indicating whether the first node is a list.
+    /**
+     * A boolean value indicating whether the first node is a list.
+     */
     get isList() {
         if (this.length === 0) {
             return false;
         }
         return listTagNames.has(this.name);
     }
-    // A boolean value indicating whether the first node is a table.
+    /**
+     * A boolean value indicating whether the first node is a table.
+     */
     get isTable() {
         if (this.length === 0) {
             return false;
         }
         return tableTagNames.has(this.name);
     }
-    // A boolean value indicating whether the first node is a bookmark element.
+    /**
+     * A boolean value indicating whether the first node is a bookmark element.
+     */
     get isBookmark() {
         return this.name === 'lake-bookmark';
     }
-    // A boolean value indicating whether the first node is a box element.
+    /**
+     * A boolean value indicating whether the first node is a box element.
+     */
     get isBox() {
         return this.name === 'lake-box';
     }
-    // A boolean value indicating whether the first node is an inline box element.
+    /**
+     * A boolean value indicating whether the first node is an inline box element.
+     */
     get isInlineBox() {
         return this.isBox && this.attr('type') === 'inline';
     }
-    // A boolean value indicating whether the first node is a block box element.
+    /**
+     * A boolean value indicating whether the first node is a block box element.
+     */
     get isBlockBox() {
         return this.isBox && this.attr('type') === 'block';
     }
-    // A boolean value indicating whether the first node is a contenteditable element where users can edit the content.
+    /**
+     * A boolean value indicating whether the first node is a contenteditable element where users can edit the content.
+     */
     get isContainer() {
         if (this.length === 0) {
             return false;
@@ -546,15 +588,21 @@ class Nodes {
         const node = this.get(0);
         return this.isElement && node.getAttribute('contenteditable') === 'true';
     }
-    // A boolean value indicating whether the first node does not have an ancestor element which contenteditable attribute is true.
+    /**
+     * A boolean value indicating whether the first node does not have an ancestor element which contenteditable attribute is true.
+     */
     get isOutside() {
         return this.closest('[contenteditable="true"]').length === 0;
     }
-    // A boolean value indicating whether the first node has an ancestor element which contenteditable attribute is true.
+    /**
+     * A boolean value indicating whether the first node has an ancestor element which contenteditable attribute is true.
+     */
     get isInside() {
         return !this.isOutside && !this.isContainer;
     }
-    // A boolean value indicating whether the first node's parent element is an element which contenteditable attribute is true.
+    /**
+     * A boolean value indicating whether the first node's parent element is an element which contenteditable attribute is true.
+     */
     get isTopInside() {
         if (this.length === 0) {
             return false;
@@ -565,7 +613,9 @@ class Nodes {
         }
         return this.isInside && parentNode.isContainer;
     }
-    // A boolean value indicating whether the first node is editable.
+    /**
+     * A boolean value indicating whether the first node is editable.
+     */
     get isContentEditable() {
         if (this.length === 0) {
             return false;
@@ -583,11 +633,15 @@ class Nodes {
         const element = this.get(0);
         return element.isContentEditable;
     }
-    // A boolean value indicating whether the first node is indivisible.
+    /**
+     * A boolean value indicating whether the first node is indivisible.
+     */
     get isIndivisible() {
         return this.isContainer || this.isTable;
     }
-    // A boolean value indicating whether the first node is empty.
+    /**
+     * A boolean value indicating whether the first node is empty.
+     */
     get isEmpty() {
         if (this.isBox) {
             return false;
@@ -607,20 +661,28 @@ class Nodes {
         }
         return true;
     }
-    // Returns a native node at the specified index.
+    /**
+     * Returns a native node at the specified index.
+     */
     get(index) {
         return this.nodeList[index];
     }
-    // Returns all native nodes.
+    /**
+     * Returns all native nodes.
+     */
     getAll() {
         return this.nodeList;
     }
-    // Returns a new Nodes object that includes only the node at the specified index.
+    /**
+     * Returns a new Nodes object that includes only the node at the specified index.
+     */
     eq(index) {
         const node = this.get(index);
         return new Nodes(node);
     }
-    // Executes a provided function once for each node.
+    /**
+     * Executes a provided function once for each node.
+     */
     each(callback) {
         const nodes = this.getAll();
         for (let i = 0; i < nodes.length; i++) {
@@ -630,7 +692,9 @@ class Nodes {
         }
         return this;
     }
-    // Executes a provided function once for each element.
+    /**
+     * Executes a provided function once for each element.
+     */
     eachElement(callback) {
         const nodes = this.getAll();
         for (let i = 0; i < nodes.length; i++) {
@@ -642,12 +706,16 @@ class Nodes {
         }
         return this;
     }
-    // Returns a new Nodes object with the nodes in reversed order.
+    /**
+     * Returns a new Nodes object with the nodes in reversed order.
+     */
     reverse() {
         const nodes = this.getAll().reverse();
         return new Nodes(nodes);
     }
-    // Tests whether the first node would be selected by the specified CSS selector.
+    /**
+     * Tests whether the first node would be selected by the specified CSS selector.
+     */
     matches(selector) {
         if (!this.isElement) {
             return false;
@@ -655,13 +723,17 @@ class Nodes {
         const element = this.get(0);
         return element.matches(selector);
     }
-    // Returns a boolean value indicating whether the first node is a descendant of a given node,
-    // that is the first node itself, one of its direct children (childNodes), one of the children's direct children, and so on.
+    /**
+     * Returns a boolean value indicating whether the given node is a descendant of the first node,
+     * that is the node itself, one of its direct children (childNodes), one of the children's direct children, and so on.
+     */
     contains(otherNode) {
         const element = this.get(0);
         return element.contains(otherNode.get(0));
     }
-    // Returns a boolean value indicating whether the first node and a given node are siblings.
+    /**
+     * Returns a boolean value indicating whether the first node and a given node are siblings.
+     */
     isSibling(otherNode) {
         if (this.length === 0) {
             return false;
@@ -669,7 +741,9 @@ class Nodes {
         const parent = this.get(0).parentNode;
         return parent && parent === otherNode.parent().get(0);
     }
-    // Returns the descendants of the first node that match the specified CSS selector or node path.
+    /**
+     * Returns the descendants of the first node that match the specified CSS selector or node path.
+     */
     find(selector) {
         if (typeof selector === 'string') {
             const element = this.get(0);
@@ -685,7 +759,9 @@ class Nodes {
         }
         return node;
     }
-    // Traverses the first node and its parents (heading toward the document root) until it finds an element that matches the specified CSS selector.
+    /**
+     * Traverses the first node and its parents (heading toward the document root) until it finds an element that matches the specified CSS selector.
+     */
     closest(selector) {
         if (this.isText) {
             const element = this.get(0).parentNode;
@@ -700,7 +776,9 @@ class Nodes {
         const element = this.get(0);
         return new Nodes(element.closest(selector));
     }
-    // Traverses the first node and its parents until it finds a block element.
+    /**
+     * Traverses the first node and its parents until it finds a block element.
+     */
     closestBlock() {
         let node = this.eq(0);
         while (node.length > 0) {
@@ -714,7 +792,9 @@ class Nodes {
         }
         return node;
     }
-    // Traverses the first node and its parents until it finds an operable block.
+    /**
+     * Traverses the first node and its parents until it finds an operable block.
+     */
     closestOperableBlock() {
         const boxNode = this.closest('lake-box');
         const block = boxNode.length > 0 ? boxNode.closestBlock() : this.closestBlock();
@@ -730,11 +810,15 @@ class Nodes {
         }
         return block;
     }
-    // Traverses the first node and its parents until it finds a div element which contenteditable attribute is true.
+    /**
+     * Traverses the first node and its parents until it finds a div element which contenteditable attribute is true.
+     */
     closestContainer() {
         return this.closest('div[contenteditable="true"]');
     }
-    // Traverses the first node and its parents until it finds an element which can scroll.
+    /**
+     * Traverses the first node and its parents until it finds an element which can scroll.
+     */
     closestScroller() {
         let parent = this.eq(0);
         while (parent.length > 0) {
@@ -745,32 +829,44 @@ class Nodes {
         }
         return new Nodes();
     }
-    // Returns the parent of the first node.
+    /**
+     * Returns the parent of the first node.
+     */
     parent() {
         const node = this.get(0);
         return new Nodes(node.parentNode);
     }
-    // Returns the immediately preceding sibling of the first node.
+    /**
+     * Returns the immediately preceding sibling of the first node.
+     */
     prev() {
         const node = this.get(0);
         return new Nodes(node.previousSibling);
     }
-    // Returns the immediately following sibling of the first node.
+    /**
+     * Returns the immediately following sibling of the first node.
+     */
     next() {
         const node = this.get(0);
         return new Nodes(node.nextSibling);
     }
-    // Returns the first child of the first node.
+    /**
+     * Returns the first child of the first node.
+     */
     first() {
         const element = this.get(0);
         return new Nodes(element.firstChild);
     }
-    // Returns the last child of the first node.
+    /**
+     * Returns the last child of the first node.
+     */
     last() {
         const element = this.get(0);
         return new Nodes(element.lastChild);
     }
-    // Returns a number indicating the position of the first node relative to its sibling nodes.
+    /**
+     * Returns a number indicating the position of the first node relative to its sibling nodes.
+     */
     index() {
         let i = -1;
         let sibling = this.get(0);
@@ -780,7 +876,9 @@ class Nodes {
         }
         return i;
     }
-    // Returns the path of the first node.
+    /**
+     * Returns the path of the first node.
+     */
     path() {
         const path = [];
         let node = this.eq(0);
@@ -800,7 +898,9 @@ class Nodes {
         }
         return path.reverse();
     }
-    // Returns a list which contains all of the child nodes of the first node.
+    /**
+     * Returns a list which contains all of the child nodes of the first node.
+     */
     children() {
         const childList = [];
         let child = this.first();
@@ -810,7 +910,9 @@ class Nodes {
         }
         return childList;
     }
-    // Returns a generator that iterates over the descendants of the first node.
+    /**
+     * Returns a generator that iterates over the descendants of the first node.
+     */
     *getWalker() {
         function* iterate(node) {
             if (node.isBox) {
@@ -828,7 +930,9 @@ class Nodes {
             yield node;
         }
     }
-    // Sets up an event listener for each element.
+    /**
+     * Sets up an event listener for each element.
+     */
     on(type, listener) {
         return this.eachElement(element => {
             element.addEventListener(type, listener, false);
@@ -842,15 +946,17 @@ class Nodes {
             });
         });
     }
-    // Removes event listeners previously registered with on() method.
+    /**
+     * Removes event listeners previously registered with on() method.
+     */
     off(type, listener) {
         return this.eachElement(element => {
             var _a;
             const elementId = element.lakeId;
-            const eventItems = (_a = eventData[elementId]) !== null && _a !== undefined ? _a : [];
+            const eventItems = (_a = eventData[elementId]) !== null && _a !== void 0 ? _a : [];
             for (let i = 0; i < eventItems.length; i++) {
                 const item = eventItems[i];
-                if (!type || type === item.type && (!listener || listener === item.listener)) {
+                if (!type || (type === item.type && (!listener || listener === item.listener))) {
                     element.removeEventListener(item.type, item.listener, false);
                     eventItems[i] = {
                         type: '',
@@ -861,41 +967,53 @@ class Nodes {
             eventData[elementId] = eventItems.filter((item) => item.type !== '');
         });
     }
-    // Executes all event listeners attached to all nodes for the given event type.
+    /**
+     * Executes all event listeners attached to all nodes for the given event type.
+     */
     emit(type, event) {
         return this.eachElement(element => {
             const elementId = element.lakeId;
             const eventItems = eventData[elementId];
             for (const item of eventItems) {
                 if (item.type === type) {
-                    item.listener(event !== null && event !== undefined ? event : new Event(type));
+                    item.listener(event !== null && event !== void 0 ? event : new Event(type));
                 }
             }
         });
     }
-    // Returns all event listeners attached to the node at the specified index.
+    /**
+     * Returns all event listeners attached to the node at the specified index.
+     */
     getEventListeners(index) {
         const elementId = this.get(index).lakeId;
         return eventData[elementId];
     }
-    // Sets focus on the specified node, if it can be focused.
+    /**
+     * Sets focus on the specified node, if it can be focused.
+     */
     focus() {
         const element = this.get(0);
         element.focus();
         return this;
     }
-    // Removes focus from the specified node.
+    /**
+     * Removes focus from the specified node.
+     */
     blur() {
         const element = this.get(0);
         element.blur();
         return this;
     }
-    // Returns a copy of the first node. If deep is true, the copy also includes the node's descendants.
+    /**
+     * Returns a copy of the first node. If deep is true, the copy also includes the node's descendants.
+     */
     clone(deep = false) {
         const node = this.get(0);
         return new Nodes(node.cloneNode(deep));
     }
-    // Returns a boolean value indicating whether the first node has the specified attribute or not.
+    /**
+     * Returns a boolean value indicating whether the first node has the specified attribute or not.
+     */
     hasAttr(attributeName) {
         const element = this.get(0);
         return element.hasAttribute(attributeName);
@@ -910,24 +1028,30 @@ class Nodes {
         }
         if (value === undefined) {
             const element = this.get(0);
-            return (_a = element.getAttribute(attributeName)) !== null && _a !== undefined ? _a : '';
+            return (_a = element.getAttribute(attributeName)) !== null && _a !== void 0 ? _a : '';
         }
         return this.eachElement(element => {
             element.setAttribute(attributeName, value);
         });
     }
-    // Removes the attribute with the specified name from every element.
+    /**
+     * Removes the attribute with the specified name from every element.
+     */
     removeAttr(attributeName) {
         return this.eachElement(element => {
             element.removeAttribute(attributeName);
         });
     }
-    // Returns a boolean value indicating whether the first node has the specified class or not.
+    /**
+     * Returns a boolean value indicating whether the first node has the specified class or not.
+     */
     hasClass(className) {
         const element = this.get(0);
         return inString(element.className, className, ' ');
     }
-    // Adds the given class to every element.
+    /**
+     * Adds the given class to every element.
+     */
     addClass(className) {
         if (Array.isArray(className)) {
             for (const name of className) {
@@ -942,7 +1066,9 @@ class Nodes {
             element.classList.add(className);
         });
     }
-    // Removes the given class from every element.
+    /**
+     * Removes the given class from every element.
+     */
     removeClass(className) {
         if (Array.isArray(className)) {
             for (const name of className) {
@@ -960,8 +1086,10 @@ class Nodes {
             }
         });
     }
-    // Returns the value of the given CSS property of the first node,
-    // after applying active stylesheets and resolving any basic computation this value may contain.
+    /**
+     * Returns the value of the given CSS property of the first node,
+     * after applying active stylesheets and resolving any basic computation this value may contain.
+     */
     computedCSS(propertyName) {
         const element = this.get(0);
         return getCSS(element, propertyName);
@@ -984,28 +1112,38 @@ class Nodes {
             }
         });
     }
-    // Returns the width of of the first node.
+    /**
+     * Returns the width of of the first node.
+     */
     width() {
         const element = this.get(0);
         return element.offsetWidth;
     }
-    // Returns the interior width of the first node, which does not include padding.
+    /**
+     * Returns the interior width of the first node, which does not include padding.
+     */
     innerWidth() {
         const paddingLeft = Number.parseInt(this.computedCSS('padding-left'), 10) || 0;
         const paddingRight = Number.parseInt(this.computedCSS('padding-right'), 10) || 0;
         return this.width() - paddingLeft - paddingRight;
     }
-    // Returns the height of of the first node.
+    /**
+     * Returns the height of of the first node.
+     */
     height() {
         const element = this.get(0);
         return element.offsetHeight;
     }
-    // Displays all nodes.
+    /**
+     * Displays all nodes.
+     */
     show(displayType = 'block') {
         this.css('display', displayType);
         return this;
     }
-    // Hides all nodes.
+    /**
+     * Hides all nodes.
+     */
     hide() {
         this.css('display', 'none');
         return this;
@@ -1024,7 +1162,7 @@ class Nodes {
         if (value === undefined) {
             const node = this.get(0);
             if (this.isText) {
-                return (_a = node.nodeValue) !== null && _a !== undefined ? _a : '';
+                return (_a = node.nodeValue) !== null && _a !== void 0 ? _a : '';
             }
             const element = node;
             // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
@@ -1043,17 +1181,23 @@ class Nodes {
             element.value = value;
         });
     }
-    // Returns the HTML string describing the first node including its descendants.
+    /**
+     * Returns the HTML string describing the first node including its descendants.
+     */
     outerHTML() {
         const element = this.get(0);
         return element.outerHTML;
     }
-    // Removes all child nodes for each element.
+    /**
+     * Removes all child nodes for each element.
+     */
     empty() {
         this.html('');
         return this;
     }
-    // Inserts the specified content just inside the first node, before its first child.
+    /**
+     * Inserts the specified content just inside the first node, before its first child.
+     */
     prepend(content) {
         const element = this.get(0);
         if (typeof content === 'string') {
@@ -1079,7 +1223,9 @@ class Nodes {
         }
         return this;
     }
-    // Inserts the specified content just inside the first node, after its last child.
+    /**
+     * Inserts the specified content just inside the first node, after its last child.
+     */
     append(content) {
         const element = this.get(0);
         if (typeof content === 'string') {
@@ -1095,7 +1241,9 @@ class Nodes {
         element.appendChild(content);
         return this;
     }
-    // Inserts the specified content before the first node.
+    /**
+     * Inserts the specified content before the first node.
+     */
     before(content) {
         const node = this.get(0);
         if (!node.parentNode) {
@@ -1114,7 +1262,9 @@ class Nodes {
         node.parentNode.insertBefore(content, node);
         return this;
     }
-    // Inserts the specified content after the first node.
+    /**
+     * Inserts the specified content after the first node.
+     */
     after(content) {
         const node = this.get(0);
         if (!node.parentNode) {
@@ -1143,7 +1293,9 @@ class Nodes {
         }
         return this;
     }
-    // Replaces the first node with the given new content.
+    /**
+     * Replaces the first node with the given new content.
+     */
     replaceWith(newContent) {
         const node = this.get(0);
         if (!node.parentNode) {
@@ -1159,7 +1311,9 @@ class Nodes {
         node.parentNode.replaceChild(target, node);
         return this;
     }
-    // Removes all nodes from the DOM.
+    /**
+     * Removes all nodes from the DOM.
+     */
     remove(keepChildren = false) {
         this.each(node => {
             if (!node.parentNode) {
@@ -1177,7 +1331,9 @@ class Nodes {
         });
         return this;
     }
-    // Splits the first node, which must be a text node, into two nodes at the specified offset, keeping both as siblings in the tree.
+    /**
+     * Splits the first node, which must be a text node, into two nodes at the specified offset, keeping both as siblings in the tree.
+     */
     splitText(offset) {
         if (!this.isText) {
             return new Nodes();
@@ -1186,7 +1342,9 @@ class Nodes {
         const newNode = node.splitText(offset);
         return new Nodes(newNode);
     }
-    // Returns information about the first node, which is used for debugging.
+    /**
+     * Returns information about the first node, which is used for debugging.
+     */
     toString() {
         if (this.length === 0) {
             return '';
@@ -1198,13 +1356,19 @@ class Nodes {
         }
         return `node (${node.lakeId}): ${nodeValue}`;
     }
-    // Prints information about the first node, which is used for debugging.
+    /**
+     * Prints information about the first node, which is used for debugging.
+     */
     info() {
         debug(this.toString());
     }
 }
 
-// Returns a Nodes object representing a list of the document's nodes.
+/**
+ * Returns a Nodes object representing a collection of the nodes.
+ * This function is similar to jQuery, but its implementation is very simple.
+ * It is designed for simplifying DOM manipulation.
+ */
 function query(content) {
     if (content instanceof Nodes) {
         return content;
@@ -1222,10 +1386,13 @@ const characterMap = new Map([
 ]);
 // Converts all of the reserved characters in the specified string to HTML entities.
 function encode(value) {
-    return value.replace(/[&<>"\xA0]/g, match => { var _a; return (_a = characterMap.get(match)) !== null && _a !== undefined ? _a : ''; });
+    return value.replace(/[&<>"\xA0]/g, match => { var _a; return (_a = characterMap.get(match)) !== null && _a !== void 0 ? _a : ''; });
 }
 
-// A tag function for converting all of the reserved characters in the specified string to HTML entities.
+/**
+ * A tag function that converts all of the reserved characters in the specified string to HTML entities.
+ * It also removes empty spaces at the beginning and end of lines.
+ */
 function template(strings, ...keys) {
     let content = strings[0];
     for (let i = 0; i < keys.length; i++) {
@@ -1235,82 +1402,170 @@ function template(strings, ...keys) {
         // Don't escape special characters in the template.
         content += strings[i + 1];
     }
-    content = content.
-        replace(/^\s+/gm, '').
-        replace(/\s+$/gm, '').
-        replace(/[\r\n]/g, '');
+    content = content
+        .replace(/^\s+/gm, '')
+        .replace(/\s+$/gm, '')
+        .replace(/[\r\n]/g, '');
     return content;
 }
 
-// The Fragment interface represents a minimal document object that has no parent.
-class Fragment {
-    constructor(fragment) {
-        this.fragment = fragment !== null && fragment !== undefined ? fragment : document.createDocumentFragment();
+const boxInstances = new Map();
+function getInstanceMap(id) {
+    let instanceMap = boxInstances.get(id);
+    if (!instanceMap) {
+        instanceMap = new Map();
+        boxInstances.set(id, instanceMap);
+        return instanceMap;
     }
-    // Returns a native DocumentFragment object from the fragment.
-    get() {
-        return this.fragment;
+    return instanceMap;
+}
+
+const boxes = new Map();
+
+const editors = new Map();
+
+// Creates a Base64-encoded ASCII string from a string.
+function toBase64(value) {
+    const encoder = new TextEncoder();
+    const byteArray = encoder.encode(value);
+    let binaryString = '';
+    byteArray.forEach(byte => {
+        binaryString += String.fromCharCode(byte);
+    });
+    return window.btoa(binaryString);
+}
+
+// Decodes a string of data which has been encoded using Base64 encoding.
+function fromBase64(value) {
+    const binaryString = window.atob(value);
+    const byteArray = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        byteArray[i] = binaryString.charCodeAt(i);
     }
-    // Returns the descendants of the fragment that match 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);
+    const decoder = new TextDecoder();
+    return decoder.decode(byteArray);
+}
+
+function visibleInfo(target) {
+    let rect;
+    let viewport;
+    if (target instanceof Nodes) {
+        const nativeNode = target.get(0);
+        rect = nativeNode.getBoundingClientRect();
+        viewport = target.closestScroller();
     }
-    // Inserts the specified content just inside the fragment, after its last child.
-    append(content) {
-        query(content).each(nativeNode => {
-            this.fragment.appendChild(nativeNode);
-        });
+    else {
+        rect = target.get().getBoundingClientRect();
+        viewport = target.commonAncestor.closestScroller();
+    }
+    let left = rect.left;
+    let right = rect.right;
+    let top = rect.top;
+    let bottom = rect.bottom;
+    let viewportWidth = window.innerWidth;
+    let viewportHeight = window.innerHeight;
+    if (viewport.length > 0) {
+        const nativeViewport = viewport.get(0);
+        const viewportRect = nativeViewport.getBoundingClientRect();
+        const offsetLeft = viewportRect.x;
+        const offsetTop = viewportRect.y;
+        left -= offsetLeft;
+        right -= offsetLeft;
+        top -= offsetTop;
+        bottom -= offsetTop;
+        viewportWidth = viewportRect.width;
+        viewportHeight = viewportRect.height;
+    }
+    let leftEdge = 0;
+    if (left < 0) {
+        leftEdge = -1;
+    }
+    else if (viewportWidth - left < 0) {
+        leftEdge = 1;
     }
+    let rightEdge = 0;
+    if (right < 0) {
+        rightEdge = -1;
+    }
+    else if (viewportWidth - right < 0) {
+        rightEdge = 1;
+    }
+    let topEdge = 0;
+    if (top < 0) {
+        topEdge = -1;
+    }
+    else if (viewportHeight - top < 0) {
+        topEdge = 1;
+    }
+    let bottomEdge = 0;
+    if (bottom < 0) {
+        bottomEdge = -1;
+    }
+    else if (viewportHeight - bottom < 0) {
+        bottomEdge = 1;
+    }
+    return {
+        left: leftEdge,
+        right: rightEdge,
+        top: topEdge,
+        bottom: bottomEdge,
+    };
 }
 
-// The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.
+/**
+ * The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.
+ * Its interface is similar to the native Range, with some additional properties and methods specifically designed for more efficient manipulation.
+ */
 class Range {
     constructor(range) {
-        this.range = range !== null && range !== undefined ? range : document.createRange();
+        this.range = range !== null && range !== void 0 ? range : document.createRange();
     }
-    // A node within which the range starts.
+    /**
+     * A node within which the range starts.
+     */
     get startNode() {
         return new Nodes(this.range.startContainer);
     }
-    // A number representing where in the startNode the range starts.
+    /**
+     * A number representing where in the startNode the range starts.
+     */
     get startOffset() {
         return this.range.startOffset;
     }
-    // A node within which the range ends.
+    /**
+     * A node within which the range ends.
+     */
     get endNode() {
         return new Nodes(this.range.endContainer);
     }
-    // A number representing where in the endNode the range ends.
+    /**
+     * A number representing where in the endNode the range ends.
+     */
     get endOffset() {
         return this.range.endOffset;
     }
-    // The deepest — or furthest down the document tree — node that contains both boundary points of the range.
+    /**
+     * The deepest — or furthest down the document tree — node that contains both boundary points of the range.
+     */
     get commonAncestor() {
         return new Nodes(this.range.commonAncestorContainer);
     }
-    // A boolean value indicating whether the range's start and end points are at the same position.
+    /**
+     * A boolean value indicating whether the range's start and end points are at the same position.
+     */
     get isCollapsed() {
         return this.range.collapsed;
     }
-    // A boolean value indicating whether the range's start point is in a box.
+    /**
+     * A boolean value indicating whether the range's start point is in a box.
+     */
     get isBox() {
         const boxNode = this.commonAncestor.closest('lake-box');
         return boxNode.length > 0;
     }
-    // A boolean value indicating whether the commonAncestor is in the start position of a box.
+    /**
+     * A boolean value indicating whether the commonAncestor is in the start position of a box.
+     */
     // case 1: <lake-box><span class="lake-box-strip">|</span><div class="lake-box-container"></div> ...
     // case 2: <lake-box><span class="lake-box-strip"></span>|<div class="lake-box-container"></div> ...
     // case 3: <lake-box>|<span class="lake-box-strip"></span><div class="lake-box-container"></div> ...
@@ -1322,7 +1577,9 @@ class Range {
         const boxContainer = boxNode.find('.lake-box-container');
         return this.compareBeforeNode(boxContainer) >= 0;
     }
-    // A boolean value indicating whether the commonAncestor is in the center position of a box.
+    /**
+     * A boolean value indicating whether the commonAncestor is in the center position of a box.
+     */
     // case 1: ... <div class="lake-box-container"><div>|</div></div> ...
     // case 2: ... <div class="lake-box-container"><div></div>|</div> ...
     get isBoxCenter() {
@@ -1335,7 +1592,9 @@ class Range {
         // case: ... <div class="lake-box-container">|<div></div></div> ...
         return this.isCollapsed && this.startNode.get(0) === boxContainer.get(0) && this.startOffset === 0;
     }
-    // A boolean value indicating whether commonAncestor is in the end position of a box.
+    /**
+     * A boolean value indicating whether commonAncestor is in the end position of a box.
+     */
     // case 1: ... <div class="lake-box-container"></div><span class="lake-box-strip">|</span></lake-box>
     // case 2: ... <div class="lake-box-container"></div>|<span class="lake-box-strip"></span></lake-box>
     // case 3: ... <div class="lake-box-container"></div><span class="lake-box-strip"></span>|</lake-box>
@@ -1347,7 +1606,9 @@ class Range {
         const boxContainer = boxNode.find('.lake-box-container');
         return this.compareAfterNode(boxContainer) <= 0;
     }
-    // A boolean value indicating whether commonAncestor is inside the container of a box.
+    /**
+     * A boolean value indicating whether commonAncestor is inside the container of a box.
+     */
     // case 1: ... <div class="lake-box-container"><div>|</div></div> ...
     // case 2: ... <div class="lake-box-container"><div></div>|</div> ...
     get isInsideBox() {
@@ -1358,32 +1619,38 @@ class Range {
         const boxContainer = boxNode.find('.lake-box-container');
         // Returns false when the box was selected.
         // case: ... <div class="lake-box-container">|<div></div></div> ...
-        if (this.isCollapsed &&
-            this.startNode.get(0) === boxContainer.get(0) &&
-            this.startOffset === 0) {
+        if (this.isCollapsed
+            && this.startNode.get(0) === boxContainer.get(0)
+            && this.startOffset === 0) {
             return false;
         }
         return this.compareBeforeNode(boxContainer) < 0 && this.compareAfterNode(boxContainer) > 0;
     }
-    // A boolean value indicating whether the range is inoperative.
+    /**
+     * A boolean value indicating whether the range is inoperative.
+     */
     get isInoperative() {
         if (this.commonAncestor.isOutside) {
             return true;
         }
         const startBlock = this.startNode.closest('td');
         const endBlock = this.endNode.closest('td');
-        if (startBlock.length > 0 &&
-            endBlock.length > 0 &&
-            startBlock.get(0) !== endBlock.get(0)) {
+        if (startBlock.length > 0
+            && endBlock.length > 0
+            && startBlock.get(0) !== endBlock.get(0)) {
             return true;
         }
         return false;
     }
-    // Returns a native Range object from the range.
+    /**
+     * Returns a native Range object from the range.
+     */
     get() {
         return this.range;
     }
-    // Returns the size and position of the range.
+    /**
+     * Returns the size and position of the range.
+     */
     getRect() {
         const range = this.clone();
         let rect;
@@ -1436,13 +1703,17 @@ class Range {
             height: height > 0 ? height : 1,
         });
     }
-    // Returns -1, 0, or 1 depending on whether the specified node is before, the same as, or after the range.
-    // −1 if the point is before the range. 0 if the point is in the range. 1 if the point is after the range.
+    /**
+     * Returns -1, 0, or 1 depending on whether the specified node is before, the same as, or after the range.
+     * −1 if the point is before the range. 0 if the point is in the range. 1 if the point is after the range.
+     */
     comparePoint(node, offset) {
         return this.range.comparePoint(node.get(0), offset);
     }
-    // Returns -1, 0, or 1 depending on whether the beginning of the specified node is before, the same as, or after the range.
-    // −1 if the beginning of the node is before the range. 0 if the beginning of the node is in the range. 1 if the beginning of the node is after the range.
+    /**
+     * Returns -1, 0, or 1 depending on whether the beginning of the specified node is before, the same as, or after the range.
+     * −1 if the beginning of the node is before the range. 0 if the beginning of the node is in the range. 1 if the beginning of the node is after the range.
+     */
     compareBeforeNode(node) {
         const targetRange = new Range();
         if (node.isText) {
@@ -1454,13 +1725,15 @@ class Range {
         targetRange.collapseToStart();
         return this.comparePoint(targetRange.startNode, targetRange.startOffset);
     }
-    // Returns -1, 0, or 1 depending on whether the end of the specified node is before, the same as, or after the range.
-    // −1 if the end of the node is before the range. 0 if the end of the node is in the range. 1 if the end of the node is after the range.
+    /**
+     * Returns -1, 0, or 1 depending on whether the end of the specified node is before, the same as, or after the range.
+     * −1 if the end of the node is before the range. 0 if the end of the node is in the range. 1 if the end of the node is after the range.
+     */
     compareAfterNode(node) {
         var _a;
         const targetRange = new Range();
         if (node.isText) {
-            const nodeValue = (_a = node.get(0).nodeValue) !== null && _a !== undefined ? _a : '';
+            const nodeValue = (_a = node.get(0).nodeValue) !== null && _a !== void 0 ? _a : '';
             targetRange.setStart(node, nodeValue.length);
         }
         else {
@@ -1469,51 +1742,75 @@ class Range {
         targetRange.collapseToStart();
         return this.comparePoint(targetRange.startNode, targetRange.startOffset);
     }
-    // Returns a boolean value indicating whether the specified node is part of the range or intersects the range.
+    /**
+     * Returns a boolean value indicating whether the specified node is part of the range or intersects the range.
+     */
     intersectsNode(node) {
         return this.range.intersectsNode(node.get(0));
     }
-    // Sets the start position of the range.
+    /**
+     * Sets the start position of the range.
+     */
     setStart(node, offset) {
         this.range.setStart(node.get(0), offset);
     }
-    // Sets the start position of the range to the beginning of the specified node.
+    /**
+     * Sets the start position of the range to the beginning of the specified node.
+     */
     setStartBefore(node) {
         this.range.setStartBefore(node.get(0));
     }
-    // Sets the start position of the range to the end of the specified node.
+    /**
+     * Sets the start position of the range to the end of the specified node.
+     */
     setStartAfter(node) {
         this.range.setStartAfter(node.get(0));
     }
-    // Sets the end position of the range.
+    /**
+     * Sets the end position of the range.
+     */
     setEnd(node, offset) {
         this.range.setEnd(node.get(0), offset);
     }
-    // Sets the end position of the range to the beginning of the specified node.
+    /**
+     * Sets the end position of the range to the beginning of the specified node.
+     */
     setEndBefore(node) {
         this.range.setEndBefore(node.get(0));
     }
-    // Sets the end position of the range to the end of the specified node.
+    /**
+     * Sets the end position of the range to the end of the specified node.
+     */
     setEndAfter(node) {
         this.range.setEndAfter(node.get(0));
     }
-    // Collapses the range to its start.
+    /**
+     * Collapses the range to its start.
+     */
     collapseToStart() {
         this.range.collapse(true);
     }
-    // Collapses the range to its end.
+    /**
+     * Collapses the range to its end.
+     */
     collapseToEnd() {
         this.range.collapse(false);
     }
-    // Sets the range to contain the specified node and its contents.
+    /**
+     * Sets the range to contain the specified node and its contents.
+     */
     selectNode(node) {
         this.range.selectNode(node.get(0));
     }
-    // Sets the range to contain the contents of the specified node.
+    /**
+     * Sets the range to contain the contents of the specified node.
+     */
     selectNodeContents(node) {
         this.range.selectNodeContents(node.get(0));
     }
-    // Collapses the range to the center position of the specified box.
+    /**
+     * Collapses the range to the center position of the specified box.
+     */
     selectBox(boxNode) {
         const boxContainer = boxNode.find('.lake-box-container');
         if (boxContainer.length === 0) {
@@ -1522,7 +1819,9 @@ class Range {
         this.setStart(boxContainer, 0);
         this.collapseToStart();
     }
-    // Collapses the range to the start position of the specified box.
+    /**
+     * Collapses the range to the start position of the specified box.
+     */
     selectBoxStart(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
@@ -1531,7 +1830,9 @@ class Range {
         this.selectNodeContents(boxStrip.eq(0));
         this.collapseToStart();
     }
-    // Collapses the range to the end position of the specified box.
+    /**
+     * Collapses the range to the end position of the specified box.
+     */
     selectBoxEnd(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
@@ -1540,7 +1841,9 @@ class Range {
         this.selectNodeContents(boxStrip.eq(1));
         this.collapseToStart();
     }
-    // Collapses the range to the deepest point at the beginning of the contents of the specified node.
+    /**
+     * Collapses the range to the deepest point at the beginning of the contents of the specified node.
+     */
     shrinkBefore(node) {
         if (node.isBox) {
             this.selectBoxStart(node);
@@ -1553,9 +1856,9 @@ class Range {
         }
         this.setStart(node, 0);
         let child;
-        while (this.startNode.isElement &&
-            (child = this.startNode.children()[0]) &&
-            child.isElement && !child.isVoid) {
+        while (this.startNode.isElement
+            && (child = this.startNode.children()[0])
+            && child.isElement && !child.isVoid) {
             if (child.isBox) {
                 this.selectBoxStart(child);
                 return;
@@ -1564,7 +1867,9 @@ class Range {
         }
         this.collapseToStart();
     }
-    // Collapses the range to the deepest point at the end of the contents of the specified node.
+    /**
+     * Collapses the range to the deepest point at the end of the contents of the specified node.
+     */
     shrinkAfter(node) {
         if (node.isBox) {
             this.selectBoxEnd(node);
@@ -1577,10 +1882,10 @@ class Range {
         }
         this.setEnd(node, node.children().length);
         let child;
-        while (this.endNode.isElement &&
-            this.endOffset > 0 &&
-            (child = this.endNode.children()[this.endOffset - 1]) &&
-            child.isElement && !child.isVoid) {
+        while (this.endNode.isElement
+            && this.endOffset > 0
+            && (child = this.endNode.children()[this.endOffset - 1])
+            && child.isElement && !child.isVoid) {
             if (child.isBox) {
                 this.selectBoxEnd(child);
                 return;
@@ -1590,30 +1895,34 @@ class Range {
         this.collapseToEnd();
         this.adjustBr();
     }
-    // Sets the start and end positions of the range to the deepest start position and end position of the contents of the specified node.
+    /**
+     * Sets the start and end positions of the range to the deepest start position and end position of the contents of the specified node.
+     */
     // <div>[<p><strong>foo</strong></p>]</div>
     // to
     // <div><p><strong>[foo]</strong></p></div>
     shrink() {
         const isCollapsed = this.isCollapsed;
         let child;
-        while (this.startNode.isElement &&
-            (child = this.startNode.children()[this.startOffset]) &&
-            child.isElement && !child.isVoid && !child.isBox) {
+        while (this.startNode.isElement
+            && (child = this.startNode.children()[this.startOffset])
+            && child.isElement && !child.isVoid && !child.isBox) {
             this.setStart(child, 0);
         }
         if (isCollapsed) {
             this.collapseToStart();
             return;
         }
-        while (this.endNode.isElement &&
-            this.endOffset > 0 &&
-            (child = this.endNode.children()[this.endOffset - 1]) &&
-            child.isElement && !child.isVoid && !child.isBox) {
+        while (this.endNode.isElement
+            && this.endOffset > 0
+            && (child = this.endNode.children()[this.endOffset - 1])
+            && child.isElement && !child.isVoid && !child.isBox) {
             this.setEnd(child, child.children().length);
         }
     }
-    // Relocates the start and end positions of the range for boxes.
+    /**
+     * Relocates the start and end positions of the range for boxes.
+     */
     adjustBox() {
         const startBoxNode = this.startNode.closest('lake-box');
         if (startBoxNode.length > 0) {
@@ -1638,7 +1947,9 @@ class Range {
             }
         }
     }
-    // Relocates the start and end positions of the range for tables.
+    /**
+     * Relocates the start and end positions of the range for tables.
+     */
     adjustTable() {
         const startTable = this.startNode.closest('table');
         const endTable = this.endNode.closest('table');
@@ -1652,7 +1963,9 @@ class Range {
             this.shrink();
         }
     }
-    // Relocates the start and end positions of the range for blocks.
+    /**
+     * Relocates the start and end positions of the range for blocks.
+     */
     // case 1:
     // <p>foo</p>|<p>bar</p>
     // to
@@ -1686,13 +1999,17 @@ class Range {
             this.shrinkBefore(nextBlock);
         }
     }
-    // Relocates the start and end positions of the range for boxes, tables, and blocks.
+    /**
+     * Relocates the start and end positions of the range for boxes, tables, and blocks.
+     */
     adjust() {
         this.adjustBox();
         this.adjustTable();
         this.adjustBlock();
     }
-    // Relocates the start and end positions of the range for <br /> elements.
+    /**
+     * Relocates the start and end positions of the range for <br /> elements.
+     */
     // In composition mode (e.g., when a user starts entering a Chinese character using a Pinyin IME),
     // uncompleted text is inserted if the cursor is positioned behind a <br> tag.
     // To fix this bug, the cursor needs to be moved to the front of the <br> tag.
@@ -1707,7 +2024,9 @@ class Range {
             this.collapseToStart();
         }
     }
-    // Returns the node immediately preceding the start position of the range.
+    /**
+     * Returns the node immediately preceding the start position of the range.
+     */
     getPrevNode() {
         let prevNode;
         if (this.startNode.isText) {
@@ -1721,9 +2040,11 @@ class Range {
         else {
             prevNode = this.startNode.children()[this.startOffset - 1];
         }
-        return prevNode !== null && prevNode !== undefined ? prevNode : new Nodes();
+        return prevNode !== null && prevNode !== void 0 ? prevNode : new Nodes();
     }
-    // Returns the node immediately following the end position of the range.
+    /**
+     * Returns the node immediately following the end position of the range.
+     */
     getNextNode() {
         let nextNode;
         if (this.endNode.isText) {
@@ -1737,9 +2058,11 @@ class Range {
         else {
             nextNode = this.endNode.children()[this.endOffset];
         }
-        return nextNode !== null && nextNode !== undefined ? nextNode : new Nodes();
+        return nextNode !== null && nextNode !== void 0 ? nextNode : new Nodes();
     }
-    // Returns the boxes contained within or intersected by the range.
+    /**
+     * Returns the boxes contained within or intersected by the range.
+     */
     getBoxes() {
         if (this.isCollapsed) {
             const startBox = this.startNode.closest('lake-box');
@@ -1755,7 +2078,9 @@ class Range {
         }
         return nodeList;
     }
-    // Returns the blocks contained within or intersected by the range.
+    /**
+     * Returns the blocks contained within or intersected by the range.
+     */
     getBlocks() {
         if (this.isCollapsed) {
             const startBlock = this.startNode.closestOperableBlock();
@@ -1766,19 +2091,19 @@ class Range {
         }
         const startBlock = this.startNode.closestOperableBlock();
         const endBlock = this.endNode.closestOperableBlock();
-        if (startBlock.isInside &&
-            startBlock.get(0) &&
-            startBlock.get(0) === endBlock.get(0)) {
+        if (startBlock.isInside
+            && startBlock.get(0)
+            && startBlock.get(0) === endBlock.get(0)) {
             return startBlock.isTable ? [] : [startBlock];
         }
         const blocks = [];
         const clonedRange = this.clone();
         clonedRange.collapseToEnd();
         for (const child of this.commonAncestor.getWalker()) {
-            if (child.isBlock && !child.isTable && child.isTopInside &&
-                // the range doesn't end at the start of a block
-                clonedRange.comparePoint(child, 0) !== 0 &&
-                this.intersectsNode(child)) {
+            if (child.isBlock && !child.isTable && child.isTopInside
+                // The range doesn't end at the start of a block.
+                && clonedRange.comparePoint(child, 0) !== 0
+                && this.intersectsNode(child)) {
                 blocks.push(child);
             }
         }
@@ -1786,20 +2111,22 @@ class Range {
             return blocks;
         }
         for (const child of this.commonAncestor.getWalker()) {
-            if (child.isBlock && !child.isTable &&
-                (startBlock.isSibling(child) || endBlock.isSibling(child)) &&
-                this.intersectsNode(child)) {
+            if (child.isBlock && !child.isTable
+                && (startBlock.isSibling(child) || endBlock.isSibling(child))
+                && this.intersectsNode(child)) {
                 blocks.push(child);
             }
         }
         return blocks;
     }
-    // Returns the marks and text nodes contained within or intersected by the range.
+    /**
+     * Returns the marks and text nodes contained within or intersected by the range.
+     */
     getMarks(hasText = false) {
         const marks = [];
         if (this.commonAncestor.isText && hasText) {
-            if (this.startOffset === 0 &&
-                this.endOffset === this.commonAncestor.text().length) {
+            if (this.startOffset === 0
+                && this.endOffset === this.commonAncestor.text().length) {
                 marks.push(this.commonAncestor);
                 return marks;
             }
@@ -1826,7 +2153,9 @@ class Range {
         }
         return marks;
     }
-    // Returns the text from the start position of the closest block to the start position of the range.
+    /**
+     * Returns the text from the start position of the closest block to the start position of the range.
+     */
     // "<p>one<anchor />two<focus />three</p>" returns "one".
     getStartText() {
         const node = this.startNode;
@@ -1849,7 +2178,9 @@ class Range {
         }
         return text;
     }
-    // Returns the text from the end position of the range to the end position of the closest block.
+    /**
+     * Returns the text from the end position of the range to the end position of the closest block.
+     */
     // "<p>one<anchor />two<focus />three</p>" returns "three".
     getEndText() {
         const node = this.endNode;
@@ -1872,9 +2203,11 @@ class Range {
         }
         return text;
     }
-    // Returns a new range from the specified character to the start position of the range.
-    // The specified character must be preceded by a whitespace or be at the beginning of a paragraph,
-    // without being adjacent to other characters. It will return null if not.
+    /**
+     * Returns a new range from the specified character to the start position of the range.
+     * The specified character must be preceded by a whitespace or be at the beginning of a paragraph,
+     * without being adjacent to other characters. It will return null if not.
+     */
     getCharacterRange(character) {
         const newRange = this.clone();
         newRange.shrink();
@@ -1911,15 +2244,21 @@ class Range {
         }
         return newRange;
     }
-    // Returns a copy of the range.
+    /**
+     * Returns a copy of the range.
+     */
     clone() {
         return new Range(this.range.cloneRange());
     }
-    // Returns a DocumentFragment object copying the nodes included in the range.
+    /**
+     * Returns a DocumentFragment object copying the nodes included in the range.
+     */
     cloneContents() {
         return this.range.cloneContents();
     }
-    // Prints information about the range, which is used for debugging.
+    /**
+     * Prints information about the range, which is used for debugging.
+     */
     info() {
         debug('--- range information ---');
         debug('start node:', this.startNode.toString(), ', offset:', this.startOffset);
@@ -1927,98 +2266,6 @@ class Range {
     }
 }
 
-const boxes = new Map();
-
-const editors = new Map();
-
-// Creates a Base64-encoded ASCII string from a string.
-function toBase64(value) {
-    const encoder = new TextEncoder();
-    const byteArray = encoder.encode(value);
-    let binaryString = '';
-    byteArray.forEach(byte => {
-        binaryString += String.fromCharCode(byte);
-    });
-    return window.btoa(binaryString);
-}
-
-// Decodes a string of data which has been encoded using Base64 encoding.
-function fromBase64(value) {
-    const binaryString = window.atob(value);
-    const byteArray = new Uint8Array(binaryString.length);
-    for (let i = 0; i < binaryString.length; i++) {
-        byteArray[i] = binaryString.charCodeAt(i);
-    }
-    const decoder = new TextDecoder();
-    return decoder.decode(byteArray);
-}
-
-function visibleInfo(target) {
-    let rect;
-    let viewport;
-    if (target instanceof Nodes) {
-        const nativeNode = target.get(0);
-        rect = nativeNode.getBoundingClientRect();
-        viewport = target.closestScroller();
-    }
-    else {
-        rect = target.get().getBoundingClientRect();
-        viewport = target.commonAncestor.closestScroller();
-    }
-    let left = rect.left;
-    let right = rect.right;
-    let top = rect.top;
-    let bottom = rect.bottom;
-    let viewportWidth = window.innerWidth;
-    let viewportHeight = window.innerHeight;
-    if (viewport.length > 0) {
-        const nativeViewport = viewport.get(0);
-        const viewportRect = nativeViewport.getBoundingClientRect();
-        const offsetLeft = viewportRect.x;
-        const offsetTop = viewportRect.y;
-        left -= offsetLeft;
-        right -= offsetLeft;
-        top -= offsetTop;
-        bottom -= offsetTop;
-        viewportWidth = viewportRect.width;
-        viewportHeight = viewportRect.height;
-    }
-    let leftEdge = 0;
-    if (left < 0) {
-        leftEdge = -1;
-    }
-    else if (viewportWidth - left < 0) {
-        leftEdge = 1;
-    }
-    let rightEdge = 0;
-    if (right < 0) {
-        rightEdge = -1;
-    }
-    else if (viewportWidth - right < 0) {
-        rightEdge = 1;
-    }
-    let topEdge = 0;
-    if (top < 0) {
-        topEdge = -1;
-    }
-    else if (viewportHeight - top < 0) {
-        topEdge = 1;
-    }
-    let bottomEdge = 0;
-    if (bottom < 0) {
-        bottomEdge = -1;
-    }
-    else if (viewportHeight - bottom < 0) {
-        bottomEdge = 1;
-    }
-    return {
-        left: leftEdge,
-        right: rightEdge,
-        top: topEdge,
-        bottom: bottomEdge,
-    };
-}
-
 const headingMenuItems = [
     {
         value: 'h1',
@@ -2609,7 +2856,7 @@ const toolbarItems = [
             const currentValues = [];
             for (const item of activeItems) {
                 if (item.node.isMark) {
-                    const name = (_a = tagPluginNameMap.get(item.name)) !== null && _a !== undefined ? _a : item.name;
+                    const name = (_a = tagPluginNameMap.get(item.name)) !== null && _a !== void 0 ? _a : item.name;
                     currentValues.push(name);
                 }
             }
@@ -2667,7 +2914,7 @@ const toolbarItems = [
     },
 ];
 
-/**
+/*
 The MIT License (MIT)
 
 Copyright (c) 2016-present react-component
@@ -2716,7 +2963,7 @@ function getBody(xhr) {
 function request(option) {
     const xhr = new XMLHttpRequest();
     if (option.onProgress && xhr.upload) {
-        xhr.upload.onprogress = (e) => {
+        xhr.upload.onprogress = e => {
             if (e.total > 0) {
                 e.percent = (e.loaded / e.total) * 100;
             }
@@ -2749,7 +2996,7 @@ function request(option) {
             formData.append(filename, option.file);
         }
     }
-    xhr.onerror = (e) => {
+    xhr.onerror = e => {
         if (option.onError) {
             option.onError(e);
         }
@@ -2854,11 +3101,13 @@ function uploadFile(config) {
     return box;
 }
 
-// The Button interface represents a UI component clicked by a user. Once clicked, it then performs an action.
+/**
+ * The Button interface represents a clickable UI component. When a user clicks the button, a specified action is executed.
+ */
 class Button {
     constructor(config) {
         this.config = config;
-        this.root = config.root;
+        this.root = query(config.root);
         this.node = query(template `
       <button type="button" name="${config.name}" class="lake-button" />
     `);
@@ -2869,7 +3118,9 @@ class Button {
             this.node.attr('tabindex', config.tabIndex.toString());
         }
     }
-    // Renders the button.
+    /**
+     * Renders the button to the DOM.
+     */
     render() {
         const config = this.config;
         const buttonNode = this.node;
@@ -2884,6 +3135,7 @@ class Button {
             buttonNode.append(`<span>${config.text}</span>`);
         }
         this.root.append(buttonNode);
+        this.root.get(0).appendChild(buttonNode.get(0));
         buttonNode.on('mouseenter', () => {
             if (buttonNode.attr('disabled')) {
                 return;
@@ -2914,10 +3166,10 @@ function unsafeTemplate(strings, ...keys) {
         content += key;
         content += strings[i + 1];
     }
-    content = content.
-        replace(/^\s+/gm, '').
-        replace(/\s+$/gm, '').
-        replace(/[\r\n]/g, '');
+    content = content
+        .replace(/^\s+/gm, '')
+        .replace(/\s+$/gm, '')
+        .replace(/[\r\n]/g, '');
     return content;
 }
 
@@ -2929,7 +3181,7 @@ function modifierText(value, userAgent) {
     if (typeof window === 'undefined') {
         return value;
     }
-    userAgent = userAgent !== null && userAgent !== undefined ? userAgent : navigator.userAgent;
+    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`);
@@ -3626,21 +3878,25 @@ const initFormatters = () => {
     };
     return formatters;
 };
-const loadFormatters = (locale) => {
+function loadFormatters(locale) {
     loadedFormatters[locale] = initFormatters();
-};
-const loadLocale = (locale) => {
+}
+function loadLocale(locale) {
     if (loadedLocales[locale]) {
         return;
     }
     loadedLocales[locale] = localeTranslations[locale];
     loadFormatters(locale);
-};
+}
 const loadAllLocales = () => locales.forEach(loadLocale);
-const i18nObject = (locale) => i18nObject$1(locale, loadedLocales[locale], loadedFormatters[locale]);
+function i18nObject(locale) {
+    return i18nObject$1(locale, loadedLocales[locale], loadedFormatters[locale]);
+}
 loadAllLocales();
 
-// The Dropdown interface represents a UI component that provides a menu of options.
+/**
+ * The Dropdown component provides a user-friendly menu with selectable options. Use it to allow users to pick from a list of predefined choices.
+ */
 class Dropdown {
     constructor(config) {
         this.clickListener = (event) => {
@@ -3654,7 +3910,7 @@ class Dropdown {
         this.scrollListener = () => this.updatePosition();
         this.resizeListener = () => this.updatePosition();
         this.config = config;
-        this.root = config.root;
+        this.root = query(config.root);
         this.locale = config.locale || i18nObject('en-US');
         this.location = config.location || 'local';
         this.direction = config.direction || 'auto';
@@ -3672,7 +3928,9 @@ class Dropdown {
             titleNode.attr('tabindex', config.tabIndex.toString());
         }
     }
-    // Returns the value of the node.
+    /**
+     * Returns the value of the node.
+     */
     static getValue(node) {
         const value = node.attr('value');
         if (value === '') {
@@ -3680,7 +3938,9 @@ class Dropdown {
         }
         return JSON.parse(fromBase64(value));
     }
-    // Updates the value of the node.
+    /**
+     * Updates the value of the node.
+     */
     static setValue(node, value) {
         node.attr('value', toBase64(JSON.stringify(value)));
     }
@@ -3865,11 +4125,13 @@ class Dropdown {
         document.removeEventListener('click', this.clickListener);
         window.removeEventListener('resize', this.resizeListener);
     }
-    // Renders the dropdown.
+    /**
+     * Renders the dropdown to the DOM.
+     */
     render() {
         var _a, _b;
         const config = this.config;
-        const defaultValue = (_a = config.defaultValue) !== null && _a !== undefined ? _a : '';
+        const defaultValue = (_a = config.defaultValue) !== null && _a !== void 0 ? _a : '';
         const titleNode = this.node.find('.lake-dropdown-title');
         if (!config.downIcon) {
             titleNode.addClass('lake-dropdown-title-no-down');
@@ -3894,7 +4156,7 @@ class Dropdown {
         Dropdown.setValue(this.node, [defaultValue]);
         if (textNode.length > 0) {
             const menuMap = Dropdown.getMenuMap(config.menuItems, this.locale);
-            textNode.text((_b = menuMap.get(defaultValue)) !== null && _b !== undefined ? _b : defaultValue);
+            textNode.text((_b = menuMap.get(defaultValue)) !== null && _b !== void 0 ? _b : defaultValue);
         }
         if (config.menuType === 'color') {
             this.updateColorAccent(titleNode, defaultValue);
@@ -3948,7 +4210,9 @@ class Dropdown {
             this.showMenu();
         });
     }
-    // Destroys the dropdown.
+    /**
+     * Removes the dropdown from the DOM and cleans up resources.
+     */
     unmount() {
         this.hideMenu();
         this.menuNode.remove();
@@ -3981,7 +4245,9 @@ const toolbarItemMap = new Map();
 for (const item of toolbarItems) {
     toolbarItemMap.set(item.name, item);
 }
-// The Toolbar interface provides properties and methods for rendering and manipulating the toolbar.
+/**
+ * The Toolbar interface provides properties and methods for rendering and manipulating the toolbar.
+ */
 class Toolbar {
     constructor(config) {
         this.placement = 'top';
@@ -4087,7 +4353,9 @@ class Toolbar {
             }
         });
     }
-    // Update the state of each item in the toolbar, such as whether it is selected, disabled.
+    /**
+     * Updates the state of each toolbar item, such as whether it is selected or disabled.
+     */
     updateState(state = {
         activeItems: [],
     }) {
@@ -4148,13 +4416,15 @@ class Toolbar {
                 if (textNode.length > 0) {
                     const key = selectedValues[0] || item.defaultValue || '';
                     const menuMap = this.allMenuMap.get(item.name);
-                    const text = (_a = (menuMap && menuMap.get(key))) !== null && _a !== undefined ? _a : key;
+                    const text = (_a = (menuMap && menuMap.get(key))) !== null && _a !== void 0 ? _a : key;
                     textNode.text(text);
                 }
             }
         }
     }
-    // Renders a toolbar for the specified editor.
+    /**
+     * Renders the toolbar for the specified editor.
+     */
     render(editor) {
         this.root.append(this.container);
         for (const name of this.items) {
@@ -4187,7 +4457,9 @@ class Toolbar {
             }
         }
     }
-    // Destroys the toolbar.
+    /**
+     * Destroys the toolbar instance, removing it from the DOM.
+     */
     unmount() {
         for (const dropdown of this.dropdownList) {
             dropdown.unmount();
@@ -4216,8 +4488,8 @@ class FloatingToolbar extends Toolbar {
     }
     updatePosition() {
         const visible = visibleInfo(this.range);
-        if ((visible.top === -1 && visible.bottom === -1) ||
-            (visible.top === 1 && visible.bottom === 1)) {
+        if ((visible.top === -1 && visible.bottom === -1)
+            || (visible.top === 1 && visible.bottom === 1)) {
             this.container.css('visibility', 'hidden');
             return;
         }
@@ -4293,12 +4565,18 @@ class FloatingToolbar extends Toolbar {
     }
 }
 
-// The Box interface represents an embedded content, which is used to enhance editing capability.
+/**
+ * The Box interface represents an embedded content designed to enhance editing capability.
+ */
 class Box {
     constructor(node) {
-        // Managing events.
+        /**
+         * An EventEmitter object for handling events. See the Instance events for details.
+         */
         this.event = new EventEmitter();
-        // A toolbar for the box.
+        /**
+         * A floating toolbar attached to the box.
+         */
         this.toolbar = null;
         if (typeof node === 'string') {
             const component = boxes.get(node);
@@ -4339,9 +4617,9 @@ class Box {
             container.off('click');
         }
         container.on('mouseenter', () => {
-            if (container.hasClass('lake-box-selected') ||
-                container.hasClass('lake-box-focused') ||
-                container.hasClass('lake-box-activated')) {
+            if (container.hasClass('lake-box-selected')
+                || container.hasClass('lake-box-focused')
+                || container.hasClass('lake-box-activated')) {
                 return;
             }
             container.addClass('lake-box-hovered');
@@ -4357,15 +4635,21 @@ class Box {
             container.attr('draggable', 'true');
         }
     }
-    // Returns the type of the box.
+    /**
+     * Indicates the type of the box.
+     */
     get type() {
         return this.node.attr('type');
     }
-    // Returns the name of the box.
+    /**
+     * Returns the name of the box.
+     */
     get name() {
         return this.node.attr('name');
     }
-    // Returns the value of the box.
+    /**
+     * Gets or sets the value of the box.
+     */
     get value() {
         const value = this.node.attr('value');
         if (value === '') {
@@ -4373,7 +4657,6 @@ class Box {
         }
         return JSON.parse(fromBase64(value));
     }
-    // Sets the value of the box.
     set value(value) {
         this.node.attr('value', toBase64(JSON.stringify(value)));
     }
@@ -4389,7 +4672,9 @@ class Box {
         }
         this.value = value;
     }
-    // Returns an instance of the editor containing the box.
+    /**
+     * Returns the Editor object that contains the box.
+     */
     getEditor() {
         const container = this.node.closest('div[contenteditable]');
         const editor = container.length > 0 ? editors.get(container.id) : undefined;
@@ -4398,11 +4683,15 @@ class Box {
         }
         return editor;
     }
-    // Returns the container of the box.
+    /**
+     * Returns the container element of the box.
+     */
     getContainer() {
         return this.node.find('.lake-box-container');
     }
-    // Returns the HTML string contained within the box.
+    /**
+     * Returns the HTML content inside the box.
+     */
     getHTML() {
         const component = boxes.get(this.name);
         if (component === undefined) {
@@ -4413,7 +4702,9 @@ class Box {
         }
         return component.html(this);
     }
-    // Sets a floating toolbar for the box.
+    /**
+     * Adds a floating toolbar to the box.
+     */
     setToolbar(items) {
         const editor = this.getEditor();
         this.event.on('focus', () => {
@@ -4438,7 +4729,9 @@ class Box {
             }
         });
     }
-    // Renders the contents of the box.
+    /**
+     * Renders the content inside the box.
+     */
     render() {
         const component = boxes.get(this.name);
         if (component === undefined) {
@@ -4455,7 +4748,9 @@ class Box {
         }
         debug(`Box "${this.name}" (id: ${this.node.id}) rendered`);
     }
-    // Destroys the box.
+    /**
+     * Destroys the box instance.
+     */
     unmount() {
         this.event.emit('blur');
         this.event.emit('beforeunmount');
@@ -4465,9 +4760,94 @@ class Box {
     }
 }
 
+/**
+ * Returns an existing Box instance associated with the provided boxNode or generates a new one if none exists.
+ * The function handles the creation and storage of Box instances, storing them either in a temporary or
+ * permanentmap based on whether the boxNode is contained within a container.
+ */
+function getBox(boxNode) {
+    const tempInstanceMap = getInstanceMap(0);
+    // boxNode is a name
+    if (typeof boxNode === 'string') {
+        const box = new Box(boxNode);
+        tempInstanceMap.set(box.node.id, box);
+        return box;
+    }
+    // boxNode is a node
+    boxNode = query(boxNode);
+    const container = boxNode.closestContainer();
+    if (container.length === 0) {
+        let box = tempInstanceMap.get(boxNode.id);
+        if (box) {
+            return box;
+        }
+        box = new Box(boxNode);
+        tempInstanceMap.set(boxNode.id, box);
+        return box;
+    }
+    const instanceMap = getInstanceMap(container.id);
+    let box = tempInstanceMap.get(boxNode.id);
+    if (box) {
+        // move the box instance from temporary map to permanent map
+        instanceMap.set(boxNode.id, box);
+        tempInstanceMap.delete(boxNode.id);
+        return box;
+    }
+    box = instanceMap.get(boxNode.id);
+    if (box) {
+        return box;
+    }
+    box = new Box(boxNode);
+    instanceMap.set(boxNode.id, box);
+    return box;
+}
+
+/**
+ * The Fragment interface represents a lightweight document object that has no parent.
+ * It is designed for efficient manipulation of document structures without affecting the main DOM.
+ */
+class Fragment {
+    constructor(fragment) {
+        this.fragment = fragment !== null && fragment !== void 0 ? fragment : document.createDocumentFragment();
+    }
+    /**
+     * Returns a native DocumentFragment object from the fragment.
+     */
+    get() {
+        return this.fragment;
+    }
+    /**
+     * Finds and returns descendants of the fragment that match 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 content just inside the fragment, after its last child.
+     */
+    append(content) {
+        query(content).each(nativeNode => {
+            this.fragment.appendChild(nativeNode);
+        });
+    }
+}
+
 const blockAttributeRules = {
     id: /^[\w-]+$/,
-    class: /^[\w- ]+$/,
+    class: /^[\w\- ]+$/,
     style: {
         'text-align': ['left', 'center', 'right', 'justify', 'start', 'end'],
         'margin-left': /^-?\d+px$/i,
@@ -4540,7 +4920,7 @@ function getElementRules() {
             },
         },
         span: {
-            class: /^[\w- ]+$/,
+            class: /^[\w\- ]+$/,
             style: {
                 color: /^[^"]+$/,
                 'background-color': /^[^"]+$/,
@@ -4558,7 +4938,7 @@ function getElementRules() {
         sup: {},
         code: {},
         a: {
-            class: /^[\w- ]+$/,
+            class: /^[\w\- ]+$/,
             name: /^[\w-]+$/,
             href: /^[^"]+$/,
             target: /^[\w-]+$/,
@@ -4573,9 +4953,9 @@ function getElementRules() {
 
 // Converts a string from style property of element to a key-value object that contains a list of all styles properties.
 function parseStyle(styleValue) {
-    styleValue = styleValue.replace(/&quot;/ig, '"');
+    styleValue = styleValue.replace(/&quot;/gi, '"');
     const properties = {};
-    const re = /\s*([\w-]+)\s*:([^;]*)(;|$)/g;
+    const re = /\s*([\w-]+)\s*:([^;]*)(?:;|$)/g;
     let result;
     while ((result = re.exec(styleValue)) !== null) {
         const key = result[1].toLowerCase().trim();
@@ -4585,7 +4965,9 @@ function parseStyle(styleValue) {
     return properties;
 }
 
-// The HTMLParser interface provides the ability to parse an HTML string by specified rules.
+/**
+ * The HTMLParser interface provides the ability to parse an HTML string according to specified rules.
+ */
 class HTMLParser {
     constructor(content, rules = getElementRules()) {
         this.rules = rules;
@@ -4596,13 +4978,17 @@ class HTMLParser {
             this.source = content;
         }
     }
-    // Parses the given HTML string and returns the body element from the result.
+    /**
+     * Parses the given HTML string and returns the body element from the result.
+     */
     parseHTML(html) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
         return new Nodes(doc.querySelector('body'));
     }
-    // Returns a boolean indicating whether a value matches the specified rule.
+    /**
+     * Returns a boolean value indicating whether the given value matches the given rule.
+     */
     static matchRule(rule, value) {
         if (typeof rule === 'string') {
             return rule === value;
@@ -4615,7 +5001,9 @@ class HTMLParser {
         }
         return false;
     }
-    // Returns an open tag string of the specified element.
+    /**
+     * Returns an open tag string from the specified element.
+     */
     static getOpenTagString(element, rules) {
         let tagName = element.name;
         let attributeRules = rules[tagName];
@@ -4667,7 +5055,9 @@ class HTMLParser {
         }
         return openTag;
     }
-    // Returns a closed tag string of the specified element.
+    /**
+     * Returns a closed tag string from the specified element.
+     */
     static getClosedTagString(element, rules) {
         let tagName = element.name;
         const attributeRules = rules[tagName];
@@ -4679,7 +5069,9 @@ class HTMLParser {
         }
         return tagName;
     }
-    // Returns the value of the text node with trimming invisible whitespace.
+    /**
+     * Returns the value of the text node with trimming invisible whitespace.
+     */
     // <p>foo</p>\n<p>bar</p>
     // or
     // <p>\nfoo\n</p>
@@ -4688,22 +5080,23 @@ class HTMLParser {
         const prevSibling = textNode.prev();
         const nextSibling = textNode.next();
         let nodeValue = textNode.text();
-        if ((prevSibling.isBlock || prevSibling.isBlockBox) &&
-            (nextSibling.isBlock || nextSibling.isBlockBox) ||
-            prevSibling.length === 0 && nextSibling.length === 0 && parentNode.isBlock) {
+        if (((prevSibling.isBlock || prevSibling.isBlockBox) && (nextSibling.isBlock || nextSibling.isBlockBox))
+            || (prevSibling.length === 0 && nextSibling.length === 0 && parentNode.isBlock)) {
             nodeValue = nodeValue.replace(/^[\u0020\t\r\n]+|[\u0020\t\r\n]+$/g, '');
         }
-        else if ((prevSibling.isBlock || prevSibling.isBlockBox) ||
-            prevSibling.length === 0 && parentNode.isBlock) {
+        else if ((prevSibling.isBlock || prevSibling.isBlockBox)
+            || (prevSibling.length === 0 && parentNode.isBlock)) {
             nodeValue = nodeValue.replace(/^[\u0020\t\r\n]+/, '');
         }
-        else if ((nextSibling.isBlock || nextSibling.isBlockBox) ||
-            nextSibling.length === 0 && parentNode.isBlock) {
+        else if ((nextSibling.isBlock || nextSibling.isBlockBox)
+            || (nextSibling.length === 0 && parentNode.isBlock)) {
             nodeValue = nodeValue.replace(/[\u0020\t\r\n]+$/, '');
         }
         return nodeValue;
     }
-    // Returns an HTML string.
+    /**
+     * Returns the parsed HTML as a string.
+     */
     getHTML() {
         const rules = this.rules;
         function* iterate(node) {
@@ -4741,7 +5134,9 @@ class HTMLParser {
         }
         return html.trim();
     }
-    // Returns a DocumentFragment object.
+    /**
+     * Returns the parsed content as a DocumentFragment object.
+     */
     getFragment() {
         const html = this.getHTML();
         const body = this.parseHTML(html);
@@ -4756,12 +5151,16 @@ class HTMLParser {
     }
 }
 
-// The TextParser interface provides the ability to parse a text.
+/**
+ * The TextParser interface enables parsing of text into structured HTML.
+ */
 class TextParser {
     constructor(content) {
         this.content = content;
     }
-    // Returns an HTML string.
+    /**
+     * Converts the parsed text into an HTML string.
+     */
     getHTML() {
         let html = this.content;
         html = html.replace(/ {2}/g, ' \xA0');
@@ -4773,7 +5172,9 @@ class TextParser {
         html = html.replace(/[\r\n]/g, '</p><p>');
         return html;
     }
-    // Returns a DocumentFragment object.
+    /**
+     * Generates a DocumentFragment object that represents the parsed text.
+     */
     getFragment() {
         const htmlParser = new HTMLParser(this.getHTML());
         return htmlParser.getFragment();
@@ -4787,7 +5188,9 @@ function insertNode(range, node) {
     nativeRange.setEndAfter(nativeNode);
     nativeRange.collapse(false);
 }
-// Inserts a bookmark at the cursor position or a pair of bookmarks at the beginning and end of the range.
+/**
+ * Inserts a bookmark at the cursor position or a pair of bookmarks at the beginning and end of the range.
+ */
 // case 1: foo<lake-bookmark type="focus" />bar
 // case 2: <lake-bookmark type="anchor" />foo<lake-bookmark type="focus" />
 // case 3: foo<lake-box type="inline" name="image" focus="start"></lake-box>bar
@@ -4843,55 +5246,6 @@ function insertBookmark(range) {
     };
 }
 
-const boxInstances = new Map();
-function getInstanceMap(id) {
-    let instanceMap = boxInstances.get(id);
-    if (!instanceMap) {
-        instanceMap = new Map();
-        boxInstances.set(id, instanceMap);
-        return instanceMap;
-    }
-    return instanceMap;
-}
-
-// Returns an already generated box instance or generates a new instance if it does not exist.
-function getBox(boxNode) {
-    const tempInstanceMap = getInstanceMap(0);
-    // boxNode is a name
-    if (typeof boxNode === 'string') {
-        const box = new Box(boxNode);
-        tempInstanceMap.set(box.node.id, box);
-        return box;
-    }
-    // boxNode is node
-    boxNode = query(boxNode);
-    const container = boxNode.closestContainer();
-    if (container.length === 0) {
-        let box = tempInstanceMap.get(boxNode.id);
-        if (box) {
-            return box;
-        }
-        box = new Box(boxNode);
-        tempInstanceMap.set(boxNode.id, box);
-        return box;
-    }
-    const instanceMap = getInstanceMap(container.id);
-    let box = tempInstanceMap.get(boxNode.id);
-    if (box) {
-        // move the box instance from temporary map to permanent map
-        instanceMap.set(boxNode.id, box);
-        tempInstanceMap.delete(boxNode.id);
-        return box;
-    }
-    box = instanceMap.get(boxNode.id);
-    if (box) {
-        return box;
-    }
-    box = new Box(boxNode);
-    instanceMap.set(boxNode.id, box);
-    return box;
-}
-
 function removeAndNormalizeNode(node, range) {
     const previousNode = node.prev();
     const nextNode = node.next();
@@ -4913,7 +5267,9 @@ function removeAndNormalizeNode(node, range) {
         node.remove();
     }
 }
-// Changes the specified range to a range represented by the bookmark.
+/**
+ * Changes the specified range to a range represented by the provided bookmark.
+ */
 function toBookmark(range, bookmark) {
     const anchor = bookmark.anchor;
     const focus = bookmark.focus;
@@ -4984,8 +5340,8 @@ function removeBreak(block) {
         }
         child = nextNode;
     }
-    if (nodeList.length === 1 && nodeList[0].name === 'br' ||
-        nodeList.length === 2 && nodeList[0].name === 'br' && nodeList[1].isBookmark) {
+    if ((nodeList.length === 1 && nodeList[0].name === 'br')
+        || (nodeList.length === 2 && nodeList[0].name === 'br' && nodeList[1].isBookmark)) {
         nodeList[0].remove();
     }
     if (nodeList.length === 2 && nodeList[0].isBookmark && nodeList[1].name === 'br') {
@@ -5071,11 +5427,11 @@ function mergeNodes(node, otherNode) {
         child = next;
     }
     originalOtherNode.remove();
-    if (nextNode.length > 0 &&
-        nextOtherNode.length > 0 &&
-        nextNode.isElement &&
-        !nextNode.isBox &&
-        nextNode.clone(false).get(0).isEqualNode(nextOtherNode.clone(false).get(0))) {
+    if (nextNode.length > 0
+        && nextOtherNode.length > 0
+        && nextNode.isElement
+        && !nextNode.isBox
+        && nextNode.clone(false).get(0).isEqualNode(nextOtherNode.clone(false).get(0))) {
         return mergeNodes(nextNode, nextOtherNode);
     }
     if (nextNode.length === 0) {
@@ -5136,7 +5492,9 @@ function fixNumberedList(blocks) {
     }
 }
 
-// Removes the contents of the specified range.
+/**
+ * Removes the contents of the specified range.
+ */
 function deleteContents(range) {
     if (range.isCollapsed) {
         return;
@@ -5175,7 +5533,9 @@ function deleteContents(range) {
     toBookmark(range, bookmark);
 }
 
-// Inserts the specified contents into the range.
+/**
+ * Inserts the specified contents into the range.
+ */
 function insertContents(range, contents) {
     if (range.commonAncestor.isOutside) {
         return;
@@ -5223,7 +5583,7 @@ function getDeepElement(element) {
 
 // Appends a list of nodes to the specified element.
 function wrapNodeList(nodeList, wrapper) {
-    wrapper = wrapper !== null && wrapper !== undefined ? wrapper : query('<p />');
+    wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : query('<p />');
     if (nodeList.length === 0) {
         return wrapper;
     }
@@ -5261,7 +5621,9 @@ function getTopNonBlockNodes(range) {
     }
     return nodeList;
 }
-// Adds new blocks or changes target blocks in the specified range.
+/**
+ * Adds new blocks or changes the target blocks in the specified range.
+ */
 function setBlocks(range, value) {
     if (range.commonAncestor.isOutside) {
         return;
@@ -5414,7 +5776,9 @@ function removeEmptyMarks(node) {
     }
 }
 
-// Removes the contents of the specified range and then splits the block node at the point of the collapsed range.
+/**
+ * Removes the contents of the specified range and then splits the block node at the point of the collapsed range.
+ */
 // <p>one<anchor />two<focus />three</p>
 // to
 // <p>one</p>
@@ -5478,7 +5842,9 @@ function splitBlock$1(range) {
     };
 }
 
-// Inserts a block into the specified range.
+/**
+ * Inserts a block into the specified range.
+ */
 function insertBlock(range, value) {
     if (range.commonAncestor.isOutside) {
         return null;
@@ -5506,7 +5872,9 @@ function insertBlock(range, value) {
     return block;
 }
 
-// Splits text nodes or mark nodes at a specified position.
+/**
+ * Splits text nodes or mark nodes.
+ */
 function splitMarksAtPoint(node, offset, removeEmptyMark) {
     let start = null;
     let end = null;
@@ -5586,7 +5954,9 @@ function splitMarks(range, removeEmptyMark = true) {
     };
 }
 
-// Removes zero-width space before or after the node.
+/**
+ * Removes zero-width space at the beginning or end of the specified node.
+ */
 function removePreviousOrNextZWS(node) {
     const prevNode = node.prev();
     if (prevNode.length > 0 && prevNode.isText && prevNode.isEmpty) {
@@ -5597,7 +5967,9 @@ function removePreviousOrNextZWS(node) {
         nextNode.remove();
     }
 }
-// Returns a nested mark copied from ancestors of the specified node.
+/**
+ * Returns a nested mark copied from ancestors of the specified node.
+ */
 function getNestedMark$1(node) {
     let parent = node;
     if (parent.isText) {
@@ -5620,22 +5992,26 @@ function getNestedMark$1(node) {
     }
     return mark;
 }
-// Returns the topmost mark element or the closest element with the same tag name as the specified node.
+/**
+ * Returns the topmost mark element or the closest element with the same tag name as the specified node.
+ */
 function getUpperMark(node, tagName) {
     const nodeText = node.text();
     let parent = node;
     while (parent.length > 0) {
         const nextParent = parent.parent();
-        if (!nextParent.isMark ||
-            nodeText !== nextParent.text() ||
-            !parent.isText && parent.name === tagName && parent.attr('style') !== '') {
+        if (!nextParent.isMark
+            || nodeText !== nextParent.text()
+            || (!parent.isText && parent.name === tagName && parent.attr('style') !== '')) {
             break;
         }
         parent = nextParent;
     }
     return parent;
 }
-// Adds the specified mark to the texts of the range.
+/**
+ * Adds the specified mark to the texts of the range.
+ */
 function addMark(range, value) {
     if (range.commonAncestor.isOutside) {
         return;
@@ -5730,7 +6106,9 @@ function removeZWS(node) {
     }
 }
 
-// Returns a nested mark copied from each last child of the descendants of the specified node.
+/**
+ * Returns a nested mark copied from each last child of the descendants of the specified node.
+ */
 function getNestedMark(node, tagName) {
     if (!node.isMark || !tagName) {
         return null;
@@ -5757,7 +6135,9 @@ function getNestedMark(node, tagName) {
     }
     return mark;
 }
-// Removes the specified marks in the range.
+/**
+ * Removes the specified marks in the range.
+ */
 function removeMark(range, value) {
     if (range.commonAncestor.isOutside) {
         return;
@@ -5819,7 +6199,9 @@ function removeMark(range, value) {
     toBookmark(range, bookmark);
 }
 
-// Inserts a box into the specified range.
+/**
+ * Inserts a box into the specified range.
+ */
 function insertBox(range, boxName, boxValue) {
     if (range.commonAncestor.isOutside) {
         return null;
@@ -5863,7 +6245,9 @@ function unmountBox(box) {
     }
     return box;
 }
-// Removes a box that contains the specified range.
+/**
+ * Removes a box that contains the specified range.
+ */
 function removeBox(range) {
     if (range.commonAncestor.isOutside) {
         return null;
@@ -5891,36 +6275,38 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.3.2";
+var version = "0.3.4";
 
 // Converts the custom HTML tags to the special tags that can not be parsed by browser.
 function denormalizeValue(value) {
-    return value.
-        replace(/(<lake-box[^>]+>)[\s\S]*?(<\/lake-box>)/ig, '$1$2').
-        replace(/<lake-bookmark\s+type="anchor">\s*<\/lake-bookmark>/ig, '<anchor />').
-        replace(/<lake-bookmark\s+type="focus">\s*<\/lake-bookmark>/ig, '<focus />');
+    return value
+        .replace(/(<lake-box[^>]+>)[\s\S]*?(<\/lake-box>)/gi, '$1$2')
+        .replace(/<lake-bookmark\s+type="anchor">\s*<\/lake-bookmark>/gi, '<anchor />')
+        .replace(/<lake-bookmark\s+type="focus">\s*<\/lake-bookmark>/gi, '<focus />');
 }
 
 // Converts the special tags to ordinary HTML tags that can be parsed by browser.
 function normalizeValue(value) {
-    return value.
-        replace(/(<lake-box[^>]+>)[\s\S]*?(<\/lake-box>|$)/ig, '$1</lake-box>').
-        replace(/<anchor\s*\/>/ig, '<lake-bookmark type="anchor"></lake-bookmark>').
-        replace(/<focus\s*\/>/ig, '<lake-bookmark type="focus"></lake-bookmark>');
+    return value
+        .replace(/(<lake-box[^>]+>)[\s\S]*?(<\/lake-box>|$)/gi, '$1</lake-box>')
+        .replace(/<anchor\s*\/>/gi, '<lake-bookmark type="anchor"></lake-bookmark>')
+        .replace(/<focus\s*\/>/gi, '<lake-bookmark type="focus"></lake-bookmark>');
 }
 
 // If the specified node is not visible, scrolls the container that contains the node to its position to make it visible.
 function scrollToNode(node, options) {
     const visible = visibleInfo(node);
-    if (visible.left !== 0 ||
-        visible.right !== 0 ||
-        visible.top !== 0 ||
-        visible.bottom !== 0) {
+    if (visible.left !== 0
+        || visible.right !== 0
+        || visible.top !== 0
+        || visible.bottom !== 0) {
         node.get(0).scrollIntoView(options);
     }
 }
 
-// Returns a key-value object of all attributes of the specified element.
+/**
+ * Returns a key-value object of all attributes of the specified element.
+ */
 function getAttributes(element) {
     const nativeElement = element.get(0);
     const attributes = {};
@@ -5982,6 +6368,9 @@ function appendNextNestedNodes(activeItems, range) {
         }
     }
 }
+/**
+ * The Selection interface represents the range of content selected by the user or the current cursor position.
+ */
 class Selection {
     constructor(container) {
         const selection = window.getSelection();
@@ -5994,7 +6383,9 @@ class Selection {
         this.container = container;
         this.range = this.getCurrentRange();
     }
-    // Returns a range object currently selected.
+    /**
+     * Returns a Range object that is currently selected.
+     */
     getCurrentRange() {
         if (this.selection.rangeCount > 0) {
             const range = this.selection.getRangeAt(0);
@@ -6002,7 +6393,9 @@ class Selection {
         }
         return new Range();
     }
-    // Adds the saved range to the native selection.
+    /**
+     * Adds the selection.range to the native selection.
+     */
     sync() {
         if (!this.container.contains(this.range.commonAncestor)) {
             return;
@@ -6010,21 +6403,25 @@ class Selection {
         this.selection.removeAllRanges();
         this.selection.addRange(this.range.get());
     }
-    // Updates the saved range with the range of the native selection.
+    /**
+     * Replaces the selection.range with the range of the native selection.
+     */
     updateByRange() {
         const newRange = this.getCurrentRange();
         if (!this.container.contains(newRange.commonAncestor)) {
             return;
         }
-        if (this.range.startNode.get(0) === newRange.startNode.get(0) &&
-            this.range.startOffset === newRange.startOffset &&
-            this.range.endNode.get(0) === newRange.endNode.get(0) &&
-            this.range.endOffset === newRange.endOffset) {
+        if (this.range.startNode.get(0) === newRange.startNode.get(0)
+            && this.range.startOffset === newRange.startOffset
+            && this.range.endNode.get(0) === newRange.endNode.get(0)
+            && this.range.endOffset === newRange.endOffset) {
             return;
         }
         this.range = newRange;
     }
-    // Updates the saved range with the range represented by the bookmark.
+    /**
+     * Replaces the selection.range with the range represented by the bookmark.
+     */
     updateByBookmark() {
         const range = this.range;
         const container = this.container;
@@ -6045,43 +6442,78 @@ class Selection {
         });
         this.sync();
     }
+    /**
+     * Returns a list of items related to the current selection.
+     */
     getActiveItems() {
         const activeItems = [];
         appendAncestralNodes(activeItems, this.range);
         appendNextNestedNodes(activeItems, this.range);
         return activeItems;
     }
+    /**
+     * Inserts a bookmark at the cursor position or a pair of bookmarks at the selection boundaries.
+     */
     insertBookmark() {
         return insertBookmark(this.range);
     }
+    /**
+     * Changes selection.range to the range represented by the provided bookmark.
+     */
     toBookmark(bookmark) {
         return toBookmark(this.range, bookmark);
     }
+    /**
+     * Inserts the specified content into the selection.
+     */
     insertContents(contents) {
         return insertContents(this.range, contents);
     }
+    /**
+     * Removes the contents of the selection.
+     */
     deleteContents() {
         return deleteContents(this.range);
     }
+    /**
+     * Adds new blocks or changes the target blocks in the selection.
+     */
     setBlocks(value) {
         return setBlocks(this.range, value);
     }
+    /**
+     * Removes the contents of the selection and splits the block node at the cursor position.
+     */
     splitBlock() {
         return splitBlock$1(this.range);
     }
+    /**
+     * Inserts a block into the selection.
+     */
     insertBlock(value) {
         return insertBlock(this.range, value);
     }
+    /**
+     * Splits text nodes or mark nodes.
+     */
     splitMarks(removeEmptyMark) {
         return splitMarks(this.range, removeEmptyMark);
     }
+    /**
+     * Adds the specified mark to the selected text.
+     */
     addMark(value) {
         return addMark(this.range, value);
     }
+    /**
+     * Removes specified marks from the selection.
+     */
     removeMark(value) {
         return removeMark(this.range, value);
     }
-    // Sets the current range to the center position of the box.
+    /**
+     * Collapses the selection to the center position of the specified box.
+     */
     selectBox(box) {
         let boxNode = box;
         if (box instanceof Box) {
@@ -6093,7 +6525,9 @@ class Selection {
         this.range.selectBox(boxNode);
         this.sync();
     }
-    // Inserts a box into the position of the selection.
+    /**
+     * Inserts a box into the selection.
+     */
     insertBox(boxName, boxValue) {
         const box = insertBox(this.range, boxName, boxValue);
         if (!box) {
@@ -6101,7 +6535,9 @@ class Selection {
         }
         return box;
     }
-    // Removes the selected box.
+    /**
+     * Removes the specified box. If no parameter is given, the selected box is removed.
+     */
     removeBox(box = null) {
         if (box) {
             this.selectBox(box);
@@ -6110,23 +6546,41 @@ class Selection {
     }
 }
 
+/**
+ * The Command interface manages a collection of commands.
+ */
 class Command {
     constructor(selection) {
         this.commandMap = new Map();
         this.selection = selection;
     }
+    /**
+     * Adds a new command to the collection.
+     */
     add(name, commandItem) {
         this.commandMap.set(name, commandItem);
     }
+    /**
+     * Removes a command from the collection by its name.
+     */
     delete(name) {
         this.commandMap.delete(name);
     }
+    /**
+     * Returns the names of all registered commands.
+     */
     getNames() {
         return Array.from(this.commandMap.keys());
     }
+    /**
+     * Checks whether the specified command exists.
+     */
     has(name) {
         return this.commandMap.get(name) !== undefined;
     }
+    /**
+     * Returns a command item by its name.
+     */
     getItem(name) {
         const commandItem = this.commandMap.get(name);
         if (commandItem === undefined) {
@@ -6134,6 +6588,9 @@ class Command {
         }
         return commandItem;
     }
+    /**
+     * Checks if the specified command is disabled.
+     */
     isDisabled(name) {
         const commandItem = this.getItem(name);
         if (!commandItem.isDisabled) {
@@ -6142,6 +6599,9 @@ class Command {
         const activeItems = this.selection.getActiveItems();
         return commandItem.isDisabled(activeItems);
     }
+    /**
+     * Checks if the specified command is selected.
+     */
     isSelected(name) {
         const commandItem = this.getItem(name);
         if (!commandItem.isSelected) {
@@ -6150,6 +6610,9 @@ class Command {
         const activeItems = this.selection.getActiveItems();
         return commandItem.isSelected(activeItems);
     }
+    /**
+     * Returns the selected values for the specified command.
+     */
     selectedValues(name) {
         const commandItem = this.getItem(name);
         if (!commandItem.selectedValues) {
@@ -6158,6 +6621,9 @@ class Command {
         const activeItems = this.selection.getActiveItems();
         return commandItem.selectedValues(activeItems);
     }
+    /**
+     * Executes the specified command.
+     */
     execute(name, ...data) {
         const container = this.selection.container;
         const range = this.selection.range;
@@ -6170,7 +6636,7 @@ class Command {
     }
 }
 
-/**
+/*
 BSD 2-Clause License
 
 Copyright (c) 2022, Big Sky Software
@@ -6270,7 +6736,7 @@ function getIdIntersectionCount(ctx, node1, node2) {
     }
     return matchCount;
 }
-/**
+/*
  * A bottom up algorithm that finds all elements with ids inside of the node
  * argument and populates id sets for those nodes and all their parents, generating
  * a set of ids contained within all nodes for the entire hierarchy in the DOM
@@ -6298,7 +6764,7 @@ function populateIdMapForNode(node, idMap) {
         }
     }
 }
-/**
+/*
  * This function computes a map of nodes to all ids contained within that node (inclusive of the
  * node).  This map can be used to ask if two nodes have intersecting sets of ids, which allows
  * for a looser definition of "matching" than tradition id matching, and allows child nodes
@@ -6473,7 +6939,7 @@ function insertSiblings(previousSibling, morphedNode, nextSibling) {
         const node = stack.pop();
         added.push(node); // push added preceding siblings on in order and insert
         if (node) {
-            (_a = morphedNode.parentElement) === null || _a === undefined ? undefined : _a.insertBefore(node, morphedNode);
+            (_a = morphedNode.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(node, morphedNode);
         }
     }
     added.push(morphedNode);
@@ -6486,14 +6952,14 @@ function insertSiblings(previousSibling, morphedNode, nextSibling) {
     while (stack.length > 0) {
         const node = stack.pop();
         if (node) {
-            (_b = morphedNode.parentElement) === null || _b === undefined ? undefined : _b.insertBefore(node, morphedNode.nextSibling);
+            (_b = morphedNode.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(node, morphedNode.nextSibling);
         }
     }
     return added;
 }
 function scoreElement(node1, node2, ctx) {
     if (isSoftMatch(node1, node2)) {
-        return .5 + getIdIntersectionCount(ctx, node1, node2);
+        return 0.5 + getIdIntersectionCount(ctx, node1, node2);
     }
     return 0;
 }
@@ -6528,7 +6994,7 @@ function ignoreAttribute(attr, to, updateType, ctx) {
     }
     return ctx.callbacks.beforeAttributeUpdated(attr, to, updateType) === false;
 }
-/**
+/*
  * @param possibleActiveElement
  * @param ctx
  * @returns {boolean}
@@ -6536,7 +7002,7 @@ function ignoreAttribute(attr, to, updateType, ctx) {
 function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
     return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
 }
-/**
+/*
  * syncs a given node with another node, copying over all attributes and
  * inner element state from the 'from' node to the 'to' node
  *
@@ -6579,7 +7045,7 @@ function syncNodeFrom(from, to, ctx) {
         }
     }
 }
-/**
+/*
  * @param oldNode root node to merge content into
  * @param newContent new content to merge
  * @param ctx the merge context
@@ -6600,7 +7066,7 @@ function morphOldNodeTo(oldNode, newContent, ctx) {
             return oldNode;
         if (ctx.callbacks.beforeNodeAdded(newContent) === false)
             return oldNode;
-        (_a = oldNode.parentElement) === null || _a === undefined ? undefined : _a.replaceChild(newContent, oldNode);
+        (_a = oldNode.parentElement) === null || _a === void 0 ? void 0 : _a.replaceChild(newContent, oldNode);
         ctx.callbacks.afterNodeAdded(newContent);
         ctx.callbacks.afterNodeRemoved(oldNode);
         return newContent;
@@ -6616,7 +7082,7 @@ function morphOldNodeTo(oldNode, newContent, ctx) {
         return oldNode;
     }
 }
-/**
+/*
  * This is the core algorithm for matching up children.  The idea is to use id sets to try to match up
  * nodes as faithfully as possible.  We greedily match, which allows us to keep the algorithm fast, but
  * by using id sets, we are able to better match up with content deeper in the DOM.
@@ -6706,8 +7172,8 @@ function morphNormalizedContent(oldNode, normalizedNewContent, ctx) {
         // into either side of the best match
         const bestMatch = findBestNodeMatch(normalizedNewContent, oldNode, ctx);
         // stash the siblings that will need to be inserted on either side of the best match
-        const previousSibling = bestMatch === null || bestMatch === undefined ? undefined : bestMatch.previousSibling;
-        const nextSibling = bestMatch === null || bestMatch === undefined ? undefined : bestMatch.nextSibling;
+        const previousSibling = bestMatch === null || bestMatch === void 0 ? void 0 : bestMatch.previousSibling;
+        const nextSibling = bestMatch === null || bestMatch === void 0 ? void 0 : bestMatch.nextSibling;
         // morph it
         const morphedNode = morphOldNodeTo(oldNode, bestMatch, ctx);
         if (bestMatch) {
@@ -6729,7 +7195,10 @@ function morph(node, otherNode, config = {}) {
     morphNormalizedContent(node.get(0), normalizedContent, ctx);
 }
 
-// Saves and controls the history of the value of the editor.
+/**
+ * The History interface manages undo and redo functionality for a container that holds some editable content.
+ * It emits events when actions like save, undo, or redo are performed.
+ */
 //
 // Example:
 //
@@ -6746,19 +7215,29 @@ function morph(node, otherNode, config = {}) {
 class History {
     constructor(selection) {
         this.canSave = true;
-        // an array for storing the history items
+        /**
+         * A list in which the current and previous contents are stored.
+         */
         this.list = [];
-        // the next index of the list
+        /**
+         * An index that always indicates the position at which new content is stored.
+         */
         this.index = 0;
+        /**
+         * The maximum length of the history. Once this limit is reached, the earliest item in the list will be removed.
+         */
         this.limit = 100;
+        /**
+         * An EventEmitter object used to set up events.
+         */
         this.event = new EventEmitter();
         this.selection = selection;
         this.container = selection.container;
     }
     removeBookmark(value) {
-        return value.replace(/(<lake-box[^>]+)\s+focus="\w+"([^>]*>)/ig, '$1$2').
-            replace(/<lake-bookmark\s+type="anchor">\s*<\/lake-bookmark>/ig, '').
-            replace(/<lake-bookmark\s+type="focus">\s*<\/lake-bookmark>/ig, '');
+        return value.replace(/(<lake-box[^>]+)\sfocus="\w+"([^>]*>)/gi, '$1$2')
+            .replace(/<lake-bookmark\s+type="anchor">\s*<\/lake-bookmark>/gi, '')
+            .replace(/<lake-bookmark\s+type="focus">\s*<\/lake-bookmark>/gi, '');
     }
     getValue(container) {
         return new HTMLParser(container).getHTML();
@@ -6802,12 +7281,22 @@ class History {
         this.removeIdfromBoxes(container);
         this.removeIdfromBoxes(otherContainer);
     }
+    /**
+     * A boolean value indicating whether the history can be undone.
+     */
     get canUndo() {
         return this.index > 1 && !!this.list[this.index - 2];
     }
+    /**
+     * A boolean value indicating whether the history can be redone.
+     */
     get canRedo() {
         return !!this.list[this.index];
     }
+    /**
+     * Creates a deep clone of the current container with its content.
+     * If there is a selection within the container, it ensures the selection is also preserved in the cloned container.
+     */
     cloneContainer() {
         const range = this.selection.range;
         const newContainer = this.container.clone(true);
@@ -6837,6 +7326,9 @@ class History {
         insertBookmark(newRange);
         return newContainer;
     }
+    /**
+     * Undoes to the previous saved content.
+     */
     undo() {
         if (!this.list[this.index - 2]) {
             return;
@@ -6859,6 +7351,9 @@ class History {
         this.selection.updateByBookmark();
         debug(`History undone (index: ${this.index})`);
     }
+    /**
+     * Redoes to the next saved content.
+     */
     redo() {
         if (!this.list[this.index]) {
             return;
@@ -6881,24 +7376,36 @@ class History {
         this.selection.updateByBookmark();
         debug(`History redone (index: ${this.index})`);
     }
+    /**
+     * Resumes the ability to save history.
+     * This method re-enables saving after the pause method has been called.
+     */
     continue() {
         this.canSave = true;
     }
+    /**
+     * Pauses the ability to save history.
+     * This method temporarily disables saving history, which can be resumed later by calling the continue method.
+     */
     pause() {
         this.canSave = false;
     }
+    /**
+     * Saves the current content to the history.
+     * The content is saved only if it is different from the previous content.
+     */
     save(options = {}) {
         var _a, _b, _c;
-        const inputType = (_a = options.inputType) !== null && _a !== undefined ? _a : '';
-        const update = (_b = options.update) !== null && _b !== undefined ? _b : false;
-        const emitEvent = (_c = options.emitEvent) !== null && _c !== undefined ? _c : true;
+        const inputType = (_a = options.inputType) !== null && _a !== void 0 ? _a : '';
+        const update = (_b = options.update) !== null && _b !== void 0 ? _b : false;
+        const emitEvent = (_c = options.emitEvent) !== null && _c !== void 0 ? _c : true;
         if (!this.canSave) {
             return;
         }
         const item = this.cloneContainer();
         const value = this.getValue(item);
-        if (this.list[this.index - 1] &&
-            this.removeBookmark(this.getValue(this.list[this.index - 1])) === this.removeBookmark(value)) {
+        if (this.list[this.index - 1]
+            && this.removeBookmark(this.getValue(this.list[this.index - 1])) === this.removeBookmark(value)) {
             return;
         }
         if (update) {
@@ -6923,6 +7430,10 @@ class History {
     }
 }
 
+/**
+ * The Keystroke interface provides a way to handle keyboard events and define custom shortcuts for a given container.
+ * It allows you to register hotkeys, bind specific actions to them, and handle their execution.
+ */
 class Keystroke {
     constructor(container) {
         this.keydownEventList = [];
@@ -6961,21 +7472,29 @@ class Keystroke {
             }
         });
     }
-    // Sets a keydown shortcut.
+    /**
+     * Registers a keydown event listener for the specified key combination.
+     * The listener will be triggered when the key combination is pressed.
+     */
     setKeydown(type, listener) {
         this.keydownEventList.push({
             type,
             listener,
         });
     }
-    // Sets a keyup shortcut.
+    /**
+     * Registers a keyup event listener for the specified key combination.
+     * The listener will be triggered when the key combination is released.
+     */
     setKeyup(type, listener) {
         this.keyupEventList.push({
             type,
             listener,
         });
     }
-    // Executes the keydown shortcuts.
+    /**
+     * Triggers all keydown event listeners associated with the specified key combination.
+     */
     keydown(type) {
         for (const item of this.keydownEventList) {
             if (item.type === type) {
@@ -6985,7 +7504,9 @@ class Keystroke {
             }
         }
     }
-    // Executes the keyup shortcuts.
+    /**
+     * Triggers all keyup event listeners associated with the specified key combination.
+     */
     keyup(type) {
         for (const item of this.keyupEventList) {
             if (item.type === type) {
@@ -6997,28 +7518,48 @@ class Keystroke {
     }
 }
 
+/**
+ * The BoxManager interface manages a collection of BoxComponent objects.
+ * It allows you to add, remove, and retrieve the names of components.
+ */
 class BoxManager {
+    /**
+     * Adds a BoxComponent to the collection.
+     */
     add(component) {
         boxes.set(component.name, component);
     }
+    /**
+     * Removes a box component from the collection by its name.
+     */
     remove(name) {
         boxes.delete(name);
     }
+    /**
+     * Returns a list of all box component names in the collection.
+     */
     getNames() {
         return Array.from(boxes.keys());
     }
 }
 
+/**
+ * The Plugin interface manages a collection of plugins.
+ * It allows plugins to be added and loaded into an Editor instance, and it handles the initialization and unmounting of those plugins.
+ */
 class Plugin {
     constructor() {
         this.pluginMap = new Map();
     }
+    /**
+     * Registers a plugin using a name as the key.
+     */
     add(name, plugin) {
-        if (this.pluginMap.get(name)) {
-            throw new Error(`Plugin "${name}" is already defined.`);
-        }
         this.pluginMap.set(name, plugin);
     }
+    /**
+     * Loads all registered plugins.
+     */
     loadAll(editor) {
         const unmountPluginMap = new Map();
         for (const name of this.pluginMap.keys()) {
@@ -7051,41 +7592,53 @@ const defaultConfig = {
             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);
         }
     },
     slash: false,
     mention: false,
 };
-// The Editor interface provides properties and methods for rendering and manipulating the editor.
+/**
+ * The Editor interface provides properties and methods for rendering and manipulating the editor.
+ */
 class Editor {
     constructor(config) {
-        // A string that has not yet been saved to the history.
+        /**
+         * A string that has not yet been saved to the history.
+         */
         this.unsavedInputData = '';
-        // The number of input event calls before saving to the history.
+        /**
+         * The number of input event calls before saving to the history.
+         */
         this.unsavedInputCount = 0;
-        // The state of the current selection.
+        /**
+         * The state of the current selection.
+         */
         this.state = {
             activeItems: [],
             disabledNameMap: new Map(),
             selectedNameMap: new Map(),
             selectedValuesMap: new Map(),
         };
-        // The functions for unmounting plugins.
+        /**
+         * The functions for unmounting plugins.
+         */
         this.unmountPluginMap = new Map();
-        // Managing events.
+        /**
+         * An EventEmitter object used to set up events.
+         */
         this.event = new EventEmitter();
-        // Managing the box components.
-        this.box = Editor.box;
-        // Indicating whether a user is entering a character using a text composition system such as an Input Method Editor (IME).
+        /**
+         * A boolean value indicating whether a user is entering a character using a text composition system such as an Input Method Editor (IME).
+         */
         this.isComposing = false;
-        // A pop-up component which is currently displayed, such as LinkPopup, MentionMenu, and SlashMenu.
+        /**
+         * A pop-up component which is currently displayed, such as LinkPopup, MentionMenu, and SlashMenu.
+         */
         this.popup = null;
         this.copyListener = event => {
             const range = this.selection.getCurrentRange();
@@ -7125,7 +7678,9 @@ class Editor {
         }, 1, {
             immediate: true,
         });
-        // Updates the classes of all boxes when the current selection is changed.
+        /**
+         * Updates the classes of all boxes when the current selection is changed.
+         */
         this.updateBoxSelectionStyle = debounce(() => {
             // The editor has been unmounted.
             if (this.root.first().length === 0) {
@@ -7173,7 +7728,9 @@ class Editor {
         }, 50, {
             immediate: true,
         });
-        // Triggers the statechange event when the current selection is changed.
+        /**
+         * Triggers the statechange event when the current selection is changed.
+         */
         this.emitStateChangeEvent = debounce(() => {
             const commandNames = this.command.getNames();
             let activeItems = this.selection.getActiveItems();
@@ -7246,7 +7803,9 @@ class Editor {
         this.keystroke = new Keystroke(this.container);
         editors.set(this.container.id, this);
     }
-    // Adds or Removes a placeholder class.
+    /**
+     * Adds or Removes a placeholder class.
+     */
     togglePlaceholderClass(value) {
         value = denormalizeValue(value);
         const className = 'lake-placeholder';
@@ -7257,7 +7816,9 @@ class Editor {
             this.container.removeClass(className);
         }
     }
-    // Moves the input text from box strip to normal position.
+    /**
+     * Moves the input text from box strip to normal position.
+     */
     moveBoxStripText() {
         const selection = this.selection;
         const range = selection.range;
@@ -7289,12 +7850,16 @@ class Editor {
         stripNode.html('<br />');
         selection.insertContents(document.createTextNode(text));
     }
-    // Resets the value of "unsavedInputData" property.
+    /**
+     * Resets the value of "unsavedInputData" property.
+     */
     resetUnsavedInputData() {
         this.unsavedInputData = '';
         this.unsavedInputCount = 0;
     }
-    // Handles input event.
+    /**
+     * Handles input event.
+     */
     handleInputEvent(event) {
         var _a;
         this.selection.updateByRange();
@@ -7309,7 +7874,7 @@ class Editor {
         }
         const inputType = event instanceof CompositionEvent ? 'insertText' : event.inputType;
         if (inputType === 'insertText') {
-            const inputData = (_a = event.data) !== null && _a !== undefined ? _a : '';
+            const inputData = (_a = event.data) !== null && _a !== void 0 ? _a : '';
             if (inputData.length > 1) {
                 this.history.save({
                     inputType: 'insertText',
@@ -7336,7 +7901,9 @@ class Editor {
         }
         this.history.save();
     }
-    // Binds events for inputting text.
+    /**
+     * Binds events for inputting text.
+     */
     bindInputEvents() {
         this.container.on('compositionstart', () => {
             this.isComposing = true;
@@ -7355,7 +7922,9 @@ class Editor {
             this.handleInputEvent(event);
         });
     }
-    // Removes all unused box instances.
+    /**
+     * Removes all unused box instances.
+     */
     removeBoxGarbage() {
         const instanceMap = getInstanceMap(this.container.id);
         for (const box of instanceMap.values()) {
@@ -7365,7 +7934,9 @@ class Editor {
             }
         }
     }
-    // Binds events for history.
+    /**
+     * Binds events for history.
+     */
     bindHistoryEvents() {
         const executeCommonMethods = (value) => {
             if (this.fixContent()) {
@@ -7399,11 +7970,15 @@ class Editor {
             }
         });
     }
-    // Returns translation functions for the specified language.
+    /**
+     * Returns translation functions for the specified language.
+     */
     get locale() {
         return i18nObject(this.config.lang);
     }
-    // Sets the default config for the specified plugin.
+    /**
+     * Sets the default config for the specified plugin.
+     */
     setPluginConfig(name, config) {
         if (typeof this.config[name] !== 'object') {
             this.config[name] = {};
@@ -7414,7 +7989,9 @@ class Editor {
             }
         }
     }
-    // Fixes incorrect content, such as adding paragraphs for void elements or removing empty tags.
+    /**
+     * Fixes incorrect content, such as adding paragraphs for void elements or removing empty tags.
+     */
     fixContent() {
         const range = this.selection.range;
         const cellNode = range.commonAncestor.closest('td');
@@ -7449,7 +8026,9 @@ class Editor {
         range.adjustBr();
         return changed;
     }
-    // Renders all boxes that haven't been rendered yet.
+    /**
+     * Renders all boxes that haven't been rendered yet.
+     */
     renderBoxes() {
         this.removeBoxGarbage();
         const container = this.container;
@@ -7463,7 +8042,9 @@ class Editor {
             box.render();
         });
     }
-    // Scrolls to the cursor.
+    /**
+     * Scrolls to the cursor.
+     */
     scrollToCursor() {
         const range = this.selection.range;
         if (range.isBox) {
@@ -7496,7 +8077,9 @@ class Editor {
         });
         artificialCursor.remove();
     }
-    // Checks whether the editor has focus.
+    /**
+     * Checks whether the editor has focus.
+     */
     hasFocus() {
         const activeElement = document.activeElement;
         if (!activeElement) {
@@ -7504,7 +8087,9 @@ class Editor {
         }
         return query(activeElement).closest('.lake-container').get(0) === this.container.get(0);
     }
-    // Sets focus on the editor.
+    /**
+     * Sets focus on the editor.
+     */
     focus() {
         const range = this.selection.range;
         if (this.container.contains(range.commonAncestor) && range.isBox) {
@@ -7512,11 +8097,15 @@ class Editor {
         }
         this.container.focus();
     }
-    // Removes focus from the editor.
+    /**
+     * Removes focus from the editor.
+     */
     blur() {
         this.container.blur();
     }
-    // Sets the specified content to the editor.
+    /**
+     * Sets the specified content to the editor.
+     */
     setValue(value) {
         value = normalizeValue(value);
         const htmlParser = new HTMLParser(value);
@@ -7527,14 +8116,18 @@ class Editor {
         this.renderBoxes();
         this.selection.updateByBookmark();
     }
-    // Returns the content of the editor.
+    /**
+     * Returns the editor's content.
+     */
     getValue() {
         const item = this.history.cloneContainer();
         let value = new HTMLParser(item).getHTML();
         value = denormalizeValue(value);
         return value;
     }
-    // Renders an editing area and sets default content to it.
+    /**
+     * Renders an editing area and sets default content to it.
+     */
     render() {
         const value = normalizeValue(this.config.value);
         const htmlParser = new HTMLParser(value);
@@ -7566,7 +8159,9 @@ class Editor {
             this.bindHistoryEvents();
         }
     }
-    // Destroys the editor.
+    /**
+     * Destroys the editor.
+     */
     unmount() {
         // Executes delayed executions immediately.
         this.updateSelectionRange.flush();
@@ -7601,11 +8196,17 @@ class Editor {
         }
     }
 }
-// the current version of Lake.
+/**
+ * The current version of Lake.
+ */
 Editor.version = version;
-// Managing the box components.
+/**
+ * A BoxManager object that manages the box components.
+ */
 Editor.box = new BoxManager();
-// Managing the plugins.
+/**
+ * A Plugin object that manages a collection of plugins.
+ */
 Editor.plugin = new Plugin();
 
 var copy = (editor) => {
@@ -7978,18 +8579,18 @@ var drop = (editor) => {
         let targetBlcokRect = targetBlock.get(0).getBoundingClientRect();
         dropPosition = 'bottom';
         let left = targetBlcokRect.x - containerRect.x;
-        let top = targetBlcokRect.y + targetBlcokRect.height - containerRect.y + (parseInt(targetBlock.computedCSS('margin-bottom'), 10) / 2);
+        let top = targetBlcokRect.y + targetBlcokRect.height - containerRect.y + (Number.parseInt(targetBlock.computedCSS('margin-bottom'), 10) / 2);
         if (dragEvent.clientY < targetBlcokRect.y + (targetBlcokRect.height / 2)) {
             const prevBlock = targetBlock.prev();
-            if (prevBlock.length > 0 && prevBlock.isBlock || prevBlock.isBlockBox) {
+            if ((prevBlock.length > 0 && prevBlock.isBlock) || prevBlock.isBlockBox) {
                 targetBlock = prevBlock;
                 targetBlcokRect = targetBlock.get(0).getBoundingClientRect();
                 left = targetBlcokRect.x - containerRect.x;
-                top = targetBlcokRect.y + targetBlcokRect.height - containerRect.y + (parseInt(targetBlock.computedCSS('margin-bottom'), 10) / 2);
+                top = targetBlcokRect.y + targetBlcokRect.height - containerRect.y + (Number.parseInt(targetBlock.computedCSS('margin-bottom'), 10) / 2);
             }
             else {
                 dropPosition = 'top';
-                top = targetBlcokRect.y - containerRect.y - (parseInt(editor.container.computedCSS('padding-top'), 10) / 2);
+                top = targetBlcokRect.y - containerRect.y - (Number.parseInt(editor.container.computedCSS('padding-top'), 10) / 2);
             }
         }
         dropIndication.css({
@@ -8387,8 +8988,10 @@ function insertColumn(range, direction) {
     if (direction === 'right') {
         const currentRowCells = tableMap[currentRowIndex];
         columnIndex++;
-        while (currentRowCells && currentCell === currentRowCells[columnIndex]) {
-            columnIndex++;
+        if (currentRowCells) {
+            while (currentCell === currentRowCells[columnIndex]) {
+                columnIndex++;
+            }
         }
     }
     debug(`insertColumn: rows ${table.rows.length}, column ${columnIndex}, ${direction}`);
@@ -9473,7 +10076,7 @@ class LinkPopup {
     }
     // Writes the specified text to the system clipboard
     writeClipboardText(text) {
-        return __awaiter(this, undefined, undefined, function* () {
+        return __awaiter(this, void 0, void 0, function* () {
             let error = false;
             try {
                 if (window.LAKE_TEST) {
@@ -9795,9 +10398,9 @@ var link = (editor) => {
             return;
         }
         const linkNode = targetNode.closest('a');
-        if (linkNode.length === 0 ||
-            !editor.container.contains(linkNode) ||
-            linkNode.closest('lake-box').length > 0) {
+        if (linkNode.length === 0
+            || !editor.container.contains(linkNode)
+            || linkNode.closest('lake-box').length > 0) {
             if (!popup.visible) {
                 return;
             }
@@ -9995,7 +10598,7 @@ var codeBlockBox = {
         });
         const codeEditor = new EditorView({
             parent: codeBlockNativeNode,
-            doc: (_a = boxValue.code) !== null && _a !== undefined ? _a : '',
+            doc: (_a = boxValue.code) !== null && _a !== void 0 ? _a : '',
             extensions: [
                 EditorState.readOnly.of(editor.readonly),
                 EditorView.editable.of(!editor.readonly),
@@ -10094,7 +10697,7 @@ class CornerToolbar {
     constructor(config) {
         this.config = config;
         this.locale = this.config.locale || i18nObject('en-US');
-        this.root = config.root;
+        this.root = query(config.root);
         this.container = query('<div class="lake-corner-toolbar" />');
     }
     appendButton(item) {
@@ -10128,8 +10731,8 @@ class CornerToolbar {
 class Resizer {
     constructor(config) {
         this.config = config;
-        this.root = config.root;
-        this.target = config.target;
+        this.root = query(config.root);
+        this.target = query(config.target);
         this.container = query(template `
       <div class="lake-resizer">
         <div class="lake-resizer-top-left"></div>
@@ -10347,7 +10950,7 @@ function renderFloatingToolbar(box) {
 }
 // Loads an image and get its width and height.
 function getImageInfo(url) {
-    return __awaiter(this, undefined, undefined, function* () {
+    return __awaiter(this, void 0, void 0, function* () {
         const node = query('<img />');
         node.css({
             position: 'absolute',
@@ -10537,7 +11140,7 @@ function renderCaption(box) {
 }
 // Displays error icon and filename.
 function renderError$1(box) {
-    return __awaiter(this, undefined, undefined, function* () {
+    return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         const boxContainer = box.getContainer();
         const value = box.value;
@@ -10580,7 +11183,7 @@ function renderError$1(box) {
 }
 // Displays an image with uplaoding progress.
 function renderUploading(box) {
-    return __awaiter(this, undefined, undefined, function* () {
+    return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         const boxContainer = box.getContainer();
         const value = box.value;
@@ -10650,7 +11253,7 @@ function renderUploading(box) {
 }
 // Displays an image that can be previewed or removed.
 function renderDone(box) {
-    return __awaiter(this, undefined, undefined, function* () {
+    return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         const boxContainer = box.getContainer();
         const value = box.value;
@@ -10836,7 +11439,7 @@ var image = (editor) => {
 };
 
 function getVideoId(url) {
-    const result = /\w+$/i.exec(url || '');
+    const result = /\w+$/.exec(url || '');
     return result ? result[0] : '';
 }
 function appendButtonGroup(box) {
@@ -11043,7 +11646,7 @@ function setFloatingToolbar(box) {
     box.setToolbar(items);
 }
 function appendContent(rootNode, box) {
-    return __awaiter(this, undefined, undefined, function* () {
+    return __awaiter(this, void 0, void 0, function* () {
         const value = box.value;
         const infoNode = query(template `
     <div class="lake-file-info">
@@ -11286,7 +11889,7 @@ var specialCharacter = (editor) => {
     });
 };
 
-const emptyCallback$2 = () => { };
+function emptyCallback$2() { }
 // The Menu class represents a list of options for selecting an item.
 class Menu {
     constructor(config) {
@@ -11306,27 +11909,29 @@ class Menu {
             if (!isDownKey && !isUpKey && !isEnterKey) {
                 return;
             }
+            const nativeContainer = this.container.get(0);
             const selectedItemNode = this.container.find('.lake-menu-item-selected');
             if (selectedItemNode.length === 0) {
+                event.preventDefault();
                 const firstItem = this.container.find('.lake-menu-item').eq(0);
-                scrollToNode(firstItem, {
-                    behavior: 'instant',
-                    block: 'start',
-                });
                 firstItem.addClass('lake-menu-item-selected');
+                nativeContainer.scrollTop = 0;
                 return;
             }
             this.noMouseEvent = true;
+            const paddingTop = Number.parseInt(this.container.computedCSS('padding-top'), 10) || 0;
+            const paddingBottom = Number.parseInt(this.container.computedCSS('padding-bottom'), 10) || 0;
             if (isDownKey) {
                 event.preventDefault();
                 let nextItemNode = selectedItemNode.next();
                 if (nextItemNode.length === 0) {
                     nextItemNode = this.container.find('.lake-menu-item').eq(0);
                 }
-                scrollToNode(nextItemNode, {
-                    behavior: 'instant',
-                    block: 'end',
-                });
+                const nextItemNativeNode = nextItemNode.get(0);
+                const visible = visibleInfo(nextItemNode);
+                if (visible.top !== 0 || visible.bottom !== 0) {
+                    nativeContainer.scrollTop = nextItemNativeNode.offsetTop - this.container.height() + nextItemNode.height() + paddingBottom;
+                }
                 this.container.find('.lake-menu-item').removeClass('lake-menu-item-selected');
                 nextItemNode.addClass('lake-menu-item-selected');
             }
@@ -11337,10 +11942,11 @@ class Menu {
                     const itemNode = this.container.find('.lake-menu-item');
                     prevItemNode = itemNode.eq(itemNode.length - 1);
                 }
-                scrollToNode(prevItemNode, {
-                    behavior: 'instant',
-                    block: 'start',
-                });
+                const prevItemNativeNode = prevItemNode.get(0);
+                const visible = visibleInfo(prevItemNode);
+                if (visible.top !== 0 || visible.bottom !== 0) {
+                    nativeContainer.scrollTop = prevItemNativeNode.offsetTop - paddingTop;
+                }
                 this.container.find('.lake-menu-item').removeClass('lake-menu-item-selected');
                 prevItemNode.addClass('lake-menu-item-selected');
             }
@@ -11519,7 +12125,7 @@ class Menu {
     }
 }
 
-const emptyCallback$1 = () => { };
+function emptyCallback$1() { }
 // The MentionMenu class, inheriting from the Menu class, represents a list of users for selecting a user.
 class MentionMenu extends Menu {
     constructor(config) {
@@ -11532,7 +12138,7 @@ class MentionMenu extends Menu {
         const itemNode = query(template `
       <li>
         <div class="lake-mention-avatar"></div>
-        <div class="lake-mention-nickname">${(_a = item.nickname) !== null && _a !== undefined ? _a : item.name}</div>
+        <div class="lake-mention-nickname">${(_a = item.nickname) !== null && _a !== void 0 ? _a : item.name}</div>
         <div class="lake-mention-name">(${item.name})</div>
       </li>
     `);
@@ -11554,10 +12160,10 @@ class MentionMenu extends Menu {
         keyword = keyword.toLowerCase();
         const items = [];
         for (const item of this.items) {
-            const nickname = (_a = item.nickname) !== null && _a !== undefined ? _a : item.name;
-            if (item.name.toLowerCase().indexOf(keyword) >= 0 ||
-                nickname.toLowerCase().indexOf(keyword) >= 0 ||
-                nickname.replace(/\s+/g, '').indexOf(keyword) >= 0) {
+            const nickname = (_a = item.nickname) !== null && _a !== void 0 ? _a : item.name;
+            if (item.name.toLowerCase().indexOf(keyword) >= 0
+                || nickname.toLowerCase().indexOf(keyword) >= 0
+                || nickname.replace(/\s+/g, '').indexOf(keyword) >= 0) {
                 items.push(item);
             }
         }
@@ -11576,7 +12182,7 @@ var mentionBox = {
         const url = getProfileUrl ? getProfileUrl(value) : '#';
         const boxContainer = box.getContainer();
         const rootNode = query(template `
-      <div class="lake-mention"><a href="${url}">@${(_a = value.nickname) !== null && _a !== undefined ? _a : value.name}</a></div>
+      <div class="lake-mention"><a href="${url}">@${(_a = value.nickname) !== null && _a !== void 0 ? _a : value.name}</a></div>
     `);
         boxContainer.empty();
         boxContainer.append(rootNode);
@@ -11779,7 +12385,7 @@ const blockItemListForSpaceKey = [
             var _a;
             return [
                 'heading',
-                (_a = headingTypeMap.get(results[0])) !== null && _a !== undefined ? _a : 'h6',
+                (_a = headingTypeMap.get(results[0])) !== null && _a !== void 0 ? _a : 'h6',
             ];
         },
     },
@@ -11854,7 +12460,7 @@ const blockItemListForEnterKey = [
             return [
                 'codeBlock',
                 {
-                    lang: (_a = shortLangTypeMap.get(results[1])) !== null && _a !== undefined ? _a : results[1],
+                    lang: (_a = shortLangTypeMap.get(results[1])) !== null && _a !== void 0 ? _a : results[1],
                 },
             ];
         },
@@ -12275,8 +12881,8 @@ var backspaceKey = (editor) => {
             const boxNode = range.commonAncestor.closest('lake-box');
             const box = getBox(boxNode);
             const boxValue = box.value;
-            if (range.isCollapsed && box.name === 'codeBlock' &&
-                (boxValue.code === undefined || boxValue.code === '')) {
+            if (range.isCollapsed && box.name === 'codeBlock'
+                && (boxValue.code === undefined || boxValue.code === '')) {
                 event.preventDefault();
                 editor.selection.removeBox(box);
                 editor.history.save();
@@ -12394,9 +13000,9 @@ var backspaceKey = (editor) => {
                 editor.selection.setBlocks('<p />');
                 block = range.getBlocks()[0];
             }
-            if (block.css('margin-left') !== '' ||
-                block.css('text-indent') !== '' ||
-                block.attr('indent') !== '') {
+            if (block.css('margin-left') !== ''
+                || block.css('text-indent') !== ''
+                || block.attr('indent') !== '') {
                 indentBlock(block, 'decrease');
                 editor.history.save();
                 return;
@@ -12925,7 +13531,7 @@ const slashItems = [
     },
 ];
 
-const emptyCallback = () => { };
+function emptyCallback() { }
 const slashItemMap = new Map();
 for (const item of slashItems) {
     slashItemMap.set(item.name, item);
@@ -12994,10 +13600,10 @@ class SlashMenu extends Menu {
             itemTitle = itemTitle.toLowerCase();
             let itemTitleEnglish = typeof item.title === 'string' ? item.title : item.title(localeEnglish);
             itemTitleEnglish = itemTitleEnglish.toLowerCase();
-            if (itemTitle.indexOf(keyword) >= 0 ||
-                itemTitle.replace(/\s+/g, '').indexOf(keyword) >= 0 ||
-                itemTitleEnglish.indexOf(keyword) >= 0 ||
-                itemTitleEnglish.replace(/\s+/g, '').indexOf(keyword) >= 0) {
+            if (itemTitle.indexOf(keyword) >= 0
+                || itemTitle.replace(/\s+/g, '').indexOf(keyword) >= 0
+                || itemTitleEnglish.indexOf(keyword) >= 0
+                || itemTitleEnglish.replace(/\s+/g, '').indexOf(keyword) >= 0) {
                 items.push(typeof name === 'string' ? item.name : name);
             }
         }
@@ -13094,9 +13700,9 @@ var slash = (editor) => {
             return;
         }
         const block = range.getBlocks()[0];
-        if (!block ||
-            block.find('lake-box').length > 0 ||
-            block.closest('table').length > 0) {
+        if (!block
+            || block.find('lake-box').length > 0
+            || block.closest('table').length > 0) {
             return;
         }
         const keyword = getKeyword(block);
@@ -13198,5 +13804,5 @@ Editor.plugin.add('arrowKeys', arrowKeys);
 Editor.plugin.add('escapeKey', escapeKey);
 Editor.plugin.add('slash', slash);
 
-export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, addMark, deleteContents, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, template, toBookmark, toHex };
+export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, addMark, deleteContents, getBox, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, template, toBookmark, toHex };
 //# sourceMappingURL=lake.js.map