lakelib 0.0.7 → 0.1.0

package/lib/lake.css

@@ -33,12 +33,11 @@
 }
 
 .lake-container {
+  box-sizing: content-box;
   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 {
@@ -379,8 +378,9 @@ button.lake-text-button span {
 .lake-container h4,
 .lake-container h5,
 .lake-container h6 {
-  color: #000000e0;
   font-weight: bold;
+  line-height: normal;
+  border: 0;
   margin: 0;
   padding: 0;
 }
@@ -496,6 +496,7 @@ button.lake-text-button span {
   padding-left: 24px;
 }
 .lake-container ul[type="checklist"] li::before {
+  box-sizing: content-box;
   content: '';
   position: absolute;
   top: 3px;
@@ -513,6 +514,7 @@ button.lake-text-button span {
   background-color: #fff;
 }
 .lake-container ul[type="checklist"] li::after {
+  box-sizing: content-box;
   content: '';
   position: absolute;
   top: 3px;
@@ -534,6 +536,7 @@ button.lake-text-button span {
 }
 
 .lake-container blockquote {
+  box-sizing: content-box;
   margin: 0;
   margin-bottom: 8px;
   padding: 8px 12px;
@@ -544,19 +547,21 @@ button.lake-text-button span {
   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;
 }
@@ -658,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%;
@@ -881,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;
@@ -898,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;
@@ -940,8 +948,6 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   font-size: 14px;
   font-weight: normal;
   line-height: normal;
-  color: var(--text-color);
-  background-color: #fff;
   padding: 4px;
   display: flex;
   flex-wrap: wrap;

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.7";
+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;
@@ -6955,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', () => {
@@ -7460,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();
         },
     });
@@ -7829,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);
@@ -7856,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"]');
@@ -8126,17 +8147,13 @@ 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);
     });
-    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>`);
@@ -8310,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',
         ],