lakelib 0.1.6 → 0.1.7

package/lib/lake.css

@@ -249,6 +249,10 @@ button.lake-text-button span {
   box-shadow: var(--popup-shadow);
   display: none;
 }
+.lake-dropdown[placement="top"] .lake-dropdown-menu {
+  top: auto;
+  bottom: 30px;
+}
 .lake-dropdown .lake-dropdown-menu li {
   display: flex;
   align-items: center;

package/lib/lake.js

@@ -971,8 +971,8 @@ class Nodes {
     }
     // Returns the interior width of the first element, which does not include padding.
     innerWidth() {
-        const paddingLeft = parseInt(this.computedCSS('padding-left'), 10) || 0;
-        const paddingRight = parseInt(this.computedCSS('padding-right'), 10) || 0;
+        const paddingLeft = Number.parseInt(this.computedCSS('padding-left'), 10) || 0;
+        const paddingRight = Number.parseInt(this.computedCSS('padding-right'), 10) || 0;
         return this.width() - paddingLeft - paddingRight;
     }
     // Returns the height of of the first element.
@@ -4380,8 +4380,9 @@ class Dropdown {
         this.config = config;
         this.root = config.root;
         this.locale = config.locale || i18nObject('en-US');
+        const placement = config.placement || 'bottom';
         this.node = query(safeTemplate `
-      <div class="lake-dropdown lake-${config.menuType}-dropdown" name="${config.name}">
+      <div class="lake-dropdown lake-${config.menuType}-dropdown" name="${config.name}" placement="${placement}">
         <button type="button" name="${config.name}" class="lake-dropdown-title">
           <div class="lake-dropdown-${config.icon ? 'icon' : 'text'}"></div>
           <div class="lake-dropdown-down-icon"></div>
@@ -4481,7 +4482,11 @@ class Dropdown {
         menuNode.show(config.menuType === 'color' ? 'flex' : 'block');
         const dropdownNativeNode = dropdownNode.get(0);
         const dropdownRect = dropdownNativeNode.getBoundingClientRect();
-        if (dropdownRect.x + menuNode.width() + 50 > window.innerWidth) {
+        // A overflow width on the left side, greater than 0 indicates an overflow.
+        const leftOverflow = menuNode.width() - (dropdownRect.x + dropdownRect.width);
+        // A overflow width on the right side, greater than 0 indicates an overflow.
+        const rightOverflow = dropdownRect.x + menuNode.width() - window.innerWidth;
+        if (rightOverflow + 50 > 0 && (leftOverflow < 0 || leftOverflow < rightOverflow)) {
             menuNode.css('left', 'auto');
             menuNode.css('right', '0');
         }
@@ -4608,7 +4613,7 @@ class Dropdown {
     }
 }
 
-var version = "0.1.6";
+var version = "0.1.7";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -6345,11 +6350,15 @@ toolbarItems.forEach(item => {
 });
 class Toolbar {
     constructor(config) {
+        this.placement = 'top';
         this.allMenuMap = new Map();
         this.buttonItemList = [];
         this.dropdownItemList = [];
-        this.items = config.items || defaultItems;
         this.root = query(config.root);
+        this.items = config.items || defaultItems;
+        if (config.placement) {
+            this.placement = config.placement;
+        }
         this.container = query('<div class="lake-toolbar" />');
         this.root.addClass('lake-custom-properties');
     }
@@ -6384,6 +6393,7 @@ class Toolbar {
             menuType: item.menuType,
             menuItems: item.menuItems,
             tabIndex: -1,
+            placement: this.placement === 'top' ? 'bottom' : 'top',
             onSelect: value => {
                 editor.focus();
                 item.onSelect(editor, value);
@@ -8525,7 +8535,7 @@ const blockItemListForEnterKey = [
         ],
     },
     {
-        re: /^`+([a-z]*)$/i,
+        re: /^`{3,}([a-z]*)$/i,
         getParameters: (results) => {
             var _a;
             if (!results[1]) {