lakelib 0.1.12 → 0.1.13

package/lib/lake.css

@@ -762,6 +762,7 @@ lake-box .lake-box-strip ::selection {
 }
 lake-box .lake-box-container {
   display: block;
+  align-self: center;
 }
 lake-box .lake-box-hovered .lake-button-group,
 lake-box .lake-box-focused .lake-button-group,
@@ -833,6 +834,8 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
 
 .lake-video {
   position: relative;
+  font-size: 14px;
+  font-weight: normal;
   line-height: 0;
   box-sizing: content-box;
   border: 1px solid transparent;
@@ -1052,6 +1055,8 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
 
 .lake-file {
   position: relative;
+  font-size: 16px;
+  font-weight: normal;
   line-height: 0;
   box-sizing: content-box;
   border: 1px solid transparent;

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);
@@ -2717,21 +2717,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,
@@ -3670,7 +3667,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 +3676,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() {
@@ -4375,8 +4372,8 @@ function deleteContents(range) {
     if (range.isCollapsed) {
         return;
     }
-    range.adaptBox();
-    range.adaptTable();
+    range.adjustBox();
+    range.adjustTable();
     if (range.isInoperative) {
         return;
     }
@@ -4385,7 +4382,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 +4411,7 @@ function insertFragment(range, fragment) {
         return;
     }
     if (range.isCollapsed) {
-        range.adaptBox();
+        range.adjustBox();
     }
     else {
         deleteContents(range);
@@ -4424,7 +4421,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 +4540,7 @@ function splitBlock$1(range) {
         };
     }
     if (range.isCollapsed) {
-        range.adaptBox();
+        range.adjustBox();
     }
     else {
         deleteContents(range);
@@ -4649,7 +4646,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 +4751,7 @@ function addMark(range, value) {
                 range.shrinkAfter(newBlock);
             }
             else {
-                range.adaptBox();
+                range.adjustBox();
             }
         }
         const block = range.startNode.closestBlock();
@@ -4950,7 +4947,7 @@ function insertLink(range, value) {
     return linkNode;
 }
 
-var version = "0.1.12";
+var version = "0.1.13";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -5239,7 +5236,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;
     }
@@ -5389,19 +5386,19 @@ class History {
             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--;
+        }
+        if (this.index < 1) {
+            this.index = 1;
         }
         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 +5420,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;
@@ -5450,7 +5447,7 @@ class History {
         if (emitSaveEvent) {
             this.event.emit('save', denormalizeValue(value));
         }
-        debug(`History saved, the last index is ${this.index}`);
+        debug(`History saved (index: ${this.index})`);
     }
 }
 
@@ -5529,27 +5526,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 {
@@ -5650,7 +5626,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();
@@ -5740,7 +5716,7 @@ class Editor {
             maxWait: 100,
         });
         this.emitChangeEvent = (value) => {
-            this.rectifyContent();
+            this.fixContent();
             this.emitStateChangeEvent();
             this.togglePlaceholderClass(value);
             this.scrollToCaret();
@@ -5872,15 +5848,15 @@ class Editor {
     }
     bindHistoryEvents() {
         this.history.event.on('undo', value => {
-            this.box.renderAll(this.container);
+            this.renderBoxes();
             this.emitChangeEvent(value);
         });
         this.history.event.on('redo', value => {
-            this.box.renderAll(this.container);
+            this.renderBoxes();
             this.emitChangeEvent(value);
         });
         this.history.event.on('save', value => {
-            this.box.rectifyInstances(this.container);
+            this.removeBoxGarbage();
             this.emitChangeEvent(value);
         });
     }
@@ -5897,19 +5873,19 @@ class Editor {
         return i18nObject(this.config.lang);
     }
     // Fixes wrong content, especially empty tag.
-    rectifyContent() {
+    fixContent() {
         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');
+                debug('fixContent(): empty tag 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');
+            debug('fixContent(): default paragraph was added');
             return;
         }
         if (children.length === 1) {
@@ -5919,7 +5895,7 @@ class Editor {
                 child.before(paragraph);
                 paragraph.append(child);
                 this.selection.range.shrinkAfter(paragraph);
-                debug('Rectifying content: void element was wrapped in paragraph');
+                debug('fixContent(): void element was wrapped in paragraph');
             }
         }
     }
@@ -5941,16 +5917,40 @@ class Editor {
         this.history.save();
     }
     // 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(pluginConfig)) {
-            if (this.config[pluginName][key] === undefined) {
-                this.config[pluginName][key] = pluginConfig[key];
+        for (const key of Object.keys(config)) {
+            if (this.config[name][key] === undefined) {
+                this.config[name][key] = config[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);
+            }
+        }
+    }
+    // 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 area.
     focus() {
         this.container.focus();
@@ -5978,44 +5978,16 @@ 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();
     }
@@ -6027,7 +5999,7 @@ 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.
@@ -6055,7 +6027,7 @@ class Editor {
             this.selection.updateByBookmark();
             this.history.save();
         }
-        Editor.box.renderAll(this.container);
+        this.renderBoxes();
         if (this.toolbar) {
             this.toolbar.render(this);
         }
@@ -7970,7 +7942,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 +7968,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 +7995,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 +8116,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 +8161,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 +8214,6 @@ var paste = (editor) => {
         editor.event.emit('beforepaste', fragment);
         fixClipboardData(fragment);
         pasteFragment(editor, fragment);
-        editor.box.renderAll(editor.container);
     });
 };
 
@@ -9748,13 +9742,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 +9827,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;
         }
@@ -9898,7 +9892,7 @@ var backspaceKey = (editor) => {
         if (range.isInsideBox) {
             return;
         }
-        editor.rectifyContent();
+        editor.fixContent();
         if (range.isBoxStart) {
             const boxNode = range.startNode.closest('lake-box');
             const prevNode = boxNode.prev();
@@ -9929,7 +9923,7 @@ var backspaceKey = (editor) => {
                 editor.history.save();
                 return;
             }
-            range.adaptBox();
+            range.adjustBox();
         }
         if (range.isBox) {
             event.preventDefault();
@@ -9946,7 +9940,7 @@ var backspaceKey = (editor) => {
             editor.history.save();
             return;
         }
-        range.adapt();
+        range.adjust();
         const prevNode = range.getPrevNode();
         if (prevNode.isBox) {
             event.preventDefault();
@@ -10036,7 +10030,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 +10055,7 @@ var deleteKey = (editor) => {
                 range.shrinkBefore(nextNode);
                 return;
             }
-            range.adaptBox();
+            range.adjustBox();
         }
         if (range.isBox) {
             event.preventDefault();
@@ -10078,7 +10072,7 @@ var deleteKey = (editor) => {
             editor.history.save();
             return;
         }
-        range.adapt();
+        range.adjust();
         const nextNode = range.getNextNode();
         if (nextNode.isBox) {
             event.preventDefault();