lakelib 0.1.25 → 0.2.1

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();
@@ -3005,6 +3008,7 @@ var enUS = {
     },
     equation: {
         save: 'Done',
+        help: 'Supported functions',
         placeholder: 'Type a TeX expression',
     },
 };
@@ -3130,6 +3134,7 @@ var zhCN = {
     },
     equation: {
         save: '确定',
+        help: '支持的功能',
         placeholder: '请输入 TeX 表达式',
     },
 };
@@ -3255,6 +3260,7 @@ var ja = {
     },
     equation: {
         save: '確認',
+        help: 'サポートされている機能',
         placeholder: 'TeX 数式を入力してください。',
     },
 };
@@ -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.25";
+var version = "0.2.1";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5531,12 +5538,13 @@ class Selection {
             boxNode = box;
         }
         this.range.selectBox(boxNode);
+        this.sync();
     }
     // Inserts a box into the position of the 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;
     }
@@ -6004,7 +6012,7 @@ class Editor {
             if (this.root.first().length === 0) {
                 return;
             }
-            const range = this.selection.range;
+            const range = this.selection.getCurrentRange();
             const clonedRange = range.clone();
             clonedRange.adjustBox();
             this.container.find('lake-box').each(boxNativeNode => {
@@ -6379,7 +6387,7 @@ class Editor {
         this.overlayContainer.append(artificialCaret);
         scrollToNode(artificialCaret, {
             behavior: 'instant',
-            block: 'center',
+            block: 'nearest',
             inline: 'nearest',
         });
         artificialCaret.remove();
@@ -6447,7 +6455,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 +7244,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 = '';
+                    },
                 });
             }
         });
@@ -8286,7 +8300,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 +8318,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 +8346,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 +8357,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 +9796,9 @@ var equation = (editor) => {
     if (!window.katex) {
         return;
     }
+    editor.setPluginConfig('equation', {
+        helpUrl: 'https://katex.org/docs/supported',
+    });
     if (editor.readonly) {
         return;
     }
@@ -10416,6 +10444,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 +10956,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 +11099,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 +11144,7 @@ class SlashPopup {
         }
         return items;
     }
-    position() {
+    position(keepDirection = false) {
         if (!this.range) {
             return;
         }
@@ -11110,13 +11152,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 +11202,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;