lakelib 0.0.6 → 0.1.0

package/lib/lake.css

@@ -33,9 +33,11 @@
 }
 
 .lake-container {
+  box-sizing: content-box;
   font-family: var(--font-family);
   font-size: 16px;
-  color: var(--text-color);
+  font-weight: normal;
+  line-height: normal;
   padding: 16px 24px;
 }
 .lake-container:focus {
@@ -91,10 +93,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 +107,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 +155,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 +207,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 +225,7 @@
   fill: var(--secondary-text-color);
 }
 .lake-dropdown .lake-dropdown-menu {
+  box-sizing: content-box;
   position: absolute;
   top: 30px;
   left: 0;
@@ -235,9 +244,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 +317,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 +340,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;
@@ -361,8 +378,9 @@
 .lake-container h4,
 .lake-container h5,
 .lake-container h6 {
-  color: #000000e0;
   font-weight: bold;
+  line-height: normal;
+  border: 0;
   margin: 0;
   padding: 0;
 }
@@ -478,6 +496,7 @@
   padding-left: 24px;
 }
 .lake-container ul[type="checklist"] li::before {
+  box-sizing: content-box;
   content: '';
   position: absolute;
   top: 3px;
@@ -495,6 +514,7 @@
   background-color: #fff;
 }
 .lake-container ul[type="checklist"] li::after {
+  box-sizing: content-box;
   content: '';
   position: absolute;
   top: 3px;
@@ -516,6 +536,7 @@
 }
 
 .lake-container blockquote {
+  box-sizing: content-box;
   margin: 0;
   margin-bottom: 8px;
   padding: 8px 12px;
@@ -526,24 +547,27 @@
   color: var(--text-color);
   border-radius: 8px;
 }
+.lake-container blockquote[type="info"],
+.lake-container blockquote[type="tip"] {
+  background-color: #e6f4ff;
+  border: 1px solid #91caff;
+}
 .lake-container blockquote[type="success"] {
   background-color: #f6ffed;
   border: 1px solid #b7eb8f;
 }
-.lake-container blockquote[type="info"] {
-  background-color: #e6f4ff;
-  border: 1px solid #91caff;
-}
 .lake-container blockquote[type="warning"] {
   background-color: #fffbe6;
   border: 1px solid #ffe58f;
 }
-.lake-container blockquote[type="error"] {
+.lake-container blockquote[type="error"],
+.lake-container blockquote[type="danger"] {
   background-color: #fff2f0;
   border: 1px solid #ffccc7;
 }
 
 .lake-container table {
+  box-sizing: content-box;
   border-collapse: collapse;
   border: 1px solid var(--border-color);
   margin-bottom: 8px;
@@ -639,11 +663,11 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
 .lake-image {
   position: relative;
   line-height: 0;
+  box-sizing: content-box;
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .lake-image .lake-image-img {
-  box-sizing: border-box;
   border: 0;
   border-radius: 4px;
   width: 100%;
@@ -862,6 +886,8 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 }
 .lake-code-block .lake-dropdown .lake-dropdown-menu {
   top: 24px;
+  left: auto;
+  right: 0;
   overflow-y: scroll;
   scrollbar-width: thin;
   height: 200px;
@@ -879,6 +905,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   top: 0;
   left: 0;
   z-index: 1;
+  box-sizing: content-box;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   padding: 16px;
@@ -917,13 +944,17 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 }
 
 .lake-toolbar {
-  background-color: #fff;
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
   padding: 4px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
 .lake-toolbar .lake-toolbar-divider {
+  box-sizing: content-box;
   width: 1px;
   height: 20px;
   margin: 0 4px;

package/lib/lake.js

@@ -11,11 +11,15 @@ import PhotoSwipe from 'photoswipe';
 
 class BoxElement extends HTMLElement {
 }
-customElements.define('lake-box', BoxElement);
+if (customElements.get('lake-box') !== undefined) {
+    customElements.define('lake-box', BoxElement);
+}
 
 class BookmarkElement extends HTMLElement {
 }
-customElements.define('lake-bookmark', BookmarkElement);
+if (customElements.get('lake-bookmark') !== undefined) {
+    customElements.define('lake-bookmark', BookmarkElement);
+}
 
 var plus = "<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,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"></path></svg>";
 
@@ -2995,7 +2999,7 @@ function getElementRules() {
         h5: Object.assign({}, blockAttributeRules),
         h6: Object.assign({}, blockAttributeRules),
         p: Object.assign({}, blockAttributeRules),
-        blockquote: Object.assign(Object.assign({}, blockAttributeRules), { type: ['success', 'info', 'warning', 'error'] }),
+        blockquote: Object.assign(Object.assign({}, blockAttributeRules), { type: ['info', 'tip', 'success', 'warning', 'error', 'danger'] }),
         ul: Object.assign(Object.assign({}, blockAttributeRules), { type: 'checklist', indent: /^\d+$/ }),
         ol: Object.assign(Object.assign({}, blockAttributeRules), { start: /^\d+$/, indent: /^\d+$/ }),
         li: {
@@ -4295,7 +4299,7 @@ class Dropdown {
     }
 }
 
-var version = "0.0.6";
+var version = "0.1.0";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -5261,7 +5265,6 @@ class Editor {
         this.container.append(fragment);
         if (!this.readonly) {
             this.bindFocusEvents();
-            this.focus();
             this.selection.synByBookmark();
             this.history.save();
             Editor.plugin.loadAll(this);
@@ -5273,11 +5276,11 @@ class Editor {
         if (!this.readonly) {
             window.addEventListener('beforeunload', this.beforeunloadListener);
             document.addEventListener('selectionchange', this.selectionchangeListener);
+            document.addEventListener('click', this.clickListener);
+            window.addEventListener('resize', this.resizeListener);
             this.bindInputEvents();
             this.bindHistoryEvents();
         }
-        document.addEventListener('click', this.clickListener);
-        window.addEventListener('resize', this.resizeListener);
     }
     // Destroys a rendered editor.
     unmount() {
@@ -5286,9 +5289,9 @@ class Editor {
         if (!this.readonly) {
             window.removeEventListener('beforeunload', this.beforeunloadListener);
             document.removeEventListener('selectionchange', this.selectionchangeListener);
+            document.removeEventListener('click', this.clickListener);
+            window.removeEventListener('resize', this.resizeListener);
         }
-        document.removeEventListener('click', this.clickListener);
-        window.removeEventListener('resize', this.resizeListener);
     }
 }
 Editor.version = version;
@@ -6287,7 +6290,6 @@ const defaultItems = [
     'redo',
     '|',
     'heading',
-    'fontSize',
     '|',
     'formatPainter',
     'removeFormat',
@@ -6721,8 +6723,10 @@ function openFullScreen(box) {
     lightbox.on('openingAnimationEnd', () => {
         box.event.emit('openfullscreen');
     });
-    lightbox.on('closingAnimationEnd', () => {
-        box.event.emit('closefullscreen');
+    lightbox.on('destroy', () => {
+        window.setTimeout(() => {
+            box.event.emit('closefullscreen');
+        }, 0);
     });
     lightbox.init();
     lightbox.loadAndOpen(currentIndex);
@@ -6954,10 +6958,15 @@ const imageBox = {
             container.empty();
             container.append(imageNode);
             imageNode.find('.lake-button-view').on('click', () => openFullScreen(box));
-            imageNode.find('.lake-button-remove').on('click', event => {
-                event.stopPropagation();
-                removeImageBox(box);
-            });
+            if (editor.readonly) {
+                imageNode.find('.lake-button-remove').hide();
+            }
+            else {
+                imageNode.find('.lake-button-remove').on('click', event => {
+                    event.stopPropagation();
+                    removeImageBox(box);
+                });
+            }
             box.event.emit('render');
         });
         imageNode.on('click', () => {
@@ -7459,11 +7468,24 @@ var heading = (editor) => {
     });
 };
 
+const typeList = [
+    'info',
+    'tip',
+    'success',
+    'warning',
+    'error',
+    'danger',
+];
 var blockQuote = (editor) => {
     editor.command.add('blockQuote', {
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'blockquote'),
-        execute: () => {
-            editor.selection.setBlocks('<blockquote />');
+        execute: (type) => {
+            if (type && typeList.indexOf(type) >= 0) {
+                editor.selection.setBlocks(safeTemplate `<blockquote type="${type}" />`);
+            }
+            else {
+                editor.selection.setBlocks('<blockquote />');
+            }
             editor.history.save();
         },
     });
@@ -7828,9 +7850,9 @@ var removeFormat = (editor) => {
     });
 };
 
-let markList = [];
 const formatPainterClassName = 'lake-format-painter';
 var formatPainter = (editor) => {
+    let markList = [];
     editor.command.add('formatPainter', {
         execute: () => {
             editor.container.addClass(formatPainterClassName);
@@ -7855,7 +7877,7 @@ var formatPainter = (editor) => {
         editor.history.save();
     });
     editor.event.on('click', (tagetNode) => {
-        if (tagetNode.isInside) {
+        if (tagetNode.isInside && tagetNode.closestContainer().get(0) === editor.container.get(0)) {
             return;
         }
         const buttonNode = tagetNode.closest('button[name="formatPainter"]');
@@ -8125,7 +8147,9 @@ var link = (editor) => {
             return;
         }
         if (linkNode.isOutside ||
+            linkNode.closestContainer().get(0) !== editor.container.get(0) ||
             linkNode.closest('lake-box').length > 0) {
+            popup.hide();
             return;
         }
         popup.show(linkNode);
@@ -8303,7 +8327,22 @@ const blockItemListForSpaceKey = [
 ];
 const blockItemListForEnterKey = [
     {
-        re: /^-+$/,
+        re: /^:{3,}([a-z]*)$/i,
+        getParameters: (results) => {
+            if (!results[1]) {
+                return [
+                    'blockQuote',
+                    'info',
+                ];
+            }
+            return [
+                'blockQuote',
+                results[1],
+            ];
+        },
+    },
+    {
+        re: /^-{3,}$/,
         getParameters: () => [
             'hr',
         ],