lakelib 0.1.7 → 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;
@@ -862,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);
@@ -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') ||
@@ -4613,7 +4673,7 @@ class Dropdown {
     }
 }
 
-var version = "0.1.7";
+var version = "0.1.8";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -5231,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();
         };
@@ -5345,6 +5426,7 @@ class Editor {
             this.rectifyContent();
             this.emitStateChangeEvent();
             this.togglePlaceholderClass(value);
+            this.scrollToCaret();
             this.event.emit('change', value);
         };
         if (!config.root) {
@@ -5560,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);
@@ -5619,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);
@@ -5635,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);
@@ -6764,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);
     });
@@ -6980,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);
@@ -7219,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;
@@ -7249,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;
@@ -7433,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) {
@@ -7478,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;
@@ -8740,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') {
@@ -9308,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);