lakelib 0.1.18 → 0.1.20

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

@@ -1414,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,
         });
@@ -1568,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>
@@ -1671,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;
@@ -1907,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;
     }
@@ -1993,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();
@@ -2024,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();
@@ -2045,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);
@@ -3975,7 +3996,7 @@ function uploadFile(config) {
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    appendDeepest: appendDeepest,
+    appendBreak: appendBreak,
     camelCase: camelCase,
     changeTagName: changeTagName,
     debug: debug,
@@ -3986,7 +4007,7 @@ var index = /*#__PURE__*/Object.freeze({
     fromBase64: fromBase64,
     getBox: getBox,
     getCSS: getCSS,
-    getDeepest: getDeepest,
+    getDeepElement: getDeepElement,
     inString: inString,
     mergeNodes: mergeNodes,
     modifierText: modifierText,
@@ -3995,7 +4016,7 @@ var index = /*#__PURE__*/Object.freeze({
     normalizeValue: normalizeValue,
     parseStyle: parseStyle,
     query: query,
-    removeBr: removeBr,
+    removeBreak: removeBreak,
     removeZWS: removeZWS,
     request: request,
     safeTemplate: safeTemplate,
@@ -4044,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,
@@ -4117,7 +4138,7 @@ function getElementRules() {
             },
         },
         span: {
-            class: /^[\w-]+$/,
+            class: /^[\w- ]+$/,
             style: {
                 color: /^[^"]+$/,
                 'background-color': /^[^"]+$/,
@@ -4135,7 +4156,7 @@ function getElementRules() {
         sup: {},
         code: {},
         a: {
-            class: /^[\w-]+$/,
+            class: /^[\w- ]+$/,
             name: /^[\w-]+$/,
             href: /^[^"]+$/,
             target: /^[\w-]+$/,
@@ -4510,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;
     }
@@ -4544,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);
@@ -4615,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();
@@ -4639,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();
     }
 }
 
@@ -4691,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 {
@@ -4872,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);
@@ -4884,7 +4904,8 @@ function addMark(range, value) {
                     valueNode = newMark;
                 }
                 else {
-                    appendDeepest(newMark, zeroWidthSpace);
+                    const deepestMark = getDeepElement(newMark);
+                    deepestMark.append(zeroWidthSpace);
                     valueNode.append(newMark);
                 }
             }
@@ -4994,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);
@@ -5027,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;
         }
@@ -5135,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.18";
+var version = "0.1.20";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5471,7 +5494,8 @@ class History {
             const box = getBox(nativeNode);
             box.getContainer().empty();
         });
-        if (range.commonAncestor.isOutside) {
+        if (range.commonAncestor.isOutside ||
+            range.commonAncestor.closestContainer().get(0) !== this.container.get(0)) {
             return newContainer;
         }
         if (range.isInsideBox) {
@@ -5923,7 +5947,8 @@ class Editor {
             else {
                 boxNode.after(paragraph);
             }
-            range.shrinkAfter(paragraph);
+            range.setStart(paragraph, 0);
+            range.collapseToStart();
         }
         const text = stripNode.text();
         stripNode.html('<br />');
@@ -5942,18 +5967,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.
@@ -6063,7 +6076,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');
         }
@@ -6078,18 +6091,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.
@@ -8326,7 +8328,7 @@ function insertFirstNode(editor, otherNode) {
         return;
     }
     if (otherNode.first().length > 0) {
-        removeBr(block);
+        removeBreak(block);
     }
     if (block.isEmpty && block.name === 'p') {
         block.replaceWith(otherNode);
@@ -10118,8 +10120,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) {
@@ -10244,8 +10247,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;