lakelib 0.1.15 → 0.1.16

package/lib/lake.css

@@ -310,7 +310,8 @@ button.lake-primary-button.lake-button-hovered {
   cursor: default;
 }
 .lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered,
-.lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered {
+.lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered,
+.lake-dropdown.lake-character-dropdown button.lake-dropdown-title-hovered {
   background-color: var(--background-hover-color);
 }
 .lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
@@ -380,6 +381,10 @@ button.lake-primary-button.lake-button-hovered {
   top: auto;
   bottom: 30px;
 }
+.lake-dropdown .lake-dropdown-menu.lake-dropdown-menu-with-scroll {
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}
 .lake-dropdown .lake-dropdown-menu li {
   display: flex;
   align-items: center;
@@ -446,6 +451,34 @@ button.lake-primary-button.lake-button-hovered {
 .lake-dropdown .lake-icon-dropdown-menu li .lake-dropdown-menu-text {
   display: none;
 }
+/* character type */
+.lake-dropdown .lake-character-dropdown-menu {
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.lake-dropdown .lake-character-dropdown-menu li {
+  padding: 0;
+  border-radius: 2px;
+}
+.lake-dropdown .lake-character-dropdown-menu li.lake-dropdown-item-hovered {
+  background-color: var(--background-hover-color);
+}
+.lake-dropdown .lake-character-dropdown-menu li.lake-dropdown-item-selected {
+  background-color: var(--background-active-color);
+}
+.lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-check {
+  display: none;
+}
+.lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-icon {
+  display: none;
+}
+.lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-text {
+  text-align: center;
+  font-size: 24px;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+}
 /* color type */
 .lake-dropdown .lake-color-dropdown-menu {
   flex-wrap: wrap;
@@ -939,9 +972,6 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   top: 24px;
   left: auto;
   right: 0;
-  overflow-y: scroll;
-  scrollbar-width: thin;
-  height: 200px;
 }
 .lake-code-block-error {
   font-size: 14px;

package/lib/lake.js

@@ -1,9 +1,7 @@
-import { Base64 } from 'js-base64';
 import EventEmitter from 'eventemitter3';
 import { i18nObject as i18nObject$1 } from 'typesafe-i18n';
-import debounce from 'lodash/debounce';
-import isEqual from 'lodash/isEqual';
-import md5 from 'blueimp-md5';
+import debounce from 'debounce';
+import isEqual from 'fast-deep-equal/es6';
 import { createKeybindingsHandler } from 'tinykeys';
 import 'photoswipe/style.css';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
@@ -145,6 +143,8 @@ var attachment = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=
 
 var emoji$1 = "<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,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z\"></path></svg>";
 
+var specialCharacter = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 32 32\"><path d=\"M22.7373,25A14.3093,14.3093,0,0,0,27,15C27,8.42,22.58,4,16,4S5,8.42,5,15A14.3093,14.3093,0,0,0,9.2627,25H4v2h8V24.7617A12.5683,12.5683,0,0,1,7,15c0-5.4673,3.5327-9,9-9s9,3.5327,9,9a12.5683,12.5683,0,0,1-5,9.7617V27h8V25Z\"/></svg>";
+
 var table = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM40,112H80v32H40Zm56,0H216v32H96ZM216,64V96H40V64ZM40,160H80v32H40Zm176,32H96V160H216v32Z\"></path></svg>";
 
 // These icons are sourced from open source projects.
@@ -224,6 +224,7 @@ const icons = new Map([
     ['video', video$1],
     ['attachment', attachment],
     ['emoji', emoji$1],
+    ['specialCharacter', specialCharacter],
     ['table', table],
 ]);
 
@@ -287,6 +288,28 @@ function inString(string, value, delimiter) {
     return (delimiter + string + delimiter).indexOf(delimiter + value + delimiter) >= 0;
 }
 
+// Creates a Base64-encoded ASCII string from a string.
+function toBase64(value) {
+    const encoder = new TextEncoder();
+    const byteArray = encoder.encode(value);
+    let binaryString = '';
+    byteArray.forEach(byte => {
+        binaryString += String.fromCharCode(byte);
+    });
+    return window.btoa(binaryString);
+}
+
+// Decodes a string of data which has been encoded using Base64 encoding.
+function fromBase64(value) {
+    const binaryString = window.atob(value);
+    const byteArray = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        byteArray[i] = binaryString.charCodeAt(i);
+    }
+    const decoder = new TextDecoder();
+    return decoder.decode(byteArray);
+}
+
 // Converts an alpha value to a hex value.
 function alphaToHex(value) {
     const hexString = Math.round(Number.parseFloat(value) * 255).toString(16);
@@ -3204,11 +3227,11 @@ class Dropdown {
         if (value === '') {
             return [];
         }
-        return JSON.parse(Base64.decode(value));
+        return JSON.parse(fromBase64(value));
     }
     // Updates the value of the node.
     static setValue(node, value) {
-        node.attr('value', Base64.encode(JSON.stringify(value)));
+        node.attr('value', toBase64(JSON.stringify(value)));
     }
     static getMenuMap(menuItems, locale) {
         const menuMap = new Map();
@@ -3241,7 +3264,11 @@ class Dropdown {
       `;
             const listNode = query(listContent);
             menuNode.append(listNode);
-            if (config.menuType === 'color') {
+            if (config.menuType === 'character') {
+                listNode.attr('title', menuText);
+                listNode.find('.lake-dropdown-menu-text').text(menuItem.value);
+            }
+            else if (config.menuType === 'color') {
                 listNode.attr('title', menuText);
                 listNode.find('.lake-dropdown-menu-text').css('background-color', menuItem.value);
             }
@@ -3357,7 +3384,11 @@ class Dropdown {
         });
         menuNode.on('click', event => {
             event.preventDefault();
+            event.stopPropagation();
             const listItem = query(event.target).closest('li');
+            if (listItem.length === 0) {
+                return;
+            }
             const value = listItem.attr('value');
             Dropdown.setValue(dropdownNode, [value]);
             if (textNode.length > 0) {
@@ -3403,6 +3434,10 @@ class Dropdown {
         if (config.menuWidth) {
             menuNode.css('width', config.menuWidth);
         }
+        if (config.menuHeight) {
+            menuNode.addClass('lake-dropdown-menu-with-scroll');
+            menuNode.css('height', config.menuHeight);
+        }
         Dropdown.setValue(dropdownNode, [defaultValue]);
         if (textNode.length > 0) {
             const menuMap = Dropdown.getMenuMap(config.menuItems, this.locale);
@@ -3590,11 +3625,11 @@ class Box {
         if (value === '') {
             return {};
         }
-        return JSON.parse(Base64.decode(value));
+        return JSON.parse(fromBase64(value));
     }
     // Sets the value of the box.
     set value(value) {
-        this.node.attr('value', Base64.encode(JSON.stringify(value)));
+        this.node.attr('value', toBase64(JSON.stringify(value)));
     }
     updateValue(valueKey, valueValue) {
         const value = this.value;
@@ -3918,6 +3953,7 @@ var index = /*#__PURE__*/Object.freeze({
     encode: encode,
     fileSize: fileSize,
     fixNumberedList: fixNumberedList,
+    fromBase64: fromBase64,
     getBox: getBox,
     getCSS: getCSS,
     getDeepest: getDeepest,
@@ -3936,6 +3972,7 @@ var index = /*#__PURE__*/Object.freeze({
     setBlockIndent: setBlockIndent,
     splitNodes: splitNodes,
     template: template,
+    toBase64: toBase64,
     toHex: toHex,
     toNodeList: toNodeList,
     uploadFile: uploadFile,
@@ -5080,7 +5117,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.1.15";
+var version = "0.1.16";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5361,7 +5398,7 @@ class History {
     addIdToBoxes(node) {
         node.find('lake-box').each(nativeNode => {
             const boxNode = new Nodes(nativeNode);
-            const id = md5(`${boxNode.attr('type')}-${boxNode.attr('name')}-${boxNode.attr('value')}`);
+            const id = `${boxNode.attr('name')}-${boxNode.attr('value')}`;
             boxNode.attr('id', id);
         });
     }
@@ -5730,9 +5767,7 @@ class Editor {
                 box.event.emit('blur');
             });
         }, 50, {
-            leading: false,
-            trailing: true,
-            maxWait: 50,
+            immediate: true,
         });
         // Triggers the statechange event when the current selection of the editor is changed.
         this.emitStateChangeEvent = debounce(() => {
@@ -5776,10 +5811,8 @@ class Editor {
             }
             this.event.emit('statechange', state);
             this.state = state;
-        }, 100, {
-            leading: false,
-            trailing: true,
-            maxWait: 100,
+        }, 50, {
+            immediate: false,
         });
         if (!config.root) {
             throw new Error('The root of the config must be specified.');
@@ -6033,8 +6066,12 @@ class Editor {
     }
     // Scrolls to the caret or the range of the selection.
     scrollToCaret() {
+        const range = this.selection.range;
+        if (range.isBox) {
+            return;
+        }
         // Creates an artificial caret that is the same size as the caret at the current caret position.
-        const rangeRect = this.selection.range.getRect();
+        const rangeRect = range.getRect();
         if (rangeRect.x === 0 || rangeRect.y === 0) {
             return;
         }
@@ -6838,6 +6875,7 @@ class Toolbar {
             menuType: item.menuType,
             menuItems: item.menuItems,
             menuWidth: item.menuWidth,
+            menuHeight: item.menuHeight,
             tabIndex: -1,
             placement: this.placement === 'top' ? 'bottom' : 'top',
             onSelect: value => {
@@ -7165,18 +7203,18 @@ const codeBlockBox = {
             defaultValue: langItem ? boxValue.lang : codeBlockConfig.defaultLang,
             tooltip: editor.locale.codeBlock.langType(),
             menuType: 'list',
+            menuHeight: '200px',
             menuItems: langItems.map((item) => ({
                 value: item.value,
                 text: item.text,
             })),
             onSelect: value => {
-                const item = langItemMap.get(value);
-                codeEditor.dispatch({
-                    effects: language.reconfigure(item && item.component ? item.component() : []),
-                });
                 box.updateValue({
                     lang: value,
                 });
+                box.unmount();
+                box.render();
+                editor.selection.selectBox(box);
                 editor.history.save();
             },
         });