lakelib 0.0.7 → 0.1.1

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.1";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -4898,9 +4902,6 @@ const defaultConfig = {
     tabIndex: 0,
     indentWithTab: true,
     minChangeSize: 5,
-    imageRequestMethod: 'POST',
-    imageRequestAction: '/upload',
-    imageRequestTypes: ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml'],
 };
 class Editor {
     constructor(config) {
@@ -5034,7 +5035,10 @@ class Editor {
         }
         this.root = query(config.root);
         this.toolbar = config.toolbar;
-        this.config = Object.assign(Object.assign({}, defaultConfig), config);
+        this.config = Object.assign({}, defaultConfig);
+        for (const key of Object.keys(config)) {
+            this.config[key] = config[key];
+        }
         this.containerWrapper = query('<div class="lake-container-wrapper" />');
         this.container = query('<div class="lake-container" />');
         this.overlayContainer = query('<div class="lake-overlay" />');
@@ -5203,6 +5207,17 @@ class Editor {
         this.history.continue();
         this.history.save();
     }
+    // Sets default config for a plugin.
+    setPluginConfig(pluginName, pluginConfig) {
+        if (!this.config[pluginName]) {
+            this.config[pluginName] = {};
+        }
+        for (const key of Object.keys(pluginConfig)) {
+            if (this.config[pluginName][key] === undefined) {
+                this.config[pluginName][key] = pluginConfig[key];
+            }
+        }
+    }
     // Sets focus on the editor area.
     focus() {
         this.container.focus();
@@ -5261,7 +5276,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 +5287,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 +5300,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;
@@ -6229,9 +6243,9 @@ const toolbarItems = [
 
 function uploadImage(config) {
     const { editor, file, onError, onSuccess } = config;
-    const { imageRequestMethod, imageRequestAction, imageRequestTypes } = editor.config;
-    if (imageRequestTypes.indexOf(file.type) < 0) {
-        throw new Error(`Cannot upload file because its type '${file.type}' is not found in ['${imageRequestTypes.join('\', \'')}'].`);
+    const { requestMethod, requestAction, requestTypes } = editor.config.image;
+    if (requestTypes.indexOf(file.type) < 0) {
+        throw new Error(`Cannot upload file because its type '${file.type}' is not found in ['${requestTypes.join('\', \'')}'].`);
     }
     const box = editor.insertBox('image', {
         url: URL.createObjectURL(file),
@@ -6275,8 +6289,8 @@ function uploadImage(config) {
             }
         },
         file,
-        action: imageRequestAction,
-        method: imageRequestMethod,
+        action: requestAction,
+        method: requestMethod,
     });
     box.setData('xhr', xhr);
     return box;
@@ -6955,10 +6969,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', () => {
@@ -7358,8 +7377,8 @@ function pasteFragment(editor, fragment) {
     editor.history.save();
 }
 var paste = (editor) => {
-    const { imageRequestTypes } = editor.config;
     editor.container.on('paste', event => {
+        const { requestTypes } = editor.config.image;
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -7373,7 +7392,7 @@ var paste = (editor) => {
         // upload file
         if (dataTransfer.files.length > 0) {
             for (const file of dataTransfer.files) {
-                if (imageRequestTypes.indexOf(file.type) >= 0) {
+                if (requestTypes.indexOf(file.type) >= 0) {
                     uploadImage({
                         editor,
                         file,
@@ -7460,11 +7479,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 +7861,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 +7888,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 +8158,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>`);
@@ -8167,6 +8195,10 @@ var hr = (editor) => {
 };
 
 var image = (editor) => {
+    editor.setPluginConfig('image', {
+        requestMethod: 'POST',
+        requestTypes: ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml'],
+    });
     editor.event.on('beforepaste', (nativeFragment) => {
         const fragment = new Fragment(nativeFragment);
         fragment.find('img').each(nativeNode => {
@@ -8310,7 +8342,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',
         ],