lakelib 0.0.4 → 0.0.5

package/lib/lake.js

@@ -1229,11 +1229,11 @@ class Range {
         const boxNode = this.commonAncestor.closest('lake-box');
         return boxNode.length > 0;
     }
-    // Returns a boolean value indicating whether the range's common ancestor node is in the left strip of the box.
+    // Returns a boolean value indicating whether the range's common ancestor node is in the start strip of the box.
     // case 1: <lake-box><span class="lake-box-strip">|</span><div class="lake-box-container"></div> ...
     // case 2: <lake-box><span class="lake-box-strip"></span>|<div class="lake-box-container"></div> ...
     // case 3: <lake-box>|<span class="lake-box-strip"></span><div class="lake-box-container"></div> ...
-    get isBoxLeft() {
+    get isBoxStart() {
         const boxNode = this.commonAncestor.closest('lake-box');
         if (boxNode.length === 0) {
             return false;
@@ -1254,11 +1254,11 @@ class Range {
         // case: ... <div class="lake-box-container">|<div></div></div> ...
         return this.isCollapsed && this.startNode.get(0) === boxContainer.get(0) && this.startOffset === 0;
     }
-    // Returns a boolean value indicating whether the range's common ancestor node is in the right strip of the box.
+    // Returns a boolean value indicating whether the range's common ancestor node is in the end strip of the box.
     // case 1: ... <div class="lake-box-container"></div><span class="lake-box-strip">|</span></lake-box>
     // case 2: ... <div class="lake-box-container"></div>|<span class="lake-box-strip"></span></lake-box>
     // case 3: ... <div class="lake-box-container"></div><span class="lake-box-strip"></span>|</lake-box>
-    get isBoxRight() {
+    get isBoxEnd() {
         const boxNode = this.commonAncestor.closest('lake-box');
         if (boxNode.length === 0) {
             return false;
@@ -1385,8 +1385,8 @@ class Range {
         this.setStart(boxContainer, 0);
         this.collapseToStart();
     }
-    // Sets the range to the left position of the box.
-    selectBoxLeft(boxNode) {
+    // Sets the range to the start position of the box.
+    selectBoxStart(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
             throw new Error(`The box cannot be selected because the box '${boxNode.attr('name')}' (id=${boxNode.id}) has not been rendered yet.`);
@@ -1394,8 +1394,8 @@ class Range {
         this.selectNodeContents(boxStrip.eq(0));
         this.collapseToEnd();
     }
-    // Sets the range to the left position of the box.
-    selectBoxRight(boxNode) {
+    // Sets the range to the start position of the box.
+    selectBoxEnd(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
             throw new Error(`The box cannot be selected because the box '${boxNode.attr('name')}' (id=${boxNode.id}) has not been rendered yet.`);
@@ -1406,7 +1406,7 @@ class Range {
     // Collapses the range and sets the range to the beginning of the contents of the specified node.
     shrinkBefore(node) {
         if (node.isBox) {
-            this.selectBoxLeft(node);
+            this.selectBoxStart(node);
             return;
         }
         if (node.isText) {
@@ -1420,7 +1420,7 @@ class Range {
             (child = this.startNode.children()[0]) &&
             child.isElement && !child.isVoid) {
             if (child.isBox) {
-                this.selectBoxLeft(child);
+                this.selectBoxStart(child);
                 return;
             }
             this.setStart(child, 0);
@@ -1430,7 +1430,7 @@ class Range {
     // Collapses the range and sets the range to the end of the contents of the specified node.
     shrinkAfter(node) {
         if (node.isBox) {
-            this.selectBoxRight(node);
+            this.selectBoxEnd(node);
             return;
         }
         if (node.isText) {
@@ -1445,7 +1445,7 @@ class Range {
             (child = this.endNode.children()[this.endOffset - 1]) &&
             child.isElement && !child.isVoid) {
             if (child.isBox) {
-                this.selectBoxRight(child);
+                this.selectBoxEnd(child);
                 return;
             }
             this.setEnd(child, child.children().length);
@@ -1481,7 +1481,7 @@ class Range {
         if (startBoxNode.length > 0) {
             const startRange = this.clone();
             startRange.collapseToStart();
-            if (startRange.isBoxRight) {
+            if (startRange.isBoxEnd) {
                 this.setStartAfter(startBoxNode);
             }
             else {
@@ -1492,7 +1492,7 @@ class Range {
         if (endBoxNode.length > 0) {
             const endRange = this.clone();
             endRange.collapseToEnd();
-            if (endRange.isBoxLeft) {
+            if (endRange.isBoxStart) {
                 this.setEndBefore(endBoxNode);
             }
             else {
@@ -1673,9 +1673,9 @@ class Range {
         }
         return marks;
     }
-    // Returns the text of the left part of the closest block divided into two parts by the start point of the range.
+    // Returns the text of the start part of the closest block divided into two parts by the start point of the range.
     // "<p>one<anchor />two<focus />three</p>" returns "three".
-    getLeftText() {
+    getStartText() {
         const node = this.startNode;
         const offset = this.startOffset;
         let block = node.closestBlock();
@@ -1685,20 +1685,20 @@ class Range {
         if (block.length === 0) {
             return '';
         }
-        const leftRange = new Range();
-        leftRange.setStartBefore(block);
-        leftRange.setEnd(node, offset);
+        const startRange = new Range();
+        startRange.setStartBefore(block);
+        startRange.setEnd(node, offset);
         const container = query('<div />');
-        container.append(leftRange.cloneContents());
+        container.append(startRange.cloneContents());
         const text = container.text();
         if (text === '' && container.find('lake-box').length > 0) {
             return '\u200B';
         }
         return text;
     }
-    // Returns the text of the right part of the closest block divided into two parts by the end point of the range.
+    // Returns the text of the end part of the closest block divided into two parts by the end point of the range.
     // "<p>one<anchor />two<focus />three</p>" returns "three".
-    getRightText() {
+    getEndText() {
         const node = this.endNode;
         const offset = this.endOffset;
         let block = node.closestBlock();
@@ -1708,11 +1708,11 @@ class Range {
         if (block.length === 0) {
             return '';
         }
-        const rightRange = new Range();
-        rightRange.setStart(node, offset);
-        rightRange.setEndAfter(block);
+        const endRange = new Range();
+        endRange.setStart(node, offset);
+        endRange.setEndAfter(block);
         const container = query('<div />');
-        container.append(rightRange.cloneContents());
+        container.append(endRange.cloneContents());
         const text = container.text();
         if (text === '' && container.find('lake-box').length > 0) {
             return '\u200B';
@@ -1770,23 +1770,23 @@ function splitNodes(node, offset, limitNode) {
         return null;
     }
     range.collapseToStart();
-    const leftPart = parent.clone();
+    const startPart = parent.clone();
     let child = parent.first();
     while (child.length > 0) {
         if (range.compareBeforeNode(child) >= 0) {
             break;
         }
         const nextNode = child.next();
-        leftPart.append(child);
+        startPart.append(child);
         child = nextNode;
     }
-    parent.before(leftPart);
+    parent.before(startPart);
     if (parent.parent().length > 0 && parent.parent().get(0) !== limitNode.get(0)) {
         return splitNodes(parent.parent(), parent.index(), limitNode);
     }
     return {
-        left: leftPart,
-        right: parent,
+        start: startPart,
+        end: parent,
     };
 }
 
@@ -2857,6 +2857,9 @@ class Box {
             container.off('mouseleave');
             container.off('click');
         }
+        container.on('mousedown', event => {
+            event.preventDefault();
+        });
         container.on('mouseenter', () => {
             if (container.hasClass('lake-box-selected') ||
                 container.hasClass('lake-box-focused') ||
@@ -3032,7 +3035,7 @@ function getElementRules() {
             type: ['inline', 'block'],
             name: /^[\w-]+$/,
             value: /^[^"]+$/,
-            focus: ['left', 'center', 'right'],
+            focus: ['start', 'center', 'end'],
         },
         br: {},
         hr: {},
@@ -3291,8 +3294,8 @@ function insertNode(range, node) {
 // or the method inserts a pair of bookmarks into the beginning and the end of the range.
 // case 1: foo<lake-bookmark type="focus" />bar
 // case 2: <lake-bookmark type="anchor" />foo<lake-bookmark type="focus" />
-// case 3: foo<lake-box type="inline" name="image" focus="left"></lake-box>bar
-// case 4: foo<lake-box type="inline" name="image" focus="right"></lake-box>bar
+// case 3: foo<lake-box type="inline" name="image" focus="start"></lake-box>bar
+// case 4: foo<lake-box type="inline" name="image" focus="end"></lake-box>bar
 // case 5: <lake-bookmark type="anchor" /><lake-box type="inline" name="image"></lake-box>foo<lake-bookmark type="focus" />
 function insertBookmark(range) {
     if (range.commonAncestor.isOutside) {
@@ -3304,11 +3307,11 @@ function insertBookmark(range) {
     // box
     const boxNode = range.startNode.closest('lake-box');
     if (boxNode.length > 0) {
-        if (range.isBoxLeft) {
-            boxNode.attr('focus', 'left');
+        if (range.isBoxStart) {
+            boxNode.attr('focus', 'start');
         }
-        else if (range.isBoxRight) {
-            boxNode.attr('focus', 'right');
+        else if (range.isBoxEnd) {
+            boxNode.attr('focus', 'end');
         }
         else {
             boxNode.attr('focus', 'center');
@@ -3382,14 +3385,14 @@ function toBookmark(range, bookmark) {
                 box.render();
             }
             const focusValue = focus.attr('focus');
-            if (focusValue === 'left') {
-                range.selectBoxLeft(focus);
+            if (focusValue === 'start') {
+                range.selectBoxStart(focus);
             }
             else if (focusValue === 'center') {
                 range.selectBox(focus);
             }
             else {
-                range.selectBoxRight(focus);
+                range.selectBoxEnd(focus);
             }
             focus.removeAttr('focus');
             return;
@@ -3593,8 +3596,8 @@ function setBlocks(range, value) {
 function splitBlock$1(range) {
     if (range.commonAncestor.isOutside) {
         return {
-            left: null,
-            right: null,
+            start: null,
+            end: null,
         };
     }
     if (range.isCollapsed) {
@@ -3607,8 +3610,8 @@ function splitBlock$1(range) {
     const closestBlock = node.closestOperableBlock();
     if (closestBlock.length === 0) {
         return {
-            left: null,
-            right: null,
+            start: null,
+            end: null,
         };
     }
     let limitBlock = closestBlock.parent();
@@ -3616,37 +3619,37 @@ function splitBlock$1(range) {
         limitBlock = node.closestContainer();
     }
     const parts = splitNodes(node, range.startOffset, limitBlock);
-    let left = null;
-    let right = null;
+    let start = null;
+    let end = null;
     if (parts) {
-        left = parts.left;
-        right = parts.right;
+        start = parts.start;
+        end = parts.end;
     }
     if (!parts && node.isBlock) {
         if (range.startOffset > 0) {
-            left = node.children()[range.startOffset - 1];
+            start = node.children()[range.startOffset - 1];
         }
-        right = node.children()[range.startOffset];
-        if (right && !right.isBlock) {
-            right = null;
+        end = node.children()[range.startOffset];
+        if (end && !end.isBlock) {
+            end = null;
         }
     }
-    if (left && left.isEmpty) {
-        appendDeepest(left, query('<br />'));
+    if (start && start.isEmpty) {
+        appendDeepest(start, query('<br />'));
     }
-    if (right) {
-        if (right.isEmpty) {
-            appendDeepest(right, query('<br />'));
-            range.shrinkAfter(right);
+    if (end) {
+        if (end.isEmpty) {
+            appendDeepest(end, query('<br />'));
+            range.shrinkAfter(end);
         }
         else {
-            range.shrinkBefore(right);
+            range.shrinkBefore(end);
         }
     }
     fixList(range);
     return {
-        left,
-        right,
+        start,
+        end,
     };
 }
 
@@ -3664,8 +3667,8 @@ function removeEmptyMarks$1(node) {
 }
 // Splits text nodes or mark nodes at a specified position.
 function splitMarksAtPoint(node, offset, removeEmptyMark) {
-    let left = null;
-    let right = null;
+    let start = null;
+    let end = null;
     let limitBlock = node.closestBlock();
     if (limitBlock.length === 0) {
         limitBlock = node.closestContainer();
@@ -3673,23 +3676,23 @@ function splitMarksAtPoint(node, offset, removeEmptyMark) {
     const parts = splitNodes(node, offset, limitBlock);
     if (parts) {
         if (removeEmptyMark) {
-            removeEmptyMarks$1(parts.left);
-            removeEmptyMarks$1(parts.right);
-            if (!parts.left.isEmpty) {
-                left = parts.left;
+            removeEmptyMarks$1(parts.start);
+            removeEmptyMarks$1(parts.end);
+            if (!parts.start.isEmpty) {
+                start = parts.start;
             }
-            if (!parts.right.isEmpty) {
-                right = parts.right;
+            if (!parts.end.isEmpty) {
+                end = parts.end;
             }
         }
         else {
-            left = parts.left;
-            right = parts.right;
+            start = parts.start;
+            end = parts.end;
         }
     }
     return {
-        left,
-        right,
+        start,
+        end,
     };
 }
 // Splits text nodes or mark nodes.
@@ -3699,46 +3702,46 @@ function splitMarksAtPoint(node, offset, removeEmptyMark) {
 function splitMarks(range, removeEmptyMark = true) {
     if (range.commonAncestor.isOutside) {
         return {
-            left: null,
+            start: null,
             center: null,
-            right: null,
+            end: null,
         };
     }
     range.adaptBox();
     if (range.isCollapsed) {
         const parts = splitMarksAtPoint(range.startNode, range.startOffset, removeEmptyMark);
-        if (parts.left) {
-            range.setStartAfter(parts.left);
+        if (parts.start) {
+            range.setStartAfter(parts.start);
             range.collapseToStart();
         }
-        else if (parts.right) {
-            range.setStartBefore(parts.right);
+        else if (parts.end) {
+            range.setStartBefore(parts.end);
             range.collapseToStart();
         }
         return {
-            left: parts.left,
+            start: parts.start,
             center: null,
-            right: parts.right,
+            end: parts.end,
         };
     }
     const startParts = splitMarksAtPoint(range.startNode, range.startOffset, removeEmptyMark);
-    if (startParts.left) {
-        range.setStartAfter(startParts.left);
+    if (startParts.start) {
+        range.setStartAfter(startParts.start);
     }
-    else if (startParts.right) {
-        range.setStartBefore(startParts.right);
+    else if (startParts.end) {
+        range.setStartBefore(startParts.end);
     }
     const endParts = splitMarksAtPoint(range.endNode, range.endOffset, removeEmptyMark);
-    if (endParts.left) {
-        range.setEndAfter(endParts.left);
+    if (endParts.start) {
+        range.setEndAfter(endParts.start);
     }
-    else if (endParts.right) {
-        range.setEndBefore(endParts.right);
+    else if (endParts.end) {
+        range.setEndBefore(endParts.end);
     }
     return {
-        left: startParts.left,
-        center: endParts.left,
-        right: endParts.right,
+        start: startParts.start,
+        center: endParts.start,
+        end: endParts.end,
     };
 }
 
@@ -3800,7 +3803,7 @@ function addMark(range, value) {
             const box = new Box(boxNode);
             if (box.type === 'block') {
                 const newBlock = query('<p><br /></p>');
-                if (range.isBoxLeft) {
+                if (range.isBoxStart) {
                     boxNode.before(newBlock);
                 }
                 else {
@@ -3817,8 +3820,8 @@ function addMark(range, value) {
         // https://en.wikipedia.org/wiki/Zero-width_space
         const zeroWidthSpace = new Nodes(document.createTextNode('\u200B'));
         const parts = splitMarks(range);
-        if (parts.left) {
-            const newMark = copyNestedMarks$1(parts.left);
+        if (parts.start) {
+            const newMark = copyNestedMarks$1(parts.start);
             if (newMark) {
                 if (newMark.name === tagName) {
                     newMark.css(cssProperties);
@@ -3914,17 +3917,17 @@ function removeMark(range, value) {
             return;
         }
         const parts = splitMarks(range, false);
-        if (!parts.left) {
+        if (!parts.start) {
             return;
         }
-        if (parts.right) {
-            removeEmptyMarks(parts.right);
+        if (parts.end) {
+            removeEmptyMarks(parts.end);
         }
         const zeroWidthSpace = new Nodes(document.createTextNode('\u200B'));
-        const newMark = copyNestedMarks(parts.left, tagName);
+        const newMark = copyNestedMarks(parts.start, tagName);
         if (!newMark) {
-            parts.left.after(zeroWidthSpace);
-            removeEmptyMarks(parts.left);
+            parts.start.after(zeroWidthSpace);
+            removeEmptyMarks(parts.start);
             if (zeroWidthSpace.prev().isText) {
                 range.setStartAfter(zeroWidthSpace.prev());
                 range.collapseToStart();
@@ -3936,8 +3939,8 @@ function removeMark(range, value) {
             return;
         }
         appendDeepest(newMark, zeroWidthSpace);
-        parts.left.after(newMark);
-        removeEmptyMarks(parts.left);
+        parts.start.after(newMark);
+        removeEmptyMarks(parts.start);
         range.shrinkAfter(newMark);
         return;
     }
@@ -4291,7 +4294,7 @@ class Dropdown {
     }
 }
 
-var version = "0.0.2";
+var version = "0.0.4";
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -4308,23 +4311,23 @@ function insertBox(range, boxName, boxValue) {
     if (box.type === 'inline') {
         insertFragment(range, fragment);
         box.render();
-        range.selectBoxRight(box.node);
+        range.selectBoxEnd(box.node);
         return box;
     }
     // block box
     const parts = splitBlock$1(range);
-    if (parts.left) {
-        range.setEndAfter(parts.left);
+    if (parts.start) {
+        range.setEndAfter(parts.start);
         range.collapseToEnd();
     }
-    if (parts.right && parts.right.isEmpty) {
-        parts.right.remove();
+    if (parts.end && parts.end.isEmpty) {
+        parts.end.remove();
     }
     insertFragment(range, fragment);
     box.render();
-    range.selectBoxRight(box.node);
-    if (parts.left && parts.left.isEmpty) {
-        parts.left.remove();
+    range.selectBoxEnd(box.node);
+    if (parts.start && parts.start.isEmpty) {
+        parts.start.remove();
     }
     return box;
 }
@@ -4527,12 +4530,18 @@ class Command {
         this.event = new EventEmitter();
         this.selection = selection;
     }
-    add(name, handler) {
-        this.commandMap.set(name, handler);
+    add(name, commandItem) {
+        this.commandMap.set(name, commandItem);
+    }
+    delete(name) {
+        this.commandMap.delete(name);
     }
     getNames() {
         return Array.from(this.commandMap.keys());
     }
+    has(name) {
+        return this.commandMap.get(name) !== undefined;
+    }
     getItem(name) {
         const commandItem = this.commandMap.get(name);
         if (commandItem === undefined) {
@@ -4930,6 +4939,7 @@ class Editor {
                 }
                 if (range.compareBeforeNode(boxContainer) < 0 && range.compareAfterNode(boxContainer) > 0) {
                     if (!(range.isCollapsed && range.startNode.get(0) === boxContainer.get(0) && range.startOffset === 0)) {
+                        boxContainer.removeClass('lake-box-hovered');
                         boxContainer.removeClass('lake-box-selected');
                         boxContainer.removeClass('lake-box-focused');
                         boxContainer.addClass('lake-box-activated');
@@ -4939,6 +4949,7 @@ class Editor {
                 if (clonedRange.intersectsNode(box.node)) {
                     boxContainer.removeClass('lake-box-activated');
                     if (range.isCollapsed) {
+                        boxContainer.removeClass('lake-box-hovered');
                         boxContainer.removeClass('lake-box-selected');
                         boxContainer.addClass('lake-box-focused');
                     }
@@ -4985,12 +4996,16 @@ class Editor {
                     }
                 }
             }
-            this.event.emit('statechange', {
+            const stateData = {
                 appliedItems,
                 disabledNameMap,
                 selectedNameMap,
                 selectedValuesMap,
-            });
+            };
+            if (this.toolbar) {
+                this.toolbar.updateState(stateData);
+            }
+            this.event.emit('statechange', stateData);
         }, 100, {
             leading: false,
             trailing: true,
@@ -5005,6 +5020,7 @@ class Editor {
             throw new Error('The root of the config must be specified.');
         }
         this.root = query(config.root);
+        this.toolbar = config.toolbar;
         this.config = Object.assign(Object.assign({}, defaultConfig), config);
         this.containerWrapper = query('<div class="lake-container-wrapper" />');
         this.container = query('<div class="lake-container" />');
@@ -5030,7 +5046,7 @@ class Editor {
         const boxNode = stripNode.closest('lake-box');
         const box = new Box(boxNode);
         if (box.type === 'inline') {
-            if (range.isBoxLeft) {
+            if (range.isBoxStart) {
                 range.setStartBefore(boxNode);
                 range.collapseToStart();
             }
@@ -5041,7 +5057,7 @@ class Editor {
         }
         else {
             const paragraph = query('<p />');
-            if (range.isBoxLeft) {
+            if (range.isBoxStart) {
                 boxNode.before(paragraph);
             }
             else {
@@ -5062,7 +5078,7 @@ class Editor {
         });
         this.container.on('beforeinput', () => {
             const range = this.selection.range;
-            if (range.isBoxLeft || range.isBoxRight) {
+            if (range.isBoxStart || range.isBoxEnd) {
                 this.commitUnsavedInputData();
             }
         });
@@ -5082,7 +5098,7 @@ class Editor {
                 }
                 if (inputEvent.inputType === 'insertText' ||
                     inputEvent.inputType === 'insertCompositionText') {
-                    if (range.isBoxLeft || range.isBoxRight) {
+                    if (range.isBoxStart || range.isBoxEnd) {
                         this.inputInBoxStrip();
                     }
                     else {
@@ -5230,6 +5246,9 @@ class Editor {
             Editor.plugin.loadAll(this);
         }
         Editor.box.renderAll(this);
+        if (this.toolbar) {
+            this.toolbar.render(this);
+        }
         if (!this.readonly) {
             window.addEventListener('beforeunload', this.beforeunloadListener);
             document.addEventListener('selectionchange', this.selectionchangeListener);
@@ -6270,8 +6289,10 @@ toolbarItems.forEach(item => {
 });
 class Toolbar {
     constructor(config) {
+        this.allMenuMap = new Map();
+        this.buttonItemList = [];
+        this.dropdownItemList = [];
         this.items = config.items || defaultItems;
-        this.editor = config.editor;
         this.root = query(config.root);
         this.container = query('<div class="lake-toolbar" />');
         this.root.addClass('lake-custom-properties');
@@ -6279,8 +6300,7 @@ class Toolbar {
     appendDivider() {
         this.container.append('<div class="lake-toolbar-divider" />');
     }
-    appendButton(item) {
-        const editor = this.editor;
+    appendButton(editor, item) {
         const button = new Button({
             root: this.container,
             name: item.name,
@@ -6294,8 +6314,7 @@ class Toolbar {
         });
         button.render();
     }
-    appendDropdown(item) {
-        const editor = this.editor;
+    appendDropdown(editor, item) {
         const dropdown = new Dropdown({
             root: this.container,
             name: item.name,
@@ -6315,8 +6334,7 @@ class Toolbar {
         });
         dropdown.render();
     }
-    appendUpload(item) {
-        const editor = this.editor;
+    appendUpload(editor, item) {
         const uploadNode = query(safeTemplate `
       <div class="lake-upload" name="${item.name}">
         <input type="file" />
@@ -6355,14 +6373,69 @@ class Toolbar {
             }
         });
     }
+    // Updates state of each item such as disabled, selected.
+    updateState(data) {
+        var _a;
+        const { appliedItems, disabledNameMap, selectedNameMap, selectedValuesMap } = data;
+        for (const item of this.buttonItemList) {
+            const selectedClass = 'lake-button-selected';
+            const buttonNode = this.container.find(`button[name="${item.name}"]`);
+            let isDisabled = disabledNameMap.get(item.name);
+            if (isDisabled === undefined) {
+                isDisabled = item.isDisabled && appliedItems.length > 0 ? item.isDisabled(appliedItems) : false;
+            }
+            if (isDisabled) {
+                buttonNode.attr('disabled', 'true');
+                buttonNode.removeClass(selectedClass);
+            }
+            else {
+                buttonNode.removeAttr('disabled');
+            }
+            if (!isDisabled) {
+                let isSelected = selectedNameMap.get(item.name);
+                if (isSelected === undefined) {
+                    isSelected = item.isSelected && appliedItems.length > 0 ? item.isSelected(appliedItems) : false;
+                }
+                if (isSelected) {
+                    buttonNode.addClass(selectedClass);
+                }
+                else {
+                    buttonNode.removeClass(selectedClass);
+                }
+            }
+        }
+        for (const item of this.dropdownItemList) {
+            let selectedValues = selectedValuesMap.get(item.name);
+            if (selectedValues === undefined) {
+                selectedValues = item.selectedValues && appliedItems.length > 0 ? item.selectedValues(appliedItems) : [];
+            }
+            const dropdownNode = this.container.find(`div.lake-dropdown[name="${item.name}"]`);
+            let isDisabled = disabledNameMap.get(item.name);
+            if (isDisabled === undefined) {
+                isDisabled = item.isDisabled && appliedItems.length > 0 ? item.isDisabled(appliedItems) : false;
+            }
+            if (isDisabled) {
+                dropdownNode.attr('disabled', 'true');
+            }
+            else {
+                dropdownNode.removeAttr('disabled');
+            }
+            if (!isDisabled) {
+                Dropdown.setValue(dropdownNode, selectedValues);
+                const textNode = dropdownNode.find('.lake-dropdown-text');
+                if (textNode.length > 0) {
+                    const key = selectedValues[0] || item.defaultValue;
+                    const menuMap = this.allMenuMap.get(item.name);
+                    const text = (_a = (menuMap && menuMap.get(key))) !== null && _a !== void 0 ? _a : key;
+                    textNode.text(text);
+                }
+            }
+        }
+    }
     // Renders a toolbar for the specified editor.
-    render() {
-        const editor = this.editor;
+    render(editor) {
         this.root.empty();
         this.root.append(this.container);
-        const allMenuMap = new Map();
-        const buttonItemList = [];
-        const dropdownItemList = [];
         this.items.forEach(name => {
             if (name === '|') {
                 this.appendDivider();
@@ -6379,76 +6452,18 @@ class Toolbar {
                 item = name;
             }
             if (item.type === 'button') {
-                buttonItemList.push(item);
-                this.appendButton(item);
+                this.buttonItemList.push(item);
+                this.appendButton(editor, item);
                 return;
             }
             if (item.type === 'dropdown') {
-                allMenuMap.set(item.name, Dropdown.getMenuMap(item.menuItems));
-                dropdownItemList.push(item);
-                this.appendDropdown(item);
+                this.allMenuMap.set(item.name, Dropdown.getMenuMap(item.menuItems));
+                this.dropdownItemList.push(item);
+                this.appendDropdown(editor, item);
                 return;
             }
             if (item.type === 'upload') {
-                this.appendUpload(item);
-            }
-        });
-        editor.event.on('statechange', data => {
-            var _a;
-            const { appliedItems, disabledNameMap, selectedNameMap, selectedValuesMap } = data;
-            for (const item of buttonItemList) {
-                const selectedClass = 'lake-button-selected';
-                const buttonNode = this.container.find(`button[name="${item.name}"]`);
-                let isDisabled = disabledNameMap.get(item.name);
-                if (isDisabled === undefined) {
-                    isDisabled = item.isDisabled && appliedItems.length > 0 ? item.isDisabled(appliedItems) : false;
-                }
-                if (isDisabled) {
-                    buttonNode.attr('disabled', 'true');
-                    buttonNode.removeClass(selectedClass);
-                }
-                else {
-                    buttonNode.removeAttr('disabled');
-                }
-                if (!isDisabled) {
-                    let isSelected = selectedNameMap.get(item.name);
-                    if (isSelected === undefined) {
-                        isSelected = item.isSelected && appliedItems.length > 0 ? item.isSelected(appliedItems) : false;
-                    }
-                    if (isSelected) {
-                        buttonNode.addClass(selectedClass);
-                    }
-                    else {
-                        buttonNode.removeClass(selectedClass);
-                    }
-                }
-            }
-            for (const item of dropdownItemList) {
-                let selectedValues = selectedValuesMap.get(item.name);
-                if (selectedValues === undefined) {
-                    selectedValues = item.selectedValues && appliedItems.length > 0 ? item.selectedValues(appliedItems) : [];
-                }
-                const dropdownNode = this.container.find(`div.lake-dropdown[name="${item.name}"]`);
-                let isDisabled = disabledNameMap.get(item.name);
-                if (isDisabled === undefined) {
-                    isDisabled = item.isDisabled && appliedItems.length > 0 ? item.isDisabled(appliedItems) : false;
-                }
-                if (isDisabled) {
-                    dropdownNode.attr('disabled', 'true');
-                }
-                else {
-                    dropdownNode.removeAttr('disabled');
-                }
-                if (!isDisabled) {
-                    Dropdown.setValue(dropdownNode, selectedValues);
-                    const textNode = dropdownNode.find('.lake-dropdown-text');
-                    if (textNode.length > 0) {
-                        const key = selectedValues[0] || item.defaultValue;
-                        const menuMap = allMenuMap.get(item.name);
-                        const text = (_a = (menuMap && menuMap.get(key))) !== null && _a !== void 0 ? _a : key;
-                        textNode.text(text);
-                    }
-                }
+                this.appendUpload(editor, item);
             }
         });
     }
@@ -6932,47 +6947,80 @@ const imageBox = {
 
 const config = {
     defaultLang: 'text',
-    background: '#0000000a',
-    foreground: '#444d56',
-    selection: '#1ba2e333',
-    cursor: '#044289',
-    keyword: '#cf222e',
-    variable: '#1f2328',
-    parameter: '#24292e',
-    function: '#005cc5',
+    comment: '#57606a',
+    name: '#444d56',
+    variableName: '#953800',
+    typeName: '#0550ae',
+    propertyName: '#444d56',
+    className: '#24292e',
+    labelName: '#005cc5',
+    namespace: '#0550ae',
+    macroName: '#444d56',
+    literal: '#444d56',
     string: '#0a3069',
-    constant: '#0550ae',
-    type: '#24292f',
-    class: '#24292e',
     number: '#0550ae',
-    comment: '#57606a',
+    bool: '#0550ae',
+    regexp: '#116329',
+    color: '#0550ae',
+    keyword: '#cf222e',
+    modifier: '#24292f',
+    operator: '#cf222e',
+    bracket: '#57606a',
+    content: '#57606a',
+    meta: '#8250df',
     heading: '#0550ae',
     invalid: '#f6f8fa',
-    regexp: '#116329',
+    definition: '#cf222e',
+    constant: '#0550ae',
+    function: '#005cc5',
+    standard: '#444d56',
+    special: '#444d56',
 };
+// https://lezer.codemirror.net/docs/ref/#highlight.tags
 function getHighlightStyle(CodeMirror) {
     const { HighlightStyle, tags } = CodeMirror;
     return HighlightStyle.define([
-        { tag: tags.keyword, color: config.keyword },
-        { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
-        { tag: [tags.propertyName], color: config.function },
-        { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
-        { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
-        { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
-        { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
-        { tag: [tags.className], color: config.class },
-        { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
-        { tag: [tags.typeName], color: config.type },
-        { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
-        { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
-        { tag: [tags.meta, tags.comment], color: config.comment },
+        { tag: [tags.comment, tags.lineComment, tags.blockComment, tags.docComment], color: config.comment },
+        { tag: [tags.name], color: config.name },
+        { tag: [tags.variableName, tags.self], color: config.variableName },
+        { tag: [tags.typeName, tags.tagName], color: config.typeName },
+        { tag: [tags.propertyName, tags.attributeName], color: config.propertyName },
+        { tag: [tags.className], color: config.className },
+        { tag: [tags.labelName], color: config.labelName },
+        { tag: [tags.namespace], color: config.namespace },
+        { tag: [tags.macroName], color: config.macroName },
+        { tag: [tags.literal], color: config.literal },
+        { tag: [tags.string, tags.docString, tags.character, tags.attributeValue, tags.unit], color: config.string },
+        { tag: [tags.number, tags.integer, tags.float], color: config.number },
+        { tag: [tags.bool, tags.null, tags.atom], color: config.bool },
+        { tag: [tags.regexp, tags.escape, tags.url], color: config.regexp },
+        { tag: [tags.color], color: config.color },
+        { tag: [
+                tags.keyword, tags.operatorKeyword, tags.controlKeyword,
+                tags.definitionKeyword, tags.moduleKeyword,
+            ], color: config.keyword },
+        { tag: [tags.modifier], color: config.modifier },
+        { tag: [
+                tags.operator, tags.derefOperator, tags.arithmeticOperator, tags.logicOperator, tags.bitwiseOperator,
+                tags.compareOperator, tags.updateOperator, tags.definitionOperator, tags.typeOperator, tags.controlOperator,
+            ], color: config.operator },
+        { tag: [
+                tags.punctuation, tags.separator, tags.bracket, tags.angleBracket, tags.squareBracket,
+                tags.paren, tags.brace, tags.contentSeparator,
+            ], color: config.bracket },
+        { tag: [tags.content], color: config.content },
+        { tag: [tags.meta, tags.documentMeta, tags.annotation, tags.processingInstruction], color: config.meta },
+        { tag: tags.heading, fontWeight: 'bold', color: config.heading },
         { tag: tags.strong, fontWeight: 'bold' },
         { tag: tags.emphasis, fontStyle: 'italic' },
         { tag: tags.link, textDecoration: 'underline' },
-        { tag: tags.heading, fontWeight: 'bold', color: config.heading },
-        { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
-        { tag: tags.invalid, color: config.invalid },
         { tag: tags.strikethrough, textDecoration: 'line-through' },
+        { tag: [tags.invalid, tags.inserted, tags.deleted, tags.changed], color: config.invalid },
+        { tag: [tags.definition(tags.name)], color: config.definition },
+        { tag: [tags.constant(tags.name)], color: config.constant },
+        { tag: [tags.function(tags.variableName)], color: config.function },
+        { tag: [tags.standard(tags.name)], color: config.standard },
+        { tag: [tags.special(tags.variableName)], color: config.special },
     ]);
 }
 const codeBlockBox = {
@@ -6996,7 +7044,10 @@ const codeBlockBox = {
         const CodeMirror = window.CodeMirror;
         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.');
+            codeBlockNode.text(`
+        The code cannot be displayed because window.CodeMirror is not found.
+        Please check if the CodeMirror file is added to this page.
+      `.trim());
             codeBlockNode.on('click', () => {
                 editor.selection.range.selectBox(box.node);
             });
@@ -7086,7 +7137,7 @@ var copy = (editor) => {
         if (boxNode.length === 0) {
             return;
         }
-        if (range.isBoxLeft || range.isBoxRight) {
+        if (range.isBoxStart || range.isBoxEnd) {
             return;
         }
         event.preventDefault();
@@ -7110,7 +7161,7 @@ var cut = (editor) => {
         if (boxNode.length === 0) {
             return;
         }
-        if (range.isBoxLeft || range.isBoxRight) {
+        if (range.isBoxStart || range.isBoxEnd) {
             return;
         }
         event.preventDefault();
@@ -7185,11 +7236,11 @@ function insertFirstNode(editor, otherNode) {
     if (boxNode.length > 0) {
         const box = new Box(boxNode);
         if (box.type === 'inline') {
-            if (range.isBoxLeft) {
+            if (range.isBoxStart) {
                 range.setStartBefore(boxNode);
                 range.collapseToStart();
             }
-            else if (range.isBoxRight) {
+            else if (range.isBoxEnd) {
                 range.setStartAfter(boxNode);
                 range.collapseToStart();
             }
@@ -7199,11 +7250,11 @@ function insertFirstNode(editor, otherNode) {
         }
         else {
             const paragraph = query('<p />');
-            if (range.isBoxLeft) {
+            if (range.isBoxStart) {
                 boxNode.before(paragraph);
                 range.shrinkAfter(paragraph);
             }
-            else if (range.isBoxRight) {
+            else if (range.isBoxEnd) {
                 boxNode.after(paragraph);
                 range.shrinkAfter(paragraph);
             }
@@ -7267,12 +7318,12 @@ function pasteFragment(editor, fragment) {
     // insert fragment
     if (fragment.childNodes.length > 0) {
         const parts = selection.splitBlock();
-        if (parts.left) {
-            range.setEndAfter(parts.left);
+        if (parts.start) {
+            range.setEndAfter(parts.start);
             range.collapseToEnd();
         }
-        if (parts.right && parts.right.isEmpty) {
-            parts.right.remove();
+        if (parts.end && parts.end.isEmpty) {
+            parts.end.remove();
         }
         selection.insertFragment(fragment);
         range.shrinkAfter(lastNode);
@@ -8101,6 +8152,9 @@ var image = (editor) => {
 };
 
 var codeBlock = (editor) => {
+    if (!window.CodeMirror) {
+        return;
+    }
     editor.command.add('codeBlock', {
         execute: (value) => {
             const box = editor.insertBox('codeBlock', value);
@@ -8278,6 +8332,11 @@ function executeMarkCommand(editor, point) {
     for (const item of markItemList) {
         const results = item.re.exec(text);
         if (results !== null) {
+            const parameters = item.getParameters();
+            const commandName = parameters.shift();
+            if (!editor.command.has(commandName)) {
+                return false;
+            }
             // <p>foo**bold**<focus /></p>, offset = 11
             // to
             // <p>foobold\u200B<focus /></p>,
@@ -8291,8 +8350,7 @@ function executeMarkCommand(editor, point) {
             node.get(0).nodeValue = newValue;
             range.setStart(node, offset - results[0].length);
             range.setEnd(node, offset - (oldValue.length - newValue.length) - 1);
-            const parameters = item.getParameters();
-            editor.command.execute(parameters.shift(), ...parameters);
+            editor.command.execute(commandName, ...parameters);
             selection.toBookmark(bookmark);
             editor.commitOperation();
             return true;
@@ -8308,6 +8366,11 @@ function spaceKeyExecutesBlockCommand(editor, point) {
     for (const item of blockItemListForSpaceKey) {
         const results = item.re.exec(text);
         if (results !== null) {
+            const parameters = item.getParameters(results);
+            const commandName = parameters.shift();
+            if (!editor.command.has(commandName)) {
+                return false;
+            }
             // <p>#<focus />foo</p>
             // to
             // <h1><focus />foo</h1>
@@ -8318,8 +8381,7 @@ function spaceKeyExecutesBlockCommand(editor, point) {
             const block = bookmark.focus.closestBlock();
             fixEmptyBlock(block);
             selection.range.shrinkAfter(block);
-            const parameters = item.getParameters(results);
-            editor.command.execute(parameters.shift(), ...parameters);
+            editor.command.execute(commandName, ...parameters);
             selection.toBookmark(bookmark);
             editor.commitOperation();
             return true;
@@ -8334,15 +8396,19 @@ function enterKeyExecutesBlockCommand(editor, block) {
     for (const item of blockItemListForEnterKey) {
         const results = item.re.exec(text);
         if (results !== null) {
+            const parameters = item.getParameters(results);
+            const commandName = parameters.shift();
+            if (!editor.command.has(commandName)) {
+                return false;
+            }
             // <p>---<focus /></p>
             // to
-            // <lake-box type="block" name="hr" focus="right"></lake-box>
+            // <lake-box type="block" name="hr" focus="end"></lake-box>
             editor.prepareOperation();
             block.empty();
             fixEmptyBlock(block);
             selection.range.shrinkAfter(block);
-            const parameters = item.getParameters(results);
-            editor.command.execute(parameters.shift(), ...parameters);
+            editor.command.execute(commandName, ...parameters);
             editor.commitOperation();
             return true;
         }
@@ -8391,7 +8457,7 @@ var markdown = (editor) => {
         if (block.find('lake-box').length > 0) {
             return;
         }
-        if (range.getRightText() !== '') {
+        if (range.getEndText() !== '') {
             return;
         }
         if (enterKeyExecutesBlockCommand(editor, block)) {
@@ -8405,14 +8471,14 @@ var markdown = (editor) => {
 
 function splitBlock(editor, block) {
     const range = editor.selection.range;
-    const rightText = range.getRightText();
+    const endText = range.getEndText();
     editor.selection.splitBlock();
     block = range.getBlocks()[0];
     if (!block) {
         editor.history.save();
         return;
     }
-    if (rightText === '' && (block.isHeading || block.name === 'blockquote')) {
+    if (endText === '' && (block.isHeading || block.name === 'blockquote')) {
         editor.selection.setBlocks('<p />');
         editor.history.save();
         return;
@@ -8426,12 +8492,12 @@ function addBlockOrSplitBlockForBox(editor) {
     const boxNode = range.startNode.closest('lake-box');
     const block = boxNode.closestBlock();
     if (block.length > 0 && !block.isContainer) {
-        if (range.isBoxLeft) {
+        if (range.isBoxStart) {
             range.setStartBefore(boxNode);
             range.collapseToStart();
             splitBlock(editor, block);
         }
-        else if (range.isBoxRight) {
+        else if (range.isBoxEnd) {
             range.setStartAfter(boxNode);
             range.collapseToStart();
             splitBlock(editor, block);
@@ -8442,10 +8508,10 @@ function addBlockOrSplitBlockForBox(editor) {
         return;
     }
     const newBlock = query('<p><br /></p>');
-    if (range.isBoxLeft) {
+    if (range.isBoxStart) {
         boxNode.before(newBlock);
     }
-    else if (range.isBoxRight) {
+    else if (range.isBoxEnd) {
         boxNode.after(newBlock);
         range.shrinkAfter(newBlock);
     }
@@ -8495,8 +8561,8 @@ function addLineBreak(editor) {
     const block = range.startNode.closestBlock();
     if (block.length > 0 && !block.isContainer) {
         const prevNode = range.getPrevNode();
-        const rightText = range.getRightText();
-        if (prevNode.name !== 'br' && rightText === '') {
+        const endText = range.getEndText();
+        if (prevNode.name !== 'br' && endText === '') {
             editor.selection.insertContents('<br /><br />');
             editor.history.save();
             return;
@@ -8509,12 +8575,12 @@ function addBlockOrLineBreakForBox(editor) {
     const boxNode = range.startNode.closest('lake-box');
     const block = boxNode.closestBlock();
     if (block.length > 0 && !block.isContainer) {
-        if (range.isBoxLeft) {
+        if (range.isBoxStart) {
             range.setStartBefore(boxNode);
             range.collapseToStart();
             addLineBreak(editor);
         }
-        else if (range.isBoxRight) {
+        else if (range.isBoxEnd) {
             range.setStartAfter(boxNode);
             range.collapseToStart();
             addLineBreak(editor);
@@ -8525,10 +8591,10 @@ function addBlockOrLineBreakForBox(editor) {
         return;
     }
     const newBlock = query('<p><br /></p>');
-    if (range.isBoxLeft) {
+    if (range.isBoxStart) {
         boxNode.before(newBlock);
     }
-    else if (range.isBoxRight) {
+    else if (range.isBoxEnd) {
         boxNode.after(newBlock);
         range.shrinkAfter(newBlock);
     }
@@ -8576,7 +8642,7 @@ function mergeWithPreviousBlock(editor, block) {
         if (block.isEmpty) {
             block.remove();
         }
-        range.selectBoxRight(prevBlock);
+        range.selectBoxEnd(prevBlock);
         return;
     }
     if (prevBlock.name === 'br') {
@@ -8605,7 +8671,7 @@ var backspaceKey = (editor) => {
             return;
         }
         editor.rectifyContent();
-        if (range.isBoxLeft) {
+        if (range.isBoxStart) {
             const boxNode = range.startNode.closest('lake-box');
             const prevNode = boxNode.prev();
             if (prevNode.length === 0) {
@@ -8663,8 +8729,8 @@ var backspaceKey = (editor) => {
             editor.history.save();
             return;
         }
-        const leftText = range.getLeftText();
-        if (leftText === '') {
+        const startText = range.getStartText();
+        if (startText === '') {
             event.preventDefault();
             let block = range.getBlocks()[0];
             if (!block) {
@@ -8700,7 +8766,7 @@ function mergeWithNextBlock(editor, block) {
         if (block.isEmpty) {
             block.remove();
         }
-        range.selectBoxLeft(nextBlock);
+        range.selectBoxStart(nextBlock);
         editor.history.save();
         return;
     }
@@ -8722,7 +8788,7 @@ var deleteKey = (editor) => {
             return;
         }
         editor.rectifyContent();
-        if (range.isBoxRight) {
+        if (range.isBoxEnd) {
             const boxNode = range.startNode.closest('lake-box');
             const nextNode = boxNode.next();
             if (nextNode.length === 0) {
@@ -8779,8 +8845,8 @@ var deleteKey = (editor) => {
             nextNode.remove();
             editor.history.save();
         }
-        const rightText = range.getRightText();
-        if (rightText === '') {
+        const endText = range.getEndText();
+        if (endText === '') {
             event.preventDefault();
             let block = range.getBlocks()[0];
             if (!block) {
@@ -8819,7 +8885,7 @@ var arrowKeys = (editor) => {
         }
         const boxNode = range.commonAncestor.closest('lake-box');
         if (boxNode.length > 0) {
-            if (range.isBoxLeft) {
+            if (range.isBoxStart) {
                 const prevNode = boxNode.prev();
                 if (prevNode.isBlock || prevNode.isBox) {
                     event.preventDefault();
@@ -8834,13 +8900,13 @@ var arrowKeys = (editor) => {
                 range.collapseToStart();
                 return;
             }
-            if (range.isBoxRight) {
+            if (range.isBoxEnd) {
                 event.preventDefault();
                 range.selectBox(boxNode);
                 return;
             }
             event.preventDefault();
-            range.selectBoxLeft(boxNode);
+            range.selectBoxStart(boxNode);
             return;
         }
         if (!range.isCollapsed) {
@@ -8859,12 +8925,12 @@ var arrowKeys = (editor) => {
         }
         const boxNode = range.commonAncestor.closest('lake-box');
         if (boxNode.length > 0) {
-            if (range.isBoxLeft) {
+            if (range.isBoxStart) {
                 event.preventDefault();
                 range.selectBox(boxNode);
                 return;
             }
-            if (range.isBoxRight) {
+            if (range.isBoxEnd) {
                 const nextNode = boxNode.next();
                 if (nextNode.isBlock || nextNode.isBox) {
                     event.preventDefault();
@@ -8880,7 +8946,7 @@ var arrowKeys = (editor) => {
                 return;
             }
             event.preventDefault();
-            range.selectBoxRight(boxNode);
+            range.selectBoxEnd(boxNode);
             return;
         }
         if (!range.isCollapsed) {
@@ -8932,6 +8998,24 @@ var arrowKeys = (editor) => {
     });
 };
 
+var escapeKey = (editor) => {
+    editor.keystroke.setKeydown('escape', event => {
+        const selection = editor.selection;
+        const range = selection.range;
+        if (range.isBoxCenter || range.isInsideBox) {
+            event.preventDefault();
+            const boxNode = range.commonAncestor.closest('lake-box');
+            range.selectBoxEnd(boxNode);
+            selection.addRangeToNativeSelection();
+            return;
+        }
+        if (editor.root.hasClass('lake-root-focused')) {
+            event.preventDefault();
+            editor.blur();
+        }
+    });
+};
+
 Editor.box.add(hrBox);
 Editor.box.add(imageBox);
 Editor.box.add(codeBlockBox);
@@ -8970,6 +9054,7 @@ Editor.plugin.add(backspaceKey);
 Editor.plugin.add(deleteKey);
 Editor.plugin.add(tabKey);
 Editor.plugin.add(arrowKeys);
+Editor.plugin.add(escapeKey);
 
 export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, index as Utils, addMark, deleteContents, fixList, icons, insertBookmark, insertContents, insertFragment, insertLink, insertNode, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, toBookmark };
 //# sourceMappingURL=lake.js.map