lakelib 0.1.17 → 0.1.19

package/lib/lake.css

@@ -126,13 +126,13 @@ lake-box {
   margin: 0;
   padding: 0;
   text-indent: 0;
-  grid-template-columns: 1px 1fr 1px;
 }
 lake-box[type="inline"] {
-  display: inline grid;
+  display: inline flex;
 }
 lake-box[type="block"] {
   display: block grid;
+  grid-template-columns: 1px 1fr 1px;
 }
 lake-box .lake-box-strip {
   display: block;

package/lib/lake.js

@@ -663,10 +663,18 @@ class Nodes {
         }
         const nodeText = this.text();
         const isEmptyText = nodeText === '' || /^[\r\n\u200B\u2060]+$/.test(nodeText);
-        if (this.isElement && isEmptyText) {
-            return this.find('lake-box').length === 0;
+        if (!isEmptyText) {
+            return false;
         }
-        return isEmptyText;
+        if (this.isElement) {
+            if (this.find('lake-box').length > 0) {
+                return false;
+            }
+            if (this.find('br').length > 1) {
+                return false;
+            }
+        }
+        return true;
     }
     // Returns a boolean value indicating whether the node and the target node are siblings.
     isSibling(target) {
@@ -1406,7 +1414,7 @@ class Range {
         const height = rect.height;
         return DOMRect.fromRect({
             x,
-            y: rect.y,
+            y: height > 0 ? rect.y : 0,
             width: width > 0 ? width : 1,
             height: height > 0 ? height : 1,
         });
@@ -1560,6 +1568,7 @@ class Range {
             this.setEnd(child, child.children().length);
         }
         this.collapseToEnd();
+        this.adjustBr();
     }
     // Reduces the boundary of the range.
     // <div>[<p><strong>foo</strong></p>]</div>
@@ -1663,6 +1672,21 @@ class Range {
         this.adjustTable();
         this.adjustBlock();
     }
+    // Relocates the start and end points of the range for <br /> element.
+    // 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.
+    adjustBr() {
+        if (!this.isCollapsed) {
+            return;
+        }
+        const prevNode = this.getPrevNode();
+        const nextNode = this.getNextNode();
+        if (prevNode.name === 'br' && nextNode.length === 0) {
+            this.setStartBefore(prevNode);
+            this.collapseToStart();
+        }
+    }
     // Returns the previous node of the beginning point of the range.
     getPrevNode() {
         let prevNode;
@@ -1899,31 +1923,36 @@ function splitNodes(node, offset, limitNode) {
     };
 }
 
-// Appends a node to the deepest element of the specified element.
-function appendDeepest(element, node) {
-    let child = element;
-    while (child.length > 0) {
-        let firstChild = child.first();
-        while (firstChild.isText && firstChild.isEmpty) {
-            firstChild = firstChild.next();
-        }
-        if (child.isText || child.isBox) {
-            break;
-        }
-        if (child.isElement && child.children().length === 1 && firstChild.isBookmark) {
-            child.prepend(node);
-            break;
-        }
-        if (child.isElement && !child.isVoid && firstChild.length === 0) {
-            child.append(node);
+// Appends a line break to the end of a block.
+// Example:
+// case 1: <p></p> to <p><br /></p>
+// case 2: <p><br /></p> to <p><br /></p>
+// case 3: <p>foo</p> to <p>foo<br /></p>
+// case 4: <ul><li></li></ul> to <ul><li><br /></li></ul>
+// case 5: <p><focus /></p> to <p><focus /><br /></p>
+function appendBreak(block) {
+    const breakNode = query('<br />');
+    let child = block;
+    while (child.isBlock) {
+        let lastChild = child.last();
+        while (lastChild.isText && lastChild.isEmpty) {
+            lastChild = lastChild.prev();
+        }
+        if (!lastChild.isBlock && lastChild.name !== 'br') {
+            child.append(breakNode);
             break;
         }
-        child = firstChild;
+        child = lastChild;
     }
+    return breakNode;
 }
 
-// Removes The <br /> element in the specified block which is empty.
-function removeBr(block) {
+// Removes a line break in the specified empty block.
+// Example:
+// case 1: <p><br /></p> to <p></p>
+// case 2: <p><br /><focus /></p> to <p><focus /></p>
+// case 3: <p><focus /><br /></p> to <p><focus /></p>
+function removeBreak(block) {
     if (block.length === 0) {
         return;
     }
@@ -1985,10 +2014,10 @@ function mergeNodes(node, otherNode) {
     if (node.isText || otherNode.isText || node.isVoid || otherNode.isVoid) {
         return getAfterPoint(node);
     }
-    removeBr(node);
-    removeBr(otherNode);
+    removeBreak(node);
+    removeBreak(otherNode);
     if (node.isBlock && node.isEmpty && otherNode.isEmpty) {
-        appendDeepest(node, query('<br />'));
+        appendBreak(node);
     }
     const nextNode = node.last();
     const nextOtherNode = otherNode.first();
@@ -2016,7 +2045,7 @@ function mergeNodes(node, otherNode) {
 }
 
 // Returns the deepest element of the specified element.
-function getDeepest(element) {
+function getDeepElement(element) {
     let child = element;
     while (child.length > 0) {
         let firstChild = child.first();
@@ -2037,7 +2066,7 @@ function wrapNodeList(nodeList, wrapper) {
         return wrapper;
     }
     wrapper = wrapper.clone(true);
-    const deepestElement = getDeepest(wrapper);
+    const deepestElement = getDeepElement(wrapper);
     nodeList[0].before(wrapper);
     for (const node of nodeList) {
         deepestElement.append(node);
@@ -3967,7 +3996,7 @@ function uploadFile(config) {
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    appendDeepest: appendDeepest,
+    appendBreak: appendBreak,
     camelCase: camelCase,
     changeTagName: changeTagName,
     debug: debug,
@@ -3978,7 +4007,7 @@ var index = /*#__PURE__*/Object.freeze({
     fromBase64: fromBase64,
     getBox: getBox,
     getCSS: getCSS,
-    getDeepest: getDeepest,
+    getDeepElement: getDeepElement,
     inString: inString,
     mergeNodes: mergeNodes,
     modifierText: modifierText,
@@ -3987,7 +4016,7 @@ var index = /*#__PURE__*/Object.freeze({
     normalizeValue: normalizeValue,
     parseStyle: parseStyle,
     query: query,
-    removeBr: removeBr,
+    removeBreak: removeBreak,
     removeZWS: removeZWS,
     request: request,
     safeTemplate: safeTemplate,
@@ -4036,7 +4065,7 @@ class Fragment {
 
 const blockAttributeRules = {
     id: /^[\w-]+$/,
-    class: /^[\w-]+$/,
+    class: /^[\w- ]+$/,
     style: {
         'text-align': ['left', 'center', 'right', 'justify', 'start', 'end'],
         'margin-left': /^-?\d+px$/i,
@@ -4109,7 +4138,7 @@ function getElementRules() {
             },
         },
         span: {
-            class: /^[\w-]+$/,
+            class: /^[\w- ]+$/,
             style: {
                 color: /^[^"]+$/,
                 'background-color': /^[^"]+$/,
@@ -4127,7 +4156,7 @@ function getElementRules() {
         sup: {},
         code: {},
         a: {
-            class: /^[\w-]+$/,
+            class: /^[\w- ]+$/,
             name: /^[\w-]+$/,
             href: /^[^"]+$/,
             target: /^[\w-]+$/,
@@ -4502,8 +4531,9 @@ function deleteContents(range) {
     if (noMerge) {
         const block = range.getBlocks()[0];
         if (block && block.isEmpty) {
-            appendDeepest(block, query('<br />'));
-            range.shrinkAfter(block);
+            const breakNode = appendBreak(block);
+            range.setStartBefore(breakNode);
+            range.collapseToStart();
         }
         return;
     }
@@ -4536,7 +4566,7 @@ function insertFragment(range, fragment) {
         deleteContents(range);
     }
     const block = range.startNode.closestBlock();
-    removeBr(block);
+    removeBreak(block);
     const bookmark = insertBookmark(range);
     bookmark.focus.before(fragment);
     toBookmark(range, bookmark);
@@ -4607,7 +4637,7 @@ function setBlocks(range, value) {
                 if (block.isList && node.isList && node.attr('indent') !== '') {
                     block.attr('indent', node.attr('indent'));
                 }
-                const deepestBlock = getDeepest(block);
+                const deepestBlock = getDeepElement(block);
                 let child = node.first();
                 while (child.length > 0) {
                     const nextNode = child.next();
@@ -4631,8 +4661,9 @@ function setBlocks(range, value) {
     toBookmark(range, bookmark);
     fixList(range);
     if (block.isEmpty) {
-        appendDeepest(block, query('<br />'));
-        range.shrinkAfter(block);
+        const breakNode = appendBreak(block);
+        range.setStartBefore(breakNode);
+        range.collapseToStart();
     }
 }
 
@@ -4683,16 +4714,13 @@ function splitBlock$1(range) {
         }
     }
     if (start && start.isEmpty) {
-        appendDeepest(start, query('<br />'));
+        appendBreak(start);
     }
     if (end) {
         if (end.isEmpty) {
-            appendDeepest(end, query('<br />'));
-            range.shrinkAfter(end);
-        }
-        else {
-            range.shrinkBefore(end);
+            appendBreak(end);
         }
+        range.shrinkBefore(end);
     }
     fixList(range);
     return {
@@ -4864,7 +4892,7 @@ function addMark(range, value) {
             }
         }
         const block = range.startNode.closestBlock();
-        removeBr(block);
+        removeBreak(block);
         // https://en.wikipedia.org/wiki/Zero-width_space
         const zeroWidthSpace = new Nodes(document.createTextNode('\u200B'));
         const parts = splitMarks(range);
@@ -4876,7 +4904,8 @@ function addMark(range, value) {
                     valueNode = newMark;
                 }
                 else {
-                    appendDeepest(newMark, zeroWidthSpace);
+                    const deepestMark = getDeepElement(newMark);
+                    deepestMark.append(zeroWidthSpace);
                     valueNode.append(newMark);
                 }
             }
@@ -4986,7 +5015,8 @@ function removeMark(range, value) {
             range.collapseToStart();
             return;
         }
-        appendDeepest(newMark, zeroWidthSpace);
+        const deepestMark = getDeepElement(newMark);
+        deepestMark.append(zeroWidthSpace);
         parts.start.after(newMark);
         removeEmptyMarks$1(parts.start);
         range.shrinkAfter(newMark);
@@ -5019,7 +5049,7 @@ function insertLink(range, value) {
         if (linkNode.length === 0) {
             linkNode = valueNode.clone(true);
             const block = range.startNode.closestBlock();
-            removeBr(block);
+            removeBreak(block);
             insertNode(range, linkNode);
             return linkNode;
         }
@@ -5127,13 +5157,14 @@ function removeBox(range) {
     const parentNode = boxNode.parent();
     unmountBox(box);
     if (parentNode.isEmpty) {
-        appendDeepest(parentNode, query('<br />'));
-        range.shrinkAfter(parentNode);
+        const breakNode = appendBreak(parentNode);
+        range.setStartBefore(breakNode);
+        range.collapseToStart();
     }
     return box;
 }
 
-var version = "0.1.17";
+var version = "0.1.19";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5584,6 +5615,9 @@ class Keystroke {
         this.container = container;
         this.container.on('keydown', event => {
             const keyboardEvent = event;
+            if (keyboardEvent.isComposing) {
+                return;
+            }
             for (const item of this.keydownEventList) {
                 if (isKeyHotkey(item.type, keyboardEvent)) {
                     if (item.listener(keyboardEvent) === false) {
@@ -5594,6 +5628,9 @@ class Keystroke {
         });
         this.container.on('keyup', event => {
             const keyboardEvent = event;
+            if (keyboardEvent.isComposing) {
+                return;
+            }
             for (const item of this.keyupEventList) {
                 if (isKeyHotkey(item.type, keyboardEvent)) {
                     if (item.listener(keyboardEvent) === false) {
@@ -5909,7 +5946,8 @@ class Editor {
             else {
                 boxNode.after(paragraph);
             }
-            range.shrinkAfter(paragraph);
+            range.setStart(paragraph, 0);
+            range.collapseToStart();
         }
         const text = stripNode.text();
         stripNode.html('<br />');
@@ -5928,18 +5966,6 @@ class Editor {
         this.container.on('compositionend', () => {
             this.isComposing = false;
         });
-        this.container.on('beforeinput', event => {
-            const inputEvent = event;
-            // <p><br /><focus /></p>
-            // When the caret is positioned behind a <br> tag, the input event is triggered twice after inserting a sharp(#) in composition mode.
-            if (this.isComposing && inputEvent.inputType === 'insertText') {
-                inputEvent.preventDefault();
-                this.isComposing = false;
-                this.history.save({
-                    inputType: 'insertText',
-                });
-            }
-        });
         this.container.on('input', event => {
             const inputEvent = event;
             // Here setTimeout is necessary because isComposing is not false after ending composition.
@@ -6049,7 +6075,7 @@ class Editor {
         children = this.container.children();
         if (children.length === 0) {
             this.container.html('<p><br /></p>');
-            range.shrinkAfter(this.container);
+            range.shrinkBefore(this.container);
             changed = true;
             debug('Content fixed: default paragraph was added');
         }
@@ -6064,18 +6090,7 @@ class Editor {
                 debug(`Content fixed: void element "${child.name}" was wrapped in paragraph`);
             }
         }
-        // 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.
-        if (range.isCollapsed) {
-            const prevNode = range.getPrevNode();
-            const nextNode = range.getNextNode();
-            if (prevNode.name === 'br' && nextNode.length === 0) {
-                range.setStartBefore(prevNode);
-                range.collapseToStart();
-                debug('Range fixed: the caret has been moved to the front of the <br> tag');
-            }
-        }
+        range.adjustBr();
         return changed;
     }
     // Sets default config for a plugin.
@@ -8312,7 +8327,7 @@ function insertFirstNode(editor, otherNode) {
         return;
     }
     if (otherNode.first().length > 0) {
-        removeBr(block);
+        removeBreak(block);
     }
     if (block.isEmpty && block.name === 'p') {
         block.replaceWith(otherNode);
@@ -10104,8 +10119,9 @@ function removeEmptyMarks(range) {
     const block = range.getBlocks()[0];
     if (block && block.isEmpty && block.first().name !== 'br') {
         block.empty();
-        appendDeepest(block, query('<br />'));
-        range.shrinkAfter(block);
+        const breakNode = appendBreak(block);
+        range.setStartBefore(breakNode);
+        range.collapseToStart();
     }
 }
 function mergeWithPreviousBlock(editor, block) {
@@ -10139,6 +10155,12 @@ function mergeWithPreviousBlock(editor, block) {
         return;
     }
     removeEmptyMarks(range);
+    const nextNode = range.getNextNode();
+    if (nextNode.name === 'br' && prevBlock.name !== 'p') {
+        nextNode.remove();
+        range.shrinkAfter(prevBlock);
+        return;
+    }
     const bookmark = editor.selection.insertBookmark();
     mergeNodes(prevBlock, block);
     editor.selection.toBookmark(bookmark);
@@ -10224,8 +10246,9 @@ var backspaceKey = (editor) => {
             range.collapseToStart();
             prevNode.remove();
             if (block.isEmpty) {
-                appendDeepest(block, query('<br />'));
-                range.shrinkAfter(block);
+                const breakNode = appendBreak(block);
+                range.setStartBefore(breakNode);
+                range.collapseToStart();
             }
             editor.history.save();
             return;