@limetech/lime-elements 37.39.1 → 37.40.1

package/dist/esm/limel-dock-button.entry.js.map

@@ -1 +1 @@
-{"file":"limel-dock-button.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,mpEAAmpE;;MCoB5pE,UAAU;EAgDnB;;;;;IAoEQ,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC/B,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC;OAClD;KACJ,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACjC,CAAC;IAEM,8BAAyB,GAAG,CAAC,OAAoB;MACrD,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC;KACzC,CAAC;IAEM,mBAAc,GAAG;MACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC,CAAC;IAuCM,gCAA2B,GAAG;;MAClC,IAAI,MAAA,MAAA,IAAI,CAAC,sBAAsB,0CAAE,UAAU,0CAAE,cAAc,EAAE;QACzD,MAAA,IAAI,CAAC,sBAAsB,0CAAE,KAAK,EAAE,CAAC;OACxC;KACJ,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,IAAI,CAAC,eAAe,EAAE;QACtB,OAAO,KAAK,CAAC;OAChB;MAED,OAAO,OAAO,CAAC;KAClB,CAAC;;oBAnLiB,KAAK;2BAOE,KAAK;kBAkBd,KAAK;IAYlB,IAAI,CAAC,SAAS,GAAG,kBAAkB,EAAE,CAAC;GACzC;EAEM,MAAM;;IACT,IAAI,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,0CAAE,aAAa,EAAE;MACpC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;KAC/B;IAED,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC9C;EAGS,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACd,OAAO;KACV;IAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACrC,IAAI,CAAC,2BAA2B,CACnC,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GACjD;EAEO,aAAa;;IACjB,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,aAAa,CAAC;IAE1D,QACI,qBACI,aAAa,EAAE,IAAI,CAAC,eAAe,GAAG,KAAK,GAAG,aAAa,EAC3D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAChD,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAC/C,EAAC,eAAe,kBACZ,GAAG,EAAE,IAAI,CAAC,yBAAyB,KAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,KACnC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC9B,CACU,EAClB;GACL;EAEO,YAAY,CAChB,WAAwC,EACxC,IAAa;;IAEb,QACI,cACI,IAAI,EAAE,IAAI,EACV,QAAQ,EAAC,GAAG,EACZ,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACH,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;OAChC,EACD,OAAO,EAAE,WAAW,eACV,QAAQ,IAEjB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,kBAAkB,EAAE,CACrB,EACX;GACL;EA4BO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,OAAO,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,GAAG,CAAC;GAC5D;EAEO,WAAW;IACf,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAQ,CAAC;KACtD;GACJ;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACnC,QACI,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAClC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,GACxC,EACJ;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACxC,QACI,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAC5B,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,GACxC,EACJ;KACL;GACJ;;;;;;;;;","names":[],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n    all: unset;\n    isolation: isolate;\n    position: relative;\n\n    @include mixins.is-flat-inset-clickable(\n        $color: var(--limel-dock-item-text-color),\n        $background-color: var(--dock-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    height: var(--dock-item-height);\n\n    border-radius: functions.pxToRem(6);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.5rem;\n    min-width: var(--dock-item-height);\n\n    &:hover {\n        z-index: 1;\n    }\n\n    &.selected {\n        color: var(--limel-dock-item-text-color--selected);\n        background-color: var(\n            --dock-item-background-color--selected,\n            rgb(var(--contrast-200))\n        );\n\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow: var(--button-shadow-inset),\n                var(--shadow-depth-8-focused);\n        }\n\n        .icon {\n            color: var(--limel-dock-item-text--selected);\n        }\n    }\n}\n\nlimel-popover {\n    // makes buttons that are wrapped in a popover become fullwidth\n    display: grid;\n    grid-template-columns: 100%;\n\n    button[slot='trigger'][aria-expanded='true'] {\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding-left: 0.5rem;\n    padding-right: 0.75rem;\n}\n\n.icon {\n    flex-shrink: 0;\n    width: calc(var(--dock-item-height) - 1rem);\n    height: calc(var(--dock-item-height) - 1rem);\n    color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.125rem;\n    right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n    position: relative;\n\n    &:before {\n        text-align: center;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        background: {\n            color: var(--dock-background-color, rgb(var(--contrast-100)));\n            position: center;\n            repeat: no-repeat;\n            size: contain;\n            image: var(--limel-custom-home-icon);\n        }\n        // Since `content` defaults to `undefined`\n        // no pseudo element will be rendered, unless\n        // the consumer defines something.\n        content: var(--limel-custom-home-icon-enabler);\n\n        .button.selected & {\n            background-color: var(\n                --dock-item-background-color--selected,\n                rgb(var(--contrast-200))\n            );\n        }\n    }\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-dock-button',\n    shadow: false,\n    styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n    /**\n     * Item that is placed in the dock.\n     */\n    @Prop()\n    public item!: DockItem;\n\n    /**\n     * When the dock is expanded or collapsed, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * When dock is using mobile layout, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public useMobileLayout? = false;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Indicated whether the popover that renders a component is open.\n     */\n    @State()\n    private isOpen = false;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    private tooltipId: string;\n    private customComponentElement: HTMLElement;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public render() {\n        if (this.item?.dockMenu?.componentName) {\n            return this.renderPopover();\n        }\n\n        return this.renderButton(this.handleClick);\n    }\n\n    @Watch('isOpen')\n    protected openWatcher() {\n        if (!this.isOpen) {\n            return;\n        }\n\n        const observer = new IntersectionObserver(\n            this.focusCustomComponentElement,\n        );\n        observer.observe(this.customComponentElement);\n    }\n\n    private renderPopover() {\n        const CustomComponent = this.item?.dockMenu.componentName;\n\n        return (\n            <limel-popover\n                openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n                open={this.isOpen || this.item.dockMenu.menuOpen}\n                onClose={this.onPopoverClose}\n            >\n                {this.renderButton(this.openPopover, 'trigger')}\n                <CustomComponent\n                    ref={this.setCustomComponentElement}\n                    {...(this.item.dockMenu.props || {})}\n                    onClose={this.onPopoverClose}\n                />\n            </limel-popover>\n        );\n    }\n\n    private renderButton(\n        handleClick: (event: MouseEvent) => void,\n        slot?: string,\n    ) {\n        return (\n            <button\n                slot={slot}\n                tabindex=\"0\"\n                id={this.tooltipId}\n                type=\"button\"\n                class={{\n                    button: true,\n                    selected: this.item?.selected,\n                }}\n                onClick={handleClick}\n                aria-live=\"polite\"\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n                {this.renderNotification()}\n            </button>\n        );\n    }\n\n    private renderNotification = () => {\n        if (this.item.badge !== undefined) {\n            return <limel-badge label={this.item.badge} />;\n        }\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n        this.menuOpen.emit(this.item);\n    };\n\n    private setCustomComponentElement = (element: HTMLElement) => {\n        this.customComponentElement = element;\n    };\n\n    private onPopoverClose = () => {\n        this.isOpen = false;\n        this.close.emit();\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.itemSelected.emit(this.item);\n    };\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        return <limel-icon name={this.item.icon} class=\"icon\" />;\n    }\n\n    private renderLabel() {\n        if (this.expanded) {\n            return <span class=\"text\">{this.item.label}</span>;\n        }\n    }\n\n    private renderTooltip() {\n        if (!this.expanded && this.item.label) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.label}\n                    helperLabel={this.item.helperLabel}\n                    openDirection={this.getOpenDirection()}\n                />\n            );\n        }\n\n        if (this.expanded && this.item.helperLabel) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.helperLabel}\n                    openDirection={this.getOpenDirection()}\n                />\n            );\n        }\n    }\n\n    private focusCustomComponentElement = () => {\n        if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n            this.customComponentElement?.focus();\n        }\n    };\n\n    private getOpenDirection = () => {\n        if (this.useMobileLayout) {\n            return 'top';\n        }\n\n        return 'right';\n    };\n}\n"],"version":3}
+{"file":"limel-dock-button.entry.js","mappings":"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","names":[],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n    all: unset;\n    isolation: isolate;\n    position: relative;\n\n    @include mixins.is-flat-inset-clickable(\n        $color: var(--limel-dock-item-text-color),\n        $background-color: var(--dock-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    height: var(--dock-item-height);\n\n    border-radius: functions.pxToRem(6);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.5rem;\n    min-width: var(--dock-item-height);\n\n    &:hover {\n        z-index: 1;\n    }\n\n    &.selected {\n        color: var(--limel-dock-item-text-color--selected);\n        background-color: var(\n            --dock-item-background-color--selected,\n            rgb(var(--contrast-200))\n        );\n\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow: var(--button-shadow-inset),\n                var(--shadow-depth-8-focused);\n        }\n\n        .icon {\n            color: var(--limel-dock-item-text--selected);\n        }\n    }\n}\n\nlimel-popover {\n    // makes buttons that are wrapped in a popover become fullwidth\n    display: grid;\n    grid-template-columns: 100%;\n\n    button[slot='trigger'][aria-expanded='true'] {\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding-left: 0.5rem;\n    padding-right: 0.75rem;\n}\n\n.icon {\n    flex-shrink: 0;\n    width: calc(var(--dock-item-height) - 1rem);\n    height: calc(var(--dock-item-height) - 1rem);\n    color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.125rem;\n    right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n    position: relative;\n\n    &:before {\n        text-align: center;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        background: {\n            color: var(--dock-background-color, rgb(var(--contrast-100)));\n            position: center;\n            repeat: no-repeat;\n            size: contain;\n            image: var(--limel-custom-home-icon);\n        }\n        // Since `content` defaults to `undefined`\n        // no pseudo element will be rendered, unless\n        // the consumer defines something.\n        content: var(--limel-custom-home-icon-enabler);\n\n        .button.selected & {\n            background-color: var(\n                --dock-item-background-color--selected,\n                rgb(var(--contrast-200))\n            );\n        }\n    }\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-dock-button',\n    shadow: false,\n    styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n    /**\n     * Item that is placed in the dock.\n     */\n    @Prop()\n    public item!: DockItem;\n\n    /**\n     * When the dock is expanded or collapsed, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * When dock is using mobile layout, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public useMobileLayout? = false;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Indicated whether the popover that renders a component is open.\n     */\n    @State()\n    private isOpen = false;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    private tooltipId: string;\n    private customComponentElement: HTMLElement;\n    private intersectionObserver?: IntersectionObserver;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public render() {\n        if (this.item?.dockMenu?.componentName) {\n            return this.renderPopover();\n        }\n\n        return this.renderButton(this.handleClick);\n    }\n\n    @Watch('isOpen')\n    protected openWatcher() {\n        if (!this.isOpen) {\n            return;\n        }\n\n        if (!this.intersectionObserver) {\n            this.intersectionObserver = new IntersectionObserver(\n                this.focusCustomComponentElement,\n            );\n            this.intersectionObserver.observe(this.customComponentElement);\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n    }\n\n    private renderPopover() {\n        const CustomComponent = this.item?.dockMenu.componentName;\n\n        return (\n            <limel-popover\n                openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n                open={this.isOpen || this.item.dockMenu.menuOpen}\n                onClose={this.onPopoverClose}\n            >\n                {this.renderButton(this.openPopover, 'trigger')}\n                <CustomComponent\n                    ref={this.setCustomComponentElement}\n                    {...(this.item.dockMenu.props || {})}\n                    onClose={this.onPopoverClose}\n                />\n            </limel-popover>\n        );\n    }\n\n    private renderButton(\n        handleClick: (event: MouseEvent) => void,\n        slot?: string,\n    ) {\n        return (\n            <button\n                slot={slot}\n                tabindex=\"0\"\n                id={this.tooltipId}\n                type=\"button\"\n                class={{\n                    button: true,\n                    selected: this.item?.selected,\n                }}\n                onClick={handleClick}\n                aria-live=\"polite\"\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n                {this.renderNotification()}\n            </button>\n        );\n    }\n\n    private renderNotification = () => {\n        if (this.item.badge !== undefined) {\n            return <limel-badge label={this.item.badge} />;\n        }\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n        this.menuOpen.emit(this.item);\n    };\n\n    private setCustomComponentElement = (element: HTMLElement) => {\n        this.customComponentElement = element;\n    };\n\n    private onPopoverClose = () => {\n        this.isOpen = false;\n        this.close.emit();\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.itemSelected.emit(this.item);\n    };\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        return <limel-icon name={this.item.icon} class=\"icon\" />;\n    }\n\n    private renderLabel() {\n        if (this.expanded) {\n            return <span class=\"text\">{this.item.label}</span>;\n        }\n    }\n\n    private renderTooltip() {\n        if (!this.expanded && this.item.label) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.label}\n                    helperLabel={this.item.helperLabel}\n                    openDirection={this.getOpenDirection()}\n                />\n            );\n        }\n\n        if (this.expanded && this.item.helperLabel) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.helperLabel}\n                    openDirection={this.getOpenDirection()}\n                />\n            );\n        }\n    }\n\n    private focusCustomComponentElement = (\n        entries: IntersectionObserverEntry[],\n    ) => {\n        const entry = entries.find(\n            (e) => e.target === this.customComponentElement,\n        );\n        if (!entry) {\n            return;\n        }\n\n        if (!entry.isIntersecting) {\n            return;\n        }\n\n        if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n            this.customComponentElement?.focus();\n        }\n    };\n\n    private getOpenDirection = () => {\n        if (this.useMobileLayout) {\n            return 'top';\n        }\n\n        return 'right';\n    };\n}\n"],"version":3}

package/dist/esm/limel-prosemirror-adapter.entry.js

@@ -15907,78 +15907,114 @@ function exampleSetup(options) {
     }));
 }
 
-class MenuCommandFactory {
-  constructor(schema) {
-    this.markNames = {
-      bold: 'strong',
-      italic: 'em',
-      underline: 'underline',
-      blockquote: 'blockquote',
-      headerlevel1: 'headerlevel1',
-      headerlevel2: 'headerlevel2',
-      headerlevel3: 'headerlevel3',
-      addorremovelink: 'link',
-      numberedlist: 'ordered_list',
-      list: 'bullet_list',
+/**
+ * The `EditorMenuType` type is used to specify the type of menu items that can be added to the editor toolbar.
+ * Each one represents a different type to be used for creating the prosemirror commands relevant to the button.
+ * The values correspond to the types that can be used with the `prosemirror-commands` library.
+ * @beta
+ */
+const EditorMenuTypes = {
+  Bold: 'strong',
+  Italic: 'em',
+  Blockquote: 'blockquote',
+  HeaderLevel1: 'headerlevel1',
+  HeaderLevel2: 'headerlevel2',
+  HeaderLevel3: 'headerlevel3',
+  Link: 'link',
+  OrderedList: 'ordered_list',
+  BulletList: 'bullet_list',
+};
+/**
+ * `LevelMapping` is used to map string identifiers to numerical header levels.
+ * It provides a way to represent different levels of headings in ProseMirror commands.
+ *
+ * The `Heading` identifier is not a valid level and is used to identify the node type.
+ * The numerical values are used for creating ProseMirror commands to set the level of a heading node in the editor.
+ * @beta
+ */
+const LevelMapping = {
+  Heading: 'heading',
+  one: 1,
+  two: 2,
+  three: 3,
+};
+
+const createToggleMarkCommand = (schema, markName, url) => {
+  const markType = schema.marks[markName];
+  if (!markType) {
+    throw new Error(`Mark "${markName}" not found in schema`);
+  }
+  if (markName === EditorMenuTypes.Link && url) {
+    const attrs = {
+      href: url,
+      target: isExternalLink(url) ? '_blank' : null,
     };
-    this.schema = schema;
+    return toggleMark(markType, attrs);
   }
-  createCommand(mark) {
-    if (this.markNames[mark]) {
-      mark = this.markNames[mark];
-    }
-    switch (mark) {
-      case 'strong':
-      case 'em':
-      case 'underline':
-        return this.createToggleMarkCommand(mark);
-      case 'paragraph':
-        return this.createSetNodeTypeCommand(mark);
-      case 'headerlevel1':
-      case 'headerlevel2':
-      case 'headerlevel3':
-        return this.createSetNodeTypeCommand('heading', parseInt(mark[mark.length - 1], 10));
-      case 'blockquote':
-        return this.createWrapInCommand(mark);
-      case 'ordered_list':
-      case 'bullet_list':
-        return this.createListCommand(mark);
-      default:
-        throw new Error(`The Mark "${mark}" is not supported`);
-    }
+  return toggleMark(markType);
+};
+const isExternalLink = (url) => {
+  return !url.startsWith(window.location.origin);
+};
+const createSetNodeTypeCommand = (schema, nodeType, level) => {
+  const type = schema.nodes[nodeType];
+  if (!type) {
+    throw new Error(`Node type "${nodeType}" not found in schema`);
   }
-  createToggleMarkCommand(markName) {
-    const markType = this.schema.marks[markName];
-    if (!markType) {
-      throw new Error(`Mark "${markName}" not found in schema`);
-    }
-    return toggleMark(markType);
+  if (nodeType === 'heading' && level) {
+    return setBlockType(type, { level: level });
   }
-  createSetNodeTypeCommand(nodeType, level) {
-    const type = this.schema.nodes[nodeType];
-    if (!type) {
-      throw new Error(`Node type "${nodeType}" not found in schema`);
-    }
-    if (nodeType === 'heading' && level) {
-      return setBlockType(type, { level: level });
-    }
-    else {
-      return setBlockType(type);
-    }
+  else {
+    return setBlockType(type);
   }
-  createWrapInCommand(nodeType) {
-    const type = this.schema.nodes[nodeType];
-    if (!type) {
-      throw new Error(`Node type "${nodeType}" not found in schema`);
-    }
-    return wrapIn(type);
+};
+const createWrapInCommand = (schema, nodeType) => {
+  const type = schema.nodes[nodeType];
+  if (!type) {
+    throw new Error(`Node type "${nodeType}" not found in schema`);
   }
-  createListCommand(listType) {
-    const type = this.schema.nodes[listType];
-    if (!type) {
-      throw new Error(`List type "${listType}" not found in schema`);
+  return wrapIn(type);
+};
+const createListCommand = (schema, listType) => {
+  const type = schema.nodes[listType];
+  if (!type) {
+    throw new Error(`List type "${listType}" not found in schema`);
+  }
+  return wrapInList(type);
+};
+const commandMapping = {
+  strong: createToggleMarkCommand,
+  em: createToggleMarkCommand,
+  underline: createToggleMarkCommand,
+  headerlevel1: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.one),
+  headerlevel2: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.two),
+  headerlevel3: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.three),
+  blockquote: createWrapInCommand,
+  /* eslint-disable camelcase */
+  ordered_list: createListCommand,
+  bullet_list: createListCommand,
+  /* eslint-enable camelcase */
+  link: createToggleMarkCommand,
+};
+class MenuCommandFactory {
+  constructor(schema) {
+    this.schema = schema;
+  }
+  getCommand(mark, url) {
+    const commandFunc = commandMapping[mark];
+    if (!commandFunc) {
+      throw new Error(`The Mark "${mark}" is not supported`);
     }
-    return wrapInList(type);
+    return commandFunc(this.schema, mark, url);
+  }
+  buildKeymap() {
+    return {
+      'Mod-B': this.getCommand(EditorMenuTypes.Bold),
+      'Mod-I': this.getCommand(EditorMenuTypes.Italic),
+      'Mod-Shift-1': this.getCommand(EditorMenuTypes.HeaderLevel1),
+      'Mod-Shift-2': this.getCommand(EditorMenuTypes.HeaderLevel2),
+      'Mod-Shift-3': this.getCommand(EditorMenuTypes.HeaderLevel3),
+    };
   }
 }
 
@@ -15992,14 +16028,14 @@ const getCommandSymbols = () => {
 const { mod, shift } = getCommandSymbols();
 const textEditorMenuItems = [
   {
-    value: 'strong',
+    value: EditorMenuTypes.Bold,
     text: 'Bold',
     commandText: `${mod} B`,
     icon: '-lime-text-bold',
     iconOnly: true,
   },
   {
-    value: 'em',
+    value: EditorMenuTypes.Italic,
     text: 'Italic',
     commandText: `${mod} I`,
     icon: '-lime-text-italic',
@@ -16007,21 +16043,21 @@ const textEditorMenuItems = [
   },
   { separator: true },
   {
-    value: 'headerlevel1',
+    value: EditorMenuTypes.HeaderLevel1,
     text: 'Header Level 1',
     commandText: `${mod} ${shift} 1`,
     icon: '-lime-text-h-heading-1',
     iconOnly: true,
   },
   {
-    value: 'headerlevel2',
+    value: EditorMenuTypes.HeaderLevel2,
     text: 'Header Level 2',
     commandText: `${mod} ${shift} 2`,
     icon: '-lime-text-h-heading-2',
     iconOnly: true,
   },
   {
-    value: 'headerlevel3',
+    value: EditorMenuTypes.HeaderLevel3,
     text: 'Header Level 3',
     commandText: `${mod} ${shift} 3`,
     icon: '-lime-text-h-heading-3',
@@ -16029,19 +16065,19 @@ const textEditorMenuItems = [
   },
   { separator: true },
   {
-    value: 'bullet_list',
+    value: EditorMenuTypes.BulletList,
     text: 'Bullet list',
     icon: '-lime-text-bulleted-list',
     iconOnly: true,
   },
   {
-    value: 'ordered_list',
+    value: EditorMenuTypes.OrderedList,
     text: 'Numbered list',
     icon: '-lime-text-ordered-list',
     iconOnly: true,
   },
   {
-    value: 'blockquote',
+    value: EditorMenuTypes.Blockquote,
     text: 'Blockquote',
     icon: '-lime-text-blockquote',
     iconOnly: true,
@@ -24714,6 +24750,7 @@ const ProsemirrorAdapter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
+    this.editorKeyMap = {};
     this.initializeTextEditor = async () => {
       this.actionBarItems = textEditorMenuItems;
       const mySchema = new Schema({
@@ -24728,13 +24765,19 @@ const ProsemirrorAdapter = class {
           await this.contentConverter.parseAsHTML(this.value, schema$1);
       }
       const initialDoc = DOMParser.fromSchema(mySchema).parse(initialContentElement);
+      this.menuCommandFactory = new MenuCommandFactory(mySchema);
+      this.editorKeyMap = this.menuCommandFactory.buildKeymap();
+      const keymapPlugin = keymap(this.editorKeyMap);
       this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
         state: EditorState.create({
           doc: initialDoc,
-          plugins: exampleSetup({
-            schema: mySchema,
-            menuBar: false,
-          }),
+          plugins: [
+            ...exampleSetup({
+              schema: mySchema,
+              menuBar: false,
+            }),
+            keymapPlugin,
+          ],
         }),
         dispatchTransaction: (transaction) => {
           const newState = this.view.state.apply(transaction);
@@ -24749,10 +24792,9 @@ const ProsemirrorAdapter = class {
     };
     this.handleActionBarItem = (event) => {
       event.preventDefault();
-      const { text } = event.detail;
-      const mark = text.replace(/\s/g, '').toLowerCase();
+      const { value } = event.detail;
       try {
-        const command = this.menuCommandFactory.createCommand(mark);
+        const command = this.menuCommandFactory.getCommand(value);
         this.executeCommand(command);
       }
       catch (error) {
@@ -24812,7 +24854,11 @@ const ProsemirrorAdapter = class {
       transaction = tr;
     });
     this.view.dispatch(transaction);
-    this.view.focus();
+    this.setFocus();
+  }
+  setFocus() {
+    var _a;
+    (_a = this.view) === null || _a === void 0 ? void 0 : _a.focus();
   }
   get host() { return getElement(this); }
   static get watchers() { return {