lakelib 0.0.5 → 0.0.7

package/lib/lake.css

@@ -35,7 +35,10 @@
 .lake-container {
   font-family: var(--font-family);
   font-size: 16px;
+  font-weight: normal;
+  line-height: normal;
   color: var(--text-color);
+  background-color: #fff;
   padding: 16px 24px;
 }
 .lake-container:focus {
@@ -91,10 +94,11 @@
   background-color: #0000000a;
 }
 
-.lake-button {
+button.lake-button {
+  box-sizing: content-box;
   border-radius: 5px;
   border: 0;
-  font-family: var(--font-family);
+  font-family: Arial;
   font-size: 14px;
   color: var(--text-color);
   background-color: #fff;
@@ -104,41 +108,42 @@
   cursor: pointer;
   user-select: none;
 }
-.lake-button:focus-visible {
+button.lake-button:focus-visible {
   outline: var(--button-outline);
 }
-.lake-button[disabled] {
+button.lake-button[disabled] {
   opacity: 0.25;
   cursor: default;
 }
-.lake-button svg {
+button.lake-button svg {
+  display: inline-block;
   width: 16px;
   height: 16px;
   margin: 6px;
 }
-.lake-icon-button.lake-button-hovered {
+button.lake-icon-button.lake-button-hovered {
   background-color: var(--background-hover-color);
 }
-.lake-icon-button.lake-button-selected {
+button.lake-icon-button.lake-button-selected {
   background-color: var(--background-active-color);
 }
-.lake-text-button {
+button.lake-text-button {
   background-color: transparent;
   border: 1px solid var(--border-color);
   padding: 8px 16px;
 }
-.lake-text-button.lake-button-hovered {
+button.lake-text-button.lake-button-hovered {
   background-color: var(--background-hover-color);
 }
-.lake-text-button.lake-button-selected {
+button.lake-text-button.lake-button-selected {
   background-color: var(--background-active-color);
 }
-.lake-text-button svg {
+button.lake-text-button svg {
   background-color: transparent;
   margin: 0 6px 0 0;
   vertical-align: middle;
 }
-.lake-text-button span {
+button.lake-text-button span {
   display: inline-block;
   line-height: 16px;
   vertical-align: middle;
@@ -151,30 +156,34 @@
   font-size: 14px;
   user-select: none;
 }
-.lake-dropdown .lake-dropdown-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0;
-  margin-right: 4px;
+.lake-dropdown button.lake-dropdown-title {
+  box-sizing: content-box;
   border-radius: 5px;
   border: 0;
+  font-family: Arial;
   font-size: 14px;
+  color: var(--text-color);
   background-color: #fff;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-right: 4px;
   cursor: pointer;
 }
-.lake-dropdown[disabled] .lake-dropdown-title {
+.lake-dropdown[disabled] button.lake-dropdown-title {
   opacity: 0.25;
   cursor: default;
 }
-.lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
+.lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered {
   background-color: var(--background-hover-color);
 }
-.lake-dropdown .lake-dropdown-title.lake-dropdown-title-no-down {
+.lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
   margin-right: 0;
 }
 .lake-dropdown .lake-dropdown-text {
   height: 16px;
+  line-height: normal;
   margin: 6px;
   overflow: hidden;
   white-space: nowrap;
@@ -199,8 +208,8 @@
   left: 0;
   bottom: 0;
 }
-.lake-dropdown .lake-dropdown-title-no-down .lake-dropdown-icon svg,
-.lake-dropdown .lake-dropdown-title-no-down .lake-dropdown-icon img {
+.lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon svg,
+.lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon img {
   margin: 6px;
 }
 .lake-dropdown .lake-dropdown-down-icon {
@@ -217,6 +226,7 @@
   fill: var(--secondary-text-color);
 }
 .lake-dropdown .lake-dropdown-menu {
+  box-sizing: content-box;
   position: absolute;
   top: 30px;
   left: 0;
@@ -235,9 +245,9 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+  margin: 0;
 }
 .lake-dropdown .lake-list-dropdown-menu li {
-  margin: 0;
   padding: 6px 24px 6px 10px;
 }
 .lake-dropdown .lake-list-dropdown-menu li.lake-dropdown-item-hovered {
@@ -308,6 +318,7 @@
 }
 .lake-dropdown .lake-color-dropdown-menu li .lake-dropdown-menu-text {
   font-size: 0;
+  box-sizing: content-box;
   border: 1px solid var(--background-hover-color);
   border-radius: 2px;
   width: 16px;
@@ -330,11 +341,18 @@
   height: auto;
 }
 
+.lake-popup {
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+  color: var(--text-color);
+}
 .lake-popup input[type="text"] {
+  box-sizing: content-box;
   font-family: var(--font-family);
   font-size: 14px;
   color: var(--text-color);
-  width: 200px;
   border-radius: 5px;
   border: 1px solid var(--input-border-color);
   padding: 4px 10px;
@@ -544,6 +562,7 @@
 }
 
 .lake-container table {
+  box-sizing: content-box;
   border-collapse: collapse;
   border: 1px solid var(--border-color);
   margin-bottom: 8px;
@@ -917,6 +936,11 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 }
 
 .lake-toolbar {
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+  color: var(--text-color);
   background-color: #fff;
   padding: 4px;
   display: flex;
@@ -924,6 +948,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   align-items: center;
 }
 .lake-toolbar .lake-toolbar-divider {
+  box-sizing: content-box;
   width: 1px;
   height: 20px;
   margin: 0 4px;

package/lib/lake.js

@@ -1,6 +1,7 @@
 import { Base64 } from 'js-base64';
 import EventEmitter from 'eventemitter3';
 import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
 import md5 from 'blueimp-md5';
 import { createKeybindingsHandler } from 'tinykeys';
 import { i18nObject as i18nObject$1 } from 'typesafe-i18n';
@@ -1392,7 +1393,7 @@ class Range {
             throw new Error(`The box cannot be selected because the box '${boxNode.attr('name')}' (id=${boxNode.id}) has not been rendered yet.`);
         }
         this.selectNodeContents(boxStrip.eq(0));
-        this.collapseToEnd();
+        this.collapseToStart();
     }
     // Sets the range to the start position of the box.
     selectBoxEnd(boxNode) {
@@ -1401,7 +1402,7 @@ class Range {
             throw new Error(`The box cannot be selected because the box '${boxNode.attr('name')}' (id=${boxNode.id}) has not been rendered yet.`);
         }
         this.selectNodeContents(boxStrip.eq(1));
-        this.collapseToEnd();
+        this.collapseToStart();
     }
     // Collapses the range and sets the range to the beginning of the contents of the specified node.
     shrinkBefore(node) {
@@ -4294,7 +4295,7 @@ class Dropdown {
     }
 }
 
-var version = "0.0.4";
+var version = "0.0.7";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -4742,7 +4743,7 @@ class History {
     pause() {
         this.canSave = false;
     }
-    save() {
+    save(emitSaveEvent = true) {
         if (!this.canSave) {
             return;
         }
@@ -4758,7 +4759,9 @@ class History {
             this.list.shift();
             this.index = this.list.length;
         }
-        this.event.emit('save', value);
+        if (emitSaveEvent) {
+            this.event.emit('save', denormalizeValue(value));
+        }
         debug(`History saved, the last index is ${this.index}`);
     }
 }
@@ -4902,11 +4905,17 @@ const defaultConfig = {
 class Editor {
     constructor(config) {
         this.unsavedInputData = '';
+        this.stateData = {
+            appliedItems: [],
+            disabledNameMap: new Map(),
+            selectedNameMap: new Map(),
+            selectedValuesMap: new Map(),
+        };
         this.isComposing = false;
         this.event = new EventEmitter();
         this.box = Editor.box;
         this.beforeunloadListener = () => {
-            this.commitUnsavedInputData();
+            this.history.save();
         };
         this.selectionchangeListener = () => {
             this.selection.syncByRange();
@@ -5002,10 +5011,14 @@ class Editor {
                 selectedNameMap,
                 selectedValuesMap,
             };
+            if (isEqual(stateData, this.stateData)) {
+                return;
+            }
             if (this.toolbar) {
                 this.toolbar.updateState(stateData);
             }
             this.event.emit('statechange', stateData);
+            this.stateData = stateData;
         }, 100, {
             leading: false,
             trailing: true,
@@ -5076,11 +5089,18 @@ class Editor {
         this.container.on('compositionend', () => {
             this.isComposing = false;
         });
-        this.container.on('beforeinput', () => {
+        this.container.on('beforeinput', event => {
+            const inputEvent = event;
             const range = this.selection.range;
             if (range.isBoxStart || range.isBoxEnd) {
                 this.commitUnsavedInputData();
+                return;
             }
+            if (inputEvent.inputType === 'insertText' ||
+                inputEvent.inputType === 'insertCompositionText') {
+                return;
+            }
+            this.commitUnsavedInputData();
         });
         this.container.on('input', event => {
             const inputEvent = event;
@@ -5096,21 +5116,22 @@ class Editor {
                     this.event.emit('input', inputEvent);
                     return;
                 }
+                if (range.isBoxStart || range.isBoxEnd) {
+                    this.inputInBoxStrip();
+                    this.history.save();
+                    this.event.emit('input', inputEvent);
+                    return;
+                }
                 if (inputEvent.inputType === 'insertText' ||
                     inputEvent.inputType === 'insertCompositionText') {
-                    if (range.isBoxStart || range.isBoxEnd) {
-                        this.inputInBoxStrip();
-                    }
-                    else {
-                        this.unsavedInputData += (_a = inputEvent.data) !== null && _a !== void 0 ? _a : '';
-                        if (this.unsavedInputData.length < this.config.minChangeSize) {
-                            this.event.emit('input', inputEvent);
-                            return;
-                        }
+                    this.unsavedInputData += (_a = inputEvent.data) !== null && _a !== void 0 ? _a : '';
+                    if (this.unsavedInputData.length < this.config.minChangeSize) {
+                        this.event.emit('input', inputEvent);
+                        this.emitChangeEvent(this.getValue());
+                        return;
                     }
                 }
                 this.history.save();
-                this.unsavedInputData = '';
                 this.event.emit('input', inputEvent);
             }, 0);
         });
@@ -5168,7 +5189,7 @@ class Editor {
     // Saves the input data which is unsaved.
     commitUnsavedInputData() {
         if (this.unsavedInputData.length > 0) {
-            this.history.save();
+            this.history.save(false);
             this.unsavedInputData = '';
         }
     }
@@ -6266,7 +6287,6 @@ const defaultItems = [
     'redo',
     '|',
     'heading',
-    'fontSize',
     '|',
     'formatPainter',
     'removeFormat',
@@ -6374,9 +6394,9 @@ class Toolbar {
         });
     }
     // Updates state of each item such as disabled, selected.
-    updateState(data) {
+    updateState(stateData) {
         var _a;
-        const { appliedItems, disabledNameMap, selectedNameMap, selectedValuesMap } = data;
+        const { appliedItems, disabledNameMap, selectedNameMap, selectedValuesMap } = stateData;
         for (const item of this.buttonItemList) {
             const selectedClass = 'lake-button-selected';
             const buttonNode = this.container.find(`button[name="${item.name}"]`);
@@ -6645,6 +6665,7 @@ function openFullScreen(box) {
         dataSource,
         mainClass: 'lake-pswp',
         zoom: false,
+        returnFocus: false,
         arrowPrevSVG: icons.get('left'),
         arrowNextSVG: icons.get('right'),
         closeSVG: icons.get('close'),
@@ -6699,6 +6720,11 @@ function openFullScreen(box) {
     lightbox.on('openingAnimationEnd', () => {
         box.event.emit('openfullscreen');
     });
+    lightbox.on('destroy', () => {
+        window.setTimeout(() => {
+            box.event.emit('closefullscreen');
+        }, 0);
+    });
     lightbox.init();
     lightbox.loadAndOpen(currentIndex);
 }
@@ -7952,9 +7978,10 @@ class LinkPopup {
                 if (!this.linkNode) {
                     return;
                 }
+                const linkNode = this.linkNode;
                 this.save();
                 this.hide();
-                this.event.emit('save');
+                this.event.emit('save', linkNode);
             },
         });
         button.render();
@@ -7970,9 +7997,10 @@ class LinkPopup {
                 if (!this.linkNode) {
                     return;
                 }
+                const lastChild = this.linkNode.last();
                 this.linkNode.remove(true);
                 this.hide();
-                this.event.emit('remove');
+                this.event.emit('remove', lastChild);
             },
         });
         button.render();
@@ -8068,10 +8096,18 @@ class LinkPopup {
 
 var link = (editor) => {
     const popup = new LinkPopup(editor.popupContainer);
-    popup.event.on('save', () => {
+    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', () => {
+    popup.event.on('remove', node => {
+        const range = editor.selection.range;
+        range.setStartAfter(node);
+        range.collapseToStart();
+        editor.selection.addRangeToNativeSelection();
         editor.history.save();
     });
     editor.root.on('scroll', () => {
@@ -8095,6 +8131,12 @@ var link = (editor) => {
         }
         popup.show(linkNode);
     });
+    editor.container.on('click', event => {
+        const targetNode = new Nodes(event.target);
+        if (targetNode.closest('a').length > 0) {
+            event.preventDefault();
+        }
+    });
     editor.command.add('link', {
         execute: () => {
             const linkNode = editor.selection.insertLink(`<a href="">${locale.link.newLink()}</a>`);