lakelib 0.1.20 → 0.1.22

package/lib/lake.js

@@ -676,14 +676,6 @@ class Nodes {
         }
         return true;
     }
-    // Returns a boolean value indicating whether the node and the target node are siblings.
-    isSibling(target) {
-        if (this.length === 0) {
-            return false;
-        }
-        const parent = this.get(0).parentNode;
-        return parent && parent === target.parent().get(0);
-    }
     // Gets a native node at the specified index.
     get(index) {
         return this.nodeList[index];
@@ -732,6 +724,23 @@ 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.
+    contains(otherNode) {
+        if (otherNode instanceof Nodes) {
+            otherNode = otherNode.get(0);
+        }
+        const element = this.get(0);
+        return element.contains(otherNode);
+    }
+    // Returns a boolean value indicating whether the node and the target node are siblings.
+    isSibling(target) {
+        if (this.length === 0) {
+            return false;
+        }
+        const parent = this.get(0).parentNode;
+        return parent && parent === target.parent().get(0);
+    }
     // Returns the descendants of the first element which are selected by the specified CSS selector.
     find(selector) {
         if (typeof selector === 'string') {
@@ -5164,7 +5173,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.1.20";
+var version = "0.1.22";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5256,6 +5265,9 @@ class Selection {
     // Updates the saved range with the range of the native selection.
     updateByRange() {
         const newRange = this.getRangeFromNativeSelection();
+        if (!this.container.contains(newRange.commonAncestor)) {
+            return;
+        }
         if (this.range.startNode.get(0) === newRange.startNode.get(0) &&
             this.range.startOffset === newRange.startOffset &&
             this.range.endNode.get(0) === newRange.endNode.get(0) &&
@@ -5494,8 +5506,7 @@ class History {
             const box = getBox(nativeNode);
             box.getContainer().empty();
         });
-        if (range.commonAncestor.isOutside ||
-            range.commonAncestor.closestContainer().get(0) !== this.container.get(0)) {
+        if (!this.container.contains(range.commonAncestor)) {
             return newContainer;
         }
         if (range.isInsideBox) {
@@ -5754,27 +5765,27 @@ class Editor {
         this.box = Editor.box;
         this.copyListener = event => {
             const range = this.selection.range;
-            if (range.commonAncestor.closestContainer().get(0) !== this.container.get(0)) {
+            if (!this.container.contains(range.commonAncestor)) {
                 return;
             }
             this.event.emit('copy', event);
         };
         this.cutListener = event => {
             const range = this.selection.range;
-            if (range.commonAncestor.closestContainer().get(0) !== this.container.get(0)) {
+            if (!this.container.contains(range.commonAncestor)) {
                 return;
             }
             this.event.emit('cut', event);
         };
         this.pasteListener = event => {
             const range = this.selection.range;
-            if (range.commonAncestor.closestContainer().get(0) !== this.container.get(0)) {
+            if (!this.container.contains(range.commonAncestor)) {
                 return;
             }
             this.event.emit('paste', event);
         };
         this.selectionchangeListener = () => {
-            this.selection.updateByRange();
+            this.updateSelectionRange();
             this.updateBoxSelectionStyle();
             this.emitStateChangeEvent();
         };
@@ -5788,6 +5799,11 @@ class Editor {
         this.resizeListener = () => {
             this.event.emit('resize');
         };
+        this.updateSelectionRange = debounce(() => {
+            this.selection.updateByRange();
+        }, 1, {
+            immediate: true,
+        });
         // Updates the classes of all boxes when the current selection of the editor is changed.
         this.updateBoxSelectionStyle = debounce(() => {
             // The editor has been unmounted.
@@ -5840,8 +5856,7 @@ class Editor {
         this.emitStateChangeEvent = debounce(() => {
             const commandNames = this.command.getNames();
             let appliedItems = this.selection.getAppliedItems();
-            if (appliedItems.length > 0 &&
-                appliedItems[0].node.closestContainer().get(0) !== this.container.get(0)) {
+            if (appliedItems.length > 0 && !this.container.contains(appliedItems[0].node)) {
                 appliedItems = [];
             }
             const disabledNameMap = new Map();
@@ -5959,60 +5974,65 @@ class Editor {
         this.unsavedInputData = '';
         this.unsavedInputCount = 0;
     }
-    // Binds events about input.
+    // Handles input event.
+    handleInputEvent(event) {
+        var _a;
+        this.selection.updateByRange();
+        const range = this.selection.range;
+        if (range.isInsideBox) {
+            return;
+        }
+        if (range.isBoxStart || range.isBoxEnd) {
+            this.moveBoxStripText();
+            this.history.save();
+            return;
+        }
+        const inputType = event instanceof CompositionEvent ? 'insertText' : event.inputType;
+        if (inputType === 'insertText') {
+            const inputData = (_a = event.data) !== null && _a !== void 0 ? _a : '';
+            if (inputData.length > 1) {
+                this.history.save({
+                    inputType: 'insertText',
+                    update: false,
+                });
+                return;
+            }
+            this.unsavedInputData += inputData;
+            this.unsavedInputCount++;
+            if (this.unsavedInputData.length < this.config.minChangeSize) {
+                this.history.save({
+                    inputType: 'insertText',
+                    update: this.unsavedInputCount > 1,
+                });
+            }
+            else {
+                this.history.save({
+                    inputType: 'insertText',
+                    update: true,
+                });
+                this.resetUnsavedInputData();
+            }
+            return;
+        }
+        this.history.save();
+    }
+    // Binds events about inputting text.
     bindInputEvents() {
         this.container.on('compositionstart', () => {
             this.isComposing = true;
+            this.container.removeClass('lake-placeholder');
         });
-        this.container.on('compositionend', () => {
+        this.container.on('compositionend', event => {
             this.isComposing = false;
+            this.handleInputEvent(event);
         });
         this.container.on('input', event => {
             const inputEvent = event;
-            // Here setTimeout is necessary because isComposing is not false after ending composition.
-            window.setTimeout(() => {
-                var _a;
-                const range = this.selection.range;
-                if (range.isInsideBox) {
-                    return;
-                }
-                // isComposing is false after ending composition because compositionend event has been emitted.
-                if (this.isComposing) {
-                    if (inputEvent.inputType === 'insertCompositionText') {
-                        this.container.removeClass('lake-placeholder');
-                    }
-                    this.event.emit('input', inputEvent);
-                    return;
-                }
-                if (range.isBoxStart || range.isBoxEnd) {
-                    this.moveBoxStripText();
-                    this.history.save();
-                    this.event.emit('input', inputEvent);
-                    return;
-                }
-                if (inputEvent.inputType === 'insertText' ||
-                    inputEvent.inputType === 'insertCompositionText') {
-                    this.unsavedInputData += (_a = inputEvent.data) !== null && _a !== void 0 ? _a : '';
-                    this.unsavedInputCount++;
-                    if (this.unsavedInputData.length < this.config.minChangeSize) {
-                        this.history.save({
-                            inputType: 'insertText',
-                            update: this.unsavedInputCount > 1,
-                        });
-                    }
-                    else {
-                        this.history.save({
-                            inputType: 'insertText',
-                            update: true,
-                        });
-                        this.resetUnsavedInputData();
-                    }
-                    this.event.emit('input', inputEvent);
-                    return;
-                }
-                this.history.save();
-                this.event.emit('input', inputEvent);
-            }, 0);
+            this.isComposing = inputEvent.isComposing;
+            if (this.isComposing) {
+                return;
+            }
+            this.handleInputEvent(event);
         });
     }
     // Binds events about history.
@@ -6043,8 +6063,8 @@ class Editor {
         this.history.event.on('save', (value, options) => {
             this.removeBoxGarbage();
             executeCommonMethods(value);
-            this.selection.sync();
             if (options.inputType !== 'insertText') {
+                this.selection.sync();
                 this.resetUnsavedInputData();
             }
         });
@@ -7246,16 +7266,16 @@ const codeBlockBox = {
         const boxValue = box.value;
         const langItem = langItemMap.get(boxValue.lang);
         const language = new Compartment();
-        const changeHandler = (value) => {
-            // Here setTimeout is necessary because isComposing is not false after ending composition.
-            window.setTimeout(() => {
-                if (editor.isComposing) {
-                    return;
-                }
-                box.updateValue('code', value);
-                editor.history.save();
-            }, 0);
-        };
+        const changeHandler = debounce((value) => {
+            editor.selection.updateByRange();
+            if (editor.isComposing) {
+                return;
+            }
+            box.updateValue('code', value);
+            editor.history.save();
+        }, 1, {
+            immediate: false,
+        });
         const updateListener = EditorView.updateListener.of((update) => {
             if (!update.docChanged) {
                 return;
@@ -7551,20 +7571,11 @@ function openFullScreen(box) {
         }
         return placeholderSrc;
     });
-    let savedRange;
     lightbox.on('openingAnimationEnd', () => {
-        savedRange = editor.selection.range;
         box.event.emit('openfullscreen');
     });
     lightbox.on('destroy', () => {
-        window.setTimeout(() => {
-            if (savedRange) {
-                // fix(image): lose focus when zooming in the iOS
-                editor.selection.range = savedRange;
-                editor.selection.sync();
-            }
-            box.event.emit('closefullscreen');
-        }, 0);
+        box.event.emit('closefullscreen');
     });
     lightbox.init();
     lightbox.loadAndOpen(currentIndex);
@@ -9122,11 +9133,11 @@ var formatPainter = (editor) => {
         markList = [];
         editor.history.save();
     });
-    editor.event.on('click', (tagetNode) => {
-        if (tagetNode.isInside && tagetNode.closestContainer().get(0) === editor.container.get(0)) {
+    editor.event.on('click', (targetNode) => {
+        if (editor.container.contains(targetNode)) {
             return;
         }
-        const buttonNode = tagetNode.closest('button[name="formatPainter"]');
+        const buttonNode = targetNode.closest('button[name="formatPainter"]');
         if (buttonNode.length > 0) {
             return;
         }
@@ -9420,9 +9431,7 @@ var link = (editor) => {
             popup.hide();
             return;
         }
-        if (linkNode.isOutside ||
-            linkNode.closestContainer().get(0) !== editor.container.get(0) ||
-            linkNode.closest('lake-box').length > 0) {
+        if (!editor.container.contains(linkNode) || linkNode.closest('lake-box').length > 0) {
             popup.hide();
             return;
         }
@@ -10177,7 +10186,8 @@ var backspaceKey = (editor) => {
             const boxNode = range.commonAncestor.closest('lake-box');
             const box = getBox(boxNode);
             const boxValue = box.value;
-            if (box.name === 'codeBlock' && (boxValue.code === undefined || boxValue.code === '')) {
+            if (range.isCollapsed && box.name === 'codeBlock' &&
+                (boxValue.code === undefined || boxValue.code === '')) {
                 event.preventDefault();
                 editor.selection.removeBox(box);
                 editor.history.save();