lakelib 0.3.10 → 0.4.0

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> {
@@ -2261,4 +2263,5 @@ declare class Dropdown {
     unmount(): void;
 }
 
-export { type ActiveItem, Box, type BoxComponent, type BoxValue, Button, type CommandItem, type ContentRules, Dropdown, type DropdownItem, type DropdownMenuItem, Editor, Fragment, HTMLParser, type InitializePlugin, type KeyValue, type MentionItem, type NodePath, Nodes, Range$1 as Range, type SelectionState, type SlashButtonItem, type SlashItem, type SlashUploadItem, TextParser, Toolbar, type ToolbarButtonItem, type ToolbarDropdownItem, type ToolbarItem, type ToolbarUploadItem, type UnmountPlugin, addMark, createIframeBox, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock, splitMarks, template, toBookmark, toHex };
+export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range$1 as Range, TextParser, Toolbar, addMark, createIframeBox, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock, splitMarks, template, toBookmark, toHex };
+export type { ActiveItem, BoxComponent, BoxValue, CommandItem, ContentRules, DropdownItem, DropdownMenuItem, InitializePlugin, KeyValue, MentionItem, NodePath, SelectionState, SlashButtonItem, SlashItem, SlashUploadItem, ToolbarButtonItem, ToolbarDropdownItem, ToolbarItem, ToolbarUploadItem, UnmountPlugin };

package/lib/lake.js

@@ -1268,15 +1268,10 @@ class Nodes {
         var _a;
         if (value === undefined) {
             const node = this.get(0);
-            if (this.isText) {
-                return (_a = node.nodeValue) !== null && _a !== void 0 ? _a : '';
-            }
-            const element = node;
-            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
-            return element.innerText.replace(/^\n+|\n+$/, '');
+            return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
         }
         return this.eachElement(element => {
-            element.innerText = value;
+            element.textContent = value;
         });
     }
     value(value) {
@@ -3104,12 +3099,12 @@ function request(option) {
         formData.append(key, value);
     });
     if (option.file) {
-        const filename = option.filename || 'file';
+        const fieldName = option.fieldName || 'file';
         if (option.file instanceof Blob) {
-            formData.append(filename, option.file, option.file.name);
+            formData.append(fieldName, option.file, option.file.name);
         }
         else {
-            formData.append(filename, option.file);
+            formData.append(fieldName, option.file);
         }
     }
     xhr.onerror = e => {
@@ -3151,18 +3146,19 @@ function request(option) {
     return xhr;
 }
 
-// Uploads a file to the server.
-function uploadFile(config) {
-    const { editor, name, file, onError, onSuccess } = config;
-    const { requestMethod, requestAction, requestTypes } = editor.config[name];
+/**
+ * Inserts an upload box into a given selection and sends an HTTP request to upload the file to a specified URL.
+ */
+function insertUploadBox(config) {
+    const { selection, boxName, file, requestTypes, requestMethod, requestAction, requestFieldName, requestWithCredentials, requestHeaders, transformResponse, onError, onSuccess, } = config;
     if (requestTypes.indexOf(file.type) < 0) {
         if (onError) {
             onError(`File "${file.name}" is not allowed for uploading.`);
         }
         throw new Error(`Cannot upload file "${file.name}" because its type "${file.type}" is not found in ['${requestTypes.join('\', \'')}'].`);
     }
-    const box = editor.selection.insertBox(name, {
-        url: URL.createObjectURL(file),
+    const box = selection.insertBox(boxName, {
+        url: file.type.indexOf('image/') === 0 ? URL.createObjectURL(file) : '',
         status: 'uploading',
         name: file.name,
         size: file.size,
@@ -3186,6 +3182,9 @@ function uploadFile(config) {
         },
         onSuccess: body => {
             xhr = null;
+            if (transformResponse) {
+                body = transformResponse(body);
+            }
             if (!body.url) {
                 box.updateValue('status', 'error');
                 box.render();
@@ -3199,7 +3198,6 @@ function uploadFile(config) {
                 url: body.url,
             });
             box.render();
-            editor.history.save();
             if (onSuccess) {
                 onSuccess();
             }
@@ -3207,6 +3205,9 @@ function uploadFile(config) {
         file,
         action: requestAction,
         method: requestMethod,
+        fieldName: requestFieldName,
+        withCredentials: requestWithCredentials,
+        headers: requestHeaders,
     });
     box.event.on('beforeunmount', () => {
         if (xhr) {
@@ -4216,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');
@@ -4418,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({
@@ -4491,19 +4492,28 @@ class Toolbar {
         this.container.append(uploadNode);
         fileNode.on('click', event => event.stopPropagation());
         fileNode.on('change', event => {
+            const { requestTypes, requestMethod, requestAction, requestFieldName, requestWithCredentials, requestHeaders, transformResponse, } = editor.config[item.name];
             const target = event.target;
             const files = target.files || [];
             for (const file of files) {
-                uploadFile({
-                    editor,
-                    name: item.name,
+                insertUploadBox({
+                    selection: editor.selection,
+                    boxName: item.name,
                     file,
+                    requestTypes,
+                    requestMethod,
+                    requestAction,
+                    requestFieldName,
+                    requestWithCredentials,
+                    requestHeaders,
+                    transformResponse,
                     onError: error => {
                         fileNativeNode.value = '';
-                        editor.config.onMessage('error', error);
+                        editor.config.showMessage('error', error);
                     },
                     onSuccess: () => {
                         fileNativeNode.value = '';
+                        editor.history.save();
                     },
                 });
             }
@@ -4585,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;
@@ -5203,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);
@@ -6598,7 +6611,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.3.10";
+var version = "0.4.0";
 
 // Converts the custom HTML tags to the special tags that can not be parsed by browser.
 function denormalizeValue(value) {
@@ -6774,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.
      */
@@ -7614,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.
      */
@@ -7723,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)) {
@@ -7907,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);
@@ -7921,6 +7934,9 @@ const defaultConfig = {
             console.error(message);
         }
     },
+    downloadFile: (type, url) => {
+        window.open(url);
+    },
     slash: false,
     mention: false,
 };
@@ -8469,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;
@@ -8815,7 +8831,6 @@ var paste = (editor) => {
         return;
     }
     editor.event.on('paste', event => {
-        const { requestTypes } = editor.config.image;
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -8829,12 +8844,22 @@ var paste = (editor) => {
         // upload file
         if (dataTransfer.files.length > 0) {
             for (const file of dataTransfer.files) {
+                const pluginName = file.type.indexOf('image/') === 0 ? 'image' : 'file';
+                const { requestTypes, requestMethod, requestAction, requestFieldName, requestWithCredentials, requestHeaders, transformResponse, } = editor.config[pluginName];
                 if (requestTypes.indexOf(file.type) >= 0) {
-                    uploadFile({
-                        editor,
-                        name: file.type.indexOf('image/') === 0 ? 'image' : 'file',
+                    insertUploadBox({
+                        selection: editor.selection,
+                        boxName: pluginName,
                         file,
-                        onError: error => editor.config.onMessage('error', error),
+                        requestTypes,
+                        requestMethod,
+                        requestAction,
+                        requestFieldName,
+                        requestWithCredentials,
+                        requestHeaders,
+                        transformResponse,
+                        onError: error => editor.config.showMessage('error', error),
+                        onSuccess: () => editor.history.save(),
                     });
                 }
             }
@@ -11039,8 +11064,8 @@ function renderFloatingToolbar(box) {
             onClick: () => {
                 const boxContainer = box.getContainer();
                 const captionNode = boxContainer.find('.lake-image-caption');
-                const caption = captionNode.text().trim();
-                if (caption === '') {
+                const caption = captionNode.text();
+                if (caption.trim() === '') {
                     captionNode.addClass('lake-placeholder');
                 }
                 showCaption(box, captionNode);
@@ -11139,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);
             },
         },
     ];
@@ -11273,11 +11299,11 @@ function openFullScreen(box) {
 function renderCaption(box) {
     const editor = box.getEditor();
     const boxContainer = box.getContainer();
-    const defaultCaption = (box.value.caption || '').trim();
+    const defaultCaption = box.value.caption || '';
     const captionNode = query('<div class="lake-image-caption" />');
     captionNode.text(defaultCaption);
     boxContainer.append(captionNode);
-    if (defaultCaption === '') {
+    if (defaultCaption.trim() === '') {
         hideCaption(box, captionNode);
     }
     else {
@@ -11300,7 +11326,7 @@ function renderCaption(box) {
         immediate: false,
     });
     captionNode.on('input', () => {
-        const caption = captionNode.text().trim();
+        const caption = captionNode.text();
         if (caption === '') {
             captionNode.addClass('lake-placeholder');
         }
@@ -11328,8 +11354,8 @@ function renderCaption(box) {
         }
     });
     captionNode.on('focusout', () => {
-        const caption = captionNode.text().trim();
-        if (caption === '') {
+        const caption = captionNode.text();
+        if (caption.trim() === '') {
             hideCaption(box, captionNode);
         }
     });
@@ -11704,7 +11730,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);
             },
         },
         {
@@ -11779,7 +11806,7 @@ var fileBox = {
         }
         else {
             rootNode.on('click', () => {
-                window.open(value.url);
+                editor.config.downloadFile('file', value.url);
             });
         }
     },
@@ -11863,7 +11890,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());
@@ -12294,7 +12321,6 @@ var mention = (editor) => {
     if (editor.readonly) {
         return;
     }
-    const { requestAction, requestMethod, items } = editor.config.mention;
     let menu = null;
     const selectListener = (event, item) => {
         if (menu) {
@@ -12328,9 +12354,14 @@ var mention = (editor) => {
             return;
         }
         if (!menu) {
+            const { requestAction, items } = editor.config.mention;
             if (requestAction) {
+                const { requestMethod, requestWithCredentials, requestHeaders, transformResponse } = editor.config.mention;
                 request({
                     onSuccess: body => {
+                        if (transformResponse) {
+                            body = transformResponse(body);
+                        }
                         if (!body.data) {
                             return;
                         }
@@ -12344,6 +12375,8 @@ var mention = (editor) => {
                     },
                     action: requestAction,
                     method: requestMethod,
+                    withCredentials: requestWithCredentials,
+                    headers: requestHeaders,
                 });
             }
             else {
@@ -13829,20 +13862,29 @@ var slash = (editor) => {
                 if (!fileNode) {
                     return;
                 }
+                const { requestTypes, requestMethod, requestAction, requestFieldName, requestWithCredentials, requestHeaders, transformResponse, } = editor.config[item.name];
                 const target = event.target;
                 const fileNativeNode = fileNode.get(0);
                 const files = target.files || [];
                 for (const file of files) {
-                    uploadFile({
-                        editor,
-                        name: item.name,
+                    insertUploadBox({
+                        selection: editor.selection,
+                        boxName: item.name,
                         file,
+                        requestTypes,
+                        requestMethod,
+                        requestAction,
+                        requestFieldName,
+                        requestWithCredentials,
+                        requestHeaders,
+                        transformResponse,
                         onError: error => {
                             fileNativeNode.value = '';
-                            editor.config.onMessage('error', error);
+                            editor.config.showMessage('error', error);
                         },
                         onSuccess: () => {
                             fileNativeNode.value = '';
+                            editor.history.save();
                         },
                     });
                 }