lakelib 0.3.0 → 0.3.2

package/lib/lake.js

@@ -171,6 +171,14 @@ var tableMerge = "<svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24
 
 var tableSplit = "<svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.5 10H11v4h1.5v-4Z\" fill=\"#212121\"/><path d=\"M3 6.25A3.25 3.25 0 0 1 6.25 3h11.5A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25ZM6.25 4.5A1.75 1.75 0 0 0 4.5 6.25V7.5H11v-3H6.25Zm13.25 12h-7v3h5.25a1.75 1.75 0 0 0 1.75-1.75V16.5Zm0-10.25a1.75 1.75 0 0 0-1.75-1.75H12.5v3h7V6.25ZM4.5 16.5v1.25c0 .966.784 1.75 1.75 1.75H11v-3H4.5Zm0-1.5h15V9h-15v6Z\" fill=\"#212121\"/></svg>";
 
+var info = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z\"></path></svg>";
+
+var tip = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z\"></path></svg>";
+
+var warning = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z\"></path></svg>";
+
+var danger = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z\"></path></svg>";
+
 // These icons are sourced from open source projects.
 //
 // Fluent Icons by Microsoft (https://fluenticons.co/).
@@ -272,6 +280,11 @@ const icons = new Map([
     ['tableRow', tableRow],
     ['tableMerge', tableMerge],
     ['tableSplit', tableSplit],
+    // alerts
+    ['info', info],
+    ['tip', tip],
+    ['warning', warning],
+    ['danger', danger],
 ]);
 
 // Returns an array representing a list of the document's elements.
@@ -394,7 +407,7 @@ function hex(value) {
     const hexString = Number.parseInt(value, 10).toString(16).toLowerCase();
     return hexString.length > 1 ? hexString : `0${hexString}`;
 }
-// Converts colors 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) => {
         if (p4 === undefined) {
@@ -424,10 +437,10 @@ function debug(...data) {
 // value is an array which include types and listeners.
 const eventData = {};
 let lastNodeId = 0;
-// The Nodes class represents collections of nodes.
+// The Nodes interface represents a collection of the document's nodes.
 class Nodes {
     constructor(node) {
-        node = node !== null && node !== void 0 ? node : [];
+        node = node !== null && node !== undefined ? 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.
@@ -438,12 +451,12 @@ class Nodes {
         }
         this.length = this.nodeList.length;
     }
-    // Returns node ID at the first index.
+    // The unique ID of the first node.
     get id() {
         const node = this.get(0);
         return node.lakeId;
     }
-    // Returns node name at the first index.
+    // The name of the first node.
     get name() {
         if (this.length === 0) {
             return '';
@@ -451,7 +464,7 @@ class Nodes {
         const node = this.get(0);
         return node.nodeName.toLowerCase();
     }
-    // Returns a boolean value indicating whether the node is an element.
+    // A boolean value indicating whether the first node is an element.
     get isElement() {
         if (this.length === 0) {
             return false;
@@ -459,7 +472,7 @@ class Nodes {
         const node = this.get(0);
         return node.nodeType === Node.ELEMENT_NODE;
     }
-    // Returns a boolean value indicating whether the node is a text node.
+    // A boolean value indicating whether the first node is a text.
     get isText() {
         if (this.length === 0) {
             return false;
@@ -467,65 +480,65 @@ class Nodes {
         const node = this.get(0);
         return node.nodeType === Node.TEXT_NODE;
     }
-    // Returns a boolean value indicating whether the node is a block element.
+    // A boolean value indicating whether the first node is a block.
     get isBlock() {
         if (this.length === 0) {
             return false;
         }
         return blockTagNames.has(this.name);
     }
-    // Returns a boolean value indicating whether the node is a mark element.
+    // A boolean value indicating whether the first node is a mark.
     get isMark() {
         if (this.length === 0) {
             return false;
         }
         return markTagNames.has(this.name);
     }
-    // Returns a boolean value indicating whether the node is a void element.
+    // 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);
     }
-    // Returns a boolean value indicating whether the node is a heading element.
+    // A boolean value indicating whether the first node is a heading.
     get isHeading() {
         if (this.length === 0) {
             return false;
         }
         return headingTagNames.has(this.name);
     }
-    // Returns a boolean value indicating whether the node is a list element.
+    // A boolean value indicating whether the first node is a list.
     get isList() {
         if (this.length === 0) {
             return false;
         }
         return listTagNames.has(this.name);
     }
-    // Returns a boolean value indicating whether the node is a table element.
+    // A boolean value indicating whether the first node is a table.
     get isTable() {
         if (this.length === 0) {
             return false;
         }
         return tableTagNames.has(this.name);
     }
-    // Returns a boolean value indicating whether the node is a bookmark element.
+    // A boolean value indicating whether the first node is a bookmark element.
     get isBookmark() {
         return this.name === 'lake-bookmark';
     }
-    // Returns a boolean value indicating whether the node is a box element.
+    // A boolean value indicating whether the first node is a box element.
     get isBox() {
         return this.name === 'lake-box';
     }
-    // Returns a boolean value indicating whether the node is a 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';
     }
-    // Returns a boolean value indicating whether the 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';
     }
-    // Returns a boolean value indicating whether the element is a root element of contenteditable area.
+    // 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;
@@ -533,15 +546,15 @@ class Nodes {
         const node = this.get(0);
         return this.isElement && node.getAttribute('contenteditable') === 'true';
     }
-    // Returns a boolean value indicating whether the node is ouside the container.
+    // 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;
     }
-    // Returns a boolean value indicating whether the node is inside the container.
+    // A boolean value indicating whether the first node has an ancestor element which contenteditable attribute is true.
     get isInside() {
         return !this.isOutside && !this.isContainer;
     }
-    // Returns a boolean value indicating whether the node is a top element inside the container.
+    // 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;
@@ -552,7 +565,7 @@ class Nodes {
         }
         return this.isInside && parentNode.isContainer;
     }
-    // Returns a boolean value indicating whether the node is editable.
+    // A boolean value indicating whether the first node is editable.
     get isContentEditable() {
         if (this.length === 0) {
             return false;
@@ -570,11 +583,11 @@ class Nodes {
         const element = this.get(0);
         return element.isContentEditable;
     }
-    // Returns a boolean value indicating whether the node is indivisible.
+    // A boolean value indicating whether the first node is indivisible.
     get isIndivisible() {
         return this.isContainer || this.isTable;
     }
-    // Returns a boolean value indicating whether the node is empty.
+    // A boolean value indicating whether the first node is empty.
     get isEmpty() {
         if (this.isBox) {
             return false;
@@ -594,20 +607,20 @@ class Nodes {
         }
         return true;
     }
-    // Gets a native node at the specified index.
+    // Returns a native node at the specified index.
     get(index) {
         return this.nodeList[index];
     }
-    // Gets all native nodes
+    // Returns all native nodes.
     getAll() {
         return this.nodeList;
     }
-    // Reduces the nodes of a Nodes object to the one 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);
     }
-    // Iterates over a Nodes object, executing a function 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++) {
@@ -617,7 +630,7 @@ class Nodes {
         }
         return this;
     }
-    // Iterates over a Nodes object, executing a function 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++) {
@@ -629,12 +642,12 @@ class Nodes {
         }
         return this;
     }
-    // Reverses the nodes of a Nodes object.
+    // Returns a new Nodes object with the nodes in reversed order.
     reverse() {
         const nodes = this.getAll().reverse();
         return new Nodes(nodes);
     }
-    // Tests whether the element 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;
@@ -642,24 +655,21 @@ class Nodes {
         const element = this.get(0);
         return element.matches(selector);
     }
-    // Returns a boolean value indicating whether a node is a descendant of a given node, that is the 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 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.
     contains(otherNode) {
-        if (otherNode instanceof Nodes) {
-            otherNode = otherNode.get(0);
-        }
         const element = this.get(0);
-        return element.contains(otherNode);
+        return element.contains(otherNode.get(0));
     }
-    // Returns a boolean value indicating whether the node and the target node are siblings.
-    isSibling(target) {
+    // Returns a boolean value indicating whether the first node and a given node are siblings.
+    isSibling(otherNode) {
         if (this.length === 0) {
             return false;
         }
         const parent = this.get(0).parentNode;
-        return parent && parent === target.parent().get(0);
+        return parent && parent === otherNode.parent().get(0);
     }
-    // Returns the descendants of the first element which are selected by the specified CSS selector.
+    // 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);
@@ -675,8 +685,7 @@ class Nodes {
         }
         return node;
     }
-    // Traverses the first node and its parents (heading toward the document root)
-    // until it finds a 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;
@@ -721,7 +730,7 @@ class Nodes {
         }
         return block;
     }
-    // Traverses the first node and its parents until it finds a root element which has contenteditable="true" attribute.
+    // 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"]');
     }
@@ -751,12 +760,12 @@ class Nodes {
         const node = this.get(0);
         return new Nodes(node.nextSibling);
     }
-    // Returns the first child of the first element.
+    // 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 element.
+    // Returns the last child of the first node.
     last() {
         const element = this.get(0);
         return new Nodes(element.lastChild);
@@ -771,7 +780,7 @@ class Nodes {
         }
         return i;
     }
-    // Returns a path of the first element.
+    // Returns the path of the first node.
     path() {
         const path = [];
         let node = this.eq(0);
@@ -791,7 +800,7 @@ class Nodes {
         }
         return path.reverse();
     }
-    // Returns a list of child nodes of the first element.
+    // Returns a list which contains all of the child nodes of the first node.
     children() {
         const childList = [];
         let child = this.first();
@@ -801,7 +810,7 @@ class Nodes {
         }
         return childList;
     }
-    // Returns a node generator that iterates over the descendants of the first element.
+    // Returns a generator that iterates over the descendants of the first node.
     *getWalker() {
         function* iterate(node) {
             if (node.isBox) {
@@ -819,7 +828,7 @@ class Nodes {
             yield node;
         }
     }
-    // Attaches an event listener for the elements.
+    // Sets up an event listener for each element.
     on(type, listener) {
         return this.eachElement(element => {
             element.addEventListener(type, listener, false);
@@ -833,12 +842,12 @@ class Nodes {
             });
         });
     }
-    // Removes event handlers that were attached 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 !== void 0 ? _a : [];
+            const eventItems = (_a = eventData[elementId]) !== null && _a !== undefined ? _a : [];
             for (let i = 0; i < eventItems.length; i++) {
                 const item = eventItems[i];
                 if (!type || type === item.type && (!listener || listener === item.listener)) {
@@ -852,40 +861,41 @@ class Nodes {
             eventData[elementId] = eventItems.filter((item) => item.type !== '');
         });
     }
-    // Executes all event listeners attached to the Nodes object 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 !== void 0 ? event : new Event(type));
+                    item.listener(event !== null && event !== undefined ? event : new Event(type));
                 }
             }
         });
     }
-    // Gets all event listeners attached to the Nodes object.
+    // 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 element, 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 element.
+    // Removes focus from the specified node.
     blur() {
         const element = this.get(0);
         element.blur();
         return this;
     }
-    // Returns a duplicate of the first node.
+    // 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.
     hasAttr(attributeName) {
         const element = this.get(0);
         return element.hasAttribute(attributeName);
@@ -900,21 +910,24 @@ class Nodes {
         }
         if (value === undefined) {
             const element = this.get(0);
-            return (_a = element.getAttribute(attributeName)) !== null && _a !== void 0 ? _a : '';
+            return (_a = element.getAttribute(attributeName)) !== null && _a !== undefined ? _a : '';
         }
         return this.eachElement(element => {
             element.setAttribute(attributeName, value);
         });
     }
+    // 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.
     hasClass(className) {
         const element = this.get(0);
         return inString(element.className, className, ' ');
     }
+    // Adds the given class to every element.
     addClass(className) {
         if (Array.isArray(className)) {
             for (const name of className) {
@@ -929,6 +942,7 @@ class Nodes {
             element.classList.add(className);
         });
     }
+    // Removes the given class from every element.
     removeClass(className) {
         if (Array.isArray(className)) {
             for (const name of className) {
@@ -946,6 +960,8 @@ 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.
     computedCSS(propertyName) {
         const element = this.get(0);
         return getCSS(element, propertyName);
@@ -968,26 +984,28 @@ class Nodes {
             }
         });
     }
-    // Returns the width of of the first element.
+    // Returns the width of of the first node.
     width() {
         const element = this.get(0);
         return element.offsetWidth;
     }
-    // Returns the interior width of the first element, 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 element.
+    // Returns the height of of the first node.
     height() {
         const element = this.get(0);
         return element.offsetHeight;
     }
+    // Displays all nodes.
     show(displayType = 'block') {
         this.css('display', displayType);
         return this;
     }
+    // Hides all nodes.
     hide() {
         this.css('display', 'none');
         return this;
@@ -1006,7 +1024,7 @@ class Nodes {
         if (value === undefined) {
             const node = this.get(0);
             if (this.isText) {
-                return (_a = node.nodeValue) !== null && _a !== void 0 ? _a : '';
+                return (_a = node.nodeValue) !== null && _a !== undefined ? _a : '';
             }
             const element = node;
             // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
@@ -1025,16 +1043,17 @@ class Nodes {
             element.value = value;
         });
     }
+    // Returns the HTML string describing the first node including its descendants.
     outerHTML() {
         const element = this.get(0);
         return element.outerHTML;
     }
-    // Removes all child nodes of each element.
+    // Removes all child nodes for each element.
     empty() {
         this.html('');
         return this;
     }
-    // Inserts the specified content to the beginning of the first element.
+    // Inserts the specified content just inside the first node, before its first child.
     prepend(content) {
         const element = this.get(0);
         if (typeof content === 'string') {
@@ -1060,7 +1079,7 @@ class Nodes {
         }
         return this;
     }
-    // Inserts the specified content to the end of the first element.
+    // Inserts the specified content just inside the first node, after its last child.
     append(content) {
         const element = this.get(0);
         if (typeof content === 'string') {
@@ -1124,7 +1143,7 @@ class Nodes {
         }
         return this;
     }
-    // Replaces the first node with the provided new content.
+    // Replaces the first node with the given new content.
     replaceWith(newContent) {
         const node = this.get(0);
         if (!node.parentNode) {
@@ -1140,9 +1159,7 @@ class Nodes {
         node.parentNode.replaceChild(target, node);
         return this;
     }
-    // Removes each node from the DOM.
-    // keepChildren parameter:
-    // A boolean value; true only removes each node and keeps all descended nodes; false removes the descendants; if omitted, it defaults to false.
+    // Removes all nodes from the DOM.
     remove(keepChildren = false) {
         this.each(node => {
             if (!node.parentNode) {
@@ -1160,7 +1177,7 @@ class Nodes {
         });
         return this;
     }
-    // Breaks the first text node into two nodes at the specified offset, keeping both nodes in the tree as siblings.
+    // 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();
@@ -1169,7 +1186,7 @@ class Nodes {
         const newNode = node.splitText(offset);
         return new Nodes(newNode);
     }
-    // Returns information of the first node.
+    // Returns information about the first node, which is used for debugging.
     toString() {
         if (this.length === 0) {
             return '';
@@ -1181,13 +1198,13 @@ class Nodes {
         }
         return `node (${node.lakeId}): ${nodeValue}`;
     }
-    // Prints information of the first node.
+    // Prints information about the first node, which is used for debugging.
     info() {
         debug(this.toString());
     }
 }
 
-// Returns an object representing a list of the document's elements.
+// Returns a Nodes object representing a list of the document's nodes.
 function query(content) {
     if (content instanceof Nodes) {
         return content;
@@ -1205,10 +1222,10 @@ 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 !== void 0 ? _a : ''; });
+    return value.replace(/[&<>"\xA0]/g, match => { var _a; return (_a = characterMap.get(match)) !== null && _a !== undefined ? _a : ''; });
 }
 
-// The template function is a tag function for converting all of the reserved characters in the specified string to HTML entities.
+// A tag function for converting all of the reserved characters in the specified string to HTML entities.
 function template(strings, ...keys) {
     let content = strings[0];
     for (let i = 0; i < keys.length; i++) {
@@ -1225,16 +1242,16 @@ function template(strings, ...keys) {
     return content;
 }
 
-// The Fragment class represents a minimal document object that has no parent.
+// The Fragment interface represents a minimal document object that has no parent.
 class Fragment {
     constructor(fragment) {
-        this.fragment = fragment !== null && fragment !== void 0 ? fragment : document.createDocumentFragment();
+        this.fragment = fragment !== null && fragment !== undefined ? fragment : document.createDocumentFragment();
     }
-    // Gets a native fragment.
+    // Returns a native DocumentFragment object from the fragment.
     get() {
         return this.fragment;
     }
-    // Returns the descendants of the fragment which are selected by the specified CSS selector.
+    // Returns the descendants of the fragment that match the specified CSS selector.
     find(selector) {
         const nodeList = [];
         let child = new Nodes(this.fragment.firstChild);
@@ -1251,49 +1268,49 @@ class Fragment {
         }
         return new Nodes(nodeList);
     }
-    // Inserts the specified node as the last child.
-    append(node) {
-        query(node).each(nativeNode => {
+    // Inserts the specified content just inside the fragment, after its last child.
+    append(content) {
+        query(content).each(nativeNode => {
             this.fragment.appendChild(nativeNode);
         });
     }
 }
 
-// The Range class 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.
 class Range {
     constructor(range) {
-        this.range = range !== null && range !== void 0 ? range : document.createRange();
+        this.range = range !== null && range !== undefined ? range : document.createRange();
     }
-    // Returns a node within which the range starts.
+    // A node within which the range starts.
     get startNode() {
         return new Nodes(this.range.startContainer);
     }
-    // Returns 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;
     }
-    // Returns a node within which the range ends.
+    // A node within which the range ends.
     get endNode() {
         return new Nodes(this.range.endContainer);
     }
-    // Returns 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;
     }
-    // Returns the closest node that contains both the startNode and endNode.
+    // 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);
     }
-    // Returns 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;
     }
-    // Returns a boolean value indicating whether the range's start point is in the 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;
     }
-    // Returns a boolean value indicating whether the range's common ancestor node is in the start strip of the 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> ...
@@ -1305,7 +1322,7 @@ class Range {
         const boxContainer = boxNode.find('.lake-box-container');
         return this.compareBeforeNode(boxContainer) >= 0;
     }
-    // Returns a boolean value indicating whether the range's common ancestor node is in the center of the 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() {
@@ -1318,7 +1335,7 @@ class Range {
         // case: ... <div class="lake-box-container">|<div></div></div> ...
         return this.isCollapsed && this.startNode.get(0) === boxContainer.get(0) && this.startOffset === 0;
     }
-    // Returns a boolean value indicating whether the range's common ancestor node is in the end strip of the 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>
@@ -1330,7 +1347,7 @@ class Range {
         const boxContainer = boxNode.find('.lake-box-container');
         return this.compareAfterNode(boxContainer) <= 0;
     }
-    // Returns a boolean value indicating whether the range's common ancestor node is inside the container of the 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() {
@@ -1348,7 +1365,7 @@ class Range {
         }
         return this.compareBeforeNode(boxContainer) < 0 && this.compareAfterNode(boxContainer) > 0;
     }
-    // Returns 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;
@@ -1362,7 +1379,7 @@ class Range {
         }
         return false;
     }
-    // Gets a native range.
+    // Returns a native Range object from the range.
     get() {
         return this.range;
     }
@@ -1419,11 +1436,13 @@ class Range {
             height: height > 0 ? height : 1,
         });
     }
-    // Returns −1 if the point is before the range, 0 if the point is in the range, and 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.
     compareBeforeNode(node) {
         const targetRange = new Range();
         if (node.isText) {
@@ -1436,11 +1455,12 @@ class Range {
         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.
     compareAfterNode(node) {
         var _a;
         const targetRange = new Range();
         if (node.isText) {
-            const nodeValue = (_a = node.get(0).nodeValue) !== null && _a !== void 0 ? _a : '';
+            const nodeValue = (_a = node.get(0).nodeValue) !== null && _a !== undefined ? _a : '';
             targetRange.setStart(node, nodeValue.length);
         }
         else {
@@ -1449,7 +1469,7 @@ class Range {
         targetRange.collapseToStart();
         return this.comparePoint(targetRange.startNode, targetRange.startOffset);
     }
-    // Indicates whether a 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));
     }
@@ -1457,11 +1477,11 @@ class Range {
     setStart(node, offset) {
         this.range.setStart(node.get(0), offset);
     }
-    // Sets the start position of the range before a 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 after a node.
+    // Sets the start position of the range to the end of the specified node.
     setStartAfter(node) {
         this.range.setStartAfter(node.get(0));
     }
@@ -1469,19 +1489,19 @@ class Range {
     setEnd(node, offset) {
         this.range.setEnd(node.get(0), offset);
     }
-    // Sets the end position of the range before a 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 after a 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 the start of it.
+    // Collapses the range to its start.
     collapseToStart() {
         this.range.collapse(true);
     }
-    // Collapses the range to the end of it.
+    // Collapses the range to its end.
     collapseToEnd() {
         this.range.collapse(false);
     }
@@ -1493,7 +1513,7 @@ class Range {
     selectNodeContents(node) {
         this.range.selectNodeContents(node.get(0));
     }
-    // Sets the range to the center position of the 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) {
@@ -1502,7 +1522,7 @@ class Range {
         this.setStart(boxContainer, 0);
         this.collapseToStart();
     }
-    // Sets the range to the start position of the 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) {
@@ -1511,7 +1531,7 @@ class Range {
         this.selectNodeContents(boxStrip.eq(0));
         this.collapseToStart();
     }
-    // Sets the range to the start position of the 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) {
@@ -1520,7 +1540,7 @@ class Range {
         this.selectNodeContents(boxStrip.eq(1));
         this.collapseToStart();
     }
-    // Collapses the range and sets the range to 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);
@@ -1544,7 +1564,7 @@ class Range {
         }
         this.collapseToStart();
     }
-    // Collapses the range and sets the range to 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);
@@ -1570,7 +1590,7 @@ class Range {
         this.collapseToEnd();
         this.adjustBr();
     }
-    // Reduces the boundary of the range.
+    // 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>
@@ -1593,7 +1613,7 @@ class Range {
             this.setEnd(child, child.children().length);
         }
     }
-    // Relocates the start and end points of the range for the box.
+    // Relocates the start and end positions of the range for boxes.
     adjustBox() {
         const startBoxNode = this.startNode.closest('lake-box');
         if (startBoxNode.length > 0) {
@@ -1618,7 +1638,7 @@ class Range {
             }
         }
     }
-    // Relocates the beginning or end position of the range for table.
+    // Relocates the start and end positions of the range for tables.
     adjustTable() {
         const startTable = this.startNode.closest('table');
         const endTable = this.endNode.closest('table');
@@ -1632,7 +1652,7 @@ class Range {
             this.shrink();
         }
     }
-    // Relocates the start point of the range for the block.
+    // Relocates the start and end positions of the range for blocks.
     // case 1:
     // <p>foo</p>|<p>bar</p>
     // to
@@ -1666,16 +1686,16 @@ class Range {
             this.shrinkBefore(nextBlock);
         }
     }
-    // Relocates the start and end points of the range.
+    // 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 points of the range for <br /> element.
+    // 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 caret is positioned behind a <br> tag.
-    // To fix this bug, the caret needs to be moved to the front of the <br> tag.
+    // 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.
     adjustBr() {
         if (!this.isCollapsed) {
             return;
@@ -1687,7 +1707,7 @@ class Range {
             this.collapseToStart();
         }
     }
-    // Returns the previous node of the beginning point of the range.
+    // Returns the node immediately preceding the start position of the range.
     getPrevNode() {
         let prevNode;
         if (this.startNode.isText) {
@@ -1701,9 +1721,9 @@ class Range {
         else {
             prevNode = this.startNode.children()[this.startOffset - 1];
         }
-        return prevNode !== null && prevNode !== void 0 ? prevNode : new Nodes();
+        return prevNode !== null && prevNode !== undefined ? prevNode : new Nodes();
     }
-    // Returns the next node of the beginning point of the range.
+    // Returns the node immediately following the end position of the range.
     getNextNode() {
         let nextNode;
         if (this.endNode.isText) {
@@ -1717,9 +1737,9 @@ class Range {
         else {
             nextNode = this.endNode.children()[this.endOffset];
         }
-        return nextNode !== null && nextNode !== void 0 ? nextNode : new Nodes();
+        return nextNode !== null && nextNode !== undefined ? nextNode : new Nodes();
     }
-    // Returns target boxes relating to the range.
+    // Returns the boxes contained within or intersected by the range.
     getBoxes() {
         if (this.isCollapsed) {
             const startBox = this.startNode.closest('lake-box');
@@ -1735,7 +1755,7 @@ class Range {
         }
         return nodeList;
     }
-    // Returns target blocks relating to the range.
+    // Returns the blocks contained within or intersected by the range.
     getBlocks() {
         if (this.isCollapsed) {
             const startBlock = this.startNode.closestOperableBlock();
@@ -1774,7 +1794,7 @@ class Range {
         }
         return blocks;
     }
-    // Returns target marks and text nodes relating to 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) {
@@ -1806,7 +1826,7 @@ class Range {
         }
         return marks;
     }
-    // Returns the text of the start part of the closest block divided into two parts by the start point 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;
@@ -1829,7 +1849,7 @@ class Range {
         }
         return text;
     }
-    // Returns the text of the end part of the closest block divided into two parts by the end point of the range.
+    // 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;
@@ -1852,9 +1872,9 @@ class Range {
         }
         return text;
     }
-    // Returns a new text range from the specified character to the beginning of the current range.
+    // 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. If these conditions are not met, it returns null.
+    // without being adjacent to other characters. It will return null if not.
     getCharacterRange(character) {
         const newRange = this.clone();
         newRange.shrink();
@@ -1891,15 +1911,15 @@ class Range {
         }
         return newRange;
     }
-    // Returns a range object with boundary points identical to the cloned range.
+    // Returns a copy of the range.
     clone() {
         return new Range(this.range.cloneRange());
     }
-    // Returns a document fragment 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 of the range.
+    // Prints information about the range, which is used for debugging.
     info() {
         debug('--- range information ---');
         debug('start node:', this.startNode.toString(), ', offset:', this.startOffset);
@@ -2589,7 +2609,7 @@ const toolbarItems = [
             const currentValues = [];
             for (const item of activeItems) {
                 if (item.node.isMark) {
-                    const name = (_a = tagPluginNameMap.get(item.name)) !== null && _a !== void 0 ? _a : item.name;
+                    const name = (_a = tagPluginNameMap.get(item.name)) !== null && _a !== undefined ? _a : item.name;
                     currentValues.push(name);
                 }
             }
@@ -2834,7 +2854,7 @@ function uploadFile(config) {
     return box;
 }
 
-// The Button class represents a UI component activated by a user. Once activated, it then performs an action.
+// The Button interface represents a UI component clicked by a user. Once clicked, it then performs an action.
 class Button {
     constructor(config) {
         this.config = config;
@@ -2849,6 +2869,7 @@ class Button {
             this.node.attr('tabindex', config.tabIndex.toString());
         }
     }
+    // Renders the button.
     render() {
         const config = this.config;
         const buttonNode = this.node;
@@ -2908,7 +2929,7 @@ function modifierText(value, userAgent) {
     if (typeof window === 'undefined') {
         return value;
     }
-    userAgent = userAgent !== null && userAgent !== void 0 ? userAgent : navigator.userAgent;
+    userAgent = userAgent !== null && userAgent !== undefined ? 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`);
@@ -2990,6 +3011,14 @@ var enUS = {
         checklistDesc: 'Create a checklist',
         table: 'Table',
         tableDesc: 'Insert a table',
+        infoAlert: 'Info alert',
+        infoAlertDesc: 'Create an info alert',
+        tipAlert: 'Tip alert',
+        tipAlertDesc: 'Create a tip alert',
+        warningAlert: 'Warning alert',
+        warningAlertDesc: 'Create a warning alert',
+        dangerAlert: 'Danger alert',
+        dangerAlertDesc: 'Create a danger alert',
         hr: 'Horizontal line',
         hrDesc: 'Insert a horizontal line',
         codeBlock: 'Code block',
@@ -3151,6 +3180,14 @@ var zhCN = {
         checklistDesc: '创建任务列表',
         table: '表格',
         tableDesc: '插入表格',
+        infoAlert: '信息块',
+        infoAlertDesc: '创建信息块',
+        tipAlert: '提示块',
+        tipAlertDesc: '创建提示块',
+        warningAlert: '警告块',
+        warningAlertDesc: '创建警告块',
+        dangerAlert: '危险警告块',
+        dangerAlertDesc: '创建危险警告块',
         hr: '分割线',
         hrDesc: '插入分割线',
         codeBlock: '代码块',
@@ -3312,6 +3349,14 @@ var ja = {
         checklistDesc: 'チェックリストを作成',
         table: 'テーブル',
         tableDesc: 'テーブルを挿入',
+        infoAlert: '情報ブロック',
+        infoAlertDesc: '情報ブロックを作成',
+        tipAlert: 'ヒントブロック',
+        tipAlertDesc: 'ヒントブロックを作成',
+        warningAlert: '警告ブロック',
+        warningAlertDesc: '警告ブロックを作成',
+        dangerAlert: '危険ブロック',
+        dangerAlertDesc: '危険ブロックを作成',
         hr: '区切り線',
         hrDesc: '水平線を挿入',
         codeBlock: 'コードブロック',
@@ -3473,6 +3518,14 @@ var ko = {
         checklistDesc: '체크리스트를 작성',
         table: '표',
         tableDesc: '표를 삽입',
+        infoAlert: '정보 블록',
+        infoAlertDesc: '정보 블록을 작성',
+        tipAlert: '팁 블록',
+        tipAlertDesc: '팁 블록을 작성',
+        warningAlert: '경고 블록',
+        warningAlertDesc: '경고 블록을 작성',
+        dangerAlert: '위험 블록',
+        dangerAlertDesc: '위험 블록을 작성',
         hr: '구분선',
         hrDesc: '구분선을 삽입',
         codeBlock: '코드 블록',
@@ -3587,7 +3640,7 @@ const loadAllLocales = () => locales.forEach(loadLocale);
 const i18nObject = (locale) => i18nObject$1(locale, loadedLocales[locale], loadedFormatters[locale]);
 loadAllLocales();
 
-// The Dropdown class represents a UI component that provides a menu of options.
+// The Dropdown interface represents a UI component that provides a menu of options.
 class Dropdown {
     constructor(config) {
         this.clickListener = (event) => {
@@ -3812,10 +3865,11 @@ class Dropdown {
         document.removeEventListener('click', this.clickListener);
         window.removeEventListener('resize', this.resizeListener);
     }
+    // Renders the dropdown.
     render() {
         var _a, _b;
         const config = this.config;
-        const defaultValue = (_a = config.defaultValue) !== null && _a !== void 0 ? _a : '';
+        const defaultValue = (_a = config.defaultValue) !== null && _a !== undefined ? _a : '';
         const titleNode = this.node.find('.lake-dropdown-title');
         if (!config.downIcon) {
             titleNode.addClass('lake-dropdown-title-no-down');
@@ -3840,7 +3894,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 !== void 0 ? _b : defaultValue);
+            textNode.text((_b = menuMap.get(defaultValue)) !== null && _b !== undefined ? _b : defaultValue);
         }
         if (config.menuType === 'color') {
             this.updateColorAccent(titleNode, defaultValue);
@@ -3894,6 +3948,7 @@ class Dropdown {
             this.showMenu();
         });
     }
+    // Destroys the dropdown.
     unmount() {
         this.hideMenu();
         this.menuNode.remove();
@@ -3926,7 +3981,7 @@ const toolbarItemMap = new Map();
 for (const item of toolbarItems) {
     toolbarItemMap.set(item.name, item);
 }
-// The Toolbar class represents a button group used to execute commands.
+// The Toolbar interface provides properties and methods for rendering and manipulating the toolbar.
 class Toolbar {
     constructor(config) {
         this.placement = 'top';
@@ -4032,7 +4087,7 @@ class Toolbar {
             }
         });
     }
-    // Updates state of each item such as disabled, selected.
+    // Update the state of each item in the toolbar, such as whether it is selected, disabled.
     updateState(state = {
         activeItems: [],
     }) {
@@ -4093,7 +4148,7 @@ 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 !== void 0 ? _a : key;
+                    const text = (_a = (menuMap && menuMap.get(key))) !== null && _a !== undefined ? _a : key;
                     textNode.text(text);
                 }
             }
@@ -4238,10 +4293,12 @@ class FloatingToolbar extends Toolbar {
     }
 }
 
-// The Box class represents an embedded content, which is used to enhance editing capability.
+// The Box interface represents an embedded content, which is used to enhance editing capability.
 class Box {
     constructor(node) {
+        // Managing events.
         this.event = new EventEmitter();
+        // A toolbar for the box.
         this.toolbar = null;
         if (typeof node === 'string') {
             const component = boxes.get(node);
@@ -4320,19 +4377,19 @@ class Box {
     set value(value) {
         this.node.attr('value', toBase64(JSON.stringify(value)));
     }
-    updateValue(valueKey, valueValue) {
+    updateValue(keyName, keyValue) {
         const value = this.value;
-        if (typeof valueKey === 'string') {
-            value[valueKey] = valueValue;
+        if (typeof keyName === 'string') {
+            value[keyName] = keyValue;
         }
         else {
-            for (const key of Object.keys(valueKey)) {
-                value[key] = valueKey[key];
+            for (const key of Object.keys(keyName)) {
+                value[key] = keyName[key];
             }
         }
         this.value = value;
     }
-    // Returns an instance of the editor that includes the box.
+    // Returns an instance of the editor containing the box.
     getEditor() {
         const container = this.node.closest('div[contenteditable]');
         const editor = container.length > 0 ? editors.get(container.id) : undefined;
@@ -4341,10 +4398,21 @@ class Box {
         }
         return editor;
     }
-    // Returns the container node of the box.
+    // Returns the container of the box.
     getContainer() {
         return this.node.find('.lake-box-container');
     }
+    // Returns the HTML string contained within the box.
+    getHTML() {
+        const component = boxes.get(this.name);
+        if (component === undefined) {
+            return '';
+        }
+        if (component.html === undefined) {
+            return this.node.outerHTML();
+        }
+        return component.html(this);
+    }
     // Sets a floating toolbar for the box.
     setToolbar(items) {
         const editor = this.getEditor();
@@ -4387,7 +4455,7 @@ class Box {
         }
         debug(`Box "${this.name}" (id: ${this.node.id}) rendered`);
     }
-    // Destroys a rendered box.
+    // Destroys the box.
     unmount() {
         this.event.emit('blur');
         this.event.emit('beforeunmount');
@@ -4395,17 +4463,6 @@ class Box {
         this.node.empty();
         debug(`Box "${this.name}" (id: ${this.node.id}) unmounted`);
     }
-    // Returns a HTML string of the box.
-    getHTML() {
-        const component = boxes.get(this.name);
-        if (component === undefined) {
-            return '';
-        }
-        if (component.html === undefined) {
-            return this.node.outerHTML();
-        }
-        return component.html(this);
-    }
 }
 
 const blockAttributeRules = {
@@ -4528,7 +4585,7 @@ function parseStyle(styleValue) {
     return properties;
 }
 
-// The HTMLParser class provides the ability to parse HTML source code by specified rules.
+// The HTMLParser interface provides the ability to parse an HTML string by specified rules.
 class HTMLParser {
     constructor(content, rules = getElementRules()) {
         this.rules = rules;
@@ -4539,7 +4596,7 @@ class HTMLParser {
             this.source = content;
         }
     }
-    // Parses HTML string and returns the resulting body element.
+    // 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');
@@ -4646,7 +4703,7 @@ class HTMLParser {
         }
         return nodeValue;
     }
-    // Returns the result as HTML format.
+    // Returns an HTML string.
     getHTML() {
         const rules = this.rules;
         function* iterate(node) {
@@ -4684,7 +4741,7 @@ class HTMLParser {
         }
         return html.trim();
     }
-    // Returns a document fragment.
+    // Returns a DocumentFragment object.
     getFragment() {
         const html = this.getHTML();
         const body = this.parseHTML(html);
@@ -4699,11 +4756,12 @@ class HTMLParser {
     }
 }
 
-// The TextParser class provides the ability to parse a text into an HTML string or DocumentFragment object.
+// The TextParser interface provides the ability to parse a text.
 class TextParser {
     constructor(content) {
         this.content = content;
     }
+    // Returns an HTML string.
     getHTML() {
         let html = this.content;
         html = html.replace(/ {2}/g, ' \xA0');
@@ -4715,6 +4773,7 @@ class TextParser {
         html = html.replace(/[\r\n]/g, '</p><p>');
         return html;
     }
+    // Returns a DocumentFragment object.
     getFragment() {
         const htmlParser = new HTMLParser(this.getHTML());
         return htmlParser.getFragment();
@@ -4728,8 +4787,7 @@ function insertNode(range, node) {
     nativeRange.setEndAfter(nativeNode);
     nativeRange.collapse(false);
 }
-// Either the method inserts a bookmark into the current position of the collapsed range
-// or the method inserts a pair of bookmarks into the beginning and the 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
@@ -4855,7 +4913,7 @@ function removeAndNormalizeNode(node, range) {
         node.remove();
     }
 }
-// Changes the specified range to the range represented by the bookmark.
+// Changes the specified range to a range represented by the bookmark.
 function toBookmark(range, bookmark) {
     const anchor = bookmark.anchor;
     const focus = bookmark.focus;
@@ -5165,7 +5223,7 @@ function getDeepElement(element) {
 
 // Appends a list of nodes to the specified element.
 function wrapNodeList(nodeList, wrapper) {
-    wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : query('<p />');
+    wrapper = wrapper !== null && wrapper !== undefined ? wrapper : query('<p />');
     if (nodeList.length === 0) {
         return wrapper;
     }
@@ -5833,7 +5891,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.3.0";
+var version = "0.3.2";
 
 // Converts the custom HTML tags to the special tags that can not be parsed by browser.
 function denormalizeValue(value) {
@@ -6415,7 +6473,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 === void 0 ? void 0 : _a.insertBefore(node, morphedNode);
+            (_a = morphedNode.parentElement) === null || _a === undefined ? undefined : _a.insertBefore(node, morphedNode);
         }
     }
     added.push(morphedNode);
@@ -6428,7 +6486,7 @@ function insertSiblings(previousSibling, morphedNode, nextSibling) {
     while (stack.length > 0) {
         const node = stack.pop();
         if (node) {
-            (_b = morphedNode.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(node, morphedNode.nextSibling);
+            (_b = morphedNode.parentElement) === null || _b === undefined ? undefined : _b.insertBefore(node, morphedNode.nextSibling);
         }
     }
     return added;
@@ -6542,7 +6600,7 @@ function morphOldNodeTo(oldNode, newContent, ctx) {
             return oldNode;
         if (ctx.callbacks.beforeNodeAdded(newContent) === false)
             return oldNode;
-        (_a = oldNode.parentElement) === null || _a === void 0 ? void 0 : _a.replaceChild(newContent, oldNode);
+        (_a = oldNode.parentElement) === null || _a === undefined ? undefined : _a.replaceChild(newContent, oldNode);
         ctx.callbacks.afterNodeAdded(newContent);
         ctx.callbacks.afterNodeRemoved(oldNode);
         return newContent;
@@ -6648,8 +6706,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 === void 0 ? void 0 : bestMatch.previousSibling;
-        const nextSibling = bestMatch === null || bestMatch === void 0 ? void 0 : bestMatch.nextSibling;
+        const previousSibling = bestMatch === null || bestMatch === undefined ? undefined : bestMatch.previousSibling;
+        const nextSibling = bestMatch === null || bestMatch === undefined ? undefined : bestMatch.nextSibling;
         // morph it
         const morphedNode = morphOldNodeTo(oldNode, bestMatch, ctx);
         if (bestMatch) {
@@ -6831,9 +6889,9 @@ class History {
     }
     save(options = {}) {
         var _a, _b, _c;
-        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;
+        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;
         if (!this.canSave) {
             return;
         }
@@ -7005,20 +7063,29 @@ const defaultConfig = {
     slash: false,
     mention: false,
 };
+// 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.
         this.unsavedInputData = '';
+        // The number of input event calls before saving to the history.
         this.unsavedInputCount = 0;
+        // The state of the current selection.
         this.state = {
             activeItems: [],
             disabledNameMap: new Map(),
             selectedNameMap: new Map(),
             selectedValuesMap: new Map(),
         };
+        // The functions for unmounting plugins.
         this.unmountPluginMap = new Map();
-        this.isComposing = false;
+        // Managing 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).
+        this.isComposing = false;
+        // 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();
@@ -7242,7 +7309,7 @@ class Editor {
         }
         const inputType = event instanceof CompositionEvent ? 'insertText' : event.inputType;
         if (inputType === 'insertText') {
-            const inputData = (_a = event.data) !== null && _a !== void 0 ? _a : '';
+            const inputData = (_a = event.data) !== null && _a !== undefined ? _a : '';
             if (inputData.length > 1) {
                 this.history.save({
                     inputType: 'insertText',
@@ -7310,7 +7377,7 @@ class Editor {
             }
             this.emitStateChangeEvent();
             this.togglePlaceholderClass(value);
-            this.scrollToCaret();
+            this.scrollToCursor();
             this.event.emit('change', value);
         };
         this.history.event.on('undo', value => {
@@ -7332,19 +7399,22 @@ class Editor {
             }
         });
     }
-    // Returns a boolean value indicating whether the editor is focused.
-    get hasFocus() {
-        const activeElement = document.activeElement;
-        if (!activeElement) {
-            return false;
-        }
-        return query(activeElement).closest('.lake-container').get(0) === this.container.get(0);
-    }
     // Returns translation functions for the specified language.
     get locale() {
         return i18nObject(this.config.lang);
     }
-    // Fixes wrong content, especially empty tag.
+    // Sets the default config for the specified plugin.
+    setPluginConfig(name, config) {
+        if (typeof this.config[name] !== 'object') {
+            this.config[name] = {};
+        }
+        for (const key of Object.keys(config)) {
+            if (this.config[name][key] === undefined) {
+                this.config[name][key] = config[key];
+            }
+        }
+    }
+    // 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');
@@ -7379,17 +7449,6 @@ class Editor {
         range.adjustBr();
         return changed;
     }
-    // Sets default config for a plugin.
-    setPluginConfig(name, config) {
-        if (typeof this.config[name] !== 'object') {
-            this.config[name] = {};
-        }
-        for (const key of Object.keys(config)) {
-            if (this.config[name][key] === undefined) {
-                this.config[name][key] = config[key];
-            }
-        }
-    }
     // Renders all boxes that haven't been rendered yet.
     renderBoxes() {
         this.removeBoxGarbage();
@@ -7404,34 +7463,22 @@ class Editor {
             box.render();
         });
     }
-    // Sets focus on the editor.
-    focus() {
-        const range = this.selection.range;
-        if (this.container.contains(range.commonAncestor) && range.isBox) {
-            return;
-        }
-        this.container.focus();
-    }
-    // Removes focus from the editor.
-    blur() {
-        this.container.blur();
-    }
-    // Scrolls to the caret or the range of the selection.
-    scrollToCaret() {
+    // Scrolls to the cursor.
+    scrollToCursor() {
         const range = this.selection.range;
         if (range.isBox) {
             return;
         }
-        // Creates an artificial caret that is the same size as the caret at the current caret position.
+        // Creates an artificial cursor that is the same size as the cursor at the current cursor position.
         const rangeRect = range.getRect();
         if (rangeRect.x === 0 || rangeRect.y === 0) {
             return;
         }
         const containerRect = this.container.get(0).getBoundingClientRect();
-        const artificialCaret = query('<div class="lake-artificial-caret" />');
+        const artificialCursor = query('<div class="lake-artificial-cursor" />');
         const left = rangeRect.x - containerRect.x;
         const top = rangeRect.y - containerRect.y;
-        artificialCaret.css({
+        artificialCursor.css({
             position: 'absolute',
             top: `${top}px`,
             left: `${left}px`,
@@ -7440,14 +7487,34 @@ class Editor {
             // background: 'red',
             'z-index': '-1',
         });
-        this.overlayContainer.find('.lake-artificial-caret').remove();
-        this.overlayContainer.append(artificialCaret);
-        scrollToNode(artificialCaret, {
+        this.overlayContainer.find('.lake-artificial-cursor').remove();
+        this.overlayContainer.append(artificialCursor);
+        scrollToNode(artificialCursor, {
             behavior: 'instant',
             block: 'nearest',
             inline: 'nearest',
         });
-        artificialCaret.remove();
+        artificialCursor.remove();
+    }
+    // Checks whether the editor has focus.
+    hasFocus() {
+        const activeElement = document.activeElement;
+        if (!activeElement) {
+            return false;
+        }
+        return query(activeElement).closest('.lake-container').get(0) === this.container.get(0);
+    }
+    // Sets focus on the editor.
+    focus() {
+        const range = this.selection.range;
+        if (this.container.contains(range.commonAncestor) && range.isBox) {
+            return;
+        }
+        this.container.focus();
+    }
+    // Removes focus from the editor.
+    blur() {
+        this.container.blur();
     }
     // Sets the specified content to the editor.
     setValue(value) {
@@ -7467,7 +7534,7 @@ class Editor {
         value = denormalizeValue(value);
         return value;
     }
-    // Renders an editor 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);
@@ -7534,8 +7601,11 @@ class Editor {
         }
     }
 }
+// the current version of Lake.
 Editor.version = version;
+// Managing the box components.
 Editor.box = new BoxManager();
+// Managing the plugins.
 Editor.plugin = new Plugin();
 
 var copy = (editor) => {
@@ -9403,7 +9473,7 @@ class LinkPopup {
     }
     // Writes the specified text to the system clipboard
     writeClipboardText(text) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter(this, undefined, undefined, function* () {
             let error = false;
             try {
                 if (window.LAKE_TEST) {
@@ -9925,7 +9995,7 @@ var codeBlockBox = {
         });
         const codeEditor = new EditorView({
             parent: codeBlockNativeNode,
-            doc: (_a = boxValue.code) !== null && _a !== void 0 ? _a : '',
+            doc: (_a = boxValue.code) !== null && _a !== undefined ? _a : '',
             extensions: [
                 EditorState.readOnly.of(editor.readonly),
                 EditorView.editable.of(!editor.readonly),
@@ -10277,7 +10347,7 @@ function renderFloatingToolbar(box) {
 }
 // Loads an image and get its width and height.
 function getImageInfo(url) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return __awaiter(this, undefined, undefined, function* () {
         const node = query('<img />');
         node.css({
             position: 'absolute',
@@ -10467,7 +10537,7 @@ function renderCaption(box) {
 }
 // Displays error icon and filename.
 function renderError$1(box) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return __awaiter(this, undefined, undefined, function* () {
         const editor = box.getEditor();
         const boxContainer = box.getContainer();
         const value = box.value;
@@ -10510,7 +10580,7 @@ function renderError$1(box) {
 }
 // Displays an image with uplaoding progress.
 function renderUploading(box) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return __awaiter(this, undefined, undefined, function* () {
         const editor = box.getEditor();
         const boxContainer = box.getContainer();
         const value = box.value;
@@ -10580,7 +10650,7 @@ function renderUploading(box) {
 }
 // Displays an image that can be previewed or removed.
 function renderDone(box) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return __awaiter(this, undefined, undefined, function* () {
         const editor = box.getEditor();
         const boxContainer = box.getContainer();
         const value = box.value;
@@ -10973,7 +11043,7 @@ function setFloatingToolbar(box) {
     box.setToolbar(items);
 }
 function appendContent(rootNode, box) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return __awaiter(this, undefined, undefined, function* () {
         const value = box.value;
         const infoNode = query(template `
     <div class="lake-file-info">
@@ -11462,7 +11532,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 !== void 0 ? _a : item.name}</div>
+        <div class="lake-mention-nickname">${(_a = item.nickname) !== null && _a !== undefined ? _a : item.name}</div>
         <div class="lake-mention-name">(${item.name})</div>
       </li>
     `);
@@ -11484,7 +11554,7 @@ class MentionMenu extends Menu {
         keyword = keyword.toLowerCase();
         const items = [];
         for (const item of this.items) {
-            const nickname = (_a = item.nickname) !== null && _a !== void 0 ? _a : item.name;
+            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) {
@@ -11506,7 +11576,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 !== void 0 ? _a : value.name}</a></div>
+      <div class="lake-mention"><a href="${url}">@${(_a = value.nickname) !== null && _a !== undefined ? _a : value.name}</a></div>
     `);
         boxContainer.empty();
         boxContainer.append(rootNode);
@@ -11709,7 +11779,7 @@ const blockItemListForSpaceKey = [
             var _a;
             return [
                 'heading',
-                (_a = headingTypeMap.get(results[0])) !== null && _a !== void 0 ? _a : 'h6',
+                (_a = headingTypeMap.get(results[0])) !== null && _a !== undefined ? _a : 'h6',
             ];
         },
     },
@@ -11784,7 +11854,7 @@ const blockItemListForEnterKey = [
             return [
                 'codeBlock',
                 {
-                    lang: (_a = shortLangTypeMap.get(results[1])) !== null && _a !== void 0 ? _a : results[1],
+                    lang: (_a = shortLangTypeMap.get(results[1])) !== null && _a !== undefined ? _a : results[1],
                 },
             ];
         },
@@ -12627,7 +12697,7 @@ var escapeKey = (editor) => {
             selection.sync();
             return;
         }
-        if (editor.hasFocus) {
+        if (editor.hasFocus()) {
             event.preventDefault();
             editor.blur();
         }
@@ -12755,6 +12825,46 @@ const slashItems = [
             editor.command.execute(value);
         },
     },
+    {
+        name: 'infoAlert',
+        type: 'button',
+        icon: icons.get('info'),
+        title: locale => locale.slash.infoAlert(),
+        description: locale => locale.slash.infoAlertDesc(),
+        onClick: editor => {
+            editor.command.execute('blockQuote', 'info');
+        },
+    },
+    {
+        name: 'tipAlert',
+        type: 'button',
+        icon: icons.get('tip'),
+        title: locale => locale.slash.tipAlert(),
+        description: locale => locale.slash.tipAlertDesc(),
+        onClick: editor => {
+            editor.command.execute('blockQuote', 'tip');
+        },
+    },
+    {
+        name: 'warningAlert',
+        type: 'button',
+        icon: icons.get('warning'),
+        title: locale => locale.slash.warningAlert(),
+        description: locale => locale.slash.warningAlertDesc(),
+        onClick: editor => {
+            editor.command.execute('blockQuote', 'warning');
+        },
+    },
+    {
+        name: 'dangerAlert',
+        type: 'button',
+        icon: icons.get('danger'),
+        title: locale => locale.slash.dangerAlert(),
+        description: locale => locale.slash.dangerAlertDesc(),
+        onClick: editor => {
+            editor.command.execute('blockQuote', 'danger');
+        },
+    },
     {
         name: 'hr',
         type: 'button',
@@ -12908,6 +13018,10 @@ const defaultItems = [
     'bulletedList',
     'checklist',
     'table',
+    'infoAlert',
+    'tipAlert',
+    'warningAlert',
+    'dangerAlert',
     'hr',
 ];
 function getKeyword(block) {