lakelib 0.1.4 → 0.1.6

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;
 }
@@ -851,9 +860,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) {
@@ -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);
                 }
             }
@@ -3441,7 +3435,8 @@ function deleteContents(range) {
     if (range.isCollapsed) {
         return;
     }
-    range.adapt();
+    range.adaptBox();
+    range.adaptTable();
     if (range.isInoperative) {
         return;
     }
@@ -4613,7 +4608,7 @@ class Dropdown {
     }
 }
 
-var version = "0.1.4";
+var version = "0.1.6";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -5210,10 +5205,11 @@ class Plugin {
 }
 
 const defaultConfig = {
-    value: '<p><br /><focus /></p>',
+    value: '<p><br /></p>',
     readonly: false,
     spellcheck: false,
     tabIndex: 0,
+    placeholder: '',
     indentWithTab: true,
     lang: 'en-US',
     minChangeSize: 5,
@@ -5221,7 +5217,7 @@ const defaultConfig = {
 class Editor {
     constructor(config) {
         this.unsavedInputData = '';
-        this.stateData = {
+        this.state = {
             appliedItems: [],
             disabledNameMap: new Map(),
             selectedNameMap: new Map(),
@@ -5321,20 +5317,20 @@ class Editor {
                     }
                 }
             }
-            const stateData = {
+            const state = {
                 appliedItems,
                 disabledNameMap,
                 selectedNameMap,
                 selectedValuesMap,
             };
-            if (isEqual(stateData, this.stateData)) {
+            if (isEqual(state, this.state)) {
                 return;
             }
             if (this.toolbar) {
-                this.toolbar.updateState(stateData);
+                this.toolbar.updateState(state);
             }
-            this.event.emit('statechange', stateData);
-            this.stateData = stateData;
+            this.event.emit('statechange', state);
+            this.state = state;
         }, 100, {
             leading: false,
             trailing: true,
@@ -5343,6 +5339,7 @@ class Editor {
         this.emitChangeEvent = (value) => {
             this.rectifyContent();
             this.emitStateChangeEvent();
+            this.togglePlaceholderClass(value);
             this.event.emit('change', value);
         };
         if (!config.root) {
@@ -5365,12 +5362,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;
@@ -5551,6 +5561,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();
@@ -5592,6 +5603,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) {
@@ -5613,6 +5625,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) {
@@ -6416,9 +6431,9 @@ class Toolbar {
         });
     }
     // Updates state of each item such as disabled, selected.
-    updateState(stateData) {
+    updateState(state) {
         var _a;
-        const { appliedItems, disabledNameMap, selectedNameMap, selectedValuesMap } = stateData;
+        const { appliedItems, disabledNameMap, selectedNameMap, selectedValuesMap } = state;
         for (const item of this.buttonItemList) {
             const selectedClass = 'lake-button-selected';
             const buttonNode = this.container.find(`button[name="${item.name}"]`);
@@ -7090,6 +7105,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);
@@ -7180,8 +7196,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');
         });
     },
@@ -7247,10 +7268,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) {
@@ -7988,7 +8010,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 `
@@ -8027,6 +8049,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'),
@@ -8043,11 +8066,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);
                     }
@@ -8099,7 +8126,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();
@@ -8118,7 +8147,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();
@@ -8219,20 +8250,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();