lakelib 0.2.5 → 0.2.6

package/lib/lake.js

@@ -539,6 +539,7 @@ function debug(...data) {
 // value is an array which include types and listeners.
 const eventData = {};
 let lastNodeId = 0;
+// The Nodes class represents collections of nodes.
 class Nodes {
     constructor(node) {
         node = node !== null && node !== void 0 ? node : [];
@@ -3898,6 +3899,8 @@ var enUS = {
         originalWidth: 'Original image width',
         imageWidth: '{0} image width',
         open: 'Open image in new tab',
+        caption: 'Caption',
+        captionPlaceholder: 'Write a caption...',
     },
     file: {
         download: 'Download',
@@ -3916,7 +3919,7 @@ var enUS = {
     equation: {
         save: 'Done',
         help: 'Supported functions',
-        placeholder: 'Type a TeX expression',
+        placeholder: 'Type a TeX expression...',
     },
 };
 
@@ -4033,6 +4036,8 @@ var zhCN = {
         originalWidth: '图片原始大小',
         imageWidth: '{0} 图片大小',
         open: '在新标签页中打开图片',
+        caption: '图片描述',
+        captionPlaceholder: '请输入图片描述',
     },
     file: {
         download: '下载',
@@ -4168,6 +4173,8 @@ var ja = {
         originalWidth: '画像の元のサイズ',
         imageWidth: '{0} 画像サイズ',
         open: '新しいタブで画像を開く',
+        caption: 'キャプション',
+        captionPlaceholder: 'キャプションを入力してください',
     },
     file: {
         download: 'ダウンロード',
@@ -4186,7 +4193,7 @@ var ja = {
     equation: {
         save: '保存',
         help: 'サポートされている機能',
-        placeholder: 'TeX 数式を入力してください。',
+        placeholder: 'TeX 数式を入力してください',
     },
 };
 
@@ -4303,6 +4310,8 @@ var ko = {
         originalWidth: '원본 이미지 크기',
         imageWidth: '{0} 이미지 크기',
         open: '새 탭에서 이미지 열기',
+        caption: '캡션',
+        captionPlaceholder: '캡션을 입력하세요',
     },
     file: {
         download: '다운로드',
@@ -5084,6 +5093,7 @@ class Box {
             this.toolbar.updateState({
                 appliedItems,
             });
+            this.event.emit('renderfloatingtoolbar');
         });
         this.event.on('blur', () => {
             if (this.toolbar) {
@@ -5207,6 +5217,7 @@ var index = /*#__PURE__*/Object.freeze({
     wrapNodeList: wrapNodeList
 });
 
+// The Fragment class represents a minimal document object that has no parent.
 class Fragment {
     constructor(fragment) {
         this.fragment = fragment !== null && fragment !== void 0 ? fragment : document.createDocumentFragment();
@@ -5346,6 +5357,7 @@ function getElementRules() {
     };
 }
 
+// The HTMLParser class provides the ability to parse HTML source code by specified rules.
 class HTMLParser {
     constructor(content, rules = getElementRules()) {
         this.rules = rules;
@@ -5516,6 +5528,7 @@ class HTMLParser {
     }
 }
 
+// The TextParser class provides the ability to parse a text into an HTML string or DocumentFragment object.
 class TextParser {
     constructor(content) {
         this.content = content;
@@ -6353,7 +6366,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.2.5";
+var version = "0.2.6";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -7105,7 +7118,7 @@ class Editor {
             contenteditable: this.readonly ? 'false' : 'true',
             spellcheck: this.config.spellcheck ? 'true' : 'false',
             tabindex: this.config.tabIndex.toString(),
-            'data-readonly': this.readonly ? 'true' : 'false',
+            readonly: this.readonly ? 'true' : 'false',
         });
         if (this.config.placeholder !== '') {
             this.container.attr('placeholder', this.config.placeholder);
@@ -7226,6 +7239,16 @@ class Editor {
             this.handleInputEvent(event);
         });
     }
+    // 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);
+            }
+        }
+    }
     // Binds events for history.
     bindHistoryEvents() {
         const executeCommonMethods = (value) => {
@@ -7316,16 +7339,6 @@ class Editor {
             }
         }
     }
-    // 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();
@@ -7714,6 +7727,40 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+class CornerToolbar {
+    constructor(config) {
+        this.config = config;
+        this.locale = this.config.locale || i18nObject('en-US');
+        this.root = config.root;
+        this.container = query('<div class="lake-corner-toolbar" />');
+    }
+    appendButton(item) {
+        const buttonNode = query(safeTemplate `
+      <button type="button" name="${item.name}" tabindex="-1" />
+    `);
+        const tooltip = typeof item.tooltip === 'string' ? item.tooltip : item.tooltip(this.locale);
+        buttonNode.attr('title', tooltip);
+        if (item.icon) {
+            buttonNode.append(item.icon);
+        }
+        this.container.append(buttonNode);
+        buttonNode.on('click', event => {
+            event.preventDefault();
+            item.onClick(event);
+        });
+    }
+    render() {
+        const { items } = this.config;
+        if (items.length === 0) {
+            return;
+        }
+        this.root.append(this.container);
+        for (const item of items) {
+            this.appendButton(item);
+        }
+    }
+}
+
 class Resizer {
     constructor(config) {
         this.config = config;
@@ -7725,7 +7772,7 @@ class Resizer {
         <div class="lake-resizer-top-right"></div>
         <div class="lake-resizer-bottom-left"></div>
         <div class="lake-resizer-bottom-right"></div>
-        <div class="lake-resizer-info">${config.width} x ${config.height}</div>
+        <div class="lake-resizer-info"></div>
       </div>
     `);
     }
@@ -7766,6 +7813,7 @@ class Resizer {
             catch ( /* empty */_a) { /* empty */ }
             clientX = pointerEvent.clientX;
             width = target.width();
+            infoNode.text(`${initialWidth} x ${initialHeight}`);
             infoNode.show();
             pointerNode.on('pointermove', pointermoveListener);
         };
@@ -7799,8 +7847,46 @@ const alignValueMap$1 = {
     start: 'left',
     end: 'right',
 };
-function setFloatingToolbar$1(box) {
+function updateBoxMarginBottom(box, captionNode) {
+    const height = captionNode.height();
+    box.node.find('.lake-box-strip').css('margin-bottom', `${height}px`);
+}
+function showCaption(box, captionNode) {
+    captionNode.show();
+    updateBoxMarginBottom(box, captionNode);
+}
+function hideCaption(box, captionNode) {
+    captionNode.hide();
+    box.node.find('.lake-box-strip').css('margin-bottom', '');
+}
+// Creates floating toolbar for the box.
+function renderFloatingToolbar(box) {
     const items = [
+        {
+            name: 'caption',
+            type: 'button',
+            icon: icons.get('caption'),
+            tooltip: locale => locale.image.caption(),
+            isSelected: () => {
+                const boxContainer = box.getContainer();
+                const captionNode = boxContainer.find('.lake-image-caption');
+                return captionNode.length > 0 && captionNode.computedCSS('display') !== 'none';
+            },
+            onClick: () => {
+                var _a;
+                const boxContainer = box.getContainer();
+                const captionNode = boxContainer.find('.lake-image-caption');
+                const caption = captionNode.text().trim();
+                if (caption === '') {
+                    captionNode.addClass('lake-placeholder');
+                }
+                showCaption(box, captionNode);
+                captionNode.focus();
+                (_a = box.toolbar) === null || _a === void 0 ? void 0 : _a.updateState({
+                    appliedItems: [],
+                });
+            },
+        },
         {
             name: 'align',
             type: 'dropdown',
@@ -7860,6 +7946,8 @@ function setFloatingToolbar$1(box) {
             onSelect: (editor, value) => {
                 const { originalWidth, originalHeight } = box.value;
                 const boxContainer = box.getContainer();
+                const rootNode = boxContainer.find('.lake-image');
+                const captionNode = boxContainer.find('.lake-image-caption');
                 const rate = originalHeight / originalWidth;
                 let newWidth;
                 if (value === 'page') {
@@ -7869,10 +7957,12 @@ function setFloatingToolbar$1(box) {
                     newWidth = Math.round(originalWidth * Number(value));
                 }
                 const newHeight = Math.round(rate * newWidth);
-                boxContainer.css({
+                rootNode.css({
                     width: `${newWidth}px`,
                     height: `${newHeight}px`,
                 });
+                boxContainer.css('width', `${newWidth}px`);
+                updateBoxMarginBottom(box, captionNode);
                 box.updateValue({
                     width: newWidth,
                     height: newHeight,
@@ -7927,7 +8017,7 @@ function getImageInfo(url) {
         });
     });
 }
-// Opens full screen view.
+// Previews an image.
 function openFullScreen(box) {
     const editor = box.getEditor();
     const dataSource = [];
@@ -8016,25 +8106,82 @@ function openFullScreen(box) {
     lightbox.init();
     lightbox.loadAndOpen(currentIndex);
 }
+// Creates caption for image.
+function renderCaption(box) {
+    const editor = box.getEditor();
+    const boxContainer = box.getContainer();
+    const defaultCaption = (box.value.caption || '').trim();
+    const captionNode = query('<div class="lake-image-caption" />');
+    captionNode.text(defaultCaption);
+    boxContainer.append(captionNode);
+    if (defaultCaption === '') {
+        hideCaption(box, captionNode);
+    }
+    else {
+        showCaption(box, captionNode);
+    }
+    if (editor.readonly) {
+        captionNode.css('-webkit-user-modify', 'read-only');
+        return captionNode;
+    }
+    captionNode.attr('contenteditable', 'true');
+    captionNode.attr('placeholder', editor.locale.image.captionPlaceholder());
+    const changeHandler = debounce((value) => {
+        editor.selection.updateByRange();
+        if (editor.isComposing) {
+            return;
+        }
+        box.updateValue('caption', value);
+        editor.history.save();
+    }, 1, {
+        immediate: false,
+    });
+    captionNode.on('input', () => {
+        const caption = captionNode.text().trim();
+        if (caption === '') {
+            captionNode.addClass('lake-placeholder');
+        }
+        else {
+            captionNode.removeClass('lake-placeholder');
+        }
+        const height = captionNode.height();
+        box.node.find('.lake-box-strip').css('margin-bottom', `${height}px`);
+        changeHandler(caption);
+    });
+    // For supporting "user-modify: read-write-plaintext-only" in Firefox
+    captionNode.on('paste', event => {
+        event.preventDefault();
+        const dataTransfer = event.clipboardData;
+        if (!dataTransfer) {
+            return;
+        }
+        const text = dataTransfer.getData('text/plain').trim();
+        document.execCommand('insertText', false, text);
+    });
+    captionNode.on('keydown', event => {
+        if (isKeyHotkey('enter', event)) {
+            event.preventDefault();
+            editor.selection.selectBox(box);
+        }
+    });
+    captionNode.on('focusout', () => {
+        const caption = captionNode.text().trim();
+        if (caption === '') {
+            hideCaption(box, captionNode);
+        }
+    });
+    return captionNode;
+}
 // Displays error icon and filename.
-function renderError$1(rootNode, box) {
+function renderError$1(box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
+        const boxContainer = box.getContainer();
         const value = box.value;
-        box.getContainer().css({
+        boxContainer.css({
             width: '',
             height: '',
         });
-        const buttonGroupNode = query(safeTemplate `
-    <div class="lake-button-group">
-      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.image.remove()}"></button>
-    </div>
-  `);
-        const removeButton = buttonGroupNode.find('.lake-button-remove');
-        const removeIcon = icons.get('remove');
-        if (removeIcon) {
-            removeButton.append(removeIcon);
-        }
         const errorNode = query(safeTemplate `
     <div class="lake-error">
       <div class="lake-error-icon"></div>
@@ -8045,12 +8192,31 @@ function renderError$1(rootNode, box) {
         if (imageBrokenIcon) {
             errorNode.find('.lake-error-icon').append(imageBrokenIcon);
         }
-        rootNode.append(buttonGroupNode);
+        const rootNode = query('<div class="lake-image" />');
+        rootNode.addClass(`lake-image-${value.status}`);
+        new CornerToolbar({
+            locale: editor.locale,
+            root: rootNode,
+            items: [
+                {
+                    name: 'remove',
+                    icon: icons.get('remove'),
+                    tooltip: editor.locale.image.remove(),
+                    onClick: event => {
+                        event.stopPropagation();
+                        editor.selection.removeBox(box);
+                        editor.history.save();
+                    },
+                },
+            ],
+        }).render();
         rootNode.append(errorNode);
+        boxContainer.empty();
+        boxContainer.append(rootNode);
     });
 }
 // Displays an image with uplaoding progress.
-function renderUploading(rootNode, box) {
+function renderUploading(box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         const boxContainer = box.getContainer();
@@ -8060,7 +8226,7 @@ function renderUploading(rootNode, box) {
             return;
         }
         if (!imageInfo.width || !imageInfo.height) {
-            yield renderError$1(rootNode, box);
+            yield renderError$1(box);
             return;
         }
         const maxWidth = editor.container.innerWidth() - 2;
@@ -8072,20 +8238,10 @@ function renderUploading(rootNode, box) {
             originalWidth: imageInfo.width,
             originalHeight: imageInfo.height,
         });
-        box.getContainer().css({
+        boxContainer.css({
             width: `${width}px`,
             height: `${height}px`,
         });
-        const buttonGroupNode = query(safeTemplate `
-    <div class="lake-button-group">
-      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.image.remove()}"></button>
-    </div>
-  `);
-        const removeButton = buttonGroupNode.find('.lake-button-remove');
-        const removeIcon = icons.get('remove');
-        if (removeIcon) {
-            removeButton.append(removeIcon);
-        }
         const percent = Math.round(value.percent || 0);
         const progressNode = query(safeTemplate `
     <div class="lake-progress">
@@ -8105,13 +8261,32 @@ function renderUploading(rootNode, box) {
             draggable: 'false',
             alt: value.name,
         });
-        rootNode.append(buttonGroupNode);
+        const rootNode = query('<div class="lake-image" />');
+        rootNode.addClass(`lake-image-${value.status}`);
+        new CornerToolbar({
+            locale: editor.locale,
+            root: rootNode,
+            items: [
+                {
+                    name: 'remove',
+                    icon: icons.get('remove'),
+                    tooltip: editor.locale.image.remove(),
+                    onClick: event => {
+                        event.stopPropagation();
+                        editor.selection.removeBox(box);
+                        editor.history.save();
+                    },
+                },
+            ],
+        }).render();
         rootNode.append(progressNode);
         rootNode.append(imgNode);
+        boxContainer.empty();
+        boxContainer.append(rootNode);
     });
 }
 // Displays an image that can be previewed or removed.
-function renderDone(rootNode, box) {
+function renderDone(box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         const boxContainer = box.getContainer();
@@ -8121,9 +8296,15 @@ function renderDone(rootNode, box) {
             return;
         }
         if (!imageInfo.width || !imageInfo.height) {
-            yield renderError$1(rootNode, box);
+            yield renderError$1(box);
             return;
         }
+        if (!value.originalWidth || !value.originalHeight) {
+            box.updateValue({
+                originalWidth: imageInfo.width,
+                originalHeight: imageInfo.height,
+            });
+        }
         let width = value.width;
         let height = value.height;
         if (!width || !height) {
@@ -8135,41 +8316,60 @@ function renderDone(rootNode, box) {
                 height,
             });
         }
-        boxContainer.css({
-            width: `${width}px`,
-            height: `${height}px`,
-        });
-        const buttonGroupNode = query(safeTemplate `
-    <div class="lake-button-group">
-      <button type="button" tabindex="-1" class="lake-button-view" title="${editor.locale.image.view()}"></button>
-      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.image.remove()}"></button>
-    </div>
-  `);
-        const viewButton = buttonGroupNode.find('.lake-button-view');
-        const maximizeIcon = icons.get('maximize');
-        if (maximizeIcon) {
-            viewButton.append(maximizeIcon);
-        }
-        if (width < 80 || PhotoSwipeLightbox === null) {
-            viewButton.hide();
-        }
-        const removeButton = buttonGroupNode.find('.lake-button-remove');
-        const removeIcon = icons.get('remove');
-        if (removeIcon) {
-            removeButton.append(removeIcon);
-        }
         const imgNode = imageInfo.node;
         imgNode.addClass('lake-image-img');
         imgNode.attr({
             draggable: 'false',
             alt: value.name,
         });
-        rootNode.append(buttonGroupNode);
+        const rootNode = query('<div class="lake-image" />');
+        rootNode.addClass(`lake-image-${value.status}`);
+        rootNode.css({
+            width: `${width}px`,
+            height: `${height}px`,
+        });
+        const cornerToolbarItems = [];
+        if (width >= 80 && PhotoSwipeLightbox !== null) {
+            cornerToolbarItems.push({
+                name: 'view',
+                icon: icons.get('maximize'),
+                tooltip: editor.locale.image.view(),
+                onClick: () => openFullScreen(box),
+            });
+        }
+        if (!editor.readonly) {
+            cornerToolbarItems.push({
+                name: 'remove',
+                icon: icons.get('remove'),
+                tooltip: editor.locale.image.remove(),
+                onClick: event => {
+                    event.stopPropagation();
+                    editor.selection.removeBox(box);
+                    editor.history.save();
+                },
+            });
+        }
+        new CornerToolbar({
+            locale: editor.locale,
+            root: rootNode,
+            items: cornerToolbarItems,
+        }).render();
+        rootNode.append(imgNode);
+        boxContainer.empty();
+        boxContainer.append(rootNode);
+        boxContainer.css({
+            width: `${width}px`,
+            height: '',
+        });
+        const captionNode = renderCaption(box);
+        renderFloatingToolbar(box);
         new Resizer({
             root: rootNode,
-            target: boxContainer,
-            width,
-            height,
+            target: rootNode,
+            onResize: newWidth => {
+                boxContainer.css('width', `${newWidth}px`);
+                updateBoxMarginBottom(box, captionNode);
+            },
             onStop: (newWidth, newHeight) => {
                 box.updateValue({
                     width: newWidth,
@@ -8178,7 +8378,6 @@ function renderDone(rootNode, box) {
                 editor.history.save();
             },
         }).render();
-        rootNode.append(imgNode);
     });
 }
 var imageBox = {
@@ -8216,40 +8415,22 @@ var imageBox = {
         if (value.status === 'loading') {
             return;
         }
-        const rootNode = query('<div class="lake-image" />');
-        rootNode.addClass(`lake-image-${value.status}`);
         let promise;
         if (value.status === 'uploading') {
-            promise = renderUploading(rootNode, box);
+            promise = renderUploading(box);
         }
         else if (value.status === 'error') {
-            promise = renderError$1(rootNode, box);
+            promise = renderError$1(box);
         }
         else {
-            promise = renderDone(rootNode, box);
+            promise = renderDone(box);
         }
         promise.then(() => {
-            boxContainer.empty();
-            boxContainer.append(rootNode);
-            rootNode.find('.lake-button-view').on('click', () => openFullScreen(box));
-            if (editor.readonly) {
-                rootNode.find('.lake-button-remove').hide();
-            }
-            else {
-                rootNode.find('.lake-button-remove').on('click', event => {
-                    event.stopPropagation();
-                    editor.selection.removeBox(box);
-                    editor.history.save();
-                });
-                if (value.status === 'done') {
-                    setFloatingToolbar$1(box);
-                }
-            }
+            boxContainer.find('.lake-image').on('click', () => {
+                editor.selection.selectBox(box);
+            });
             box.event.emit('render');
         });
-        rootNode.on('click', () => {
-            editor.selection.selectBox(box);
-        });
     },
     html: box => {
         const rawValue = box.node.attr('value');
@@ -8264,23 +8445,23 @@ function getVideoId(url) {
 function appendButtonGroup(box) {
     const editor = box.getEditor();
     const boxContainer = box.getContainer();
-    const videoNode = boxContainer.find('.lake-video');
-    const buttonGroupNode = query(safeTemplate `
-    <div class="lake-button-group">
-      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.video.remove()}"></button>
-    </div>
-  `);
-    const removeButton = buttonGroupNode.find('.lake-button-remove');
-    const removeIcon = icons.get('remove');
-    if (removeIcon) {
-        removeButton.append(removeIcon);
-    }
-    buttonGroupNode.find('.lake-button-remove').on('click', event => {
-        event.stopPropagation();
-        editor.selection.removeBox(box);
-        editor.history.save();
-    });
-    videoNode.append(buttonGroupNode);
+    const rootNode = boxContainer.find('.lake-video');
+    new CornerToolbar({
+        locale: editor.locale,
+        root: rootNode,
+        items: [
+            {
+                name: 'remove',
+                icon: icons.get('remove'),
+                tooltip: editor.locale.video.remove(),
+                onClick: event => {
+                    event.stopPropagation();
+                    editor.selection.removeBox(box);
+                    editor.history.save();
+                },
+            },
+        ],
+    }).render();
 }
 function showVideo(box) {
     const editor = box.getEditor();
@@ -8310,11 +8491,25 @@ function showVideo(box) {
     if (!editor.readonly) {
         iframeNode.on('load', () => {
             appendButtonGroup(box);
+            new CornerToolbar({
+                locale: editor.locale,
+                root: rootNode,
+                items: [
+                    {
+                        name: 'remove',
+                        icon: icons.get('remove'),
+                        tooltip: editor.locale.video.remove(),
+                        onClick: event => {
+                            event.stopPropagation();
+                            editor.selection.removeBox(box);
+                            editor.history.save();
+                        },
+                    },
+                ],
+            }).render();
             new Resizer({
                 root: rootNode,
                 target: boxContainer,
-                width,
-                height,
                 onResize: (newWidth, newHeight) => {
                     iframeNode.attr({
                         height: newHeight.toString(),