lakelib 0.1.6 → 0.1.8

package/lib/lake.css

@@ -32,9 +32,11 @@
   --input-outline: 2px solid #69b1ff;
 }
 
+.lake-container-wrapper {
+  position: relative;
+}
 .lake-container {
   box-sizing: content-box;
-  position: relative;
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
@@ -73,6 +75,23 @@
   color: var(--link-hover-color);
   text-decoration: underline;
 }
+.lake-drop-indication {
+  position: absolute;
+  height: 2px;
+  background-color: #1677ff;
+  z-index: 1;
+  pointer-events: none;
+  display: none;
+}
+.lake-drop-indication svg {
+  position: absolute;
+  top: -7.5px;
+  left: -10px;
+  width: 16px;
+  height: 16px;
+  fill: #1677ff;
+  pointer-events: none;
+}
 
 .lake-container strong {
   font-weight: 600;
@@ -249,6 +268,10 @@ button.lake-text-button span {
   box-shadow: var(--popup-shadow);
   display: none;
 }
+.lake-dropdown[placement="top"] .lake-dropdown-menu {
+  top: auto;
+  bottom: 30px;
+}
 .lake-dropdown .lake-dropdown-menu li {
   display: flex;
   align-items: center;
@@ -858,7 +881,7 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
 
 /* code block */
 lake-box[name="codeBlock"] {
-  margin: 16px 0;
+  margin-bottom: 16px;
 }
 lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
 lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {

package/lib/lake.js

@@ -446,7 +446,7 @@ function debug(...data) {
     }
 }
 
-// Is a key-value object for storing all events.
+// A key-value object for storing all events.
 // value is an array which include types and listeners.
 const eventData = {};
 let lastNodeId = 0;
@@ -733,6 +733,17 @@ class Nodes {
     closestContainer() {
         return this.closest('div[contenteditable="true"]');
     }
+    // Traverses the first node and its parents until it finds an element which can scroll.
+    closestScroller() {
+        let parent = this.eq(0);
+        while (parent.length > 0 && parent.isElement) {
+            if (['scroll', 'auto'].indexOf(parent.computedCSS('overflow-y')) >= 0) {
+                return parent;
+            }
+            parent = parent.parent();
+        }
+        return new Nodes();
+    }
     // Returns the parent of the first node.
     parent() {
         const node = this.get(0);
@@ -971,8 +982,8 @@ class Nodes {
     }
     // Returns the interior width of the first element, which does not include padding.
     innerWidth() {
-        const paddingLeft = parseInt(this.computedCSS('padding-left'), 10) || 0;
-        const paddingRight = parseInt(this.computedCSS('padding-right'), 10) || 0;
+        const paddingLeft = Number.parseInt(this.computedCSS('padding-left'), 10) || 0;
+        const paddingRight = Number.parseInt(this.computedCSS('padding-right'), 10) || 0;
         return this.width() - paddingLeft - paddingRight;
     }
     // Returns the height of of the first element.
@@ -1299,6 +1310,59 @@ class Range {
     get() {
         return this.range;
     }
+    // Returns the size and position of the range.
+    getRect() {
+        const range = this.clone();
+        let rect;
+        let x;
+        let width;
+        if (range.isCollapsed) {
+            let reference = 'left';
+            if (range.startNode.isElement) {
+                const children = range.startNode.children();
+                if (children.length === 0) {
+                    range.selectNode(range.startNode);
+                }
+                else if (range.startOffset < children.length) {
+                    range.setEnd(range.startNode, range.startOffset + 1);
+                }
+                else {
+                    range.setStart(range.startNode, range.startOffset - 1);
+                    reference = 'right';
+                }
+            }
+            else {
+                const text = range.startNode.text();
+                if (range.startOffset < text.length) {
+                    range.setEnd(range.startNode, range.startOffset + 1);
+                }
+                else {
+                    range.setStart(range.startNode, range.startOffset - 1);
+                    reference = 'right';
+                }
+            }
+            rect = range.get().getBoundingClientRect();
+            if (reference === 'left') {
+                x = rect.x;
+            }
+            else {
+                x = rect.right;
+            }
+            width = 1;
+        }
+        else {
+            rect = range.get().getBoundingClientRect();
+            x = rect.x;
+            width = rect.width;
+        }
+        const height = rect.height;
+        return DOMRect.fromRect({
+            x,
+            y: rect.y,
+            width: width > 0 ? width : 1,
+            height: height > 0 ? height : 1,
+        });
+    }
     // Returns −1 if the point is before the range, 0 if the point is in the range, and 1 if the point is after the range.
     comparePoint(node, offset) {
         return this.range.comparePoint(node.get(0), offset);
@@ -2797,13 +2861,13 @@ const boxes = new Map();
 
 const editors = new Map();
 
-// Is a key-value object for storing data about box.
+// A key-value object for storing data about box.
 const boxData = {};
-// Is a key-value object for storing all effects.
+// A key-value object for storing all effects.
 const effectData = {};
 const framework = safeTemplate `
   <span class="lake-box-strip"><br /></span>
-  <div class="lake-box-container" contenteditable="false"></div>
+  <div class="lake-box-container" contenteditable="false" draggable="true"></div>
   <span class="lake-box-strip"><br /></span>
 `;
 class Box {
@@ -2853,10 +2917,6 @@ class Box {
             container.off('mouseleave');
             container.off('click');
         }
-        // fix: should not activate box when clicking box
-        container.on('mousedown', event => {
-            event.preventDefault();
-        });
         container.on('mouseenter', () => {
             if (container.hasClass('lake-box-selected') ||
                 container.hasClass('lake-box-focused') ||
@@ -4380,8 +4440,9 @@ class Dropdown {
         this.config = config;
         this.root = config.root;
         this.locale = config.locale || i18nObject('en-US');
+        const placement = config.placement || 'bottom';
         this.node = query(safeTemplate `
-      <div class="lake-dropdown lake-${config.menuType}-dropdown" name="${config.name}">
+      <div class="lake-dropdown lake-${config.menuType}-dropdown" name="${config.name}" placement="${placement}">
         <button type="button" name="${config.name}" class="lake-dropdown-title">
           <div class="lake-dropdown-${config.icon ? 'icon' : 'text'}"></div>
           <div class="lake-dropdown-down-icon"></div>
@@ -4481,7 +4542,11 @@ class Dropdown {
         menuNode.show(config.menuType === 'color' ? 'flex' : 'block');
         const dropdownNativeNode = dropdownNode.get(0);
         const dropdownRect = dropdownNativeNode.getBoundingClientRect();
-        if (dropdownRect.x + menuNode.width() + 50 > window.innerWidth) {
+        // A overflow width on the left side, greater than 0 indicates an overflow.
+        const leftOverflow = menuNode.width() - (dropdownRect.x + dropdownRect.width);
+        // A overflow width on the right side, greater than 0 indicates an overflow.
+        const rightOverflow = dropdownRect.x + menuNode.width() - window.innerWidth;
+        if (rightOverflow + 50 > 0 && (leftOverflow < 0 || leftOverflow < rightOverflow)) {
             menuNode.css('left', 'auto');
             menuNode.css('right', '0');
         }
@@ -4608,7 +4673,7 @@ class Dropdown {
     }
 }
 
-var version = "0.1.6";
+var version = "0.1.8";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -5226,6 +5291,27 @@ class Editor {
         this.isComposing = false;
         this.event = new EventEmitter();
         this.box = Editor.box;
+        this.copyListener = event => {
+            const range = this.selection.range;
+            if (range.commonAncestor.closestContainer().get(0) !== this.container.get(0)) {
+                return;
+            }
+            this.event.emit('copy', event);
+        };
+        this.cutListener = event => {
+            const range = this.selection.range;
+            if (range.commonAncestor.closestContainer().get(0) !== this.container.get(0)) {
+                return;
+            }
+            this.event.emit('cut', event);
+        };
+        this.pasteListener = event => {
+            const range = this.selection.range;
+            if (range.commonAncestor.closestContainer().get(0) !== this.container.get(0)) {
+                return;
+            }
+            this.event.emit('paste', event);
+        };
         this.beforeunloadListener = () => {
             this.history.save();
         };
@@ -5340,6 +5426,7 @@ class Editor {
             this.rectifyContent();
             this.emitStateChangeEvent();
             this.togglePlaceholderClass(value);
+            this.scrollToCaret();
             this.event.emit('change', value);
         };
         if (!config.root) {
@@ -5555,6 +5642,66 @@ class Editor {
     blur() {
         this.container.blur();
     }
+    // Scrolls to the caret or the range of the selection.
+    scrollToCaret() {
+        // Creates an artificial caret that is the same size as the caret at the current caret position.
+        const rangeRect = this.selection.range.getRect();
+        const containerRect = this.container.get(0).getBoundingClientRect();
+        const artificialCaret = query('<div class="lake-artificial-caret" />');
+        const left = rangeRect.x - containerRect.x;
+        const top = rangeRect.y - containerRect.y;
+        artificialCaret.css({
+            position: 'absolute',
+            top: `${top}px`,
+            left: `${left}px`,
+            width: `${rangeRect.width}px`,
+            height: `${rangeRect.height}px`,
+            // background: 'red',
+            'z-index': '-1',
+        });
+        this.overlayContainer.find('.lake-artificial-caret').remove();
+        this.overlayContainer.append(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);
+        }
+        artificialCaret.remove();
+    }
     // Sets the specified HTML string to the editor area.
     setValue(value) {
         value = normalizeValue(value);
@@ -5614,7 +5761,10 @@ class Editor {
         if (this.toolbar) {
             this.toolbar.render(this);
         }
+        document.addEventListener('copy', this.copyListener);
         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);
@@ -5630,7 +5780,10 @@ class Editor {
         this.history.event.removeAllListeners();
         this.root.empty();
         this.popupContainer.remove();
+        document.removeEventListener('copy', this.copyListener);
         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);
@@ -6345,11 +6498,15 @@ toolbarItems.forEach(item => {
 });
 class Toolbar {
     constructor(config) {
+        this.placement = 'top';
         this.allMenuMap = new Map();
         this.buttonItemList = [];
         this.dropdownItemList = [];
-        this.items = config.items || defaultItems;
         this.root = query(config.root);
+        this.items = config.items || defaultItems;
+        if (config.placement) {
+            this.placement = config.placement;
+        }
         this.container = query('<div class="lake-toolbar" />');
         this.root.addClass('lake-custom-properties');
     }
@@ -6384,6 +6541,7 @@ class Toolbar {
             menuType: item.menuType,
             menuItems: item.menuItems,
             tabIndex: -1,
+            placement: this.placement === 'top' ? 'bottom' : 'top',
             onSelect: value => {
                 editor.focus();
                 item.onSelect(editor, value);
@@ -6754,11 +6912,18 @@ 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.addRangeToNativeSelection();
+            }
             box.event.emit('closefullscreen');
         }, 0);
     });
@@ -6970,7 +7135,7 @@ const imageBox = {
             }
         }
         if (container.first().length === 0) {
-            // The code below is for unit testing because some test cases need to
+            // The following code is for unit testing because some test cases need to
             // select the content of the box before it is completely loaded.
             // Example:
             // range.setStart(box.getContainer(), 1);
@@ -7209,10 +7374,7 @@ const codeBlockBox = {
 };
 
 var copy = (editor) => {
-    if (editor.readonly) {
-        return;
-    }
-    editor.container.on('copy', event => {
+    editor.event.on('copy', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -7239,7 +7401,7 @@ var cut = (editor) => {
     if (editor.readonly) {
         return;
     }
-    editor.container.on('cut', event => {
+    editor.event.on('cut', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -7423,7 +7585,7 @@ var paste = (editor) => {
     if (editor.readonly) {
         return;
     }
-    editor.container.on('paste', event => {
+    editor.event.on('paste', event => {
         const { requestTypes } = editor.config.image;
         const range = editor.selection.range;
         if (range.isInsideBox) {
@@ -7468,6 +7630,154 @@ var paste = (editor) => {
     });
 };
 
+var drop = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
+    let draggedNode = null;
+    let dropIndication = null;
+    let targetBlock = null;
+    let dropPosition = 'bottom';
+    // The dragstart event is fired when the user starts dragging an element or text selection.
+    editor.container.on('dragstart', event => {
+        draggedNode = null;
+        const dragEvent = event;
+        const dataTransfer = dragEvent.dataTransfer;
+        if (!dataTransfer) {
+            return;
+        }
+        dataTransfer.effectAllowed = 'move';
+        // set the dragged node
+        const targetNode = query(dragEvent.target);
+        const boxNode = targetNode.closest('lake-box');
+        if (boxNode.length === 0) {
+            dragEvent.preventDefault();
+            return;
+        }
+        const box = new Box(boxNode);
+        if (box.type === 'inline') {
+            dragEvent.preventDefault();
+            return;
+        }
+        draggedNode = boxNode;
+        // prepare an indication rod
+        dropIndication = query(safeTemplate `
+    <div class="lake-drop-indication">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
+        <path d="M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"></path>
+      </svg>
+    </div>
+    `);
+        editor.overlayContainer.append(dropIndication);
+    });
+    // The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).
+    editor.container.on('dragover', event => {
+        const dragEvent = event;
+        dragEvent.preventDefault();
+        const dataTransfer = dragEvent.dataTransfer;
+        if (!dataTransfer) {
+            return;
+        }
+        dataTransfer.dropEffect = 'move';
+        if (!dropIndication) {
+            return;
+        }
+        const targetNode = query(dragEvent.target);
+        if (targetNode.isContainer) {
+            return;
+        }
+        const targetBoxNode = targetNode.closest('lake-box');
+        if (targetBoxNode.length > 0) {
+            if (targetBoxNode.isBlockBox) {
+                targetBlock = targetBoxNode;
+            }
+            else {
+                targetBlock = targetBoxNode.closestBlock();
+            }
+        }
+        else {
+            targetBlock = targetNode.closestBlock();
+        }
+        const containerRect = editor.container.get(0).getBoundingClientRect();
+        let targetBlcokRect = targetBlock.get(0).getBoundingClientRect();
+        dropPosition = 'bottom';
+        let left = targetBlcokRect.x - containerRect.x;
+        let top = targetBlcokRect.y + targetBlcokRect.height - containerRect.y + (parseInt(targetBlock.computedCSS('margin-bottom'), 10) / 2);
+        if (dragEvent.clientY < targetBlcokRect.y + (targetBlcokRect.height / 2)) {
+            const prevBlock = targetBlock.prev();
+            if (prevBlock.length > 0 && prevBlock.isBlock || prevBlock.isBlockBox) {
+                targetBlock = prevBlock;
+                targetBlcokRect = targetBlock.get(0).getBoundingClientRect();
+                left = targetBlcokRect.x - containerRect.x;
+                top = targetBlcokRect.y + targetBlcokRect.height - containerRect.y + (parseInt(targetBlock.computedCSS('margin-bottom'), 10) / 2);
+            }
+            else {
+                dropPosition = 'top';
+                top = targetBlcokRect.y - containerRect.y - (parseInt(editor.container.computedCSS('padding-top'), 10) / 2);
+            }
+        }
+        dropIndication.css({
+            top: `${top}px`,
+            left: `${left}px`,
+            width: `${targetBlcokRect.width}px`,
+            display: 'block',
+        });
+    });
+    // The dragend event is fired when a drag operation ends (by releasing a mouse button or hitting the escape key).
+    editor.container.on('dragend', () => {
+        if (!dropIndication) {
+            return;
+        }
+        dropIndication.remove();
+        dropIndication = null;
+    });
+    // The drop event is fired when an element or text selection is dropped on a valid drop target.
+    editor.container.on('drop', event => {
+        const dragEvent = event;
+        const dataTransfer = dragEvent.dataTransfer;
+        if (!dataTransfer) {
+            return;
+        }
+        if (!dropIndication) {
+            return;
+        }
+        dropIndication.remove();
+        dropIndication = null;
+        // drop a box
+        if (draggedNode && targetBlock && draggedNode.isBox) {
+            if (draggedNode.get(0) === targetBlock.get(0)) {
+                return;
+            }
+            if (dropPosition === 'bottom' && draggedNode.get(0) === targetBlock.next().get(0)) {
+                return;
+            }
+            dragEvent.preventDefault();
+            const draggedBox = new Box(draggedNode);
+            const range = editor.selection.range;
+            if (targetBlock.isBox) {
+                if (dropPosition === 'top') {
+                    range.selectBoxStart(targetBlock);
+                }
+                else {
+                    range.selectBoxEnd(targetBlock);
+                }
+            }
+            else {
+                range.selectNodeContents(targetBlock);
+                if (dropPosition === 'top') {
+                    range.collapseToStart();
+                }
+                else {
+                    range.collapseToEnd();
+                }
+            }
+            editor.insertBox(draggedBox.name, draggedBox.value);
+            draggedNode.remove();
+            editor.history.save();
+        }
+    });
+};
+
 var undo = (editor) => {
     if (editor.readonly) {
         return;
@@ -8525,7 +8835,7 @@ const blockItemListForEnterKey = [
         ],
     },
     {
-        re: /^`+([a-z]*)$/i,
+        re: /^`{3,}([a-z]*)$/i,
         getParameters: (results) => {
             var _a;
             if (!results[1]) {
@@ -8730,12 +9040,10 @@ function splitBlock(editor, block) {
     editor.selection.splitBlock();
     block = range.getBlocks()[0];
     if (!block) {
-        editor.history.save();
         return;
     }
     if (endText === '' && (block.isHeading || block.name === 'blockquote')) {
         editor.selection.setBlocks('<p />');
-        editor.history.save();
         return;
     }
     if (block.isList && block.attr('type') === 'checklist') {
@@ -9298,6 +9606,7 @@ Editor.box.add(codeBlockBox);
 Editor.plugin.add(copy);
 Editor.plugin.add(cut);
 Editor.plugin.add(paste);
+Editor.plugin.add(drop);
 Editor.plugin.add(undo);
 Editor.plugin.add(redo);
 Editor.plugin.add(selectAll);