@milkdown/crepe 7.3.6 → 7.5.0

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

@@ -0,0 +1,2 @@
+export declare const searchIcon: any;
+//# sourceMappingURL=search.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const strikethroughIcon: any;
+//# sourceMappingURL=strikethrough.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const tableIcon: any;
+//# sourceMappingURL=table.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const textIcon: any;
+//# sourceMappingURL=text.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const todoListIcon: any;
+//# sourceMappingURL=todoList.d.ts.map

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

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

package/lib/types/index.d.ts

@@ -0,0 +1,3 @@
+export { CrepeFeature } from './feature';
+export * from './core';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,cAAc,QAAQ,CAAA"}

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

@@ -0,0 +1,5 @@
+import type { Selection } from '@milkdown/kit/prose/state';
+export declare function isInCodeBlock(selection: Selection): boolean;
+export declare function isInList(selection: Selection): boolean;
+export declare function defIfNotExists(tagName: string, element: CustomElementConstructor): void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@milkdown/crepe",
   "type": "module",
-  "version": "7.3.6",
+  "version": "7.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Milkdown/milkdown.git",
-    "directory": "packages/plugin-cursor"
+    "directory": "packages/crepe"
   },
   "keywords": [
     "milkdown",
@@ -17,11 +17,19 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "types": "./lib/index.d.ts"
-    }
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
+    },
+    "./theme/common/*": "./lib/theme/common/*",
+    "./theme/classic.css": "./lib/theme/classic/style.css",
+    "./theme/classic-dark.css": "./lib/theme/classic-dark/style.css",
+    "./theme/nord.css": "./lib/theme/nord/style.css",
+    "./theme/nord-dark.css": "./lib/theme/nord-dark/style.css",
+    "./theme/frame.css": "./lib/theme/frame/style.css",
+    "./theme/frame-dark.css": "./lib/theme/frame-dark/style.css"
   },
-  "main": "./lib/index.es.js",
+  "main": "./lib/esm/index.js",
   "files": [
     "lib",
     "src"
@@ -31,27 +39,16 @@
   },
   "devDependencies": {
     "@codemirror/commands": "^6.2.4",
+    "@codemirror/language": "^6.10.1",
     "@codemirror/language-data": "^6.3.1",
+    "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.16.0",
-    "@emotion/css": "^11.11.2",
+    "@uiw/codemirror-theme-nord": "^4.22.1",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",
     "nanoid": "^5.0.0",
-    "thememirror": "^2.0.1",
     "tslib": "^2.5.0",
-    "@milkdown/components": "7.3.6",
-    "@milkdown/core": "7.3.6",
-    "@milkdown/ctx": "7.3.6",
-    "@milkdown/plugin-block": "7.3.6",
-    "@milkdown/plugin-clipboard": "7.3.6",
-    "@milkdown/plugin-cursor": "7.3.6",
-    "@milkdown/plugin-history": "7.3.6",
-    "@milkdown/plugin-indent": "7.3.6",
-    "@milkdown/plugin-slash": "7.3.6",
-    "@milkdown/plugin-tooltip": "7.3.6",
-    "@milkdown/preset-commonmark": "7.3.6",
-    "@milkdown/prose": "7.3.6",
-    "@milkdown/utils": "7.3.6"
+    "@milkdown/kit": "7.5.0"
   },
   "nx": {
     "targets": {
@@ -60,19 +57,13 @@
           "{projectRoot}/lib"
         ],
         "dependsOn": [
-          {
-            "target": "build",
-            "projects": "dependencies"
-          }
+          "build"
         ]
       },
       "tsc": {
         "outputs": [],
         "dependsOn": [
-          {
-            "target": "build",
-            "projects": "dependencies"
-          }
+          "build"
         ]
       }
     }
@@ -81,7 +72,10 @@
     "start": "concurrently -n es,dts \"vite build --watch\"  \"tsc --emitDeclarationOnly --watch\"",
     "test": "vitest",
     "tsc": "tsc --noEmit && echo",
-    "build": "vite build && tsc --emitDeclarationOnly"
+    "build": "rimraf './lib' && pnpm run build:type && pnpm run build:es && pnpm run build:theme && echo",
+    "build:type": "tsc --emitDeclarationOnly",
+    "build:es": "rollup -c",
+    "build:theme": "postcss 'src/theme' --base 'src/theme' --dir 'lib/theme'"
   },
-  "types": "./lib/index.d.ts"
+  "types": "./lib/types/index.d.ts"
 }

package/src/core/crepe.ts

@@ -1,19 +1,19 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { DefaultValue } from '@milkdown/core'
-import { Editor, defaultValueCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/core'
+import type { DefaultValue } from '@milkdown/kit/core'
+import { Editor, defaultValueCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/kit/core'
 
-import { history } from '@milkdown/plugin-history'
-import { commonmark } from '@milkdown/preset-commonmark'
-import { indent, indentConfig } from '@milkdown/plugin-indent'
-import { clipboard } from '@milkdown/plugin-clipboard'
-import { getMarkdown } from '@milkdown/utils'
-import { CrepeTheme, loadTheme } from '../theme'
-import type { CrepeFeature, CrepeFeatureConfig } from '../feature'
-import { defaultFeatures, loadFeature } from '../feature'
-import { configureEmotion, configureFeatures, configureTheme } from './slice'
+import { commonmark } from '@milkdown/kit/preset/commonmark'
+import { gfm } from '@milkdown/kit/preset/gfm'
+import { history } from '@milkdown/kit/plugin/history'
+import { indent, indentConfig } from '@milkdown/kit/plugin/indent'
+import { getMarkdown } from '@milkdown/kit/utils'
+import { clipboard } from '@milkdown/kit/plugin/clipboard'
+import { trailing } from '@milkdown/kit/plugin/trailing'
+
+import type { CrepeFeatureConfig } from '../feature'
+import { CrepeFeature, defaultFeatures, loadFeature } from '../feature'
+import { configureFeatures } from './slice'
 
 export interface CrepeConfig {
-  theme?: CrepeTheme
   features?: Partial<Record<CrepeFeature, boolean>>
   featureConfigs?: CrepeFeatureConfig
   root?: Node | string | null
@@ -21,13 +21,13 @@ export interface CrepeConfig {
 }
 
 export class Crepe {
+  static Feature = CrepeFeature
   readonly #editor: Editor
   readonly #initPromise: Promise<unknown>
   readonly #rootElement: Node
   #editable = true
 
   constructor({
-    theme = CrepeTheme.Classic,
     root,
     features = {},
     featureConfigs = {},
@@ -44,8 +44,6 @@ export class Crepe {
     this.#rootElement = (typeof root === 'string' ? document.querySelector(root) : root) ?? document.body
     this.#editor = Editor.make()
       .config(configureFeatures(enabledFeatures))
-      .config(configureEmotion(this.#rootElement))
-      .config(configureTheme(theme))
       .config((ctx) => {
         ctx.set(rootCtx, this.#rootElement)
         ctx.set(defaultValueCtx, defaultValue)
@@ -60,9 +58,11 @@ export class Crepe {
       .use(commonmark)
       .use(history)
       .use(indent)
+      .use(trailing)
       .use(clipboard)
+      .use(gfm)
 
-    const promiseList: Promise<unknown>[] = [loadTheme(theme, this.#editor)]
+    const promiseList: Promise<unknown>[] = []
 
     enabledFeatures.forEach((feature) => {
       const config = (featureConfigs as Partial<Record<CrepeFeature, never>>)[feature]

package/src/core/index.ts

@@ -1,4 +1 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-export { EmotionCtx } from './slice'
 export { Crepe, type CrepeConfig } from './crepe'

package/src/core/slice.ts

@@ -1,42 +1,9 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/ctx'
-import { createSlice } from '@milkdown/ctx'
-import type { Emotion } from '@emotion/css/create-instance'
-import createEmotion from '@emotion/css/create-instance'
-import { customAlphabet } from 'nanoid'
-import { CrepeTheme } from '../theme'
+import type { Ctx } from '@milkdown/kit/ctx'
+import { createSlice } from '@milkdown/kit/ctx'
 import type { CrepeFeature } from '../feature'
 
-export const ThemeCtx = createSlice(CrepeTheme.Classic, 'ThemeCtx')
-
 export const FeaturesCtx = createSlice([] as CrepeFeature[], 'FeaturesCtx')
 
-export const EmotionCtx = createSlice(null as unknown as Emotion, 'EmotionCtx')
-
-export function configureTheme(theme: CrepeTheme) {
-  return (ctx: Ctx) => {
-    ctx.inject(ThemeCtx, theme)
-  }
-}
-
-const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6)
-export function configureEmotion(container: Node) {
-  return (ctx: Ctx) => {
-    const emotion = createEmotion({
-      key: `crepe-${nanoid()}`,
-      container,
-    })
-    ctx.inject(EmotionCtx, emotion)
-  }
-}
-
-export function injectStyle(style: string) {
-  return (ctx: Ctx) => {
-    const emotion = ctx.get(EmotionCtx)
-    emotion.injectGlobal(style)
-  }
-}
-
 export function configureFeatures(features: CrepeFeature[]) {
   return (ctx: Ctx) => {
     ctx.inject(FeaturesCtx, features)

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

@@ -1,38 +1,19 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { type Component, c, html, useEffect, useRef } from 'atomico'
-
-const menuIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <g clip-path="url(#clip0_971_7680)">
-      <path d="M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z" fill="#817567"/>
-    </g>
-    <defs>
-      <clipPath id="clip0_971_7680">
-        <rect width="24" height="24" fill="white"/>
-      </clipPath>
-    </defs>
-  </svg>
-`
-
-const plusIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <g clip-path="url(#clip0_971_7676)">
-      <path d="M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z" fill="#817567"/>
-    </g>
-    <defs>
-      <clipPath id="clip0_971_7676">
-        <rect width="24" height="24" fill="white"/>
-      </clipPath>
-    </defs>
-  </svg>
-`
+import { menuIcon, plusIcon } from '../../../icons'
+import type { Icon } from '../../shared'
 
 export interface BlockHandleProps {
   show: boolean
   onAdd: () => void
+  addIcon: Icon
+  handleIcon: Icon
 }
 
-const blockHandleComponent: Component<BlockHandleProps> = ({ onAdd }) => {
+const blockHandleComponent: Component<BlockHandleProps> = ({
+  onAdd,
+  addIcon,
+  handleIcon,
+}) => {
   const ref = useRef<HTMLDivElement>()
   useEffect(() => {
     ref.current?.classList.remove('active')
@@ -51,10 +32,10 @@ const blockHandleComponent: Component<BlockHandleProps> = ({ onAdd }) => {
   return html`
     <host>
       <div ref=${ref} onmousedown=${onMouseDown} onmouseup=${onMouseUp} class="operation-item">
-        ${plusIcon}
+        ${addIcon?.() || plusIcon}
       </div>
       <div class="operation-item">
-        ${menuIcon}
+        ${handleIcon?.() || menuIcon}
       </div>
     </host>
   `
@@ -63,6 +44,8 @@ const blockHandleComponent: Component<BlockHandleProps> = ({ onAdd }) => {
 blockHandleComponent.props = {
   show: Boolean,
   onAdd: Function,
+  addIcon: Function,
+  handleIcon: Function,
 }
 
 export const BlockHandleElement = c(blockHandleComponent)

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

@@ -1,44 +1,53 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { PluginView } from '@milkdown/prose/state'
-import { TextSelection } from '@milkdown/prose/state'
-import { BlockProvider, block } from '@milkdown/plugin-block'
-import type { Ctx } from '@milkdown/ctx'
-import type { EditorView } from '@milkdown/prose/view'
+import type { PluginView } from '@milkdown/kit/prose/state'
+import { TextSelection } from '@milkdown/kit/prose/state'
+import { BlockProvider, block } from '@milkdown/kit/plugin/block'
+import type { Ctx } from '@milkdown/kit/ctx'
 import type { AtomicoThis } from 'atomico/types/dom'
-import { editorViewCtx, rootDOMCtx } from '@milkdown/core'
-import { paragraphSchema } from '@milkdown/preset-commonmark'
+import { editorViewCtx } from '@milkdown/kit/core'
+import { paragraphSchema } from '@milkdown/kit/preset/commonmark'
 import { menuAPI } from '../menu'
+import { defIfNotExists } from '../../../utils'
+import type { BlockEditFeatureConfig } from '../index'
 import type { BlockHandleProps } from './component'
 import { BlockHandleElement } from './component'
 
 export class BlockHandleView implements PluginView {
   #content: AtomicoThis<BlockHandleProps>
   #provider: BlockProvider
-  #ctx: Ctx
+  readonly #ctx: Ctx
 
-  constructor(ctx: Ctx, view: EditorView) {
+  constructor(ctx: Ctx, config?: BlockEditFeatureConfig) {
     this.#ctx = ctx
     const content = new BlockHandleElement()
     this.#content = content
     this.#content.onAdd = this.onAdd
+    this.#content.addIcon = config?.handleAddIcon
+    this.#content.handleIcon = config?.handleDragIcon
     this.#provider = new BlockProvider({
       ctx,
       content,
-      tippyOptions: {
-        appendTo: () => ctx.get(rootDOMCtx),
-        onShow: () => {
-          this.#content.show = true
-        },
-        onHidden: () => {
-          this.#content.show = false
-        },
+      getOffset: () => 16,
+      getPlacement: ({ active, blockDom }) => {
+        let totalDescendant = 0
+        active.node.descendants((node) => {
+          totalDescendant += node.childCount
+        })
+        const dom = active.el
+        const domRect = dom.getBoundingClientRect()
+        const handleRect = blockDom.getBoundingClientRect()
+        const style = window.getComputedStyle(dom)
+        const paddingTop = Number.parseInt(style.paddingTop, 10) || 0
+        const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0
+        const height = domRect.height - paddingTop - paddingBottom
+        const handleHeight = handleRect.height
+        return totalDescendant > 2 || handleHeight * 2 < height ? 'left-start' : 'left'
       },
     })
-    this.update(view)
+    this.update()
   }
 
-  update = (view: EditorView) => {
-    this.#provider.update(view)
+  update = () => {
+    this.#provider.update()
   }
 
   destroy = () => {
@@ -53,17 +62,14 @@ export class BlockHandleView implements PluginView {
       view.focus()
 
     const { state, dispatch } = view
-    const active = this.#provider.activeNode
+    const active = this.#provider.active
     if (!active)
       return
-    const pos = active.$pos
-    const isNoneTextBlock = ['hr', 'image-block'].includes(active.node.type.name)
-    const nodeSize = isNoneTextBlock ? active.node.nodeSize : active.node.content.size
-    const side = pos.pos + nodeSize + (['blockquote'].includes(pos.parent.type.name) ? 1 : 0)
-    const offset
-      = ['blockquote'].includes(pos.parent.type.name) ? 1 : isNoneTextBlock ? 1 : 2
-    let tr = state.tr.insert(side, paragraphSchema.type(ctx).create())
-    tr = tr.setSelection(TextSelection.create(tr.doc, side + offset))
+
+    const $pos = active.$pos
+    const pos = $pos.pos + active.node.nodeSize
+    let tr = state.tr.insert(pos, paragraphSchema.type(ctx).create())
+    tr = tr.setSelection(TextSelection.near(tr.doc.resolve(pos)))
     dispatch(tr.scrollIntoView())
 
     this.#provider.hide()
@@ -71,9 +77,9 @@ export class BlockHandleView implements PluginView {
   }
 }
 
-customElements.define('milkdown-block-handle', BlockHandleElement)
-export function configureBlockHandle(ctx: Ctx) {
+defIfNotExists('milkdown-block-handle', BlockHandleElement)
+export function configureBlockHandle(ctx: Ctx, config?: BlockEditFeatureConfig) {
   ctx.set(block.key, {
-    view: view => new BlockHandleView(ctx, view),
+    view: () => new BlockHandleView(ctx, config),
   })
 }

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

@@ -1,16 +1,57 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { block } from '@milkdown/plugin-block'
-import type { DefineFeature } from '../shared'
-import { injectStyle } from '../../core/slice'
+import { block } from '@milkdown/kit/plugin/block'
+import type { DefineFeature, Icon } from '../shared'
 import { configureBlockHandle } from './handle'
 import { configureMenu, menu, menuAPI } from './menu'
-import style from './style.css?inline'
+import type { GroupBuilder } from './menu/group-builder'
 
-export const defineFeature: DefineFeature = (editor) => {
+interface BlockEditConfig {
+  handleAddIcon: Icon
+  handleDragIcon: Icon
+  buildMenu: (builder: GroupBuilder) => void
+
+  slashMenuTextGroupLabel: string
+  slashMenuTextIcon: Icon
+  slashMenuTextLabel: string
+  slashMenuH1Icon: Icon
+  slashMenuH1Label: string
+  slashMenuH2Icon: Icon
+  slashMenuH2Label: string
+  slashMenuH3Icon: Icon
+  slashMenuH3Label: string
+  slashMenuH4Icon: Icon
+  slashMenuH4Label: string
+  slashMenuH5Icon: Icon
+  slashMenuH5Label: string
+  slashMenuH6Icon: Icon
+  slashMenuH6Label: string
+  slashMenuQuoteIcon: Icon
+  slashMenuQuoteLabel: string
+  slashMenuDividerIcon: Icon
+  slashMenuDividerLabel: string
+
+  slashMenuListGroupLabel: string
+  slashMenuBulletListIcon: Icon
+  slashMenuBulletListLabel: string
+  slashMenuOrderedListIcon: Icon
+  slashMenuOrderedListLabel: string
+  slashMenuTaskListIcon: Icon
+  slashMenuTaskListLabel: string
+
+  slashMenuAdvancedGroupLabel: string
+  slashMenuImageIcon: Icon
+  slashMenuImageLabel: string
+  slashMenuCodeBlockIcon: Icon
+  slashMenuCodeBlockLabel: string
+  slashMenuTableIcon: Icon
+  slashMenuTableLabel: string
+}
+
+export type BlockEditFeatureConfig = Partial<BlockEditConfig>
+
+export const defineFeature: DefineFeature<BlockEditFeatureConfig> = (editor, config) => {
   editor
-    .config(injectStyle(style))
-    .config(configureBlockHandle)
-    .config(configureMenu)
+    .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,7 +1,7 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { Component } from 'atomico'
 import { c, html, useCallback, useEffect, useHost, useMemo, useRef, useState } from 'atomico'
-import type { Ctx } from '@milkdown/ctx'
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { BlockEditFeatureConfig } from '../index'
 import { getGroups } from './config'
 
 export interface MenuProps {
@@ -9,6 +9,7 @@ export interface MenuProps {
   show: boolean
   filter: string
   hide: () => void
+  config?: BlockEditFeatureConfig
 }
 
 export const menuComponent: Component<MenuProps> = ({
@@ -16,12 +17,15 @@ export const menuComponent: Component<MenuProps> = ({
   hide,
   ctx,
   filter,
+  config,
 }) => {
-  const { groups, size } = useMemo(() => getGroups(filter), [filter])
+  const { groups, size } = useMemo(() => getGroups(filter, config), [filter])
 
   const host = useHost()
   const [hoverIndex, setHoverIndex] = useState(0)
 
+  const root = useMemo(() => host.current.getRootNode() as HTMLElement, [host])
+
   const prevMousePosition = useRef({ x: -999, y: -999 })
 
   const onMouseMove = useCallback((e: MouseEvent) => {
@@ -52,13 +56,15 @@ export const menuComponent: Component<MenuProps> = ({
   }, [])
 
   const scrollToIndex = useCallback((index: number) => {
-    host
+    const target = host
       .current
-      .querySelector(`[data-index="${index}"]`)
-      ?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      })
+      .querySelector<HTMLElement>(`[data-index="${index}"]`)
+    const scrollRoot = host.current.querySelector<HTMLElement>('.menu-groups')
+
+    if (!target || !scrollRoot)
+      return
+
+    scrollRoot.scrollTop = target.offsetTop - scrollRoot.offsetTop
   }, [])
 
   const runByIndex = useCallback((index: number) => {
@@ -138,12 +144,12 @@ export const menuComponent: Component<MenuProps> = ({
 
   useEffect(() => {
     if (show)
-      document.addEventListener('keydown', onKeydown, { capture: true })
+      root.addEventListener('keydown', onKeydown, { capture: true })
 
-    else document.removeEventListener('keydown', onKeydown, { capture: true })
+    else root.removeEventListener('keydown', onKeydown, { capture: true })
 
     return () => {
-      document.removeEventListener('keydown', onKeydown, { capture: true })
+      root.removeEventListener('keydown', onKeydown, { capture: true })
     }
   }, [show, onKeydown])
 
@@ -202,6 +208,7 @@ export const menuComponent: Component<MenuProps> = ({
 
 menuComponent.props = {
   ctx: Object,
+  config: Object,
   show: Boolean,
   filter: String,
   hide: Function,