@milkdown/crepe 7.5.7 → 7.5.9

package/lib/types/icons/code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../src/icons/code.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAWpB,CAAA"}
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../src/icons/code.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAkBpB,CAAA"}

package/lib/types/icons/confirm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirm.d.ts","sourceRoot":"","sources":["../../../src/icons/confirm.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,KAWvB,CAAA"}
+{"version":3,"file":"confirm.d.ts","sourceRoot":"","sources":["../../../src/icons/confirm.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,KAoBvB,CAAA"}

package/lib/types/icons/divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/icons/divider.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,KAWvB,CAAA"}
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/icons/divider.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,KAoBvB,CAAA"}

package/lib/types/icons/dragHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragHandle.d.ts","sourceRoot":"","sources":["../../../src/icons/dragHandle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,KAI1B,CAAA"}
+{"version":3,"file":"dragHandle.d.ts","sourceRoot":"","sources":["../../../src/icons/dragHandle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,KAW1B,CAAA"}

package/lib/types/icons/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../src/icons/edit.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAWpB,CAAA"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../src/icons/edit.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAkBpB,CAAA"}

package/lib/types/icons/h1.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h1.d.ts","sourceRoot":"","sources":["../../../src/icons/h1.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAWlB,CAAA"}
+{"version":3,"file":"h1.d.ts","sourceRoot":"","sources":["../../../src/icons/h1.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAkBlB,CAAA"}

package/lib/types/icons/h2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h2.d.ts","sourceRoot":"","sources":["../../../src/icons/h2.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAWlB,CAAA"}
+{"version":3,"file":"h2.d.ts","sourceRoot":"","sources":["../../../src/icons/h2.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAkBlB,CAAA"}

package/lib/types/icons/h3.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h3.d.ts","sourceRoot":"","sources":["../../../src/icons/h3.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAWlB,CAAA"}
+{"version":3,"file":"h3.d.ts","sourceRoot":"","sources":["../../../src/icons/h3.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAkBlB,CAAA"}

package/lib/types/icons/h4.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h4.d.ts","sourceRoot":"","sources":["../../../src/icons/h4.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAWlB,CAAA"}
+{"version":3,"file":"h4.d.ts","sourceRoot":"","sources":["../../../src/icons/h4.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAkBlB,CAAA"}

package/lib/types/icons/h5.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h5.d.ts","sourceRoot":"","sources":["../../../src/icons/h5.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAWlB,CAAA"}
+{"version":3,"file":"h5.d.ts","sourceRoot":"","sources":["../../../src/icons/h5.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAkBlB,CAAA"}

package/lib/types/icons/h6.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h6.d.ts","sourceRoot":"","sources":["../../../src/icons/h6.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAWlB,CAAA"}
+{"version":3,"file":"h6.d.ts","sourceRoot":"","sources":["../../../src/icons/h6.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,KAkBlB,CAAA"}

package/lib/types/icons/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/icons/image.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,KAWrB,CAAA"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/icons/image.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,KAkBrB,CAAA"}

package/lib/types/icons/italic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"italic.d.ts","sourceRoot":"","sources":["../../../src/icons/italic.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,KAItB,CAAA"}
+{"version":3,"file":"italic.d.ts","sourceRoot":"","sources":["../../../src/icons/italic.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,KAWtB,CAAA"}

package/lib/types/icons/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/icons/link.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAIpB,CAAA"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/icons/link.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAWpB,CAAA"}

package/lib/types/icons/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/icons/menu.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAWpB,CAAA"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/icons/menu.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAkBpB,CAAA"}

package/lib/types/icons/orderedList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"orderedList.d.ts","sourceRoot":"","sources":["../../../src/icons/orderedList.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,KAW3B,CAAA"}
+{"version":3,"file":"orderedList.d.ts","sourceRoot":"","sources":["../../../src/icons/orderedList.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,KAkB3B,CAAA"}

package/lib/types/icons/plus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plus.d.ts","sourceRoot":"","sources":["../../../src/icons/plus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAWpB,CAAA"}
+{"version":3,"file":"plus.d.ts","sourceRoot":"","sources":["../../../src/icons/plus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAkBpB,CAAA"}

package/lib/types/icons/quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../../src/icons/quote.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,KAWrB,CAAA"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../../src/icons/quote.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,KAkBrB,CAAA"}

package/lib/types/icons/remove.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remove.d.ts","sourceRoot":"","sources":["../../../src/icons/remove.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,KAItB,CAAA"}
+{"version":3,"file":"remove.d.ts","sourceRoot":"","sources":["../../../src/icons/remove.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,KAWtB,CAAA"}

package/lib/types/icons/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/icons/search.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,KAItB,CAAA"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/icons/search.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,KAetB,CAAA"}

package/lib/types/icons/strikethrough.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strikethrough.d.ts","sourceRoot":"","sources":["../../../src/icons/strikethrough.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,KAI7B,CAAA"}
+{"version":3,"file":"strikethrough.d.ts","sourceRoot":"","sources":["../../../src/icons/strikethrough.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,KAW7B,CAAA"}

package/lib/types/icons/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/icons/table.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,KAWrB,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/icons/table.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,KAkBrB,CAAA"}

package/lib/types/icons/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/icons/text.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAWpB,CAAA"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/icons/text.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,KAkBpB,CAAA"}

package/lib/types/icons/todoList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"todoList.d.ts","sourceRoot":"","sources":["../../../src/icons/todoList.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,KAIxB,CAAA"}
+{"version":3,"file":"todoList.d.ts","sourceRoot":"","sources":["../../../src/icons/todoList.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,KAWxB,CAAA"}

package/lib/types/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAE1D,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,WAGjD;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,SAAS,WAG5C;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,wBAAwB,QAGhF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAE1D,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,WAGjD;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,SAAS,WAG5C;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,wBAAwB,QAIlC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/crepe",
   "type": "module",
-  "version": "7.5.7",
+  "version": "7.5.9",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "codemirror": "^6.0.1",
     "nanoid": "^5.0.0",
     "tslib": "^2.5.0",
-    "@milkdown/kit": "7.5.5"
+    "@milkdown/kit": "7.5.9"
   },
   "nx": {
     "targets": {

package/src/core/crepe.ts

@@ -1,5 +1,10 @@
 import type { DefaultValue } from '@milkdown/kit/core'
-import { Editor, defaultValueCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/kit/core'
+import {
+  Editor,
+  defaultValueCtx,
+  editorViewOptionsCtx,
+  rootCtx,
+} from '@milkdown/kit/core'
 
 import { commonmark } from '@milkdown/kit/preset/commonmark'
 import { gfm } from '@milkdown/kit/preset/gfm'
@@ -33,15 +38,16 @@ export class Crepe {
     featureConfigs = {},
     defaultValue = '',
   }: CrepeConfig) {
-    const enabledFeatures = Object
-      .entries({
-        ...defaultFeatures,
-        ...features,
-      })
+    const enabledFeatures = Object.entries({
+      ...defaultFeatures,
+      ...features,
+    })
       .filter(([, enabled]) => enabled)
       .map(([feature]) => feature as CrepeFeature)
 
-    this.#rootElement = (typeof root === 'string' ? document.querySelector(root) : root) ?? document.body
+    this.#rootElement =
+      (typeof root === 'string' ? document.querySelector(root) : root) ??
+      document.body
     this.#editor = Editor.make()
       .config(configureFeatures(enabledFeatures))
       .config((ctx) => {
@@ -50,7 +56,7 @@ export class Crepe {
         ctx.set(editorViewOptionsCtx, {
           editable: () => this.#editable,
         })
-        ctx.update(indentConfig.key, value => ({
+        ctx.update(indentConfig.key, (value) => ({
           ...value,
           size: 4,
         }))
@@ -65,10 +71,10 @@ export class Crepe {
     const promiseList: Promise<unknown>[] = []
 
     enabledFeatures.forEach((feature) => {
-      const config = (featureConfigs as Partial<Record<CrepeFeature, never>>)[feature]
-      promiseList.push(
-        loadFeature(feature, this.#editor, config),
-      )
+      const config = (featureConfigs as Partial<Record<CrepeFeature, never>>)[
+        feature
+      ]
+      promiseList.push(loadFeature(feature, this.#editor, config))
     })
 
     this.#initPromise = Promise.all(promiseList)

package/src/feature/block-edit/handle/component.ts

@@ -5,8 +5,8 @@ import type { Icon } from '../../shared'
 export interface BlockHandleProps {
   show: boolean
   onAdd: () => void
-  addIcon: Icon
-  handleIcon: Icon
+  addIcon?: Icon
+  handleIcon?: Icon
 }
 
 const blockHandleComponent: Component<BlockHandleProps> = ({
@@ -31,12 +31,15 @@ const blockHandleComponent: Component<BlockHandleProps> = ({
   }
   return html`
     <host>
-      <div ref=${ref} onmousedown=${onMouseDown} onmouseup=${onMouseUp} class="operation-item">
+      <div
+        ref=${ref}
+        onmousedown=${onMouseDown}
+        onmouseup=${onMouseUp}
+        class="operation-item"
+      >
         ${addIcon?.() || plusIcon}
       </div>
-      <div class="operation-item">
-        ${handleIcon?.() || menuIcon}
-      </div>
+      <div class="operation-item">${handleIcon?.() || menuIcon}</div>
     </host>
   `
 }

package/src/feature/block-edit/handle/index.ts

@@ -29,8 +29,7 @@ export class BlockHandleView implements PluginView {
       content,
       getOffset: () => 16,
       getPlacement: ({ active, blockDom }) => {
-        if (active.node.type.name === 'heading')
-          return 'left'
+        if (active.node.type.name === 'heading') return 'left'
 
         let totalDescendant = 0
         active.node.descendants((node) => {
@@ -44,7 +43,9 @@ export class BlockHandleView implements PluginView {
         const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0
         const height = domRect.height - paddingTop - paddingBottom
         const handleHeight = handleRect.height
-        return totalDescendant > 2 || handleHeight < height ? 'left-start' : 'left'
+        return totalDescendant > 2 || handleHeight < height
+          ? 'left-start'
+          : 'left'
       },
     })
     this.update()
@@ -62,13 +63,11 @@ export class BlockHandleView implements PluginView {
   onAdd = () => {
     const ctx = this.#ctx
     const view = ctx.get(editorViewCtx)
-    if (!view.hasFocus())
-      view.focus()
+    if (!view.hasFocus()) view.focus()
 
     const { state, dispatch } = view
     const active = this.#provider.active
-    if (!active)
-      return
+    if (!active) return
 
     const $pos = active.$pos
     const pos = $pos.pos + active.node.nodeSize
@@ -82,12 +81,16 @@ export class BlockHandleView implements PluginView {
 }
 
 defIfNotExists('milkdown-block-handle', BlockHandleElement)
-export function configureBlockHandle(ctx: Ctx, config?: BlockEditFeatureConfig) {
+export function configureBlockHandle(
+  ctx: Ctx,
+  config?: BlockEditFeatureConfig
+) {
   ctx.set(blockConfig.key, {
     filterNodes: (pos) => {
-      const filter = findParent(node => ['table', 'blockquote'].includes(node.type.name))(pos)
-      if (filter)
-        return false
+      const filter = findParent((node) =>
+        ['table', 'blockquote'].includes(node.type.name)
+      )(pos)
+      if (filter) return false
 
       return true
     },

package/src/feature/block-edit/index.ts

@@ -48,10 +48,13 @@ interface BlockEditConfig {
 
 export type BlockEditFeatureConfig = Partial<BlockEditConfig>
 
-export const defineFeature: DefineFeature<BlockEditFeatureConfig> = (editor, config) => {
+export const defineFeature: DefineFeature<BlockEditFeatureConfig> = (
+  editor,
+  config
+) => {
   editor
-    .config(ctx => configureBlockHandle(ctx, config))
-    .config(ctx => configureMenu(ctx, config))
+    .config((ctx) => configureBlockHandle(ctx, config))
+    .config((ctx) => configureMenu(ctx, config))
     .use(menuAPI)
     .use(block)
     .use(menu)

package/src/feature/block-edit/menu/component.ts

@@ -1,5 +1,14 @@
 import type { Component } from 'atomico'
-import { c, html, useCallback, useEffect, useHost, useMemo, useRef, useState } from 'atomico'
+import {
+  c,
+  html,
+  useCallback,
+  useEffect,
+  useHost,
+  useMemo,
+  useRef,
+  useState,
+} from 'atomico'
 import type { Ctx } from '@milkdown/kit/ctx'
 import type { BlockEditFeatureConfig } from '../index'
 import { getGroups } from './config'
@@ -30,8 +39,7 @@ export const menuComponent: Component<MenuProps> = ({
 
   const onMouseMove = useCallback((e: MouseEvent) => {
     const prevPos = prevMousePosition.current
-    if (!prevPos)
-      return
+    if (!prevPos) return
 
     const { x, y } = e
     prevPos.x = x
@@ -39,113 +47,122 @@ export const menuComponent: Component<MenuProps> = ({
   }, [])
 
   useEffect(() => {
-    if (size === 0 && show)
-      hide?.()
+    if (size === 0 && show) hide?.()
+    else if (hoverIndex >= size) setHoverIndex(0)
   }, [size, show])
 
-  const onHover = useCallback((
-    index: number | ((prev: number) => number),
-    after?: (index: number) => void,
-  ) => {
-    setHoverIndex((prev) => {
-      const next = typeof index === 'function' ? index(prev) : index
-
-      after?.(next)
-      return next
-    })
-  }, [])
+  const onHover = useCallback(
+    (
+      index: number | ((prev: number) => number),
+      after?: (index: number) => void
+    ) => {
+      setHoverIndex((prev) => {
+        const next = typeof index === 'function' ? index(prev) : index
+
+        after?.(next)
+        return next
+      })
+    },
+    []
+  )
 
   const scrollToIndex = useCallback((index: number) => {
-    const target = host
-      .current
-      .querySelector<HTMLElement>(`[data-index="${index}"]`)
+    const target = host.current.querySelector<HTMLElement>(
+      `[data-index="${index}"]`
+    )
     const scrollRoot = host.current.querySelector<HTMLElement>('.menu-groups')
 
-    if (!target || !scrollRoot)
-      return
+    if (!target || !scrollRoot) return
 
     scrollRoot.scrollTop = target.offsetTop - scrollRoot.offsetTop
   }, [])
 
-  const runByIndex = useCallback((index: number) => {
-    const item = groups.flatMap(group => group.items).at(index)
-    if (item && ctx)
-      item.onRun(ctx)
+  const runByIndex = useCallback(
+    (index: number) => {
+      const item = groups.flatMap((group) => group.items).at(index)
+      if (item && ctx) item.onRun(ctx)
 
-    hide?.()
-  }, [groups])
-
-  const onKeydown = useCallback((e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      e.preventDefault()
       hide?.()
-      return
-    }
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      return onHover(index => (index < size - 1) ? index + 1 : index, scrollToIndex)
-    }
-
-    if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      return onHover(index => index <= 0 ? index : index - 1, scrollToIndex)
-    }
-
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault()
-      return onHover((index) => {
-        const group = groups.find(group => group.range[0] <= index && group.range[1] > index)
-        if (!group)
-          return index
-
-        const prevGroup = groups[groups.indexOf(group) - 1]
-        if (!prevGroup)
-          return index
-
-        return prevGroup.range[1] - 1
-      }, scrollToIndex)
-    }
-
-    if (e.key === 'ArrowRight') {
-      e.preventDefault()
-      return onHover((index) => {
-        const group = groups.find(group => group.range[0] <= index && group.range[1] > index)
-        if (!group)
-          return index
-
-        const nextGroup = groups[groups.indexOf(group) + 1]
-        if (!nextGroup)
-          return index
-
-        return nextGroup.range[0]
-      }, scrollToIndex)
-    }
-
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      runByIndex(hoverIndex)
-    }
-  }, [hide, groups, hoverIndex])
+    },
+    [groups]
+  )
+
+  const onKeydown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        hide?.()
+        return
+      }
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        return onHover(
+          (index) => (index < size - 1 ? index + 1 : index),
+          scrollToIndex
+        )
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        return onHover(
+          (index) => (index <= 0 ? index : index - 1),
+          scrollToIndex
+        )
+      }
+
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        return onHover((index) => {
+          const group = groups.find(
+            (group) => group.range[0] <= index && group.range[1] > index
+          )
+          if (!group) return index
+
+          const prevGroup = groups[groups.indexOf(group) - 1]
+          if (!prevGroup) return index
+
+          return prevGroup.range[1] - 1
+        }, scrollToIndex)
+      }
+
+      if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        return onHover((index) => {
+          const group = groups.find(
+            (group) => group.range[0] <= index && group.range[1] > index
+          )
+          if (!group) return index
+
+          const nextGroup = groups[groups.indexOf(group) + 1]
+          if (!nextGroup) return index
+
+          return nextGroup.range[0]
+        }, scrollToIndex)
+      }
+
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        runByIndex(hoverIndex)
+      }
+    },
+    [hide, groups, hoverIndex]
+  )
 
   const onMouseEnter = useCallback((index: number) => {
     return (e: MouseEvent) => {
       const prevPos = prevMousePosition.current
-      if (!prevPos)
-        return
+      if (!prevPos) return
 
       const { x, y } = e
-      if (x === prevPos.x && y === prevPos.y)
-        return
+      if (x === prevPos.x && y === prevPos.y) return
 
       onHover(index)
     }
   }, [])
 
   useEffect(() => {
-    if (show)
-      root.addEventListener('keydown', onKeydown, { capture: true })
-
+    if (show) root.addEventListener('keydown', onKeydown, { capture: true })
     else root.removeEventListener('keydown', onKeydown, { capture: true })
 
     return () => {
@@ -157,14 +174,19 @@ export const menuComponent: Component<MenuProps> = ({
     <host onmousedown=${(e: MouseEvent) => e.preventDefault()}>
       <nav class="tab-group">
         <ul>
-          ${groups.map(group =>
-            html`<li
-              key=${group.key}
-              onmousedown=${() => onHover(group.range[0], scrollToIndex)}
-              class=${hoverIndex >= group.range[0] && hoverIndex < group.range[1] ? 'selected' : ''}
-            >
-              ${group.label}
-            </li>`)}
+          ${groups.map(
+            (group) =>
+              html`<li
+                key=${group.key}
+                onmousedown=${() => onHover(group.range[0], scrollToIndex)}
+                class=${hoverIndex >= group.range[0] &&
+                hoverIndex < group.range[1]
+                  ? 'selected'
+                  : ''}
+              >
+                ${group.label}
+              </li>`
+          )}
         </ul>
       </nav>
       <div class="menu-groups" onmousemove=${onMouseMove}>
@@ -173,29 +195,28 @@ export const menuComponent: Component<MenuProps> = ({
             <div key=${group.key} class="menu-group">
               <h6>${group.label}</h6>
               <ul>
-                ${group.items.map(item =>
-                  html`<li
-                    key=${item.key}
-                    data-index=${item.index}
-                    class=${hoverIndex === item.index ? 'hover' : ''}
-                    onmouseenter=${onMouseEnter(item.index)}
-                    onmousedown=${() => {
-                      host
-                        .current
-                        .querySelector(`[data-index="${item.index}"]`)
-                        ?.classList.add('active')
-                    }}
-                    onmouseup=${() => {
-                      host
-                        .current
-                        .querySelector(`[data-index="${item.index}"]`)
-                        ?.classList.remove('active')
-                      runByIndex(item.index)
-                    }}
-                  >
-                    ${item.icon}
-                    <span>${item.label}</span>
-                  </li>`,
+                ${group.items.map(
+                  (item) =>
+                    html`<li
+                      key=${item.key}
+                      data-index=${item.index}
+                      class=${hoverIndex === item.index ? 'hover' : ''}
+                      onmouseenter=${onMouseEnter(item.index)}
+                      onmousedown=${() => {
+                        host.current
+                          .querySelector(`[data-index="${item.index}"]`)
+                          ?.classList.add('active')
+                      }}
+                      onmouseup=${() => {
+                        host.current
+                          .querySelector(`[data-index="${item.index}"]`)
+                          ?.classList.remove('active')
+                        runByIndex(item.index)
+                      }}
+                    >
+                      ${item.icon}
+                      <span>${item.label}</span>
+                    </li>`
                 )}
               </ul>
             </div>