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

package/bundles/index.esm.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
 import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, viewfly, createDynamicRef, getCurrentInstance, watch, ReflectiveInjector } from '@viewfly/core';
-import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, Slot, Component, Registry, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, Query, QueryStateType, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
-import { VIEW_CONTAINER, DomAdapter, Input, SelectionBridge, VIEW_DOCUMENT, BrowserModule, Parser } from '@textbus/platform-browser';
+import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, Slot, Component, Registry, Query, QueryStateType, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { VIEW_CONTAINER, isMac, DomAdapter, Input, SelectionBridge, VIEW_DOCUMENT, BrowserModule, Parser } from '@textbus/platform-browser';
 import { createPortal, DomRenderer, createApp, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
 import { useProduce } from '@viewfly/hooks';
 import highlightjs from 'highlight.js';
@@ -10,7 +10,7 @@ import { any2Hsl, hsl2Rgb } from '@tanbo/color';
 import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
 import { CollaborateModule } from '@textbus/collaborate';
 
-var scopedId$l = "vf-3d0183";
+var scopedId$m = "vf-3d0183";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -131,7 +131,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$l, () => {
+    return withScopedCSS(scopedId$m, () => {
         return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -143,10 +143,10 @@ function Button(props) {
     });
 }
 
-var scopedId$k = "vf-ac7e8d";
+var scopedId$l = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return withScopedCSS(scopedId$k, () => {
+    return withScopedCSS(scopedId$l, () => {
         return (jsx("div", { class: "component-toolbar", style: props.style, children: jsx("div", { class: [
                     'toolbar',
                     {
@@ -156,15 +156,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$j = "vf-ede279";
+var scopedId$k = "vf-ede279";
 
 function Divider() {
-    return withScopedCSS(scopedId$j, () => {
+    return withScopedCSS(scopedId$k, () => {
         return jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$i = "vf-4c1803";
+var scopedId$j = "vf-4c1803";
 
 function DragResize(props) {
     const isShow = createSignal(false);
@@ -272,16 +272,16 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$i, () => {
+    return withScopedCSS(scopedId$j, () => {
         return (jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsx("div", { class: "container", ref: ref, children: props.children }), jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsxs("div", { class: "mask", ref: mask, children: [component.state.width, "*", component.state.height] }), jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), 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 = withAnnotation({
     providers: [
@@ -373,7 +373,7 @@ const DropdownMenuPortal = withAnnotation({
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return createPortal(withScopedCSS(scopedId$g, () => {
+    return createPortal(withScopedCSS(scopedId$h, () => {
         return (jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsx("div", { class: "dropdown-menu-content", children: props.children }) }));
@@ -439,7 +439,7 @@ const Dropdown = withAnnotation({
                 dropdownContextService.hide(false);
             }
         },
-        $render: withScopedCSS(scopedId$h, () => {
+        $render: withScopedCSS(scopedId$i, () => {
             return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsx(DropdownMenuPortal, { noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                             props.menu.map(menu => {
                                 return (jsx("div", { class: "dropdown-menu-item", onClick: () => {
@@ -455,6 +455,42 @@ const Dropdown = withAnnotation({
     };
 });
 
+var scopedId$g = "vf-9dad68";
+
+function Keymap(props) {
+    const arr = [];
+    const keymap = props.keymap;
+    if (keymap.ctrlKey) {
+        arr.push(isMac() ? jsx("span", { class: "xnote-icon-command" }) : 'Ctrl');
+    }
+    if (keymap.shiftKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(isMac() ? jsx("span", { class: "xnote-icon-shift" }) : 'Shift');
+    }
+    if (keymap.altKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(isMac() ? jsx("span", { class: "xnote-icon-opt" }) : 'Alt');
+    }
+    if (keymap.key) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        if (Array.isArray(keymap.key)) {
+            arr.push(jsx("span", { children: keymap.key.join('/') }));
+        }
+        else {
+            arr.push(jsx("span", { children: keymap.key }));
+        }
+    }
+    return withScopedCSS(scopedId$g, () => {
+        return (jsx("span", { class: "keymap", children: arr }));
+    });
+}
+
 var scopedId$f = "vf-acaa5f";
 
 function MenuHeading(props) {
@@ -463,7 +499,7 @@ function MenuHeading(props) {
     });
 }
 
-var scopedId$e = "vf-678daa";
+var scopedId$e = "vf-c3b9dc";
 
 function MenuItem(props) {
     const dropdownContextService = inject(DropdownContextService, null);
@@ -484,7 +520,7 @@ function MenuItem(props) {
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
     return withScopedCSS(scopedId$e, () => {
-        return (jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxs("div", { children: [props.icon && jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), props.arrow ?
+        return (jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxs("div", { class: "menu-item-content", children: [jsxs("div", { children: [props.icon && jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsx("div", { children: props.desc })] }), props.arrow ?
                     jsx("div", { class: "arrow", children: jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsx("div", { class: [
                             'menu-check',
@@ -603,10 +639,14 @@ function registerHeadingShortcut(textbus) {
     const selection = textbus.get(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);
         }
     });
@@ -697,6 +737,55 @@ BlockquoteComponent.zenCoding = {
         };
     }
 };
+function toBlockquote(textbus) {
+    const query = textbus.get(Query);
+    const commander = textbus.get(Commander);
+    const selection = textbus.get(Selection);
+    const state = query.queryComponent(BlockquoteComponent);
+    if (state.state === 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(Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            ctrlKey: true,
+            key: '\''
+        },
+        action() {
+            toBlockquote(textbus);
+        }
+    });
+}
 function BlockquoteView(props) {
     const adapter = inject(DomAdapter);
     const readonly = useReadonly();
@@ -709,8 +798,8 @@ function BlockquoteView(props) {
     };
 }
 const blockquoteComponentLoader = {
-    match(element) {
-        return element.tagName === 'BLOCKQUOTE';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(ContentType.BlockComponent) && element.tagName === 'BLOCKQUOTE';
     },
     read(element, textbus, slotParser) {
         const delta = slotParser(new Slot([
@@ -863,8 +952,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(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];
@@ -943,6 +1032,15 @@ const languageList = [{
     }, {
         label: 'Go',
         value: 'Go'
+    }, {
+        label: 'Kotlin',
+        value: 'kotlin'
+    }, {
+        label: 'Python',
+        value: 'python'
+    }, {
+        label: 'PHP',
+        value: 'php'
     }, {
         label: 'JSON',
         value: 'JSON',
@@ -985,11 +1083,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',
@@ -1287,7 +1390,7 @@ function SourceCodeView(props) {
     }
     const input = inject(Input);
     function updateCaret() {
-        input.caret.refresh(false);
+        input.caret.refresh();
     }
     const readonly = useReadonly();
     const output = useOutput();
@@ -1407,9 +1510,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(ContentType.BlockComponent) &&
+            ((element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
+                element.tagName === 'PRE');
     },
     read(el, textbus) {
         let slots = [];
@@ -1607,25 +1711,25 @@ function AttrTool(props) {
         const states = checkStates();
         return (jsx(Dropdown, { style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-left" }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsx(Keymap, { keymap: { key: 'L', ctrlKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-right" }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsx(Keymap, { keymap: { key: 'R', ctrlKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
                     value: 't-r'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-center" }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsx(Keymap, { keymap: { key: 'E', ctrlKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
                     value: 't-c'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-justify" }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsx(Keymap, { keymap: { key: 'J', ctrlKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
                     value: 't-j'
                 }, {
                     label: jsx(Divider, {}),
                     value: ''
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: '<', ctrlKey: true } }), icon: jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
                     value: 'i+'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: '>', ctrlKey: true } }), icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
                     value: 'i-'
                 }
             ], children: props.children || jsx(Button, { arrow: true, highlight: false, children: jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
@@ -1654,17 +1758,18 @@ class TableComponent extends 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 Slot([ContentType.BlockComponent]);
+                    slot.insert(p);
                     return {
                         rowspan: 1,
                         colspan: 1,
-                        slot: new Slot([
-                            ContentType.BlockComponent
-                        ])
+                        slot
                     };
                 })
             };
@@ -1765,31 +1870,31 @@ class TableComponent extends 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 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);
-                    }
-                }
-            });
-        });
-    }
+    // 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 => {
@@ -2044,6 +2149,40 @@ const todolistComponentLoader = {
     }
 };
 
+function toList(textbus, type) {
+    const commander = textbus.get(Commander);
+    commander.transform({
+        targetType: ListComponent.type,
+        slotFactory() {
+            return new Slot([
+                ContentType.InlineComponent,
+                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(Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            key: ['o', 'u'],
+            ctrlKey: true,
+            shiftKey: true
+        },
+        action(key) {
+            toList(textbus, key === 'o' ? 'OrderedList' : 'UnorderedList');
+        }
+    });
+}
 class ListComponent extends Component {
     static fromJSON(textbus, json) {
         return new ListComponent(textbus, {
@@ -2130,7 +2269,7 @@ class ListComponent extends Component {
                 key: 'Tab'
             },
             action: () => {
-                updateAfterList(this);
+                Promise.resolve().then(() => updateAfterList(this));
                 return false;
             }
         });
@@ -2274,8 +2413,8 @@ function ListComponentView(props) {
     };
 }
 const listComponentLoader = {
-    match(element) {
-        return element.tagName === 'UL' || element.tagName === 'OL';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(ContentType.BlockComponent) && (element.tagName === 'UL' || element.tagName === 'OL');
     },
     read(element, textbus, slotParser) {
         const type = element.tagName === 'OL' ? 'OrderedList' : 'UnorderedList';
@@ -2448,62 +2587,10 @@ function useBlockTransform() {
                 break;
             case 'ol':
             case 'ul':
-                {
-                    commander.transform({
-                        targetType: ListComponent.type,
-                        slotFactory() {
-                            return new Slot([
-                                ContentType.InlineComponent,
-                                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 === 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':
                 {
@@ -2620,25 +2707,46 @@ function BlockTool() {
         }
         return (jsx(Dropdown, { onCheck: transform, trigger: 'hover', menu: [
                 {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-pilcrow" }), checked: states.paragraph, children: "\u6B63\u6587" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-pilcrow" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '0'
+                            } }), checked: states.paragraph, children: "\u6B63\u6587" }),
                     value: 'paragraph'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h1" }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h1" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '1'
+                            } }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
                     value: 'h1'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h2" }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h2" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '2'
+                            } }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
                     value: 'h2'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h3" }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h3" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '3'
+                            } }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
                     value: 'h3'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h4" }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h4" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '4'
+                            } }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
                     value: 'h4'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h5" }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h5" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '5'
+                            } }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
                     value: 'h5'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h6" }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h6" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '6'
+                            } }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
                     value: 'h6'
                 }, {
                     label: jsx(Divider, {}),
@@ -2647,13 +2755,13 @@ function BlockTool() {
                     label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), checked: states.todolist, children: "\u5F85\u529E\u4E8B\u9879" }),
                     value: 'todolist'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: 'O', shiftKey: true, ctrlKey: true } }), icon: jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
                     value: 'ol'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: 'U', shiftKey: true, ctrlKey: true } }), icon: jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
                     value: 'ul'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: '\'', ctrlKey: true } }), icon: jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
                     value: 'blockquote'
                 }, {
                     label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-source-code" }), checked: states.sourceCode, children: "\u4EE3\u7801\u5757" }),
@@ -3088,7 +3196,7 @@ function ColorTool(props) {
     ];
     return withScopedCSS(scopedId$a, () => {
         const vm = viewModel();
-        return (jsx(Dropdown, { style: props.style, abreast: props.abreast, trigger: 'hover', menu: jsxs("div", { children: [jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxs("div", { class: "text-colors", children: [jsx("div", { class: {
+        return (jsx(Dropdown, { style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxs("div", { children: [jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxs("div", { class: "text-colors", children: [jsx("div", { class: {
                                     active: textColor() === ''
                                 }, onClick: () => {
                                     var _a;
@@ -3558,7 +3666,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':
@@ -4587,7 +4697,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;
@@ -4879,9 +4989,6 @@ const TableComponentView = withAnnotation({
             }
             rowMapping.set(row, Math.random());
         });
-        Promise.resolve().then(() => {
-            props.component.afterContentCheck();
-        });
         if (readonly() || output()) {
             return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: jsx("div", { class: "xnote-table-container", children: jsxs("table", { class: [
                             'xnote-table-content',
@@ -4946,6 +5053,8 @@ const tableComponentLoader = {
                     });
                     const delta = slotParser(new Slot([
                         ContentType.BlockComponent,
+                        ContentType.InlineComponent,
+                        ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
                     results.forEach(i => {
@@ -4971,6 +5080,8 @@ const tableComponentLoader = {
                     });
                     const delta = slotParser(new Slot([
                         ContentType.BlockComponent,
+                        ContentType.InlineComponent,
+                        ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
                     results.forEach(i => {
@@ -5195,6 +5306,8 @@ class Editor extends Textbus {
                 registerTextAlignShortcut(textbus);
                 registerTextIndentShortcut(textbus);
                 registerAtShortcut(textbus);
+                registerListShortcut(textbus);
+                registerBlockquoteShortcut(textbus);
             } }, editorConfig));
         this.editorConfig = editorConfig;
         this.translator = new OutputTranslator();
@@ -5236,4 +5349,4 @@ class Editor extends Textbus {
     }
 }
 
-export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, atComponentLoader, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
+export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, Keymap, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, atComponentLoader, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };