lakelib 0.3.9 → 0.3.11

package/lib/lake.js

@@ -1,8 +1,8 @@
 import EventEmitter from 'eventemitter3';
 import { i18nObject as i18nObject$1 } from 'typesafe-i18n';
+import { isKeyHotkey } from 'is-hotkey';
 import debounce from 'debounce';
 import isEqual from 'fast-deep-equal/es6';
-import { isKeyHotkey } from 'is-hotkey';
 import 'photoswipe/style.css';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@@ -149,6 +149,8 @@ var specialCharacter$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\"
 
 var equation$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M184,72V56H80.65l53.6,67a8,8,0,0,1,0,10l-53.6,67H184V184a8,8,0,0,1,16,0v24a8,8,0,0,1-8,8H64a8,8,0,0,1-6.25-13l60-75-60-75A8,8,0,0,1,64,40H192a8,8,0,0,1,8,8V72a8,8,0,0,1-16,0Z\"></path></svg>";
 
+var twitter$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z\"></path></svg>";
+
 var table$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M216,48H40A16,16,0,0,0,24,64V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM104,144V112h48v32Zm48,16v32H104V160ZM40,112H88v32H40Zm64-16V64h48V96Zm64,16h48v32H168Zm48-16H168V64h48ZM88,64V96H40V64ZM40,160H88v32H40Zm176,32H168V160h48v32Z\"></path></svg>";
 
 var unlink = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M190.63,65.37a32,32,0,0,0-45.19-.06L133.79,77.52a8,8,0,0,1-11.58-11l11.72-12.29a1.59,1.59,0,0,1,.13-.13,48,48,0,0,1,67.88,67.88,1.59,1.59,0,0,1-.13.13l-12.29,11.72a8,8,0,0,1-11-11.58l12.21-11.65A32,32,0,0,0,190.63,65.37ZM122.21,178.48l-11.65,12.21a32,32,0,0,1-45.25-45.25l12.21-11.65a8,8,0,0,0-11-11.58L54.19,133.93a1.59,1.59,0,0,0-.13.13,48,48,0,0,0,67.88,67.88,1.59,1.59,0,0,0,.13-.13l11.72-12.29a8,8,0,1,0-11.58-11ZM208,152H184a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16ZM48,104H72a8,8,0,0,0,0-16H48a8,8,0,0,0,0,16Zm112,72a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V184A8,8,0,0,0,160,176ZM96,80a8,8,0,0,0,8-8V48a8,8,0,0,0-16,0V72A8,8,0,0,0,96,80Z\"></path></svg>";
@@ -263,6 +265,7 @@ const icons = new Map([
     ['emoji', emoji$1],
     ['specialCharacter', specialCharacter$1],
     ['equation', equation$1],
+    ['twitter', twitter$1],
     ['table', table$1],
     // link
     ['unlink', unlink],
@@ -1265,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) {
@@ -2864,6 +2862,15 @@ const toolbarItems = [
             editor.command.execute(value);
         },
     },
+    {
+        name: 'twitter',
+        type: 'button',
+        icon: icons.get('twitter'),
+        tooltip: locale => locale.toolbar.twitter(),
+        onClick: (editor, value) => {
+            editor.command.execute(value);
+        },
+    },
     {
         name: 'heading',
         type: 'dropdown',
@@ -3092,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 => {
@@ -3139,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,
@@ -3174,6 +3182,9 @@ function uploadFile(config) {
         },
         onSuccess: body => {
             xhr = null;
+            if (transformResponse) {
+                body = transformResponse(body);
+            }
             if (!body.url) {
                 box.updateValue('status', 'error');
                 box.render();
@@ -3187,7 +3198,6 @@ function uploadFile(config) {
                 url: body.url,
             });
             box.render();
-            editor.history.save();
             if (onSuccess) {
                 onSuccess();
             }
@@ -3195,6 +3205,9 @@ function uploadFile(config) {
         file,
         action: requestAction,
         method: requestMethod,
+        fieldName: requestFieldName,
+        withCredentials: requestWithCredentials,
+        headers: requestHeaders,
     });
     box.event.on('beforeunmount', () => {
         if (xhr) {
@@ -3318,7 +3331,7 @@ var enUS = {
         formatPainter: 'Format painter',
         link: 'Link',
         hr: 'Horizontal line',
-        video: 'Video',
+        video: 'YouTube',
         codeBlock: 'Code block',
         heading: 'Heading',
         heading1: 'Heading 1',
@@ -3340,6 +3353,7 @@ var enUS = {
         file: 'File',
         emoji: 'Emoji',
         equation: 'Mathematical formula',
+        twitter: 'X (Tweet)',
         removeColor: 'Remove color',
     },
     slash: {
@@ -3379,10 +3393,12 @@ var enUS = {
         hrDesc: 'Insert a horizontal line',
         codeBlock: 'Code block',
         codeBlockDesc: 'Insert a code block',
-        video: 'Video',
-        videoDesc: 'Insert a video from YouTube',
+        video: 'YouTube',
+        videoDesc: 'Insert a YouTube video',
         equation: 'Mathematical formula',
         equationDesc: 'Insert a TeX expression',
+        twitter: 'Tweet',
+        twitterDesc: 'Insert an X (Tweet)',
         image: 'Image',
         imageDesc: 'Upload an image',
         file: 'File',
@@ -3446,7 +3462,7 @@ var enUS = {
     video: {
         embed: 'Embed video',
         remove: 'Delete',
-        description: 'Paste a link to embed a video from YouTube.',
+        description: 'Paste a YouTube link to embed the video.',
         url: 'Link',
         urlError: 'Please enter a valid link.',
     },
@@ -3458,6 +3474,13 @@ var enUS = {
         help: 'Supported functions',
         placeholder: 'Type a TeX expression...',
     },
+    twitter: {
+        embed: 'Embed Tweet',
+        remove: 'Delete',
+        description: 'Paste an X (Twitter) link to embed the post.',
+        url: 'Link',
+        urlError: 'Please enter a valid link.',
+    },
 };
 
 var zhCN = {
@@ -3487,7 +3510,7 @@ var zhCN = {
         formatPainter: '格式刷',
         link: '链接',
         hr: '分割线',
-        video: '视频',
+        video: 'YouTube',
         codeBlock: '代码块',
         heading: '标题',
         heading1: '标题 1',
@@ -3509,6 +3532,7 @@ var zhCN = {
         file: '文件',
         emoji: '表情',
         equation: '数学公式',
+        twitter: 'X (Tweet)',
         removeColor: '默认',
     },
     slash: {
@@ -3548,10 +3572,12 @@ var zhCN = {
         hrDesc: '插入分割线',
         codeBlock: '代码块',
         codeBlockDesc: '插入代码块',
-        video: '视频',
+        video: 'YouTube',
         videoDesc: '插入 YouTube 视频',
         equation: '数学公式',
         equationDesc: '支持 TeX 语法',
+        twitter: 'Tweet',
+        twitterDesc: '插入 Tweet',
         image: '图片',
         imageDesc: '上传图片',
         file: '文件',
@@ -3627,6 +3653,13 @@ var zhCN = {
         help: '支持的功能',
         placeholder: '请输入 TeX 表达式',
     },
+    twitter: {
+        embed: '嵌入 Tweet',
+        remove: '删除',
+        description: '在下面的输入框里，粘贴 X (Twitter) 链接。',
+        url: '链接',
+        urlError: '请输入有效的链接。',
+    },
 };
 
 var ja = {
@@ -3656,7 +3689,7 @@ var ja = {
         formatPainter: '形式ペインタ',
         link: 'リンク',
         hr: '区切り線',
-        video: '動画',
+        video: 'YouTube',
         codeBlock: 'コードブロック',
         heading: '見出し',
         heading1: '見出し 1',
@@ -3678,6 +3711,7 @@ var ja = {
         file: 'ファイル',
         emoji: '絵文字',
         equation: '数式',
+        twitter: 'ツイート',
         removeColor: 'デフォルト',
     },
     slash: {
@@ -3717,10 +3751,12 @@ var ja = {
         hrDesc: '水平線を挿入',
         codeBlock: 'コードブロック',
         codeBlockDesc: 'コードブロックを挿入',
-        video: '動画',
+        video: 'YouTube',
         videoDesc: 'YouTube から動画を挿入',
         equation: '数式',
         equationDesc: 'TeX 数式を挿入',
+        twitter: 'ツイート',
+        twitterDesc: 'ツイートを挿入',
         image: '画像',
         imageDesc: '画像をアップロード',
         file: 'ファイル',
@@ -3796,6 +3832,13 @@ var ja = {
         help: 'サポートされている機能',
         placeholder: 'TeX 数式を入力してください',
     },
+    twitter: {
+        embed: 'ツイートを埋め込む',
+        remove: '削除',
+        description: '下の入力欄に X (Twitter) リンクを貼り付けてください。',
+        url: 'リンク',
+        urlError: '有効なリンクを入力してください。',
+    },
 };
 
 var ko = {
@@ -3825,7 +3868,7 @@ var ko = {
         formatPainter: '형식 복사기',
         link: '링크',
         hr: '구분선',
-        video: '동영상',
+        video: '유튜브',
         codeBlock: '코드 블록',
         heading: '제목',
         heading1: '제목 1',
@@ -3847,6 +3890,7 @@ var ko = {
         file: '파일',
         emoji: '이모지',
         equation: '수학 공식',
+        twitter: '트윗',
         removeColor: '기본 색상',
     },
     slash: {
@@ -3873,7 +3917,7 @@ var ko = {
         checklist: '체크리스트',
         checklistDesc: '체크리스트를 작성',
         table: '표',
-        tableDesc: '표를 삽입',
+        tableDesc: '표를 추가',
         infoAlert: '정보 블록',
         infoAlertDesc: '정보 블록을 작성',
         tipAlert: '팁 블록',
@@ -3883,13 +3927,15 @@ var ko = {
         dangerAlert: '위험 블록',
         dangerAlertDesc: '위험 블록을 작성',
         hr: '구분선',
-        hrDesc: '구분선을 삽입',
+        hrDesc: '구분선을 추가',
         codeBlock: '코드 블록',
-        codeBlockDesc: '코드 블록을 삽입',
-        video: '동영상',
-        videoDesc: '유튜브 동영상을 삽입',
+        codeBlockDesc: '코드 블록을 추가',
+        video: '유튜브',
+        videoDesc: '유튜브 동영상을 추가',
         equation: '수학 공식',
-        equationDesc: 'TeX 수식을 삽입',
+        equationDesc: 'TeX 수식을 추가',
+        twitter: '트윗',
+        twitterDesc: '트윗을 추가',
         image: '이미지',
         imageDesc: '이미지를 업로드',
         file: '파일',
@@ -3908,12 +3954,12 @@ var ko = {
         fitTable: '페이지 너비에 맞게 조정',
         cellBackground: '셀 배경 색상',
         column: '열',
-        insertColumnLeft: '왼쪽에 열을 삽입',
-        insertColumnRight: '오른쪽에 열을 삽입',
+        insertColumnLeft: '왼쪽에 열을 추가',
+        insertColumnRight: '오른쪽에 열을 추가',
         deleteColumn: '열을 삭제',
         row: '행',
-        insertRowAbove: '위에 행을 삽입',
-        insertRowBelow: '아래에 행을 삽입',
+        insertRowAbove: '위에 행을 추가',
+        insertRowBelow: '아래에 행을 추가',
         deleteRow: '행을 삭제',
         merge: '셀을 병합',
         mergeUp: '위쪽으로 셀을 병합',
@@ -3951,9 +3997,9 @@ var ko = {
         remove: '삭제',
     },
     video: {
-        embed: '동영상 삽입',
+        embed: '동영상을 추가',
         remove: '삭제',
-        description: '아래 입력란에 YouTube 링크를 붙여넣으세요.',
+        description: '아래 입력란에 유튜브 링크를 붙여넣으세요.',
         url: '링크',
         urlError: '유효한 링크를 입력하세요.',
     },
@@ -3965,6 +4011,13 @@ var ko = {
         help: '지원되는 기능',
         placeholder: 'TeX 수식을 입력하세요',
     },
+    twitter: {
+        embed: '트윗을 추가',
+        remove: '삭제',
+        description: '아래 입력란에 X (Twitter) 링크를 붙여넣으세요.',
+        url: '링크',
+        urlError: '유효한 링크를 입력하세요.',
+    },
 };
 
 const localeTranslations = {
@@ -4439,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);
                     },
                     onSuccess: () => {
                         fileNativeNode.value = '';
+                        editor.history.save();
                     },
                 });
             }
@@ -4687,9 +4749,7 @@ class Box {
             if (component === undefined) {
                 throw new Error(`Box "${node}" has not been defined yet.`);
             }
-            const type = encode(component.type);
-            const name = encode(component.name);
-            this.node = query(template `<lake-box type="${type}" name="${name}"></lake-box>`);
+            this.node = query(template `<lake-box type="${component.type}" name="${component.name}"></lake-box>`);
             if (component.value) {
                 this.value = component.value;
             }
@@ -4906,6 +4966,281 @@ function getBox(boxNode) {
     return box;
 }
 
+// The CornerToolbar class represents a button group located in the top-right corner of a box.
+class CornerToolbar {
+    constructor(config) {
+        this.config = config;
+        this.locale = this.config.locale || i18nObject('en-US');
+        this.root = query(config.root);
+        this.container = query('<div class="lake-corner-toolbar" />');
+    }
+    appendButton(item) {
+        const buttonNode = query(template `
+      <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);
+        }
+    }
+}
+
+// The Resizer class represents a UI component used to resize images or videos.
+class Resizer {
+    constructor(config) {
+        this.config = config;
+        this.root = query(config.root);
+        this.target = query(config.target);
+        this.container = query(template `
+      <div class="lake-resizer">
+        <div class="lake-resizer-top-left"></div>
+        <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"></div>
+      </div>
+    `);
+    }
+    bindEvents(pointerNode) {
+        const target = this.target;
+        const infoNode = this.container.find('.lake-resizer-info');
+        const isPlus = pointerNode.attr('class').indexOf('-right') >= 0;
+        const initialWidth = target.width();
+        const initialHeight = target.height();
+        const rate = initialHeight / initialWidth;
+        let clientX = 0;
+        let width = 0;
+        // resizing box
+        const pointermoveListener = (event) => {
+            const pointerEvent = event;
+            const diffX = pointerEvent.clientX - clientX;
+            const newWidth = Math.round(isPlus ? width + diffX : width - diffX);
+            const newHeight = Math.round(rate * newWidth);
+            infoNode.text(`${newWidth} x ${newHeight}`);
+            target.css({
+                width: `${newWidth}px`,
+                height: `${newHeight}px`,
+            });
+            if (this.config.onResize) {
+                this.config.onResize(newWidth, newHeight);
+            }
+        };
+        // start resizing
+        const pointerdownListener = (event) => {
+            const pointerEvent = event;
+            const pointerNativeNode = pointerNode.get(0);
+            // The capture will be implicitly released after a pointerup or pointercancel event.
+            // https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
+            try {
+                // Test case throws an exception on Firefox.
+                pointerNativeNode.setPointerCapture(pointerEvent.pointerId);
+            }
+            catch ( /* empty */_a) { /* empty */ }
+            clientX = pointerEvent.clientX;
+            width = target.width();
+            infoNode.text(`${initialWidth} x ${initialHeight}`);
+            infoNode.show();
+            pointerNode.on('pointermove', pointermoveListener);
+        };
+        // stop resizing
+        const pointerupListner = () => {
+            pointerNode.off('pointermove');
+            infoNode.hide();
+            width = target.width();
+            const height = Math.round(rate * width);
+            this.config.onStop(width, height);
+        };
+        // cancel resizing
+        const pointercancelListner = () => {
+            pointerNode.off('pointermove');
+            infoNode.hide();
+        };
+        pointerNode.on('pointerdown', pointerdownListener);
+        pointerNode.on('pointerup', pointerupListner);
+        pointerNode.on('pointercancel', pointercancelListner);
+    }
+    render() {
+        this.bindEvents(this.container.find('.lake-resizer-top-left'));
+        this.bindEvents(this.container.find('.lake-resizer-top-right'));
+        this.bindEvents(this.container.find('.lake-resizer-bottom-left'));
+        this.bindEvents(this.container.find('.lake-resizer-bottom-right'));
+        this.root.append(this.container);
+    }
+}
+
+/**
+ * Returns the localized string.
+ */
+function getLocaleString(locale, value) {
+    return typeof value === 'string' ? value : value(locale);
+}
+/**
+ * Appends a corner toolbar to the iframe box.
+ */
+function appendCornerToolbar(config, box) {
+    const editor = box.getEditor();
+    const boxContainer = box.getContainer();
+    const rootNode = boxContainer.find('.lake-iframe');
+    if (rootNode.find('.lake-corner-toolbar').length > 0) {
+        return;
+    }
+    new CornerToolbar({
+        locale: editor.locale,
+        root: rootNode,
+        items: [
+            {
+                name: 'remove',
+                icon: icons.get('remove'),
+                tooltip: config.deleteButtonText,
+                onClick: event => {
+                    event.stopPropagation();
+                    editor.selection.removeBox(box);
+                    editor.history.save();
+                },
+            },
+        ],
+    }).render();
+}
+/**
+ * Shows the iframe in the box.
+ */
+function showIframe(config, box) {
+    const editor = box.getEditor();
+    const boxContainer = box.getContainer();
+    const value = box.value;
+    const width = value.width || config.width;
+    const height = value.height || config.height;
+    const iframeNode = query('<iframe></iframe>');
+    iframeNode.css({
+        width,
+        height,
+    });
+    const iframeAttributes = config.iframeAttributes(value.url);
+    for (const key of Object.keys(iframeAttributes)) {
+        iframeNode.attr(key, iframeAttributes[key]);
+    }
+    const placeholderNode = query('<div class="lake-iframe-placeholder" />');
+    placeholderNode.css({
+        width,
+        height,
+    });
+    if (config.iframePlaceholder) {
+        placeholderNode.append(config.iframePlaceholder);
+    }
+    const rootNode = boxContainer.find('.lake-iframe');
+    iframeNode.on('load', () => {
+        placeholderNode.remove();
+        if (editor.readonly) {
+            return;
+        }
+        if (config.resize === true && rootNode.find('.lake-resizer').length === 0) {
+            new Resizer({
+                root: rootNode,
+                target: iframeNode,
+                onStop: (newWidth, newHeight) => {
+                    box.updateValue({
+                        width: `${newWidth}px`,
+                        height: `${newHeight}px`,
+                    });
+                    editor.selection.selectBox(box);
+                    editor.history.save();
+                },
+            }).render();
+        }
+    });
+    if (config.validUrl(value.url)) {
+        rootNode.prepend(iframeNode);
+    }
+    else {
+        placeholderNode.css('position', 'static');
+    }
+    rootNode.prepend(placeholderNode);
+    if (config.beforeIframeLoad) {
+        config.beforeIframeLoad(box);
+    }
+}
+/**
+ * Creates an iframe box component with configurable properties.
+ * This component supports rendering an iframe with customizable attributes, resizing, and toolbar functionalities.
+ */
+function createIframeBox(config) {
+    return {
+        type: config.type,
+        name: config.name,
+        render: box => {
+            const editor = box.getEditor();
+            const locale = editor.locale;
+            const value = box.value;
+            const boxContainer = box.getContainer();
+            const rootNode = query('<div class="lake-iframe" />');
+            boxContainer.empty();
+            boxContainer.append(rootNode);
+            if (value.url === undefined) {
+                if (editor.readonly) {
+                    box.node.hide();
+                    return;
+                }
+                const formNode = query(template `
+          <div class="lake-iframe-form">
+            <div class="lake-description">${getLocaleString(locale, config.formDescription)}</div>
+            <div class="lake-input-label">${getLocaleString(locale, config.urlLabel || '')}</div>
+            <div class="lake-input-field">
+              <input type="text" name="url" placeholder="${config.urlPlaceholder}" />
+            </div>
+          </div>
+        `);
+                const button = new Button({
+                    root: formNode.find('.lake-input-field'),
+                    name: 'embed',
+                    type: 'primary',
+                    text: getLocaleString(locale, config.embedButtonText),
+                    onClick: () => {
+                        const url = formNode.find('input[name="url"]').value();
+                        if (!config.validUrl(url)) {
+                            editor.config.onMessage('error', getLocaleString(locale, config.urlError));
+                            return;
+                        }
+                        box.updateValue('url', url);
+                        editor.history.save();
+                        formNode.remove();
+                        showIframe(config, box);
+                    },
+                });
+                formNode.find('input[name="url"]').on('keydown', event => {
+                    if (isKeyHotkey('enter', event)) {
+                        event.preventDefault();
+                        button.node.emit('click');
+                    }
+                });
+                button.render();
+                rootNode.append(formNode);
+            }
+            else {
+                showIframe(config, box);
+            }
+            if (!editor.readonly) {
+                appendCornerToolbar(config, box);
+            }
+        },
+    };
+}
+
 /**
  * The Fragment interface represents a lightweight document object that has no parent.
  * It is designed for efficient manipulation of document structures without affecting the main DOM.
@@ -6273,7 +6608,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.3.9";
+var version = "0.3.11";
 
 // Converts the custom HTML tags to the special tags that can not be parsed by browser.
 function denormalizeValue(value) {
@@ -8490,7 +8825,6 @@ var paste = (editor) => {
         return;
     }
     editor.event.on('paste', event => {
-        const { requestTypes } = editor.config.image;
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -8504,12 +8838,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,
+                        requestTypes,
+                        requestMethod,
+                        requestAction,
+                        requestFieldName,
+                        requestWithCredentials,
+                        requestHeaders,
+                        transformResponse,
                         onError: error => editor.config.onMessage('error', error),
+                        onSuccess: () => editor.history.save(),
                     });
                 }
             }
@@ -10682,124 +11026,6 @@ var codeBlock = (editor) => {
     });
 };
 
-// The CornerToolbar class represents a button group located in the top-right corner of a box.
-class CornerToolbar {
-    constructor(config) {
-        this.config = config;
-        this.locale = this.config.locale || i18nObject('en-US');
-        this.root = query(config.root);
-        this.container = query('<div class="lake-corner-toolbar" />');
-    }
-    appendButton(item) {
-        const buttonNode = query(template `
-      <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);
-        }
-    }
-}
-
-// The Resizer class represents a UI component used to resize images or videos.
-class Resizer {
-    constructor(config) {
-        this.config = config;
-        this.root = query(config.root);
-        this.target = query(config.target);
-        this.container = query(template `
-      <div class="lake-resizer">
-        <div class="lake-resizer-top-left"></div>
-        <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"></div>
-      </div>
-    `);
-    }
-    bindEvents(pointerNode) {
-        const target = this.target;
-        const infoNode = this.container.find('.lake-resizer-info');
-        const isPlus = pointerNode.attr('class').indexOf('-right') >= 0;
-        const initialWidth = target.width();
-        const initialHeight = target.height();
-        const rate = initialHeight / initialWidth;
-        let clientX = 0;
-        let width = 0;
-        // resizing box
-        const pointermoveListener = (event) => {
-            const pointerEvent = event;
-            const diffX = pointerEvent.clientX - clientX;
-            const newWidth = Math.round(isPlus ? width + diffX : width - diffX);
-            const newHeight = Math.round(rate * newWidth);
-            infoNode.text(`${newWidth} x ${newHeight}`);
-            target.css({
-                width: `${newWidth}px`,
-                height: `${newHeight}px`,
-            });
-            if (this.config.onResize) {
-                this.config.onResize(newWidth, newHeight);
-            }
-        };
-        // start resizing
-        const pointerdownListener = (event) => {
-            const pointerEvent = event;
-            const pointerNativeNode = pointerNode.get(0);
-            // The capture will be implicitly released after a pointerup or pointercancel event.
-            // https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
-            try {
-                // Test case throws an exception on Firefox.
-                pointerNativeNode.setPointerCapture(pointerEvent.pointerId);
-            }
-            catch ( /* empty */_a) { /* empty */ }
-            clientX = pointerEvent.clientX;
-            width = target.width();
-            infoNode.text(`${initialWidth} x ${initialHeight}`);
-            infoNode.show();
-            pointerNode.on('pointermove', pointermoveListener);
-        };
-        // stop resizing
-        const pointerupListner = () => {
-            pointerNode.off('pointermove');
-            infoNode.hide();
-            width = target.width();
-            const height = Math.round(rate * width);
-            this.config.onStop(width, height);
-        };
-        // cancel resizing
-        const pointercancelListner = () => {
-            pointerNode.off('pointermove');
-            infoNode.hide();
-        };
-        pointerNode.on('pointerdown', pointerdownListener);
-        pointerNode.on('pointerup', pointerupListner);
-        pointerNode.on('pointercancel', pointercancelListner);
-    }
-    render() {
-        this.bindEvents(this.container.find('.lake-resizer-top-left'));
-        this.bindEvents(this.container.find('.lake-resizer-top-right'));
-        this.bindEvents(this.container.find('.lake-resizer-bottom-left'));
-        this.bindEvents(this.container.find('.lake-resizer-bottom-right'));
-        this.root.append(this.container);
-    }
-}
-
 const alignValueMap = {
     start: 'left',
     end: 'right',
@@ -10832,8 +11058,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);
@@ -11066,11 +11292,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 {
@@ -11093,7 +11319,7 @@ function renderCaption(box) {
         immediate: false,
     });
     captionNode.on('input', () => {
-        const caption = captionNode.text().trim();
+        const caption = captionNode.text();
         if (caption === '') {
             captionNode.addClass('lake-placeholder');
         }
@@ -11121,8 +11347,8 @@ function renderCaption(box) {
         }
     });
     captionNode.on('focusout', () => {
-        const caption = captionNode.text().trim();
-        if (caption === '') {
+        const caption = captionNode.text();
+        if (caption.trim() === '') {
             hideCaption(box, captionNode);
         }
     });
@@ -11428,145 +11654,36 @@ var image = (editor) => {
     });
 };
 
-function getVideoId(url) {
-    const result = /\w+$/.exec(url || '');
+/**
+ * Extracts ID from the specified URL.
+ */
+function getId$1(url) {
+    const result = /[\w\-]+$/.exec(url || '');
     return result ? result[0] : '';
 }
-function appendButtonGroup(box) {
-    const editor = box.getEditor();
-    const boxContainer = box.getContainer();
-    const rootNode = boxContainer.find('.lake-video');
-    if (rootNode.find('.lake-corner-toolbar').length > 0) {
-        return;
-    }
-    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();
-    const boxContainer = box.getContainer();
-    const value = box.value;
-    const width = value.width || 560;
-    const height = value.height || 315;
-    boxContainer.css({
-        width: `${width}px`,
-        height: `${height}px`,
-    });
-    const videoId = getVideoId(value.url);
-    if (videoId === '') {
-        throw new Error(`Invalid link: ${value.url}`);
-    }
-    // YouTube URL: https://www.youtube.com/watch?v=5sMBhDv4sik
-    // The script for embedding YouTube:
-    // <iframe width="560" height="315" src="https://www.youtube.com/embed/5sMBhDv4sik" title="YouTube video player"
-    // frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    // referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-    const iframeNode = query(template `
-    <iframe width="100%" height="${height}" src="https://www.youtube.com/embed/${videoId}" title="YouTube video player"
-      frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-  `);
-    const rootNode = boxContainer.find('.lake-video');
-    if (!editor.readonly) {
-        iframeNode.on('load', () => {
-            appendButtonGroup(box);
-            new Resizer({
-                root: rootNode,
-                target: boxContainer,
-                onResize: (newWidth, newHeight) => {
-                    iframeNode.attr({
-                        height: newHeight.toString(),
-                    });
-                },
-                onStop: (newWidth, newHeight) => {
-                    box.updateValue({
-                        width: newWidth,
-                        height: newHeight,
-                    });
-                    editor.history.save();
-                },
-            }).render();
-        });
-    }
-    rootNode.prepend(iframeNode);
-}
-var videoBox = {
+const videoBox = createIframeBox({
     type: 'inline',
     name: 'video',
-    render: box => {
-        const editor = box.getEditor();
-        const locale = editor.locale;
-        const value = box.value;
-        const boxContainer = box.getContainer();
-        const rootNode = query('<div class="lake-video" />');
-        boxContainer.empty();
-        boxContainer.css({
-            width: '',
-            height: '',
-        });
-        boxContainer.append(rootNode);
-        if (!value.url) {
-            if (editor.readonly) {
-                box.node.hide();
-                return;
-            }
-            const formNode = query(template `
-        <div class="lake-video-form">
-          <div class="lake-row lake-desc-row">${locale.video.description()}</div>
-          <div class="lake-row">${locale.video.url()}</div>
-          <div class="lake-row">
-            <input type="text" name="url" placeholder="https://www.youtube.com/watch?v=..." />
-          </div>
-          <div class="lake-row lake-button-row"></div>
-        </div>
-      `);
-            const button = new Button({
-                root: formNode.find('.lake-button-row'),
-                name: 'embed',
-                type: 'primary',
-                text: locale.video.embed(),
-                onClick: () => {
-                    const url = formNode.find('input[name="url"]').value();
-                    if (url.indexOf('https://www.youtube.com/') < 0 || getVideoId(url) === '') {
-                        editor.config.onMessage('error', locale.video.urlError());
-                        return;
-                    }
-                    box.updateValue('url', url);
-                    editor.history.save();
-                    formNode.remove();
-                    showVideo(box);
-                },
-            });
-            formNode.find('input[name="url"]').on('keydown', event => {
-                if (isKeyHotkey('enter', event)) {
-                    event.preventDefault();
-                    button.node.emit('click');
-                }
-            });
-            button.render();
-            rootNode.append(formNode);
-            appendButtonGroup(box);
-        }
-        else {
-            showVideo(box);
-        }
-    },
-};
-
+    width: '560px',
+    height: '315px',
+    formDescription: locale => locale.video.description(),
+    urlLabel: locale => locale.video.url(),
+    urlPlaceholder: 'https://www.youtube.com/watch?v=...',
+    embedButtonText: locale => locale.video.embed(),
+    deleteButtonText: locale => locale.video.remove(),
+    validUrl: url => url.indexOf('https://www.youtube.com/') === 0 && getId$1(url) !== '',
+    urlError: locale => locale.video.urlError(),
+    iframePlaceholder: icons.get('video'),
+    iframeAttributes: url => ({
+        src: `https://www.youtube.com/embed/${getId$1(url)}`,
+        title: 'YouTube video player',
+        frameborder: '0',
+        allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
+        referrerpolicy: 'strict-origin-when-cross-origin',
+        allowfullscreen: 'true',
+    }),
+    resize: true,
+});
 var video = (editor) => {
     if (editor.readonly) {
         return;
@@ -11576,7 +11693,10 @@ var video = (editor) => {
             const box = editor.selection.insertBox('video', value);
             editor.history.save();
             if (box) {
-                box.getContainer().find('input[name="url"]').focus();
+                const urlInput = box.getContainer().find('input[name="url"]');
+                if (urlInput.length > 0) {
+                    urlInput.focus();
+                }
             }
         },
     });
@@ -12193,7 +12313,6 @@ var mention = (editor) => {
     if (editor.readonly) {
         return;
     }
-    const { requestAction, requestMethod, items } = editor.config.mention;
     let menu = null;
     const selectListener = (event, item) => {
         if (menu) {
@@ -12227,9 +12346,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;
                         }
@@ -12243,6 +12367,8 @@ var mention = (editor) => {
                     },
                     action: requestAction,
                     method: requestMethod,
+                    withCredentials: requestWithCredentials,
+                    headers: requestHeaders,
                 });
             }
             else {
@@ -12297,6 +12423,81 @@ var mention = (editor) => {
     };
 };
 
+/**
+ * Extracts ID from the specified URL.
+ */
+function getId(url) {
+    const result = /\d+$/.exec(url || '');
+    return result ? result[0] : '';
+}
+/**
+ * Returns the current theme.
+ */
+function getTheme() {
+    return document.documentElement.classList.contains('lake-dark') ? 'dark' : 'light';
+}
+const twitterBox = createIframeBox({
+    type: 'inline',
+    name: 'twitter',
+    width: '550px',
+    height: '300px',
+    formDescription: locale => locale.twitter.description(),
+    urlLabel: locale => locale.twitter.url(),
+    urlPlaceholder: 'https://x.com/username/status/...',
+    embedButtonText: locale => locale.twitter.embed(),
+    deleteButtonText: locale => locale.twitter.remove(),
+    validUrl: url => (url.indexOf('https://x.com/') === 0 || url.indexOf('https://twitter.com/') === 0) && getId(url) !== '',
+    urlError: locale => locale.twitter.urlError(),
+    iframePlaceholder: icons.get('twitter'),
+    iframeAttributes: url => {
+        return {
+            src: `https://platform.twitter.com/embed/Tweet.html?id=${getId(url)}&theme=${getTheme()}`,
+            title: 'Twitter tweet',
+            scrolling: 'no',
+            frameborder: '0',
+            allowtransparency: 'true',
+            allowfullscreen: 'true',
+        };
+    },
+    beforeIframeLoad: box => {
+        const boxContainer = box.getContainer();
+        const placeholder = boxContainer.find('.lake-iframe-placeholder');
+        const iframe = boxContainer.find('iframe');
+        if (getTheme() === 'dark') {
+            iframe.css('border-radius', '13px');
+        }
+        const messageListener = (event) => {
+            if (event.origin === 'https://platform.twitter.com') {
+                const params = event.data['twttr.embed'].params;
+                const height = params[0].height;
+                if (height > 0) {
+                    placeholder.css('height', `${height}px`);
+                    iframe.css('height', `${height}px`);
+                    window.removeEventListener('message', messageListener);
+                }
+            }
+        };
+        window.addEventListener('message', messageListener);
+    },
+});
+var twitter = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
+    editor.command.add('twitter', {
+        execute: (value) => {
+            const box = editor.selection.insertBox('twitter', value);
+            editor.history.save();
+            if (box) {
+                const urlInput = box.getContainer().find('input[name="url"]');
+                if (urlInput.length > 0) {
+                    urlInput.focus();
+                }
+            }
+        },
+    });
+};
+
 const headingTypeMap = new Map([
     ['#', 'h1'],
     ['##', 'h2'],
@@ -13489,6 +13690,16 @@ const slashItems = [
             editor.command.execute(value);
         },
     },
+    {
+        name: 'twitter',
+        type: 'button',
+        icon: icons.get('twitter'),
+        title: locale => locale.slash.twitter(),
+        description: locale => locale.slash.twitterDesc(),
+        onClick: (editor, value) => {
+            editor.command.execute(value);
+        },
+    },
     {
         name: 'image',
         type: 'upload',
@@ -13643,20 +13854,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);
                         },
                         onSuccess: () => {
                             fileNativeNode.value = '';
+                            editor.history.save();
                         },
                     });
                 }
@@ -13736,6 +13956,7 @@ Editor.box.add(imageBox);
 Editor.box.add(videoBox);
 Editor.box.add(fileBox);
 Editor.box.add(mentionBox);
+Editor.box.add(twitterBox);
 Editor.plugin.add('copy', copy);
 Editor.plugin.add('cut', cut);
 Editor.plugin.add('paste', paste);
@@ -13772,6 +13993,7 @@ Editor.plugin.add('emoji', emoji);
 Editor.plugin.add('equation', equation);
 Editor.plugin.add('specialCharacter', specialCharacter);
 Editor.plugin.add('mention', mention);
+Editor.plugin.add('twitter', twitter);
 Editor.plugin.add('markdown', markdown);
 Editor.plugin.add('enterKey', enterKey);
 Editor.plugin.add('shiftEnterKey', shiftEnterKey);
@@ -13782,5 +14004,5 @@ Editor.plugin.add('arrowKeys', arrowKeys);
 Editor.plugin.add('escapeKey', escapeKey);
 Editor.plugin.add('slash', slash);
 
-export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, addMark, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, template, toBookmark, toHex };
+export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, addMark, createIframeBox, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, template, toBookmark, toHex };
 //# sourceMappingURL=lake.js.map