lakelib 0.1.24 → 0.2.0

package/lib/lake.css

@@ -1271,6 +1271,12 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
 .lake-equation .lake-equation-form textarea:focus-visible {
   outline: 0;
 }
+.lake-equation .lake-equation-form .lake-button-row {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
 /* error status */
 .lake-equation-error {
   padding: 0 6px;

package/lib/lake.js

@@ -21,6 +21,8 @@ if (customElements.get('lake-bookmark') !== undefined) {
 
 var plus = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"></path></svg>";
 
+var question = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z\"></path></svg>";
+
 var more = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M112,60a16,16,0,1,1,16,16A16,16,0,0,1,112,60Zm16,52a16,16,0,1,0,16,16A16,16,0,0,0,128,112Zm0,68a16,16,0,1,0,16,16A16,16,0,0,0,128,180Z\"></path></svg>";
 
 var left = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z\"></path></svg>";
@@ -165,6 +167,7 @@ var table = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\
 // basic
 const icons = new Map([
     ['plus', plus],
+    ['question', question],
     ['more', more],
     ['left', left],
     ['right', right],
@@ -1515,7 +1518,7 @@ class Range {
     selectBox(boxNode) {
         const boxContainer = boxNode.find('.lake-box-container');
         if (boxContainer.length === 0) {
-            throw new Error(`The box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
+            throw new Error(`Box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
         }
         this.setStart(boxContainer, 0);
         this.collapseToStart();
@@ -1524,7 +1527,7 @@ class Range {
     selectBoxStart(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
-            throw new Error(`The box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
+            throw new Error(`Box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
         }
         this.selectNodeContents(boxStrip.eq(0));
         this.collapseToStart();
@@ -1533,7 +1536,7 @@ class Range {
     selectBoxEnd(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
-            throw new Error(`The box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
+            throw new Error(`Box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
         }
         this.selectNodeContents(boxStrip.eq(1));
         this.collapseToStart();
@@ -2931,7 +2934,7 @@ var enUS = {
         image: 'Image',
         file: 'File',
         emoji: 'Emoji',
-        equation: 'Equation',
+        equation: 'Mathematical formula',
         removeColor: 'Remove color',
     },
     slash: {
@@ -2963,8 +2966,8 @@ var enUS = {
         codeBlockDesc: 'Insert a code block',
         video: 'Video',
         videoDesc: 'Insert a video from YouTube',
-        equation: 'Equation',
-        equationDesc: 'Insert TeX expression in text',
+        equation: 'Mathematical formula',
+        equationDesc: 'Insert a TeX expression',
         image: 'Image',
         imageDesc: 'Upload an image',
         file: 'File',
@@ -3005,6 +3008,7 @@ var enUS = {
     },
     equation: {
         save: 'Done',
+        help: 'Supported Functions',
         placeholder: 'Type a TeX expression',
     },
 };
@@ -3056,7 +3060,7 @@ var zhCN = {
         image: '图片',
         file: '文件',
         emoji: '表情',
-        equation: '公式',
+        equation: '数学公式',
         removeColor: '默认',
     },
     slash: {
@@ -3088,7 +3092,7 @@ var zhCN = {
         codeBlockDesc: '插入代码块',
         video: '视频',
         videoDesc: '插入 YouTube 视频',
-        equation: '公式',
+        equation: '数学公式',
         equationDesc: '支持 TeX 语法',
         image: '图片',
         imageDesc: '上传图片',
@@ -3130,7 +3134,8 @@ var zhCN = {
     },
     equation: {
         save: '确定',
-        placeholder: '请输入 TeX 公式',
+        help: '支持的功能',
+        placeholder: '请输入 TeX 表达式',
     },
 };
 
@@ -3181,7 +3186,7 @@ var ja = {
         image: '画像',
         file: 'ファイル',
         emoji: '絵文字',
-        equation: '公式',
+        equation: '数学公式',
         removeColor: 'デフォルト',
     },
     slash: {
@@ -3213,8 +3218,8 @@ var ja = {
         codeBlockDesc: 'コードブロックを挿入',
         video: '動画',
         videoDesc: 'YouTube から動画を挿入',
-        equation: '公式',
-        equationDesc: 'TeX 式を挿入',
+        equation: '数学公式',
+        equationDesc: 'TeX 数式を挿入',
         image: '画像',
         imageDesc: '画像をアップロード',
         file: 'ファイル',
@@ -3255,7 +3260,8 @@ var ja = {
     },
     equation: {
         save: '確認',
-        placeholder: 'TeX 公式を入力してください。',
+        help: 'サポートされている機能',
+        placeholder: 'TeX 数式を入力してください。',
     },
 };
 
@@ -3306,7 +3312,7 @@ var ko = {
         image: '이미지',
         file: '파일',
         emoji: '이모지',
-        equation: '수식',
+        equation: '수학 공식',
         removeColor: '기본색',
     },
     slash: {
@@ -3338,8 +3344,8 @@ var ko = {
         codeBlockDesc: '코드 블록을 삽입',
         video: '동영상',
         videoDesc: '유튜브 동영상을 삽입',
-        equation: '수식',
-        equationDesc: '텍스 표현식을 삽입',
+        equation: '수학 공식',
+        equationDesc: 'TeX 수식을 삽입',
         image: '이미지',
         imageDesc: '이미지를 업로드',
         file: '파일',
@@ -3380,6 +3386,7 @@ var ko = {
     },
     equation: {
         save: '확인',
+        help: '지원되는 기능',
         placeholder: 'TeX 수식을 입력하세요',
     },
 };
@@ -3789,7 +3796,7 @@ class Box {
         if (typeof node === 'string') {
             const component = boxes.get(node);
             if (component === undefined) {
-                throw new Error(`The box "${node}" has not been defined yet.`);
+                throw new Error(`Box "${node}" has not been defined yet.`);
             }
             const type = encode(component.type);
             const name = encode(component.name);
@@ -3802,7 +3809,7 @@ class Box {
             this.node = query(node);
             const component = boxes.get(this.name);
             if (component === undefined) {
-                throw new Error(`The box "${this.name}" has not been defined yet.`);
+                throw new Error(`Box "${this.name}" has not been defined yet.`);
             }
             if (component.value && !this.node.hasAttr('value')) {
                 this.value = component.value;
@@ -3833,7 +3840,7 @@ class Box {
             container.removeClass('lake-box-hovered');
         });
         container.on('click', () => {
-            debug(`The box "${this.name}" (id = ${this.node.id}) value:`);
+            debug(`Box "${this.name}" (id = ${this.node.id}) value:`);
             debug(this.value);
         });
         if (this.type === 'block' && this.node.isContentEditable) {
@@ -3877,7 +3884,7 @@ class Box {
         const container = this.node.closest('div[contenteditable]');
         const editor = container.length > 0 ? editors.get(container.id) : undefined;
         if (!editor) {
-            throw new Error(`The box "${this.name}" (id=${this.node.id}) is not rendered in the editor.`);
+            throw new Error(`Box "${this.name}" (id=${this.node.id}) is not rendered in the editor.`);
         }
         return editor;
     }
@@ -3935,7 +3942,7 @@ class Box {
             container.empty();
             container.append(content);
         }
-        debug(`The box "${this.name}" (id: ${this.node.id}) rendered`);
+        debug(`Box "${this.name}" (id: ${this.node.id}) rendered`);
     }
     // Destroys a rendered box.
     unmount() {
@@ -3943,7 +3950,7 @@ class Box {
         this.event.emit('beforeunmount');
         this.event.removeAllListeners();
         this.node.empty();
-        debug(`The box "${this.name}" (id: ${this.node.id}) unmounted`);
+        debug(`Box "${this.name}" (id: ${this.node.id}) unmounted`);
     }
     // Returns a HTML string of the box.
     getHTML() {
@@ -5352,7 +5359,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.1.24";
+var version = "0.2.0";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5536,7 +5543,7 @@ class Selection {
     insertBox(boxName, boxValue) {
         const box = insertBox(this.range, boxName, boxValue);
         if (!box) {
-            throw new Error(`The box "${boxName}" cannot be inserted outside the editor.`);
+            throw new Error(`Box "${boxName}" cannot be inserted outside the editor.`);
         }
         return box;
     }
@@ -6447,7 +6454,7 @@ class Editor {
             const unmountPlugin = this.unmountPluginMap.get(name);
             if (unmountPlugin) {
                 unmountPlugin();
-                debug(`The plugin "${name}" unmounted`);
+                debug(`Plugin "${name}" unmounted`);
             }
         }
         if (this.toolbar) {
@@ -7236,7 +7243,13 @@ class Toolbar {
                     editor,
                     name: item.name,
                     file,
-                    onError: error => editor.config.onMessage('error', error),
+                    onError: error => {
+                        fileNativeNode.value = '';
+                        editor.config.onMessage('error', error);
+                    },
+                    onSuccess: () => {
+                        fileNativeNode.value = '';
+                    },
                 });
             }
         });
@@ -7570,7 +7583,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 function __awaiter(thisArg, _arguments, P, generator) {
@@ -8286,7 +8299,7 @@ function renderError(box) {
         editor.selection.selectBox(box);
     });
     editor.config.onMessage('warning', `
-    The box "${box.name}" (id: ${box.node.id}) failed to display because window.katex was not found.
+    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());
 }
@@ -8304,6 +8317,7 @@ var equationBox = {
             renderError(box);
             return;
         }
+        const equationConfig = editor.config.equation;
         const defaultCode = (box.value.code || '').trim();
         const viewNode = query('<div class="lake-equation-view" />');
         rootNode.append(viewNode);
@@ -8331,7 +8345,7 @@ var equationBox = {
             }));
             box.updateValue('code', code);
         });
-        const button = new Button({
+        const saveButton = new Button({
             root: formNode.find('.lake-button-row'),
             name: 'save',
             type: 'primary',
@@ -8342,7 +8356,17 @@ var equationBox = {
                 editor.history.save();
             },
         });
-        button.render();
+        saveButton.render();
+        const helpButton = new Button({
+            root: formNode.find('.lake-button-row'),
+            name: 'help',
+            icon: icons.get('question'),
+            tooltip: editor.locale.equation.help(),
+            onClick: () => {
+                window.open(equationConfig.helpUrl);
+            },
+        });
+        helpButton.render();
     },
 };
 
@@ -9771,6 +9795,9 @@ var equation = (editor) => {
     if (!window.katex) {
         return;
     }
+    editor.setPluginConfig('equation', {
+        helpUrl: 'https://katex.org/docs/supported',
+    });
     if (editor.readonly) {
         return;
     }
@@ -10416,6 +10443,12 @@ var backspaceKey = (editor) => {
             editor.history.save();
             return;
         }
+        if ((prevNode.isMark || prevNode.name === 'a') && prevNode.isEmpty) {
+            event.preventDefault();
+            prevNode.remove();
+            editor.history.save();
+            return;
+        }
         if (prevNode.isText && prevNode.text().length === 1 && prevNode.parent().isBlock) {
             event.preventDefault();
             const block = prevNode.closestBlock();
@@ -10922,6 +10955,8 @@ class SlashPopup {
         this.range = null;
         this.noMouseEvent = false;
         this.keyword = null;
+        this.horizontalDirection = 'right';
+        this.verticalDirection = 'bottom';
         this.keydownListener = (event) => {
             if (isKeyHotkey('escape', event)) {
                 event.preventDefault();
@@ -11063,7 +11098,13 @@ class SlashPopup {
                         editor,
                         name: item.name,
                         file,
-                        onError: error => editor.config.onMessage('error', error),
+                        onError: error => {
+                            fileNativeNode.value = '';
+                            editor.config.onMessage('error', error);
+                        },
+                        onSuccess: () => {
+                            fileNativeNode.value = '';
+                        },
                     });
                 }
             });
@@ -11102,7 +11143,7 @@ class SlashPopup {
         }
         return items;
     }
-    position() {
+    position(keepDirection = false) {
         if (!this.range) {
             return;
         }
@@ -11110,13 +11151,27 @@ class SlashPopup {
         const rangeRect = this.range.get().getBoundingClientRect();
         const rangeX = rangeRect.x + window.scrollX;
         const rangeY = rangeRect.y + window.scrollY;
-        if (rangeRect.x + this.container.width() > window.innerWidth) {
+        if (!keepDirection) {
+            if (rangeRect.x + this.container.width() > window.innerWidth) {
+                this.horizontalDirection = 'left';
+            }
+            else {
+                this.horizontalDirection = 'right';
+            }
+            if (rangeRect.y + rangeRect.height + this.container.height() > window.innerHeight) {
+                this.verticalDirection = 'top';
+            }
+            else {
+                this.verticalDirection = 'bottom';
+            }
+        }
+        if (this.horizontalDirection === 'left') {
             this.container.css('left', `${rangeX - this.container.width() + rangeRect.width}px`);
         }
         else {
             this.container.css('left', `${rangeX}px`);
         }
-        if (rangeRect.y + rangeRect.height + this.container.height() > window.innerHeight) {
+        if (this.verticalDirection === 'top') {
             this.container.css('top', `${rangeY - this.container.height() - 5}px`);
         }
         else {
@@ -11146,7 +11201,7 @@ class SlashPopup {
         if (selectedItemNode.length === 0) {
             this.container.find('.lake-slash-item').eq(0).addClass('lake-slash-item-selected');
         }
-        this.position();
+        this.position(true);
     }
     show(range, keyword) {
         const editor = this.editor;