lakelib 0.3.11 → 0.4.1

package/lib/lake.css

@@ -444,7 +444,7 @@ button.lake-primary-button.lake-button-hovered {
 .lake-dropdown-menu {
   position: absolute;
   top: 30px;
-  left: 0;
+  right: 0;
   z-index: var(--lake-popup-z-index);
   list-style: none;
   margin: 0;
@@ -1088,6 +1088,12 @@ button.lake-primary-button.lake-button-hovered {
   user-select: none;
 }
 
+.lake-toolbar .lake-toolbar-line-break {
+  flex-basis: 100%;
+  height: 0;
+  user-select: none;
+}
+
 .lake-toolbar .lake-upload {
   line-height: 0;
 }

package/lib/lake.d.ts

@@ -1367,6 +1367,11 @@ declare class Selection {
      * Returns a list of items related to the current selection.
      */
     getActiveItems(): ActiveItem[];
+    /**
+     * Creates a deep clone of the current container with its content.
+     * If there is a selection within the container, it ensures the selection is also preserved in the cloned container.
+     */
+    cloneContainer(): Nodes;
     /**
      * Inserts a bookmark at the cursor position or a pair of bookmarks at the selection boundaries.
      */
@@ -1520,11 +1525,6 @@ declare class History {
      * A boolean value indicating whether the history can be redone.
      */
     get canRedo(): boolean;
-    /**
-     * Creates a deep clone of the current container with its content.
-     * If there is a selection within the container, it ensures the selection is also preserved in the cloned container.
-     */
-    cloneContainer(): Nodes;
     /**
      * Undoes to the previous saved content.
      */
@@ -1691,7 +1691,7 @@ declare class Toolbar {
      */
     container: Nodes;
     constructor(config: ToolbarConfig);
-    private appendDivider;
+    private appendDivision;
     private appendNormalButton;
     private appendDropdown;
     private appendUploadButton;
@@ -1709,7 +1709,8 @@ declare class Toolbar {
     unmount(): void;
 }
 
-type OnMessage = (type: 'success' | 'error' | 'warning', message: string) => void;
+type ShowMessage = (type: 'success' | 'error' | 'warning', message: string) => void;
+type DownloadFile = (type: 'image' | 'file', url: string) => void;
 interface Config {
     value: string;
     readonly: boolean;
@@ -1721,7 +1722,8 @@ interface Config {
     contentRules: ContentRules;
     minChangeSize: number;
     historySize: number;
-    onMessage: OnMessage;
+    showMessage: ShowMessage;
+    downloadFile: DownloadFile;
     [name: string]: any;
 }
 interface EditorConfig extends Partial<Config> {

package/lib/lake.js

@@ -4217,8 +4217,8 @@ class Dropdown {
                 menuNode.css('right', '0');
             }
             else {
-                menuNode.css('left', '');
-                menuNode.css('right', '');
+                menuNode.css('left', '0');
+                menuNode.css('right', 'auto');
             }
             if (this.direction === 'top') {
                 menuNode.css('top', 'auto');
@@ -4419,8 +4419,8 @@ class Toolbar {
         }
         this.container = query('<div class="lake-toolbar" />');
     }
-    appendDivider() {
-        this.container.append('<div class="lake-toolbar-divider" />');
+    appendDivision(name) {
+        this.container.append(`<div class="lake-toolbar-${name}" />`);
     }
     appendNormalButton(editor, item) {
         const button = new Button({
@@ -4509,7 +4509,7 @@ class Toolbar {
                     transformResponse,
                     onError: error => {
                         fileNativeNode.value = '';
-                        editor.config.onMessage('error', error);
+                        editor.config.showMessage('error', error);
                     },
                     onSuccess: () => {
                         fileNativeNode.value = '';
@@ -4595,7 +4595,10 @@ class Toolbar {
         this.root.append(this.container);
         for (const name of this.items) {
             if (name === '|') {
-                this.appendDivider();
+                this.appendDivision('divider');
+            }
+            else if (name === '-') {
+                this.appendDivision('line-break');
             }
             else {
                 let item;
@@ -5213,7 +5216,7 @@ function createIframeBox(config) {
                     onClick: () => {
                         const url = formNode.find('input[name="url"]').value();
                         if (!config.validUrl(url)) {
-                            editor.config.onMessage('error', getLocaleString(locale, config.urlError));
+                            editor.config.showMessage('error', getLocaleString(locale, config.urlError));
                             return;
                         }
                         box.updateValue('url', url);
@@ -6608,7 +6611,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.3.11";
+var version = "0.4.1";
 
 // Converts the custom HTML tags to the special tags that can not be parsed by browser.
 function denormalizeValue(value) {
@@ -6784,6 +6787,39 @@ class Selection {
         appendNextNestedNodes(activeItems, this.range);
         return activeItems;
     }
+    /**
+     * Creates a deep clone of the current container with its content.
+     * If there is a selection within the container, it ensures the selection is also preserved in the cloned container.
+     */
+    cloneContainer() {
+        const range = this.range;
+        const newContainer = this.container.clone(true);
+        newContainer.find('lake-box').each(nativeNode => {
+            const box = getBox(nativeNode);
+            box.getContainer().empty();
+        });
+        if (!this.container.contains(range.commonAncestor)) {
+            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();
+        const endNodePath = range.endNode.path();
+        const newStartNode = newContainer.find(startNodePath);
+        const newEndNode = newContainer.find(endNodePath);
+        const newRange = range.clone();
+        newRange.setStart(newStartNode, range.startOffset);
+        newRange.setEnd(newEndNode, range.endOffset);
+        insertBookmark(newRange);
+        return newContainer;
+    }
     /**
      * Inserts a bookmark at the cursor position or a pair of bookmarks at the selection boundaries.
      */
@@ -7624,39 +7660,6 @@ class History {
     get canRedo() {
         return !!this.list[this.index];
     }
-    /**
-     * Creates a deep clone of the current container with its content.
-     * If there is a selection within the container, it ensures the selection is also preserved in the cloned container.
-     */
-    cloneContainer() {
-        const range = this.selection.range;
-        const newContainer = this.container.clone(true);
-        newContainer.find('lake-box').each(nativeNode => {
-            const box = getBox(nativeNode);
-            box.getContainer().empty();
-        });
-        if (!this.container.contains(range.commonAncestor)) {
-            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();
-        const endNodePath = range.endNode.path();
-        const newStartNode = newContainer.find(startNodePath);
-        const newEndNode = newContainer.find(endNodePath);
-        const newRange = range.clone();
-        newRange.setStart(newStartNode, range.startOffset);
-        newRange.setEnd(newEndNode, range.endOffset);
-        insertBookmark(newRange);
-        return newContainer;
-    }
     /**
      * Undoes to the previous saved content.
      */
@@ -7733,7 +7736,7 @@ class History {
         if (!this.canSave) {
             return;
         }
-        const item = this.cloneContainer();
+        const item = this.selection.cloneContainer();
         const value = this.getValue(item);
         if (this.list[this.index - 1]
             && this.removeBookmark(this.getValue(this.list[this.index - 1])) === this.removeBookmark(value)) {
@@ -7917,7 +7920,7 @@ const defaultConfig = {
     contentRules: getContentRules(),
     minChangeSize: 5,
     historySize: 100,
-    onMessage: (type, message) => {
+    showMessage: (type, message) => {
         if (type === 'success') {
             // eslint-disable-next-line no-console
             console.log(message);
@@ -7931,6 +7934,9 @@ const defaultConfig = {
             console.error(message);
         }
     },
+    downloadFile: (type, url) => {
+        window.open(url);
+    },
     slash: false,
     mention: false,
 };
@@ -8479,7 +8485,7 @@ class Editor {
      * Returns the editor's content.
      */
     getValue() {
-        const item = this.history.cloneContainer();
+        const item = this.selection.cloneContainer();
         let value = new HTMLParser(item, this.config.contentRules).getHTML();
         value = denormalizeValue(value);
         return value;
@@ -8852,7 +8858,7 @@ var paste = (editor) => {
                         requestWithCredentials,
                         requestHeaders,
                         transformResponse,
-                        onError: error => editor.config.onMessage('error', error),
+                        onError: error => editor.config.showMessage('error', error),
                         onSuccess: () => editor.history.save(),
                     });
                 }
@@ -11158,7 +11164,8 @@ function renderFloatingToolbar(box) {
             icon: icons.get('open'),
             tooltip: locale => locale.image.open(),
             onClick: () => {
-                window.open(box.value.url);
+                const editor = box.getEditor();
+                editor.config.downloadFile('image', box.value.url);
             },
         },
     ];
@@ -11545,21 +11552,23 @@ function renderDone(box) {
         });
         const captionNode = renderCaption(box);
         renderFloatingToolbar(box);
-        new Resizer({
-            root: rootNode,
-            target: rootNode,
-            onResize: newWidth => {
-                boxContainer.css('width', `${newWidth}px`);
-                updateBoxMarginBottom(box, captionNode);
-            },
-            onStop: (newWidth, newHeight) => {
-                box.updateValue({
-                    width: newWidth,
-                    height: newHeight,
-                });
-                editor.history.save();
-            },
-        }).render();
+        if (!editor.readonly) {
+            new Resizer({
+                root: rootNode,
+                target: rootNode,
+                onResize: newWidth => {
+                    boxContainer.css('width', `${newWidth}px`);
+                    updateBoxMarginBottom(box, captionNode);
+                },
+                onStop: (newWidth, newHeight) => {
+                    box.updateValue({
+                        width: newWidth,
+                        height: newHeight,
+                    });
+                    editor.history.save();
+                },
+            }).render();
+        }
     });
 }
 var imageBox = {
@@ -11723,7 +11732,8 @@ function setFloatingToolbar(box) {
             icon: icons.get('download'),
             tooltip: locale => locale.file.download(),
             onClick: () => {
-                window.open(box.value.url);
+                const editor = box.getEditor();
+                editor.config.downloadFile('file', box.value.url);
             },
         },
         {
@@ -11798,7 +11808,7 @@ var fileBox = {
         }
         else {
             rootNode.on('click', () => {
-                window.open(value.url);
+                editor.config.downloadFile('file', value.url);
             });
         }
     },
@@ -11882,7 +11892,7 @@ function renderError(box) {
     rootNode.on('click', () => {
         editor.selection.selectBox(box);
     });
-    editor.config.onMessage('warning', `
+    editor.config.showMessage('warning', `
     Box "${box.name}" (id: ${box.node.id}) failed to display because window.katex was not found.
     Please check if the "katex" library is added to this page.
   `.trim());
@@ -13872,7 +13882,7 @@ var slash = (editor) => {
                         transformResponse,
                         onError: error => {
                             fileNativeNode.value = '';
-                            editor.config.onMessage('error', error);
+                            editor.config.showMessage('error', error);
                         },
                         onSuccess: () => {
                             fileNativeNode.value = '';