lakelib 0.1.12 → 0.1.14

package/lib/lake.js

@@ -319,7 +319,7 @@ function parseStyle(styleValue) {
 // Converts the special tags to ordinary HTML tags that can be parsed by browser.
 function normalizeValue(value) {
     return value.
-        replace(/(<lake-box[^>]+>)[\s\S]*?(<\/lake-box>)/ig, '$1$2').
+        replace(/(<lake-box[^>]+>)[\s\S]*?(<\/lake-box>|$)/ig, '$1</lake-box>').
         replace(/<anchor\s*\/>/ig, '<lake-bookmark type="anchor"></lake-bookmark>').
         replace(/<focus\s*\/>/ig, '<lake-bookmark type="focus"></lake-bookmark>');
 }
@@ -1566,7 +1566,7 @@ class Range {
         }
     }
     // Relocates the start and end points of the range for the box.
-    adaptBox() {
+    adjustBox() {
         const startBoxNode = this.startNode.closest('lake-box');
         if (startBoxNode.length > 0) {
             const startRange = this.clone();
@@ -1591,7 +1591,7 @@ class Range {
         }
     }
     // Relocates the beginning or end position of the range for table.
-    adaptTable() {
+    adjustTable() {
         const startTable = this.startNode.closest('table');
         const endTable = this.endNode.closest('table');
         if (startTable.length === 0 && endTable.length > 0 && endTable.isInside) {
@@ -1617,7 +1617,7 @@ class Range {
     // [<p>foo</p><p>]bar</p>
     // to
     // <p>[foo]</p><p>bar</p>
-    adaptBlock() {
+    adjustBlock() {
         if (!this.isCollapsed) {
             // [<p>foo</p><p>]bar</p> to [<p>foo</p>]<p>bar</p>
             if (this.endNode.isElement && this.endOffset === 0) {
@@ -1639,10 +1639,10 @@ class Range {
         }
     }
     // Relocates the start and end points of the range.
-    adapt() {
-        this.adaptBox();
-        this.adaptTable();
-        this.adaptBlock();
+    adjust() {
+        this.adjustBox();
+        this.adjustTable();
+        this.adjustBlock();
     }
     // Returns the previous node of the beginning point of the range.
     getPrevNode() {
@@ -1684,7 +1684,7 @@ class Range {
         }
         const nodeList = [];
         const clonedRange = this.clone();
-        clonedRange.adaptBox();
+        clonedRange.adjustBox();
         for (const child of clonedRange.commonAncestor.getWalker()) {
             if (child.isBox && clonedRange.intersectsNode(child)) {
                 nodeList.push(child);
@@ -2029,10 +2029,15 @@ function wrapNodeList(nodeList, wrapper) {
 // Removes Zero-width spaces that are dependent on some other text nodes.
 function removeZWS(node) {
     for (const child of node.getWalker()) {
-        if (child.isText && child.text().length > 1) {
-            const nodeValue = child.text();
-            if (/\u200B/.test(child.text())) {
-                child.get(0).nodeValue = nodeValue.replace(/\u200B/g, '');
+        if (child.isText) {
+            const text = child.text();
+            if (text === '') {
+                child.remove();
+            }
+            else if (text.length > 1) {
+                if (/\u200B/.test(text)) {
+                    child.get(0).nodeValue = text.replace(/\u200B/g, '');
+                }
             }
         }
     }
@@ -2717,21 +2722,18 @@ function nodeAndView(node) {
     let bottom = rect.bottom;
     let viewportWidth = window.innerWidth;
     let viewportHeight = window.innerHeight;
-    const container = node.closestContainer();
-    if (container.length > 0) {
-        const viewport = container.closestScroller();
-        if (viewport.length > 0) {
-            const nativeViewport = viewport.get(0);
-            const viewportRect = nativeViewport.getBoundingClientRect();
-            const offsetLeft = viewportRect.x;
-            const offsetTop = viewportRect.y;
-            left -= offsetLeft;
-            right -= offsetLeft;
-            top -= offsetTop;
-            bottom -= offsetTop;
-            viewportWidth = viewportRect.width;
-            viewportHeight = viewportRect.height;
-        }
+    const viewport = node.closestScroller();
+    if (viewport.length > 0) {
+        const nativeViewport = viewport.get(0);
+        const viewportRect = nativeViewport.getBoundingClientRect();
+        const offsetLeft = viewportRect.x;
+        const offsetTop = viewportRect.y;
+        left -= offsetLeft;
+        right -= offsetLeft;
+        top -= offsetTop;
+        bottom -= offsetTop;
+        viewportWidth = viewportRect.width;
+        viewportHeight = viewportRect.height;
     }
     const position = {
         left,
@@ -3569,7 +3571,7 @@ class Box {
             container.removeClass('lake-box-hovered');
         });
         container.on('click', () => {
-            debug(`Box '${this.name}' (id = ${this.node.id}) value:`);
+            debug(`Box "${this.name}" (id = ${this.node.id}) value:`);
             debug(this.value);
         });
         if (this.type === 'block' && this.node.isContentEditable) {
@@ -3670,7 +3672,7 @@ class Box {
             newContainer.append(content);
             morph(container, newContainer);
         }
-        debug(`Box '${this.name}' (id = ${this.node.id}) rendered`);
+        debug(`Box "${this.name}" (id: ${this.node.id}) rendered`);
     }
     // Destroys a rendered box.
     unmount() {
@@ -3679,7 +3681,7 @@ class Box {
         boxData[this.node.id] = {};
         this.event.removeAllListeners();
         this.node.empty();
-        debug(`Box '${this.name}' (id = ${this.node.id}) unmounted`);
+        debug(`Box "${this.name}" (id: ${this.node.id}) unmounted`);
     }
     // Returns a HTML string of the box.
     getHTML() {
@@ -4290,9 +4292,8 @@ function insertBookmark(range) {
 function removeAndNormalizeNode(node, range) {
     const previousNode = node.prev();
     const nextNode = node.next();
-    if (previousNode.isText && nextNode.isText) {
+    if (previousNode.isText || nextNode.isText) {
         const parentNode = node.parent();
-        removeZWS(parentNode);
         node.remove();
         parentNode.get(0).normalize();
     }
@@ -4375,8 +4376,8 @@ function deleteContents(range) {
     if (range.isCollapsed) {
         return;
     }
-    range.adaptBox();
-    range.adaptTable();
+    range.adjustBox();
+    range.adjustTable();
     if (range.isInoperative) {
         return;
     }
@@ -4385,7 +4386,7 @@ function deleteContents(range) {
     const noMerge = startBlock.get(0) === endBlock.get(0);
     const nativeRange = range.get();
     nativeRange.deleteContents();
-    range.adaptBlock();
+    range.adjustBlock();
     if (noMerge) {
         const block = range.getBlocks()[0];
         if (block && block.isEmpty) {
@@ -4414,7 +4415,7 @@ function insertFragment(range, fragment) {
         return;
     }
     if (range.isCollapsed) {
-        range.adaptBox();
+        range.adjustBox();
     }
     else {
         deleteContents(range);
@@ -4424,7 +4425,7 @@ function insertFragment(range, fragment) {
     const bookmark = insertBookmark(range);
     bookmark.focus.before(fragment);
     toBookmark(range, bookmark);
-    range.adaptBlock();
+    range.adjustBlock();
 }
 
 // Inserts a HTML string into the specified range.
@@ -4543,7 +4544,7 @@ function splitBlock$1(range) {
         };
     }
     if (range.isCollapsed) {
-        range.adaptBox();
+        range.adjustBox();
     }
     else {
         deleteContents(range);
@@ -4596,7 +4597,7 @@ function splitBlock$1(range) {
 }
 
 // Removes empty marks that contain no content.
-function removeEmptyMarks$1(node) {
+function removeEmptyMarks$2(node) {
     if (node.isMark && node.isEmpty) {
         node.remove();
         return;
@@ -4618,8 +4619,8 @@ function splitMarksAtPoint(node, offset, removeEmptyMark) {
     const parts = splitNodes(node, offset, limitBlock);
     if (parts) {
         if (removeEmptyMark) {
-            removeEmptyMarks$1(parts.start);
-            removeEmptyMarks$1(parts.end);
+            removeEmptyMarks$2(parts.start);
+            removeEmptyMarks$2(parts.end);
             if (!parts.start.isEmpty) {
                 start = parts.start;
             }
@@ -4649,7 +4650,7 @@ function splitMarks(range, removeEmptyMark = true) {
             end: null,
         };
     }
-    range.adaptBox();
+    range.adjustBox();
     if (range.isCollapsed) {
         const parts = splitMarksAtPoint(range.startNode, range.startOffset, removeEmptyMark);
         if (parts.start) {
@@ -4754,7 +4755,7 @@ function addMark(range, value) {
                 range.shrinkAfter(newBlock);
             }
             else {
-                range.adaptBox();
+                range.adjustBox();
             }
         }
         const block = range.startNode.closestBlock();
@@ -4805,7 +4806,7 @@ function addMark(range, value) {
 }
 
 // Removes empty marks that contain no content.
-function removeEmptyMarks(node) {
+function removeEmptyMarks$1(node) {
     if (node.isMark && node.isEmpty) {
         node.remove();
         return;
@@ -4863,13 +4864,13 @@ function removeMark(range, value) {
             return;
         }
         if (parts.end) {
-            removeEmptyMarks(parts.end);
+            removeEmptyMarks$1(parts.end);
         }
         const zeroWidthSpace = new Nodes(document.createTextNode('\u200B'));
         const newMark = copyNestedMarks(parts.start, tagName);
         if (!newMark) {
             parts.start.after(zeroWidthSpace);
-            removeEmptyMarks(parts.start);
+            removeEmptyMarks$1(parts.start);
             if (zeroWidthSpace.prev().isText) {
                 range.setStartAfter(zeroWidthSpace.prev());
                 range.collapseToStart();
@@ -4882,7 +4883,7 @@ function removeMark(range, value) {
         }
         appendDeepest(newMark, zeroWidthSpace);
         parts.start.after(newMark);
-        removeEmptyMarks(parts.start);
+        removeEmptyMarks$1(parts.start);
         range.shrinkAfter(newMark);
         return;
     }
@@ -4950,7 +4951,7 @@ function insertLink(range, value) {
     return linkNode;
 }
 
-var version = "0.1.12";
+var version = "0.1.14";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -5119,7 +5120,10 @@ class Selection {
     // Updates the saved range with the range of the native selection.
     updateByRange() {
         const newRange = this.getRangeFromNativeSelection();
-        if (this.range.get() === newRange.get()) {
+        if (this.range.startNode.get(0) === newRange.startNode.get(0) &&
+            this.range.startOffset === newRange.startOffset &&
+            this.range.endNode.get(0) === newRange.endNode.get(0) &&
+            this.range.endOffset === newRange.endOffset) {
             return;
         }
         this.range = newRange;
@@ -5221,7 +5225,6 @@ class Selection {
 class Command {
     constructor(selection) {
         this.commandMap = new Map();
-        this.event = new EventEmitter();
         this.selection = selection;
     }
     add(name, commandItem) {
@@ -5239,7 +5242,7 @@ class Command {
     getItem(name) {
         const commandItem = this.commandMap.get(name);
         if (commandItem === undefined) {
-            throw new Error(`Command '${name}' does not exist.`);
+            throw new Error(`Command '${name}' does not exist`);
         }
         return commandItem;
     }
@@ -5269,10 +5272,8 @@ class Command {
     }
     execute(name, ...data) {
         const commandItem = this.getItem(name);
-        this.event.emit('beforeexecute', name);
         commandItem.execute.apply(this, data);
-        this.event.emit('execute', name);
-        debug(`Command '${name}' executed`);
+        debug(`Command "${name}" executed`);
     }
 }
 
@@ -5290,11 +5291,11 @@ class Command {
 // inputs 'e': value: 'abe', list: ['a', 'ab', 'abe'], index: 3, canRedo: false
 class History {
     constructor(selection) {
+        this.canSave = true;
         // an array for storing the history items
         this.list = [];
         // the next index of the list
         this.index = 0;
-        this.canSave = true;
         this.limit = 100;
         this.event = new EventEmitter();
         this.selection = selection;
@@ -5346,6 +5347,12 @@ class History {
         this.removeIdfromBoxes(container);
         this.removeIdfromBoxes(otherContainer);
     }
+    get canUndo() {
+        return this.index > 1 && !!this.list[this.index - 1];
+    }
+    get canRedo() {
+        return !!this.list[this.index];
+    }
     cloneContainer() {
         const range = this.selection.range;
         const newContainer = this.container.clone(true);
@@ -5357,6 +5364,12 @@ class History {
             return newContainer;
         }
         if (range.isInsideBox) {
+            const boxNode = range.commonAncestor.closest('lake-box');
+            const boxNodePath = boxNode.path();
+            const newBoxNode = newContainer.find(boxNodePath);
+            const newRange = range.clone();
+            newRange.selectBox(newBoxNode);
+            insertBookmark(newRange);
             return newContainer;
         }
         const startNodePath = range.startNode.path();
@@ -5369,39 +5382,27 @@ class History {
         insertBookmark(newRange);
         return newContainer;
     }
-    get count() {
-        return this.list.length;
-    }
-    get canUndo() {
-        return this.index > 1 && !!this.list[this.index - 1];
-    }
-    get canRedo() {
-        return !!this.list[this.index];
-    }
     undo() {
-        if (!this.list[this.index - 1]) {
+        if (!this.list[this.index - 2]) {
             return;
         }
         this.selection.insertBookmark();
         const value = this.getValue(this.container);
-        while (this.index > 0) {
-            const prevItem = this.list[this.index - 1];
+        while (this.index > 1) {
+            const prevItem = this.list[this.index - 2];
             if (!prevItem) {
                 break;
             }
+            this.index--;
             const prevValue = this.getValue(prevItem);
             if (this.removeBookmark(prevValue) !== this.removeBookmark(value)) {
                 this.morphContainer(prevItem);
                 this.event.emit('undo', prevValue);
                 break;
             }
-            if (this.index === 1) {
-                break;
-            }
-            this.index--;
         }
         this.selection.updateByBookmark();
-        debug(`History undone, the last index is ${this.index}`);
+        debug(`History undone (index: ${this.index})`);
     }
     redo() {
         if (!this.list[this.index]) {
@@ -5423,7 +5424,7 @@ class History {
             }
         }
         this.selection.updateByBookmark();
-        debug(`History redone, the last index is ${this.index}`);
+        debug(`History redone (index: ${this.index})`);
     }
     continue() {
         this.canSave = true;
@@ -5431,7 +5432,11 @@ class History {
     pause() {
         this.canSave = false;
     }
-    save(emitSaveEvent = true) {
+    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;
         if (!this.canSave) {
             return;
         }
@@ -5441,16 +5446,25 @@ class History {
             this.removeBookmark(this.getValue(this.list[this.index - 1])) === this.removeBookmark(value)) {
             return;
         }
-        this.list.splice(this.index, Infinity, item);
-        this.index++;
+        if (update) {
+            this.list.splice(this.index - 1, Infinity, item);
+        }
+        else {
+            this.list.splice(this.index, Infinity, item);
+            this.index++;
+        }
         if (this.list.length > this.limit) {
             this.list.shift();
             this.index = this.list.length;
         }
-        if (emitSaveEvent) {
-            this.event.emit('save', denormalizeValue(value));
+        debug(`History saved (index: ${this.index}, inputType: "${inputType}", update: ${update}, emitEvent: ${emitEvent})`);
+        if (emitEvent) {
+            this.event.emit('save', denormalizeValue(value), {
+                inputType,
+                update,
+                emitEvent,
+            });
         }
-        debug(`History saved, the last index is ${this.index}`);
     }
 }
 
@@ -5529,27 +5543,6 @@ class BoxManager {
     getNames() {
         return Array.from(boxes.keys());
     }
-    rectifyInstances(container) {
-        const instanceMap = getInstanceMap(container.id);
-        for (const box of instanceMap.values()) {
-            if (!box.node.get(0).isConnected) {
-                box.unmount();
-                instanceMap.delete(box.node.id);
-            }
-        }
-    }
-    renderAll(container) {
-        this.rectifyInstances(container);
-        const instanceMap = getInstanceMap(container.id);
-        container.find('lake-box').each(boxNativeNode => {
-            const boxNode = query(boxNativeNode);
-            if (instanceMap.get(boxNode.id)) {
-                return;
-            }
-            const box = getBox(boxNode);
-            box.render();
-        });
-    }
 }
 
 class Plugin {
@@ -5595,6 +5588,7 @@ const defaultConfig = {
 class Editor {
     constructor(config) {
         this.unsavedInputData = '';
+        this.unsavedInputCount = 0;
         this.state = {
             appliedItems: [],
             disabledNameMap: new Map(),
@@ -5625,9 +5619,6 @@ class Editor {
             }
             this.event.emit('paste', event);
         };
-        this.beforeunloadListener = () => {
-            this.history.save();
-        };
         this.selectionchangeListener = () => {
             this.selection.updateByRange();
             this.updateBoxSelectionStyle();
@@ -5643,6 +5634,7 @@ class Editor {
         this.resizeListener = () => {
             this.event.emit('resize');
         };
+        // Updates the classes of all boxes when the current selection of the editor is changed.
         this.updateBoxSelectionStyle = debounce(() => {
             // The editor has been unmounted.
             if (this.root.first().length === 0) {
@@ -5650,7 +5642,7 @@ class Editor {
             }
             const range = this.selection.range;
             const clonedRange = range.clone();
-            clonedRange.adaptBox();
+            clonedRange.adjustBox();
             this.container.find('lake-box').each(boxNativeNode => {
                 const box = getBox(boxNativeNode);
                 const boxContainer = box.getContainer();
@@ -5693,6 +5685,7 @@ class Editor {
             trailing: true,
             maxWait: 50,
         });
+        // Triggers the statechange event when the current selection of the editor is changed.
         this.emitStateChangeEvent = debounce(() => {
             const commandNames = this.command.getNames();
             let appliedItems = this.selection.getAppliedItems();
@@ -5739,13 +5732,6 @@ class Editor {
             trailing: true,
             maxWait: 100,
         });
-        this.emitChangeEvent = (value) => {
-            this.rectifyContent();
-            this.emitStateChangeEvent();
-            this.togglePlaceholderClass(value);
-            this.scrollToCaret();
-            this.event.emit('change', value);
-        };
         if (!config.root) {
             throw new Error('The root of the config must be specified.');
         }
@@ -5775,6 +5761,7 @@ class Editor {
         this.keystroke = new Keystroke(this.container);
         editors.set(this.container.id, this);
     }
+    // Adds or Removes a placeholder class.
     togglePlaceholderClass(value) {
         value = denormalizeValue(value);
         const className = 'lake-show-placeholder';
@@ -5785,7 +5772,8 @@ class Editor {
             this.container.removeClass(className);
         }
     }
-    inputInBoxStrip() {
+    // Moves the input text from box strip to normal position.
+    moveBoxStripText() {
         const selection = this.selection;
         const range = selection.range;
         const stripNode = range.startNode.closest('.lake-box-strip');
@@ -5815,6 +5803,12 @@ class Editor {
         stripNode.html('<br />');
         selection.insertNode(document.createTextNode(text));
     }
+    // Resets the value of unsaved input property.
+    resetUnsavedInputData() {
+        this.unsavedInputData = '';
+        this.unsavedInputCount = 0;
+    }
+    // Binds events about input.
     bindInputEvents() {
         this.container.on('compositionstart', () => {
             this.isComposing = true;
@@ -5822,19 +5816,6 @@ class Editor {
         this.container.on('compositionend', () => {
             this.isComposing = false;
         });
-        this.container.on('beforeinput', event => {
-            const inputEvent = event;
-            const range = this.selection.range;
-            if (range.isBoxStart || range.isBoxEnd) {
-                this.commitUnsavedInputData();
-                return;
-            }
-            if (inputEvent.inputType === 'insertText' ||
-                inputEvent.inputType === 'insertCompositionText') {
-                return;
-            }
-            this.commitUnsavedInputData();
-        });
         this.container.on('input', event => {
             const inputEvent = event;
             // Here setTimeout is necessary because isComposing is not false after ending composition.
@@ -5850,7 +5831,7 @@ class Editor {
                     return;
                 }
                 if (range.isBoxStart || range.isBoxEnd) {
-                    this.inputInBoxStrip();
+                    this.moveBoxStripText();
                     this.history.save();
                     this.event.emit('input', inputEvent);
                     return;
@@ -5858,30 +5839,60 @@ class Editor {
                 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.event.emit('input', inputEvent);
-                        this.emitChangeEvent(this.getValue());
-                        return;
+                        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.command.event.on('beforeexecute', () => this.commitUnsavedInputData());
     }
+    // Binds events about history.
     bindHistoryEvents() {
+        const executeCommonMethods = (value) => {
+            if (this.fixContent()) {
+                this.history.save({
+                    update: true,
+                    emitEvent: false,
+                });
+                value = this.getValue();
+            }
+            this.emitStateChangeEvent();
+            this.togglePlaceholderClass(value);
+            this.scrollToCaret();
+            this.event.emit('change', value);
+        };
         this.history.event.on('undo', value => {
-            this.box.renderAll(this.container);
-            this.emitChangeEvent(value);
+            this.renderBoxes();
+            executeCommonMethods(value);
+            this.resetUnsavedInputData();
         });
         this.history.event.on('redo', value => {
-            this.box.renderAll(this.container);
-            this.emitChangeEvent(value);
+            this.renderBoxes();
+            executeCommonMethods(value);
+            this.resetUnsavedInputData();
         });
-        this.history.event.on('save', value => {
-            this.box.rectifyInstances(this.container);
-            this.emitChangeEvent(value);
+        this.history.event.on('save', (value, options) => {
+            this.removeBoxGarbage();
+            executeCommonMethods(value);
+            this.selection.sync();
+            if (options.inputType !== 'insertText') {
+                this.resetUnsavedInputData();
+            }
         });
     }
     // Returns a boolean value indicating whether the editor has focus.
@@ -5897,65 +5908,76 @@ class Editor {
         return i18nObject(this.config.lang);
     }
     // Fixes wrong content, especially empty tag.
-    rectifyContent() {
+    fixContent() {
+        let changed = false;
         let children = this.container.children();
         for (const child of children) {
             if ((child.isBlock || child.isMark) && child.html() === '') {
                 child.remove();
-                debug('Rectifying content: empty tag was removed');
+                changed = true;
+                debug(`Content fixed: empty tag "${child.name}" was removed`);
             }
         }
         children = this.container.children();
         if (children.length === 0) {
             this.container.html('<p><br /></p>');
             this.selection.range.shrinkAfter(this.container);
-            debug('Rectifying content: default paragraph was added');
-            return;
+            changed = true;
+            debug('Content fixed: default paragraph was added');
         }
-        if (children.length === 1) {
+        else if (children.length === 1) {
             const child = children[0];
             if (child.isVoid) {
                 const paragraph = query('<p />');
                 child.before(paragraph);
                 paragraph.append(child);
                 this.selection.range.shrinkAfter(paragraph);
-                debug('Rectifying content: void element was wrapped in paragraph');
+                changed = true;
+                debug(`Content fixed: void element "${child.name}" was wrapped in paragraph`);
             }
         }
-    }
-    // Saves the input data which is unsaved.
-    commitUnsavedInputData() {
-        if (this.unsavedInputData.length > 0) {
-            this.history.save(false);
-            this.unsavedInputData = '';
-        }
-    }
-    // Updates some state before custom modifications.
-    prepareOperation() {
-        this.commitUnsavedInputData();
-        this.history.pause();
-    }
-    // Saves custom modifications to the history.
-    commitOperation() {
-        this.history.continue();
-        this.history.save();
+        return changed;
     }
     // Sets default config for a plugin.
-    setPluginConfig(pluginName, pluginConfig) {
-        if (!this.config[pluginName]) {
-            this.config[pluginName] = {};
+    setPluginConfig(name, config) {
+        if (!this.config[name]) {
+            this.config[name] = {};
+        }
+        for (const key of Object.keys(config)) {
+            if (this.config[name][key] === undefined) {
+                this.config[name][key] = config[key];
+            }
         }
-        for (const key of Object.keys(pluginConfig)) {
-            if (this.config[pluginName][key] === undefined) {
-                this.config[pluginName][key] = pluginConfig[key];
+    }
+    // Removes all unused box instances.
+    removeBoxGarbage() {
+        const instanceMap = getInstanceMap(this.container.id);
+        for (const box of instanceMap.values()) {
+            if (!box.node.get(0).isConnected) {
+                box.unmount();
+                instanceMap.delete(box.node.id);
             }
         }
     }
-    // Sets focus on the editor area.
+    // Renders all boxes that haven't been rendered yet.
+    renderBoxes() {
+        this.removeBoxGarbage();
+        const container = this.container;
+        const instanceMap = getInstanceMap(container.id);
+        container.find('lake-box').each(boxNativeNode => {
+            const boxNode = query(boxNativeNode);
+            if (instanceMap.get(boxNode.id)) {
+                return;
+            }
+            const box = getBox(boxNode);
+            box.render();
+        });
+    }
+    // Sets focus on the editor.
     focus() {
         this.container.focus();
     }
-    // Removes focus from the editor area.
+    // Removes focus from the editor.
     blur() {
         this.container.blur();
     }
@@ -5963,6 +5985,9 @@ class Editor {
     scrollToCaret() {
         // Creates an artificial caret that is the same size as the caret at the current caret position.
         const rangeRect = this.selection.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 left = rangeRect.x - containerRect.x;
@@ -5978,48 +6003,20 @@ class Editor {
         });
         this.overlayContainer.find('.lake-artificial-caret').remove();
         this.overlayContainer.append(artificialCaret);
+        const position = nodeAndView(artificialCaret);
         // Scrolls the artificial caret element into the visible area of the browser window
         // if it's not already within the visible area of the browser window.
-        // If the element is already within the visible area of the browser window, then no scrolling takes place.
-        let scrollX;
-        let scrollY;
-        let viewportWidth;
-        let viewportHeight;
-        const viewport = this.container.closestScroller();
-        if (viewport.length > 0) {
-            const nativeViewport = viewport.get(0);
-            const viewportRect = nativeViewport.getBoundingClientRect();
-            scrollX = nativeViewport.scrollLeft;
-            scrollY = nativeViewport.scrollTop;
-            viewportWidth = viewportRect.width;
-            viewportHeight = viewportRect.height;
-        }
-        else {
-            const nativeContainerWrapper = this.containerWrapper.get(0);
-            scrollX = window.scrollX;
-            scrollY = window.scrollY;
-            viewportWidth = window.innerWidth - nativeContainerWrapper.offsetLeft;
-            viewportHeight = window.innerHeight - nativeContainerWrapper.offsetTop;
-        }
-        let needScroll = false;
-        let alignToTop = true;
-        if (left < scrollX || left > scrollX + viewportWidth) {
-            needScroll = true;
-        }
-        if (top < scrollY) {
-            needScroll = true;
-            alignToTop = true;
-        }
-        else if (top > scrollY + viewportHeight) {
-            needScroll = true;
-            alignToTop = false;
-        }
-        if (needScroll) {
-            artificialCaret.get(0).scrollIntoView(alignToTop);
+        // If the element is already within the visibposition.rightle area of the browser window, then no scrolling takes place.
+        if (position.left < 0 || position.right < 0 || position.top < 0 || position.bottom < 0) {
+            artificialCaret.get(0).scrollIntoView({
+                behavior: 'instant',
+                block: 'center',
+                inline: 'nearest',
+            });
         }
         artificialCaret.remove();
     }
-    // Sets the specified HTML string to the editor area.
+    // Sets the specified value to the editor.
     setValue(value) {
         value = normalizeValue(value);
         const htmlParser = new HTMLParser(value);
@@ -6027,18 +6024,17 @@ class Editor {
         this.container.empty();
         this.togglePlaceholderClass(htmlParser.getHTML());
         this.container.append(fragment);
-        Editor.box.renderAll(this.container);
+        this.renderBoxes();
         this.selection.updateByBookmark();
     }
-    // Returns the contents from the editor.
+    // Returns the value of the editor.
     getValue() {
-        const bookmark = this.selection.insertBookmark();
-        let value = new HTMLParser(this.container).getHTML();
+        const item = this.history.cloneContainer();
+        let value = new HTMLParser(item).getHTML();
         value = denormalizeValue(value);
-        this.selection.toBookmark(bookmark);
         return value;
     }
-    // Renders an editor area and set default value to it.
+    // Renders an editor area and sets default value to it.
     render() {
         const value = normalizeValue(this.config.value);
         const htmlParser = new HTMLParser(value);
@@ -6053,9 +6049,11 @@ class Editor {
         Editor.plugin.loadAll(this);
         if (!this.readonly) {
             this.selection.updateByBookmark();
-            this.history.save();
+            this.history.save({
+                emitEvent: false,
+            });
         }
-        Editor.box.renderAll(this.container);
+        this.renderBoxes();
         if (this.toolbar) {
             this.toolbar.render(this);
         }
@@ -6063,7 +6061,6 @@ class Editor {
         if (!this.readonly) {
             document.addEventListener('cut', this.cutListener);
             document.addEventListener('paste', this.pasteListener);
-            window.addEventListener('beforeunload', this.beforeunloadListener);
             document.addEventListener('selectionchange', this.selectionchangeListener);
             document.addEventListener('click', this.clickListener);
             window.addEventListener('resize', this.resizeListener);
@@ -6071,10 +6068,9 @@ class Editor {
             this.bindHistoryEvents();
         }
     }
-    // Destroys a rendered editor.
+    // Destroys the rendered editor.
     unmount() {
         this.event.removeAllListeners();
-        this.command.event.removeAllListeners();
         this.history.event.removeAllListeners();
         this.root.empty();
         this.popupContainer.remove();
@@ -6082,7 +6078,6 @@ class Editor {
         if (!this.readonly) {
             document.removeEventListener('cut', this.cutListener);
             document.removeEventListener('paste', this.pasteListener);
-            window.removeEventListener('beforeunload', this.beforeunloadListener);
             document.removeEventListener('selectionchange', this.selectionchangeListener);
             document.removeEventListener('click', this.clickListener);
             window.removeEventListener('resize', this.resizeListener);
@@ -7131,7 +7126,6 @@ function appendButtonGroup(box) {
         event.stopPropagation();
         editor.selection.removeBox(box);
         editor.history.save();
-        editor.selection.sync();
     });
     videoNode.append(buttonGroupNode);
 }
@@ -7853,7 +7847,6 @@ const imageBox = {
                     }
                     editor.selection.removeBox(box);
                     editor.history.save();
-                    editor.selection.sync();
                 });
             }
             box.event.emit('render');
@@ -7890,7 +7883,6 @@ const boxToolbarItems = [
             }
             editor.selection.removeBox(box);
             editor.history.save();
-            editor.selection.sync();
         },
     },
 ];
@@ -7970,7 +7962,11 @@ var copy = (editor) => {
         if (range.isInsideBox) {
             return;
         }
-        const boxNode = range.startNode.closest('lake-box');
+        if (!range.isCollapsed) {
+            range.adjust();
+            return;
+        }
+        const boxNode = range.commonAncestor.closest('lake-box');
         if (boxNode.length === 0) {
             return;
         }
@@ -7992,12 +7988,26 @@ var cut = (editor) => {
     if (editor.readonly) {
         return;
     }
-    editor.event.on('cut', event => {
+    editor.event.on('cut', (event) => {
+        const dataTransfer = event.clipboardData;
+        if (!dataTransfer) {
+            return;
+        }
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
         }
-        const boxNode = range.startNode.closest('lake-box');
+        if (!range.isCollapsed) {
+            event.preventDefault();
+            const fragment = editor.selection.range.cloneContents();
+            const tempContainer = query('<div />');
+            tempContainer.append(fragment);
+            dataTransfer.setData('text/html', tempContainer.html());
+            editor.selection.deleteContents();
+            editor.history.save();
+            return;
+        }
+        const boxNode = range.commonAncestor.closest('lake-box');
         if (boxNode.length === 0) {
             return;
         }
@@ -8005,10 +8015,6 @@ var cut = (editor) => {
             return;
         }
         event.preventDefault();
-        const dataTransfer = event.clipboardData;
-        if (!dataTransfer) {
-            return;
-        }
         const box = getBox(boxNode);
         const content = box.getHTML();
         dataTransfer.setData('text/html', content);
@@ -8130,6 +8136,14 @@ function insertFirstNode(editor, otherNode) {
         }
         const nextSibling = child.next();
         editor.selection.insertNode(child);
+        if (child.isBox) {
+            getBox(child).render();
+        }
+        else if (child.isElement) {
+            child.find('lake-box').each(node => {
+                getBox(node).render();
+            });
+        }
         child = nextSibling;
     }
     otherNode.remove();
@@ -8167,6 +8181,7 @@ function pasteFragment(editor, fragment) {
             parts.end.remove();
         }
         selection.insertFragment(fragment);
+        editor.renderBoxes();
         range.shrinkAfter(lastNode);
     }
     fixNumberedList(editor.container.children().filter(node => node.isBlock));
@@ -8219,7 +8234,6 @@ var paste = (editor) => {
         editor.event.emit('beforepaste', fragment);
         fixClipboardData(fragment);
         pasteFragment(editor, fragment);
-        editor.box.renderAll(editor.container);
     });
 };
 
@@ -8560,7 +8574,6 @@ var list = (editor) => {
                 }
             }
             editor.history.save();
-            editor.selection.sync();
         },
     });
     editor.container.on('click', event => {
@@ -9172,14 +9185,12 @@ var link = (editor) => {
             const range = editor.selection.range;
             range.setStartAfter(node);
             range.collapseToStart();
-            editor.selection.sync();
             editor.history.save();
         },
         onRemove: node => {
             const range = editor.selection.range;
             range.setStartAfter(node);
             range.collapseToStart();
-            editor.selection.sync();
             editor.history.save();
         },
     });
@@ -9560,7 +9571,7 @@ function executeMarkCommand(editor, point) {
             // <p>foobold\u200B<focus /></p>,
             // to
             // <p>foo[bold]\u200B<focus /></p>, startOffset = 3, endOffset = 7
-            editor.prepareOperation();
+            editor.history.pause();
             const bookmark = selection.insertBookmark();
             const node = bookmark.focus.prev();
             const oldValue = node.text();
@@ -9570,7 +9581,8 @@ function executeMarkCommand(editor, point) {
             range.setEnd(node, offset - (oldValue.length - newValue.length) - 1);
             editor.command.execute(commandName, ...parameters);
             selection.toBookmark(bookmark);
-            editor.commitOperation();
+            editor.history.continue();
+            editor.history.save();
             return true;
         }
     }
@@ -9592,16 +9604,14 @@ function spaceKeyExecutesBlockCommand(editor, point) {
             // <p>#<focus />foo</p>
             // to
             // <h1><focus />foo</h1>
-            editor.prepareOperation();
             const bookmark = selection.insertBookmark();
             const node = bookmark.focus.prev();
             node.remove();
             const block = bookmark.focus.closestBlock();
             fixEmptyBlock(block);
             selection.range.shrinkAfter(block);
-            editor.command.execute(commandName, ...parameters);
             selection.toBookmark(bookmark);
-            editor.commitOperation();
+            editor.command.execute(commandName, ...parameters);
             return true;
         }
     }
@@ -9622,12 +9632,10 @@ function enterKeyExecutesBlockCommand(editor, block) {
             // <p>---<focus /></p>
             // to
             // <lake-box type="block" name="hr" focus="end"></lake-box>
-            editor.prepareOperation();
             block.empty();
             fixEmptyBlock(block);
             selection.range.shrinkAfter(block);
             editor.command.execute(commandName, ...parameters);
-            editor.commitOperation();
             return true;
         }
     }
@@ -9748,13 +9756,13 @@ var enterKey = (editor) => {
             return;
         }
         event.preventDefault();
-        editor.rectifyContent();
+        editor.fixContent();
         if (range.isBox) {
             addBlockOrSplitBlockForBox(editor);
             editor.history.save();
             return;
         }
-        range.adapt();
+        range.adjust();
         if (range.isInoperative) {
             return;
         }
@@ -9833,14 +9841,14 @@ var shiftEnterKey = (editor) => {
         if (range.isInsideBox) {
             return;
         }
-        editor.rectifyContent();
+        editor.fixContent();
         event.preventDefault();
         if (range.isBox) {
             addBlockOrLineBreakForBox(editor);
             editor.history.save();
             return;
         }
-        range.adapt();
+        range.adjust();
         if (range.isInoperative) {
             return;
         }
@@ -9854,6 +9862,14 @@ var shiftEnterKey = (editor) => {
     });
 };
 
+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);
+    }
+}
 function mergeWithPreviousBlock(editor, block) {
     const range = editor.selection.range;
     let prevBlock = block.prev();
@@ -9884,6 +9900,7 @@ function mergeWithPreviousBlock(editor, block) {
         prevBlock.remove();
         return;
     }
+    removeEmptyMarks(range);
     const bookmark = editor.selection.insertBookmark();
     mergeNodes(prevBlock, block);
     editor.selection.toBookmark(bookmark);
@@ -9896,9 +9913,17 @@ var backspaceKey = (editor) => {
     editor.keystroke.setKeydown('backspace', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
+            const boxNode = range.commonAncestor.closest('lake-box');
+            const box = getBox(boxNode);
+            const boxValue = box.value;
+            if (box.name === 'codeBlock' && (boxValue.code === undefined || boxValue.code === '')) {
+                event.preventDefault();
+                editor.selection.removeBox(box);
+                editor.history.save();
+            }
             return;
         }
-        editor.rectifyContent();
+        editor.fixContent();
         if (range.isBoxStart) {
             const boxNode = range.startNode.closest('lake-box');
             const prevNode = boxNode.prev();
@@ -9929,7 +9954,7 @@ var backspaceKey = (editor) => {
                 editor.history.save();
                 return;
             }
-            range.adaptBox();
+            range.adjustBox();
         }
         if (range.isBox) {
             event.preventDefault();
@@ -9946,7 +9971,7 @@ var backspaceKey = (editor) => {
             editor.history.save();
             return;
         }
-        range.adapt();
+        range.adjust();
         const prevNode = range.getPrevNode();
         if (prevNode.isBox) {
             event.preventDefault();
@@ -9954,7 +9979,7 @@ var backspaceKey = (editor) => {
             editor.history.save();
             return;
         }
-        if (prevNode.isText && prevNode.text().length === 1) {
+        if (prevNode.isText && prevNode.text().length === 1 && prevNode.parent().isBlock) {
             event.preventDefault();
             const block = prevNode.closestBlock();
             range.setStartBefore(prevNode);
@@ -10036,7 +10061,7 @@ var deleteKey = (editor) => {
         if (range.isInsideBox) {
             return;
         }
-        editor.rectifyContent();
+        editor.fixContent();
         if (range.isBoxEnd) {
             const boxNode = range.startNode.closest('lake-box');
             const nextNode = boxNode.next();
@@ -10061,7 +10086,7 @@ var deleteKey = (editor) => {
                 range.shrinkBefore(nextNode);
                 return;
             }
-            range.adaptBox();
+            range.adjustBox();
         }
         if (range.isBox) {
             event.preventDefault();
@@ -10078,7 +10103,7 @@ var deleteKey = (editor) => {
             editor.history.save();
             return;
         }
-        range.adapt();
+        range.adjust();
         const nextNode = range.getNextNode();
         if (nextNode.isBox) {
             event.preventDefault();