lakelib 0.1.0 → 0.1.2

package/lib/lake.js

@@ -737,7 +737,7 @@ class Nodes {
         }
         return block;
     }
-    // Traverses the first node and its parents until it finds a root element which has contenteditable="true" attribute..
+    // Traverses the first node and its parents until it finds a root element which has contenteditable="true" attribute.
     closestContainer() {
         return this.closest('div[contenteditable="true"]');
     }
@@ -4299,7 +4299,7 @@ class Dropdown {
     }
 }
 
-var version = "0.1.0";
+var version = "0.1.2";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -4902,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) {
@@ -5038,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" />');
@@ -5207,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();
@@ -5263,11 +5274,11 @@ class Editor {
         this.containerWrapper.append(this.overlayContainer);
         query(document.body).append(this.popupContainer);
         this.container.append(fragment);
+        Editor.plugin.loadAll(this);
         if (!this.readonly) {
             this.bindFocusEvents();
             this.selection.synByBookmark();
             this.history.save();
-            Editor.plugin.loadAll(this);
         }
         Editor.box.renderAll(this);
         if (this.toolbar) {
@@ -6232,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),
@@ -6278,8 +6289,8 @@ function uploadImage(config) {
             }
         },
         file,
-        action: imageRequestAction,
-        method: imageRequestMethod,
+        action: requestAction,
+        method: requestMethod,
     });
     box.setData('xhr', xhr);
     return box;
@@ -6980,7 +6991,6 @@ const imageBox = {
 };
 
 const config = {
-    defaultLang: 'text',
     comment: '#57606a',
     name: '#444d56',
     variableName: '#953800',
@@ -7075,19 +7085,22 @@ const codeBlockBox = {
             return;
         }
         // begin to create CodeMirror
-        const CodeMirror = window.CodeMirror;
+        const CodeMirror = window.LakeCodeMirror;
         if (!CodeMirror) {
             codeBlockNode.addClass('lake-code-block-error');
             codeBlockNode.text(`
-        The code cannot be displayed because window.CodeMirror is not found.
-        Please check if the CodeMirror file is added to this page.
+        The code cannot be displayed because window.LakeCodeMirror is not found.
+        Please check if the "lake-codemirror" library is added to this page.
       `.trim());
             codeBlockNode.on('click', () => {
                 editor.selection.range.selectBox(box.node);
             });
             return;
         }
-        const { EditorState, Compartment, EditorView, keymap, history, defaultKeymap, historyKeymap, indentWithTab, syntaxHighlighting, langItems, } = CodeMirror;
+        const { EditorState, Compartment, EditorView, keymap, history, defaultKeymap, historyKeymap, indentWithTab, syntaxHighlighting, } = CodeMirror;
+        const defaultLangItems = CodeMirror.langItems;
+        const codeBlockConfig = editor.config.codeBlock;
+        const langItems = defaultLangItems.filter((item) => codeBlockConfig.langList.indexOf(item.value) >= 0);
         // language menu items
         const langItemMap = new Map();
         for (const item of langItems) {
@@ -7133,7 +7146,7 @@ const codeBlockBox = {
             root: codeBlockNode,
             name: 'langType',
             downIcon: icons.get('down'),
-            defaultValue: langItem ? boxValue.lang : config.defaultLang,
+            defaultValue: langItem ? boxValue.lang : codeBlockConfig.defaultLang,
             tooltip: locale.codeBlock.langType(),
             width: 'auto',
             menuType: 'list',
@@ -7162,6 +7175,9 @@ const codeBlockBox = {
 };
 
 var copy = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.container.on('copy', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
@@ -7186,6 +7202,9 @@ var copy = (editor) => {
 };
 
 var cut = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.container.on('cut', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
@@ -7366,8 +7385,11 @@ function pasteFragment(editor, fragment) {
     editor.history.save();
 }
 var paste = (editor) => {
-    const { imageRequestTypes } = editor.config;
+    if (editor.readonly) {
+        return;
+    }
     editor.container.on('paste', event => {
+        const { requestTypes } = editor.config.image;
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -7381,7 +7403,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,
@@ -7412,6 +7434,9 @@ var paste = (editor) => {
 };
 
 var undo = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('undo', {
         execute: () => {
             editor.history.undo();
@@ -7428,6 +7453,9 @@ var undo = (editor) => {
 };
 
 var redo = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('redo', {
         execute: () => {
             editor.history.redo();
@@ -7446,6 +7474,9 @@ var redo = (editor) => {
 };
 
 var selectAll = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('selectAll', {
         execute: () => {
             const range = editor.selection.range;
@@ -7456,6 +7487,9 @@ var selectAll = (editor) => {
 };
 
 var heading = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('heading', {
         selectedValues: appliedItems => {
             const currentItem = appliedItems.find(item => item.node.isHeading || item.name === 'p');
@@ -7477,6 +7511,9 @@ const typeList = [
     'danger',
 ];
 var blockQuote = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('blockQuote', {
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'blockquote'),
         execute: (type) => {
@@ -7504,6 +7541,9 @@ function setChecklist(editor, value) {
     editor.selection.setBlocks(`<ul type="checklist"><li value="${value}"></li></ul>`);
 }
 var list = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('list', {
         selectedValues: appliedItems => {
             let currentValue;
@@ -7604,6 +7644,9 @@ const alignValueMap = {
     end: 'right',
 };
 var align = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('align', {
         selectedValues: appliedItems => {
             let currentValue;
@@ -7628,6 +7671,9 @@ var align = (editor) => {
 };
 
 var indent = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('indent', {
         execute: (type) => {
             const blocks = editor.selection.range.getBlocks();
@@ -7641,6 +7687,9 @@ var indent = (editor) => {
 
 const tagName$6 = 'strong';
 var bold = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('bold', {
         isDisabled: appliedItems => !!appliedItems.find(item => item.node.isHeading),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$6),
@@ -7662,6 +7711,9 @@ var bold = (editor) => {
 
 const tagName$5 = 'i';
 var italic = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('italic', {
         isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$5),
         execute: () => {
@@ -7682,6 +7734,9 @@ var italic = (editor) => {
 
 const tagName$4 = 'u';
 var underline = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('underline', {
         isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$4),
         execute: () => {
@@ -7702,6 +7757,9 @@ var underline = (editor) => {
 
 const tagName$3 = 's';
 var strikethrough = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('strikethrough', {
         isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$3),
         execute: () => {
@@ -7722,6 +7780,9 @@ var strikethrough = (editor) => {
 
 const tagName$2 = 'sub';
 var subscript = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('subscript', {
         isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$2),
         execute: () => {
@@ -7738,6 +7799,9 @@ var subscript = (editor) => {
 
 const tagName$1 = 'sup';
 var superscript = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('superscript', {
         isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$1),
         execute: () => {
@@ -7754,6 +7818,9 @@ var superscript = (editor) => {
 
 const tagName = 'code';
 var code = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('code', {
         isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName),
         execute: () => {
@@ -7769,6 +7836,9 @@ var code = (editor) => {
 };
 
 var fontFamily = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('fontFamily', {
         selectedValues: appliedItems => {
             for (const item of appliedItems) {
@@ -7787,6 +7857,9 @@ var fontFamily = (editor) => {
 };
 
 var fontSize = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('fontSize', {
         isDisabled: appliedItems => !!appliedItems.find(item => item.node.isHeading),
         selectedValues: appliedItems => {
@@ -7806,6 +7879,9 @@ var fontSize = (editor) => {
 };
 
 var fontColor = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('fontColor', {
         selectedValues: appliedItems => {
             for (const item of appliedItems) {
@@ -7824,6 +7900,9 @@ var fontColor = (editor) => {
 };
 
 var highlight = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('highlight', {
         selectedValues: appliedItems => {
             for (const item of appliedItems) {
@@ -7842,6 +7921,9 @@ var highlight = (editor) => {
 };
 
 var removeFormat = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.command.add('removeFormat', {
         execute: () => {
             editor.selection.removeMark();
@@ -7852,6 +7934,9 @@ var removeFormat = (editor) => {
 
 const formatPainterClassName = 'lake-format-painter';
 var formatPainter = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     let markList = [];
     editor.command.add('formatPainter', {
         execute: () => {
@@ -8116,6 +8201,9 @@ class LinkPopup {
 }
 
 var link = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     const popup = new LinkPopup(editor.popupContainer);
     popup.event.on('save', node => {
         const range = editor.selection.range;
@@ -8167,6 +8255,9 @@ var link = (editor) => {
 };
 
 var hr = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.event.on('beforepaste', (nativeFragment) => {
         const fragment = new Fragment(nativeFragment);
         fragment.find('hr').each(nativeNode => {
@@ -8184,6 +8275,13 @@ var hr = (editor) => {
 };
 
 var image = (editor) => {
+    editor.setPluginConfig('image', {
+        requestMethod: 'POST',
+        requestTypes: ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml'],
+    });
+    if (editor.readonly) {
+        return;
+    }
     editor.event.on('beforepaste', (nativeFragment) => {
         const fragment = new Fragment(nativeFragment);
         fragment.find('img').each(nativeNode => {
@@ -8210,8 +8308,35 @@ var image = (editor) => {
     });
 };
 
+const langList = [
+    'text',
+    'c',
+    'csharp',
+    'cpp',
+    'css',
+    'go',
+    'html',
+    'java',
+    'javascript',
+    'json',
+    'markdown',
+    'php',
+    'python',
+    'rust',
+    'sql',
+    'typescript',
+    'xml',
+    'yaml',
+];
 var codeBlock = (editor) => {
-    if (!window.CodeMirror) {
+    if (!window.LakeCodeMirror) {
+        return;
+    }
+    editor.setPluginConfig('codeBlock', {
+        langList,
+        defaultLang: 'text',
+    });
+    if (editor.readonly) {
         return;
     }
     editor.command.add('codeBlock', {
@@ -8490,6 +8615,9 @@ function enterKeyExecutesBlockCommand(editor, block) {
     return false;
 }
 var markdown = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.keystroke.setKeydown('space', event => {
         const selection = editor.selection;
         const range = selection.range;
@@ -8594,6 +8722,9 @@ function addBlockOrSplitBlockForBox(editor) {
     }
 }
 var enterKey = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.keystroke.setKeydown('enter', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
@@ -8677,6 +8808,9 @@ function addBlockOrLineBreakForBox(editor) {
     }
 }
 var shiftEnterKey = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.keystroke.setKeydown('shift+enter', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
@@ -8739,6 +8873,9 @@ function mergeWithPreviousBlock(editor, block) {
     editor.selection.fixList();
 }
 var backspaceKey = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.keystroke.setKeydown('backspace', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
@@ -8856,6 +8993,9 @@ function mergeWithNextBlock(editor, block) {
     editor.selection.fixList();
 }
 var deleteKey = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.keystroke.setKeydown('delete', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
@@ -8934,6 +9074,9 @@ var deleteKey = (editor) => {
 };
 
 var tabKey = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.keystroke.setKeydown('tab', event => {
         if (editor.config.indentWithTab === false) {
             return;
@@ -8952,6 +9095,9 @@ var tabKey = (editor) => {
 };
 
 var arrowKeys = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.keystroke.setKeydown('arrow-left', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
@@ -9073,6 +9219,9 @@ var arrowKeys = (editor) => {
 };
 
 var escapeKey = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
     editor.keystroke.setKeydown('escape', event => {
         const selection = editor.selection;
         const range = selection.range;