lakelib 0.1.5 → 0.1.7

package/lib/lake.css

@@ -34,6 +34,7 @@
 
 .lake-container {
   box-sizing: content-box;
+  position: relative;
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
@@ -48,6 +49,14 @@
   color: inherit;
   background: var(--selection-background-color);
 }
+.lake-container.lake-show-placeholder::before {
+  position: absolute;
+  top: 8px;
+  left: 12px;
+  color: var(--secondary-text-color);
+  content: attr(placeholder);
+  pointer-events: none;
+}
 .lake-container bookmark {
   display: inline;
 }
@@ -240,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;
@@ -851,9 +864,6 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
 lake-box[name="codeBlock"] {
   margin: 16px 0;
 }
-lake-box[name="codeBlock"] .lake-box-container {
-  overflow-x: auto;
-}
 lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
 lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
   border-color: var(--box-border-color);

package/lib/lake.js

@@ -330,14 +330,6 @@ function modifierText(value, userAgent) {
     return value.replace(/(^|\+|\s)mod(\+|\s|$)/g, `$1${modText}$2`);
 }
 
-function forEach(map, callback) {
-    for (const key in map) {
-        if (callback(key, map[key]) === false) {
-            break;
-        }
-    }
-}
-
 // Returns a property value of all CSS properties of an element
 function getCSS(element, propertyName) {
     const camelPropertyName = camelCase(propertyName);
@@ -897,9 +889,9 @@ class Nodes {
     attr(attributeName, value) {
         var _a;
         if (typeof attributeName === 'object') {
-            forEach(attributeName, (name, val) => {
-                this.attr(name, val);
-            });
+            for (const name of Object.keys(attributeName)) {
+                this.attr(name, attributeName[name]);
+            }
             return this;
         }
         if (value === undefined) {
@@ -956,9 +948,9 @@ class Nodes {
     }
     css(propertyName, value) {
         if (typeof propertyName === 'object') {
-            forEach(propertyName, (name, val) => {
-                this.css(name, val);
-            });
+            for (const name of Object.keys(propertyName)) {
+                this.css(name, propertyName[name]);
+            }
             return this;
         }
         if (value === undefined) {
@@ -979,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.
@@ -2751,7 +2743,6 @@ var index = /*#__PURE__*/Object.freeze({
     denormalizeValue: denormalizeValue,
     encode: encode,
     fixNumberedList: fixNumberedList,
-    forEach: forEach,
     getCSS: getCSS,
     getDeepest: getDeepest,
     inString: inString,
@@ -2908,9 +2899,9 @@ class Box {
             value[valueKey] = valueValue;
         }
         else {
-            forEach(valueKey, (key, val) => {
-                value[key] = val;
-            });
+            for (const key of Object.keys(valueKey)) {
+                value[key] = valueKey[key];
+            }
         }
         this.value = value;
     }
@@ -2966,6 +2957,7 @@ class Box {
         boxData[this.node.id] = {};
         effectData[this.node.id].setup = [];
         effectData[this.node.id].cleanup = [];
+        this.event.removeAllListeners();
         this.node.empty();
         debug(`Box '${this.name}' (id = ${this.node.id}) unmounted`);
     }
@@ -3141,11 +3133,13 @@ class HTMLParser {
                 if (attr.name === 'style') {
                     const styleRules = attributeRules.style;
                     const styleMap = new Map();
-                    forEach(parseStyle(attr.value), (key, value) => {
+                    const styleData = parseStyle(attr.value);
+                    for (const key of Object.keys(styleData)) {
+                        const value = styleData[key];
                         if (styleRules[key] && HTMLParser.matchRule(styleRules[key], value)) {
                             styleMap.set(key, value);
                         }
-                    });
+                    }
                     attributeMap.set('style', styleMap);
                 }
             }
@@ -4386,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>
@@ -4487,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');
         }
@@ -4614,7 +4613,7 @@ class Dropdown {
     }
 }
 
-var version = "0.1.5";
+var version = "0.1.7";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -5215,6 +5214,7 @@ const defaultConfig = {
     readonly: false,
     spellcheck: false,
     tabIndex: 0,
+    placeholder: '',
     indentWithTab: true,
     lang: 'en-US',
     minChangeSize: 5,
@@ -5344,6 +5344,7 @@ class Editor {
         this.emitChangeEvent = (value) => {
             this.rectifyContent();
             this.emitStateChangeEvent();
+            this.togglePlaceholderClass(value);
             this.event.emit('change', value);
         };
         if (!config.root) {
@@ -5366,12 +5367,25 @@ class Editor {
             spellcheck: this.config.spellcheck ? 'true' : 'false',
             tabindex: this.config.tabIndex.toString(),
         });
+        if (this.config.placeholder !== '') {
+            this.container.attr('placeholder', this.config.placeholder);
+        }
         this.selection = new Selection(this.container);
         this.command = new Command(this.selection);
         this.history = new History(this.selection);
         this.keystroke = new Keystroke(this.container);
         editors.set(this.container.id, this);
     }
+    togglePlaceholderClass(value) {
+        value = denormalizeValue(value);
+        const className = 'lake-show-placeholder';
+        if (value.replace('<focus />', '') === '<p><br /></p>') {
+            this.container.addClass(className);
+        }
+        else {
+            this.container.removeClass(className);
+        }
+    }
     inputInBoxStrip() {
         const selection = this.selection;
         const range = selection.range;
@@ -5552,6 +5566,7 @@ class Editor {
         const htmlParser = new HTMLParser(value);
         const fragment = htmlParser.getFragment();
         this.container.empty();
+        this.togglePlaceholderClass(htmlParser.getHTML());
         this.container.append(fragment);
         Editor.box.renderAll(this);
         this.selection.synByBookmark();
@@ -5593,6 +5608,7 @@ class Editor {
         this.containerWrapper.append(this.container);
         this.containerWrapper.append(this.overlayContainer);
         query(document.body).append(this.popupContainer);
+        this.togglePlaceholderClass(htmlParser.getHTML());
         this.container.append(fragment);
         Editor.plugin.loadAll(this);
         if (!this.readonly) {
@@ -5614,6 +5630,9 @@ class Editor {
     }
     // Destroys a rendered editor.
     unmount() {
+        this.event.removeAllListeners();
+        this.command.event.removeAllListeners();
+        this.history.event.removeAllListeners();
         this.root.empty();
         this.popupContainer.remove();
         if (!this.readonly) {
@@ -6331,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');
     }
@@ -6370,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);
@@ -7091,6 +7115,7 @@ const codeBlockBox = {
         }
         const codeBlockNode = query('<div class="lake-code-block" />');
         const container = box.getContainer();
+        container.css('width', `${editor.container.innerWidth() - 2}px`);
         container.empty();
         container.append(codeBlockNode);
         const codeBlockNativeNode = codeBlockNode.get(0);
@@ -7181,8 +7206,13 @@ const codeBlockBox = {
         });
         dropdown.render();
         box.setData('codeEditor', codeEditor);
+        const resizeListener = () => {
+            container.css('width', `${editor.container.innerWidth() - 2}px`);
+        };
+        editor.event.on('resize', resizeListener);
         box.useEffect(() => () => {
             codeEditor.destroy();
+            editor.event.off('resize', resizeListener);
             debug('CodeMirror destroyed');
         });
     },
@@ -7248,10 +7278,11 @@ const blockSelector = Array.from(blockTagNames).join(',');
 function getPasteElementRules() {
     const rules = getElementRules();
     rules.div = rules.p;
-    forEach(rules, (key, attributeRules) => {
+    for (const key of Object.keys(rules)) {
+        const attributeRules = rules[key];
         delete attributeRules.id;
         delete attributeRules.class;
-    });
+    }
     return rules;
 }
 function fixNestedBlocks(block) {
@@ -7989,7 +8020,7 @@ var formatPainter = (editor) => {
 class LinkPopup {
     constructor(config) {
         this.linkNode = null;
-        this.event = new EventEmitter();
+        this.config = config;
         this.root = config.root;
         this.locale = config.locale || i18nObject('en-US');
         this.container = query(safeTemplate `
@@ -8028,6 +8059,7 @@ class LinkPopup {
     }
     // Copy link to clipboard
     appendCopyButton() {
+        const config = this.config;
         let timeoutId = null;
         const button = new Button({
             root: this.container.find('.lake-url-row'),
@@ -8044,11 +8076,15 @@ class LinkPopup {
                     svgNode.hide();
                     if (error) {
                         svgNode.eq(2).show('inline');
-                        this.event.emit('copy', error);
+                        if (config.onCopy) {
+                            config.onCopy(error);
+                        }
                         return;
                     }
                     svgNode.eq(1).show('inline');
-                    this.event.emit('copy', error);
+                    if (config.onCopy) {
+                        config.onCopy(error);
+                    }
                     if (timeoutId) {
                         window.clearTimeout(timeoutId);
                     }
@@ -8100,7 +8136,9 @@ class LinkPopup {
                 const linkNode = this.linkNode;
                 this.save();
                 this.hide();
-                this.event.emit('save', linkNode);
+                if (this.config.onSave) {
+                    this.config.onSave(linkNode);
+                }
             },
         });
         button.render();
@@ -8119,7 +8157,9 @@ class LinkPopup {
                 const lastChild = this.linkNode.last();
                 this.linkNode.remove(true);
                 this.hide();
-                this.event.emit('remove', lastChild);
+                if (this.config.onRemove) {
+                    this.config.onRemove(lastChild);
+                }
             },
         });
         button.render();
@@ -8220,20 +8260,20 @@ var link = (editor) => {
     const popup = new LinkPopup({
         root: editor.popupContainer,
         locale: editor.locale,
-    });
-    popup.event.on('save', node => {
-        const range = editor.selection.range;
-        range.setStartAfter(node);
-        range.collapseToStart();
-        editor.selection.addRangeToNativeSelection();
-        editor.history.save();
-    });
-    popup.event.on('remove', node => {
-        const range = editor.selection.range;
-        range.setStartAfter(node);
-        range.collapseToStart();
-        editor.selection.addRangeToNativeSelection();
-        editor.history.save();
+        onSave: node => {
+            const range = editor.selection.range;
+            range.setStartAfter(node);
+            range.collapseToStart();
+            editor.selection.addRangeToNativeSelection();
+            editor.history.save();
+        },
+        onRemove: node => {
+            const range = editor.selection.range;
+            range.setStartAfter(node);
+            range.collapseToStart();
+            editor.selection.addRangeToNativeSelection();
+            editor.history.save();
+        },
     });
     editor.root.on('scroll', () => {
         popup.updatePosition();
@@ -8495,7 +8535,7 @@ const blockItemListForEnterKey = [
         ],
     },
     {
-        re: /^`+([a-z]*)$/i,
+        re: /^`{3,}([a-z]*)$/i,
         getParameters: (results) => {
             var _a;
             if (!results[1]) {