@textbus/xnote 0.0.1-alpha.14 → 0.0.1-alpha.16

package/bundles/index.js

@@ -12,7 +12,7 @@ var color = require('@tanbo/color');
 var adapterViewfly = require('@textbus/adapter-viewfly');
 var collaborate = require('@textbus/collaborate');
 
-var scopedId$l = "vf-3d0183";
+var scopedId$m = "vf-3d0183";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -133,7 +133,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$l, () => {
+    return scopedCss.withScopedCSS(scopedId$m, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -145,10 +145,10 @@ function Button(props) {
     });
 }
 
-var scopedId$k = "vf-ac7e8d";
+var scopedId$l = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(scopedId$k, () => {
+    return scopedCss.withScopedCSS(scopedId$l, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -158,15 +158,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$j = "vf-ede279";
+var scopedId$k = "vf-ede279";
 
 function Divider() {
-    return scopedCss.withScopedCSS(scopedId$j, () => {
+    return scopedCss.withScopedCSS(scopedId$k, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$i = "vf-4c1803";
+var scopedId$j = "vf-4c1803";
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -274,16 +274,16 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$i, () => {
+    return scopedCss.withScopedCSS(scopedId$j, () => {
         return (jsxRuntime.jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsxRuntime.jsx("div", { class: "container", ref: ref, children: props.children }), jsxRuntime.jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsxRuntime.jsxs("div", { class: "mask", ref: mask, children: [component.state.width, "*", component.state.height] }), jsxRuntime.jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var scopedId$h = "vf-a99c5e";
+var scopedId$i = "vf-a99c5e";
 
-var scopedId$g = "vf-ab6f55";
+var scopedId$h = "vf-ab6f55";
 
 const DropdownMenuPortal = core.withAnnotation({
     providers: [
@@ -375,7 +375,7 @@ const DropdownMenuPortal = core.withAnnotation({
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$g, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$h, () => {
         return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", children: props.children }) }));
@@ -441,7 +441,7 @@ const Dropdown = core.withAnnotation({
                 dropdownContextService.hide(false);
             }
         },
-        $render: scopedCss.withScopedCSS(scopedId$h, () => {
+        $render: scopedCss.withScopedCSS(scopedId$i, () => {
             return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsxRuntime.jsx(DropdownMenuPortal, { noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                             props.menu.map(menu => {
                                 return (jsxRuntime.jsx("div", { class: "dropdown-menu-item", onClick: () => {
@@ -457,6 +457,42 @@ const Dropdown = core.withAnnotation({
     };
 });
 
+var scopedId$g = "vf-9dad68";
+
+function Keymap(props) {
+    const arr = [];
+    const keymap = props.keymap;
+    if (keymap.ctrlKey) {
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-command" }) : 'Ctrl');
+    }
+    if (keymap.shiftKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-shift" }) : 'Shift');
+    }
+    if (keymap.altKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-opt" }) : 'Alt');
+    }
+    if (keymap.key) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        if (Array.isArray(keymap.key)) {
+            arr.push(jsxRuntime.jsx("span", { children: keymap.key.join('/') }));
+        }
+        else {
+            arr.push(jsxRuntime.jsx("span", { children: keymap.key }));
+        }
+    }
+    return scopedCss.withScopedCSS(scopedId$g, () => {
+        return (jsxRuntime.jsx("span", { class: "keymap", children: arr }));
+    });
+}
+
 var scopedId$f = "vf-acaa5f";
 
 function MenuHeading(props) {
@@ -465,7 +501,7 @@ function MenuHeading(props) {
     });
 }
 
-var scopedId$e = "vf-678daa";
+var scopedId$e = "vf-c3b9dc";
 
 function MenuItem(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService, null);
@@ -486,7 +522,7 @@ function MenuItem(props) {
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
     return scopedCss.withScopedCSS(scopedId$e, () => {
-        return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), props.arrow ?
+        return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { class: "menu-item-content", children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsxRuntime.jsx("div", { children: props.desc })] }), props.arrow ?
                     jsxRuntime.jsx("div", { class: "arrow", children: jsxRuntime.jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsxRuntime.jsx("div", { class: [
                             'menu-check',
@@ -605,10 +641,14 @@ function registerHeadingShortcut(textbus) {
     const selection = textbus.get(core$1.Selection);
     keyboard.addShortcut({
         keymap: {
-            key: '123456'.split(''),
+            key: '0123456'.split(''),
             ctrlKey: true
         },
         action(key) {
+            if (key === '0') {
+                commander.unApplyAttribute(headingAttr);
+                return;
+            }
             commander.applyAttribute(headingAttr, 'h' + key);
         }
     });
@@ -699,6 +739,55 @@ BlockquoteComponent.zenCoding = {
         };
     }
 };
+function toBlockquote(textbus) {
+    const query = textbus.get(core$1.Query);
+    const commander = textbus.get(core$1.Commander);
+    const selection = textbus.get(core$1.Selection);
+    const state = query.queryComponent(BlockquoteComponent);
+    if (state.state === core$1.QueryStateType.Enabled) {
+        const current = state.value;
+        const parent = current.parent;
+        const index = parent.indexOf(current);
+        parent.retain(index);
+        commander.removeComponent(current);
+        current.__slots__.get(0).sliceContent().forEach(i => {
+            parent.insert(i);
+        });
+    }
+    else {
+        const block = new BlockquoteComponent(textbus);
+        const slot = block.state.slot;
+        if (selection.startSlot === selection.endSlot) {
+            const parentComponent = selection.startSlot.parent;
+            const parentSlot = parentComponent.parent;
+            const position = parentSlot.indexOf(parentComponent);
+            slot.insert(parentComponent);
+            parentSlot.retain(position);
+            parentSlot.insert(block);
+        }
+        else {
+            const commonAncestorSlot = selection.commonAncestorSlot;
+            const scope = selection.getCommonAncestorSlotScope();
+            commonAncestorSlot.cut(scope.startOffset, scope.endOffset).sliceContent().forEach(i => {
+                slot.insert(i);
+            });
+            commonAncestorSlot.retain(scope.startOffset);
+            commonAncestorSlot.insert(block);
+        }
+    }
+}
+function registerBlockquoteShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            ctrlKey: true,
+            key: '\''
+        },
+        action() {
+            toBlockquote(textbus);
+        }
+    });
+}
 function BlockquoteView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const readonly = useReadonly();
@@ -711,8 +800,8 @@ function BlockquoteView(props) {
     };
 }
 const blockquoteComponentLoader = {
-    match(element) {
-        return element.tagName === 'BLOCKQUOTE';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && element.tagName === 'BLOCKQUOTE';
     },
     read(element, textbus, slotParser) {
         const delta = slotParser(new core$1.Slot([
@@ -865,8 +954,8 @@ function ParagraphView(props) {
     };
 }
 const paragraphComponentLoader = {
-    match(element) {
-        return element.dataset.compoment === ParagraphComponent.componentName || /P|H[1-6]/.test(element.tagName);
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && element.dataset.compoment === ParagraphComponent.componentName || /P|H[1-6]/.test(element.tagName);
     },
     read(element, textbus, slotParser) {
         const content = /P|H[1-6]/.test(element.tagName) ? element : element.children[0];
@@ -945,6 +1034,15 @@ const languageList = [{
     }, {
         label: 'Go',
         value: 'Go'
+    }, {
+        label: 'Kotlin',
+        value: 'kotlin'
+    }, {
+        label: 'Python',
+        value: 'python'
+    }, {
+        label: 'PHP',
+        value: 'php'
     }, {
         label: 'JSON',
         value: 'JSON',
@@ -987,11 +1085,16 @@ const languageList = [{
     }, {
         label: 'Dart',
         value: 'dart',
+    }, {
+        label: 'Rust',
+        value: 'rust',
     }, {
         label: '',
         value: '',
     }];
 const sourceCodeThemes = [
+    'xnote-dark',
+    'xnote-dark-blue',
     'github',
     'atom-one-dark',
     'foundation',
@@ -1289,7 +1392,7 @@ function SourceCodeView(props) {
     }
     const input = core.inject(platformBrowser.Input);
     function updateCaret() {
-        input.caret.refresh(false);
+        input.caret.refresh();
     }
     const readonly = useReadonly();
     const output = useOutput();
@@ -1409,9 +1512,10 @@ function SourceCodeView(props) {
     };
 }
 const sourceCodeComponentLoader = {
-    match(element) {
-        return (element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
-            element.tagName === 'PRE';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) &&
+            ((element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
+                element.tagName === 'PRE');
     },
     read(el, textbus) {
         let slots = [];
@@ -1609,25 +1713,25 @@ function AttrTool(props) {
         const states = checkStates();
         return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'L', ctrlKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'R', ctrlKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
                     value: 't-r'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'E', ctrlKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
                     value: 't-c'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'J', ctrlKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
                     value: 't-j'
                 }, {
                     label: jsxRuntime.jsx(Divider, {}),
                     value: ''
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: '<', ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
                     value: 'i+'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: '>', ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
                     value: 'i-'
                 }
             ], children: props.children || jsxRuntime.jsx(Button, { arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
@@ -1656,17 +1760,18 @@ class TableComponent extends core$1.Component {
         });
     }
     constructor(textbus, state = {
-        layoutWidth: Array.from({ length: 3 }).fill(100),
+        layoutWidth: Array.from({ length: 5 }).fill(100),
         rows: Array.from({ length: 3 }).map(() => {
             return {
                 height: defaultRowHeight,
-                cells: Array.from({ length: 3 }).map(() => {
+                cells: Array.from({ length: 5 }).map(() => {
+                    const p = new ParagraphComponent(textbus);
+                    const slot = new core$1.Slot([core$1.ContentType.BlockComponent]);
+                    slot.insert(p);
                     return {
                         rowspan: 1,
                         colspan: 1,
-                        slot: new core$1.Slot([
-                            core$1.ContentType.BlockComponent
-                        ])
+                        slot
                     };
                 })
             };
@@ -1767,31 +1872,31 @@ class TableComponent extends core$1.Component {
             }
         });
     }
-    afterContentCheck() {
-        const selection = this.selection;
-        const rows = this.state.rows;
-        rows.forEach(row => {
-            row.cells.forEach(cell => {
-                const slot = cell.slot;
-                if (slot.isEmpty) {
-                    const childSlot = new core$1.Slot([
-                        core$1.ContentType.Text,
-                        core$1.ContentType.InlineComponent
-                    ]);
-                    const p = new ParagraphComponent(this.textbus, {
-                        slot: childSlot
-                    });
-                    slot.insert(p);
-                    if (slot === selection.anchorSlot) {
-                        selection.setAnchor(childSlot, 0);
-                    }
-                    if (slot === selection.focusSlot) {
-                        selection.setFocus(childSlot, 0);
-                    }
-                }
-            });
-        });
-    }
+    // afterContentCheck() {
+    //   const selection = this.selection
+    //   const rows = this.state.rows
+    //   rows.forEach(row => {
+    //     row.cells.forEach(cell => {
+    //       const slot = cell.slot
+    //       if (slot.isEmpty) {
+    //         const childSlot = new Slot([
+    //           ContentType.Text,
+    //           ContentType.InlineComponent
+    //         ])
+    //         const p = new ParagraphComponent(this.textbus, {
+    //           slot: childSlot
+    //         })
+    //         slot.insert(p)
+    //         if (slot === selection.anchorSlot) {
+    //           selection.setAnchor(childSlot, 0)
+    //         }
+    //         if (slot === selection.focusSlot) {
+    //           selection.setFocus(childSlot, 0)
+    //         }
+    //       }
+    //     })
+    //   })
+    // }
     deleteColumn(index) {
         this.state.layoutWidth.splice(index, 1);
         this.state.rows.forEach(row => {
@@ -2046,6 +2151,40 @@ const todolistComponentLoader = {
     }
 };
 
+function toList(textbus, type) {
+    const commander = textbus.get(core$1.Commander);
+    commander.transform({
+        targetType: ListComponent.type,
+        slotFactory() {
+            return new core$1.Slot([
+                core$1.ContentType.InlineComponent,
+                core$1.ContentType.Text
+            ]);
+        },
+        stateFactory(slots) {
+            return slots.map((slot, index) => {
+                return new ListComponent(textbus, {
+                    type,
+                    reorder: index === 0,
+                    slot
+                });
+            });
+        }
+    });
+}
+function registerListShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            key: ['o', 'u'],
+            ctrlKey: true,
+            shiftKey: true
+        },
+        action(key) {
+            toList(textbus, key === 'o' ? 'OrderedList' : 'UnorderedList');
+        }
+    });
+}
 class ListComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new ListComponent(textbus, {
@@ -2132,7 +2271,7 @@ class ListComponent extends core$1.Component {
                 key: 'Tab'
             },
             action: () => {
-                updateAfterList(this);
+                Promise.resolve().then(() => updateAfterList(this));
                 return false;
             }
         });
@@ -2276,8 +2415,8 @@ function ListComponentView(props) {
     };
 }
 const listComponentLoader = {
-    match(element) {
-        return element.tagName === 'UL' || element.tagName === 'OL';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && (element.tagName === 'UL' || element.tagName === 'OL');
     },
     read(element, textbus, slotParser) {
         const type = element.tagName === 'OL' ? 'OrderedList' : 'UnorderedList';
@@ -2450,62 +2589,10 @@ function useBlockTransform() {
                 break;
             case 'ol':
             case 'ul':
-                {
-                    commander.transform({
-                        targetType: ListComponent.type,
-                        slotFactory() {
-                            return new core$1.Slot([
-                                core$1.ContentType.InlineComponent,
-                                core$1.ContentType.Text
-                            ]);
-                        },
-                        stateFactory(slots) {
-                            return slots.map((slot, index) => {
-                                return new ListComponent(textbus, {
-                                    type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
-                                    reorder: index === 0,
-                                    slot
-                                });
-                            });
-                        }
-                    });
-                }
+                toList(textbus, value === 'ol' ? 'OrderedList' : 'UnorderedList');
                 break;
             case 'blockquote':
-                {
-                    const state = query.queryComponent(BlockquoteComponent);
-                    if (state.state === core$1.QueryStateType.Enabled) {
-                        const current = state.value;
-                        const parent = current.parent;
-                        const index = parent.indexOf(current);
-                        parent.retain(index);
-                        commander.removeComponent(current);
-                        current.__slots__.get(0).sliceContent().forEach(i => {
-                            parent.insert(i);
-                        });
-                    }
-                    else {
-                        const block = new BlockquoteComponent(textbus);
-                        const slot = block.state.slot;
-                        if (selection.startSlot === selection.endSlot) {
-                            const parentComponent = selection.startSlot.parent;
-                            const parentSlot = parentComponent.parent;
-                            const position = parentSlot.indexOf(parentComponent);
-                            slot.insert(parentComponent);
-                            parentSlot.retain(position);
-                            parentSlot.insert(block);
-                        }
-                        else {
-                            const commonAncestorSlot = selection.commonAncestorSlot;
-                            const scope = selection.getCommonAncestorSlotScope();
-                            commonAncestorSlot.cut(scope.startOffset, scope.endOffset).sliceContent().forEach(i => {
-                                slot.insert(i);
-                            });
-                            commonAncestorSlot.retain(scope.startOffset);
-                            commonAncestorSlot.insert(block);
-                        }
-                    }
-                }
+                toBlockquote(textbus);
                 break;
             case 'sourceCode':
                 {
@@ -2622,25 +2709,46 @@ function BlockTool() {
         }
         return (jsxRuntime.jsx(Dropdown, { onCheck: transform, trigger: 'hover', menu: [
                 {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }), checked: states.paragraph, children: "\u6B63\u6587" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '0'
+                            } }), checked: states.paragraph, children: "\u6B63\u6587" }),
                     value: 'paragraph'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '1'
+                            } }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
                     value: 'h1'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '2'
+                            } }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
                     value: 'h2'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '3'
+                            } }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
                     value: 'h3'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '4'
+                            } }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
                     value: 'h4'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '5'
+                            } }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
                     value: 'h5'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '6'
+                            } }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
                     value: 'h6'
                 }, {
                     label: jsxRuntime.jsx(Divider, {}),
@@ -2649,13 +2757,13 @@ function BlockTool() {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), checked: states.todolist, children: "\u5F85\u529E\u4E8B\u9879" }),
                     value: 'todolist'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'O', shiftKey: true, ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
                     value: 'ol'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'U', shiftKey: true, ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
                     value: 'ul'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: '\'', ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
                     value: 'blockquote'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }), checked: states.sourceCode, children: "\u4EE3\u7801\u5757" }),
@@ -3090,7 +3198,7 @@ function ColorTool(props) {
     ];
     return scopedCss.withScopedCSS(scopedId$a, () => {
         const vm = viewModel();
-        return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
+        return (jsxRuntime.jsx(Dropdown, { style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
                                     active: textColor() === ''
                                 }, onClick: () => {
                                     var _a;
@@ -3560,7 +3668,9 @@ function InsertTool(props) {
                 {
                     const table = new TableComponent(textbus);
                     insertComponent(table);
-                    selection.setPosition(table.state.rows[0].cells[0].slot, 0);
+                    textbus.nextTick(() => {
+                        selection.selectFirstPosition(table, true, true);
+                    });
                 }
                 break;
             case 'todolist':
@@ -4589,7 +4699,7 @@ function Scroll(props) {
         const el = scrollRef.current;
         function update() {
             if (props.isFocus()) {
-                input.caret.refresh(false);
+                input.caret.refresh();
             }
             updateShowShadow(draft => {
                 draft.leftEnd = el.scrollLeft === 0;
@@ -4881,9 +4991,6 @@ const TableComponentView = core.withAnnotation({
             }
             rowMapping.set(row, Math.random());
         });
-        Promise.resolve().then(() => {
-            props.component.afterContentCheck();
-        });
         if (readonly() || output()) {
             return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", children: jsxRuntime.jsxs("table", { class: [
                             'xnote-table-content',
@@ -4948,6 +5055,8 @@ const tableComponentLoader = {
                     });
                     const delta = slotParser(new core$1.Slot([
                         core$1.ContentType.BlockComponent,
+                        core$1.ContentType.InlineComponent,
+                        core$1.ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
                     results.forEach(i => {
@@ -4973,6 +5082,8 @@ const tableComponentLoader = {
                     });
                     const delta = slotParser(new core$1.Slot([
                         core$1.ContentType.BlockComponent,
+                        core$1.ContentType.InlineComponent,
+                        core$1.ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
                     results.forEach(i => {
@@ -5197,6 +5308,8 @@ class Editor extends core$1.Textbus {
                 registerTextAlignShortcut(textbus);
                 registerTextIndentShortcut(textbus);
                 registerAtShortcut(textbus);
+                registerListShortcut(textbus);
+                registerBlockquoteShortcut(textbus);
             } }, editorConfig));
         this.editorConfig = editorConfig;
         this.translator = new platformBrowser$1.OutputTranslator();
@@ -5262,6 +5375,7 @@ exports.ImageComponent = ImageComponent;
 exports.ImageView = ImageView;
 exports.InsertTool = InsertTool;
 exports.ItalicTool = ItalicTool;
+exports.Keymap = Keymap;
 exports.LeftToolbar = LeftToolbar;
 exports.LeftToolbarPlugin = LeftToolbarPlugin;
 exports.LinkTool = LinkTool;
@@ -5319,10 +5433,12 @@ exports.linkFormatter = linkFormatter;
 exports.listComponentLoader = listComponentLoader;
 exports.paragraphComponentLoader = paragraphComponentLoader;
 exports.registerAtShortcut = registerAtShortcut;
+exports.registerBlockquoteShortcut = registerBlockquoteShortcut;
 exports.registerBoldShortcut = registerBoldShortcut;
 exports.registerCodeShortcut = registerCodeShortcut;
 exports.registerHeadingShortcut = registerHeadingShortcut;
 exports.registerItalicShortcut = registerItalicShortcut;
+exports.registerListShortcut = registerListShortcut;
 exports.registerStrikeThroughShortcut = registerStrikeThroughShortcut;
 exports.registerTextAlignShortcut = registerTextAlignShortcut;
 exports.registerTextIndentShortcut = registerTextIndentShortcut;
@@ -5337,6 +5453,8 @@ exports.textAlignAttr = textAlignAttr;
 exports.textAlignAttrLoader = textAlignAttrLoader;
 exports.textIndentAttr = textIndentAttr;
 exports.textIndentAttrLoader = textIndentAttrLoader;
+exports.toBlockquote = toBlockquote;
+exports.toList = toList;
 exports.todolistComponentLoader = todolistComponentLoader;
 exports.toggleBold = toggleBold;
 exports.toggleCode = toggleCode;