@milkdown/crepe 7.4.0 → 7.5.1

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

@@ -1,6 +1,7 @@
 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 {
@@ -8,6 +9,7 @@ export interface MenuProps {
   show: boolean
   filter: string
   hide: () => void
+  config?: BlockEditFeatureConfig
 }
 
 export const menuComponent: Component<MenuProps> = ({
@@ -15,8 +17,9 @@ 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)
@@ -62,11 +65,6 @@ export const menuComponent: Component<MenuProps> = ({
       return
 
     scrollRoot.scrollTop = target.offsetTop - scrollRoot.offsetTop
-
-    // target?.scrollIntoView({
-    //   behavior: 'smooth',
-    //   block: 'end',
-    // })
   }, [])
 
   const runByIndex = useCallback((index: number) => {
@@ -210,6 +208,7 @@ export const menuComponent: Component<MenuProps> = ({
 
 menuComponent.props = {
   ctx: Object,
+  config: Object,
   show: Boolean,
   filter: String,
   hide: Function,

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

@@ -1,19 +1,17 @@
-import type { html } from 'atomico'
-import type { Ctx } from '@milkdown/ctx'
-import { editorViewCtx } from '@milkdown/core'
+import { editorViewCtx } from '@milkdown/kit/core'
 import {
   blockquoteSchema,
   bulletListSchema,
   codeBlockSchema,
   headingSchema,
   hrSchema,
+  listItemSchema,
   orderedListSchema,
   paragraphSchema,
-} from '@milkdown/preset-commonmark'
-import type { Attrs, NodeType } from '@milkdown/prose/model'
-import { findWrapping } from '@milkdown/prose/transform'
-import type { Command, Transaction } from '@milkdown/prose/state'
-import { imageBlockSchema } from '@milkdown/components'
+} from '@milkdown/kit/preset/commonmark'
+import { NodeSelection } from '@milkdown/kit/prose/state'
+import { imageBlockSchema } from '@milkdown/kit/component/image-block'
+import { createTable } from '@milkdown/kit/preset/gfm'
 import {
   bulletListIcon,
   codeIcon,
@@ -27,270 +25,204 @@ import {
   imageIcon,
   orderedListIcon,
   quoteIcon,
+  tableIcon,
   textIcon,
-} from './icons'
-
-interface MenuItem {
-  index: number
-  key: string
-  label: string
-  icon: ReturnType<typeof html>
-  onRun: (ctx: Ctx) => void
-}
-
-type WithRange<T, HasIndex extends true | false = true> = HasIndex extends true ? T & { range: [start: number, end: number] } : T
-
-type MenuItemGroup<HasIndex extends true | false = true> = WithRange<{
-  key: string
-  label: string
-  items: HasIndex extends true ? MenuItem[] : Omit<MenuItem, 'index'>[]
-}, HasIndex>
-
-function clearRange(tr: Transaction) {
-  const { $from, $to } = tr.selection
-  const { pos: from } = $from
-  const { pos: to } = $to
-  tr = tr.deleteRange(from - $from.node().content.size, to)
-  return tr
-}
-
-function setBlockType(tr: Transaction, nodeType: NodeType, attrs: Attrs | null = null) {
-  const { from, to } = tr.selection
-  return tr.setBlockType(from, to, nodeType, attrs)
-}
-
-function wrapInBlockType(tr: Transaction, nodeType: NodeType, attrs: Attrs | null = null) {
-  const { $from, $to } = tr.selection
-
-  const range = $from.blockRange($to)
-  const wrapping = range && findWrapping(range, nodeType, attrs)
-  if (!wrapping)
-    return null
-
-  return tr.wrap(range, wrapping)
-}
-
-function addBlockType(tr: Transaction, nodeType: NodeType, attrs: Attrs | null = null) {
-  const node = nodeType.createAndFill(attrs)
-  if (!node)
-    return null
-
-  return tr.replaceSelectionWith(node)
-}
-
-function clearContentAndSetBlockType(nodeType: NodeType, attrs: Attrs | null = null): Command {
-  return (state, dispatch) => {
-    if (dispatch) {
-      const tr = setBlockType(clearRange(state.tr), nodeType, attrs)
-      dispatch(tr.scrollIntoView())
-    }
-    return true
-  }
-}
-
-function clearContentAndWrapInBlockType(nodeType: NodeType, attrs: Attrs | null = null): Command {
-  return (state, dispatch) => {
-    const tr = wrapInBlockType(clearRange(state.tr), nodeType, attrs)
-    if (!tr)
-      return false
-
-    if (dispatch)
-      dispatch(tr.scrollIntoView())
-
-    return true
-  }
-}
-
-function clearContentAndAddBlockType(nodeType: NodeType, attrs: Attrs | null = null): Command {
-  return (state, dispatch) => {
-    const tr = addBlockType(clearRange(state.tr), nodeType, attrs)
-    if (!tr)
-      return false
-
-    if (dispatch)
-      dispatch(tr.scrollIntoView())
-
-    return true
-  }
-}
-
-export function getGroups(filter?: string) {
-  let groups: MenuItemGroup<false>[] = [
-    {
-      key: 'text',
-      label: 'Text',
-      items: [
-        {
-          key: 'text',
-          label: 'Text',
-          icon: textIcon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndSetBlockType(paragraphSchema.type(ctx))
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'h1',
-          label: 'Heading 1',
-          icon: h1Icon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 1 })
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'h2',
-          label: 'Heading 2',
-          icon: h2Icon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 2 })
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'h3',
-          label: 'Heading 3',
-          icon: h3Icon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 3 })
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'h4',
-          label: 'Heading 4',
-          icon: h4Icon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 4 })
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'h5',
-          label: 'Heading 5',
-          icon: h5Icon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 5 })
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'h6',
-          label: 'Heading 6',
-          icon: h6Icon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 6 })
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'quote',
-          label: 'Quote',
-          icon: quoteIcon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndWrapInBlockType(blockquoteSchema.type(ctx))
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'divider',
-          label: 'Divider',
-          icon: dividerIcon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
-
-            const command = clearContentAndAddBlockType(hrSchema.type(ctx))
-            command(state, dispatch)
-          },
-        },
-      ],
-    },
-    {
-      key: 'list',
-      label: 'List',
-      items: [
-        {
-          key: 'bullet-list',
-          label: 'Bullet List',
-          icon: bulletListIcon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
+  todoListIcon,
+} from '../../../icons'
+import type { BlockEditFeatureConfig } from '../index'
+import type { MenuItemGroup } from './utils'
+import {
+  clearContentAndAddBlockType,
+  clearContentAndSetBlockType,
+  clearContentAndWrapInBlockType,
+  clearRange,
+} from './utils'
+import { GroupBuilder } from './group-builder'
+
+export function getGroups(filter?: string, config?: BlockEditFeatureConfig) {
+  const groupBuilder = new GroupBuilder()
+  groupBuilder
+    .addGroup('text', config?.slashMenuTextGroupLabel ?? 'Text')
+    .addItem('text', {
+      label: config?.slashMenuTextGroupLabel ?? 'Text',
+      icon: config?.slashMenuTextIcon?.() ?? textIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndSetBlockType(paragraphSchema.type(ctx))
+        command(state, dispatch)
+      },
+    })
+    .addItem('h1', {
+      label: config?.slashMenuH1Label ?? 'Heading 1',
+      icon: config?.slashMenuH1Icon?.() ?? h1Icon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 1 })
+        command(state, dispatch)
+      },
+    })
+    .addItem('h2', {
+      label: config?.slashMenuH2Label ?? 'Heading 2',
+      icon: config?.slashMenuH2Icon?.() ?? h2Icon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 2 })
+        command(state, dispatch)
+      },
+    })
+    .addItem('h3', {
+      label: config?.slashMenuH3Label ?? 'Heading 3',
+      icon: config?.slashMenuH3Icon?.() ?? h3Icon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 3 })
+        command(state, dispatch)
+      },
+    })
+    .addItem('h4', {
+      label: config?.slashMenuH4Label ?? 'Heading 4',
+      icon: config?.slashMenuH4Icon?.() ?? h4Icon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 4 })
+        command(state, dispatch)
+      },
+    })
+    .addItem('h5', {
+      label: config?.slashMenuH5Label ?? 'Heading 5',
+      icon: config?.slashMenuH5Icon?.() ?? h5Icon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 5 })
+        command(state, dispatch)
+      },
+    })
+    .addItem('h6', {
+      label: config?.slashMenuH6Label ?? 'Heading 6',
+      icon: config?.slashMenuH6Icon?.() ?? h6Icon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 6 })
+        command(state, dispatch)
+      },
+    })
+    .addItem('quote', {
+      label: config?.slashMenuQuoteLabel ?? 'Quote',
+      icon: config?.slashMenuQuoteIcon?.() ?? quoteIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndWrapInBlockType(blockquoteSchema.type(ctx))
+        command(state, dispatch)
+      },
+    })
+    .addItem('divider', {
+      label: config?.slashMenuDividerLabel ?? 'Divider',
+      icon: config?.slashMenuDividerIcon?.() ?? dividerIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndAddBlockType(hrSchema.type(ctx))
+        command(state, dispatch)
+      },
+    })
 
-            const command = clearContentAndWrapInBlockType(bulletListSchema.type(ctx))
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'ordered-list',
-          label: 'Ordered List',
-          icon: orderedListIcon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
+  groupBuilder.addGroup('list', config?.slashMenuListGroupLabel ?? 'List')
+    .addItem('bullet-list', {
+      label: config?.slashMenuBulletListLabel ?? 'Bullet List',
+      icon: config?.slashMenuBulletListIcon?.() ?? bulletListIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndWrapInBlockType(bulletListSchema.type(ctx))
+        command(state, dispatch)
+      },
+    })
+    .addItem('ordered-list', {
+      label: config?.slashMenuOrderedListLabel ?? 'Ordered List',
+      icon: config?.slashMenuOrderedListIcon?.() ?? orderedListIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndWrapInBlockType(orderedListSchema.type(ctx))
+        command(state, dispatch)
+      },
+    })
+    .addItem('todo-list', {
+      label: config?.slashMenuTaskListLabel ?? 'Todo List',
+      icon: config?.slashMenuTaskListIcon?.() ?? todoListIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndWrapInBlockType(listItemSchema.type(ctx), { checked: false })
+        command(state, dispatch)
+      },
+    })
 
-            const command = clearContentAndWrapInBlockType(orderedListSchema.type(ctx))
-            command(state, dispatch)
-          },
-        },
-      ],
-    },
-    {
-      key: 'advanced',
-      label: 'Advanced',
-      items: [
-        {
-          key: 'image',
-          label: 'Image',
-          icon: imageIcon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
+  groupBuilder.addGroup('advanced', config?.slashMenuAdvancedGroupLabel ?? 'Advanced')
+    .addItem('image', {
+      label: config?.slashMenuImageLabel ?? 'Image',
+      icon: config?.slashMenuImageIcon?.() ?? imageIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndAddBlockType(imageBlockSchema.type(ctx))
+        command(state, dispatch)
+      },
+    })
+    .addItem('code', {
+      label: config?.slashMenuCodeBlockLabel ?? 'Code',
+      icon: config?.slashMenuCodeBlockIcon?.() ?? codeIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndAddBlockType(codeBlockSchema.type(ctx))
+        command(state, dispatch)
+      },
+    })
+    .addItem('table', {
+      label: config?.slashMenuTableLabel ?? 'Table',
+      icon: config?.slashMenuTableIcon?.() ?? tableIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+        const tr = clearRange(state.tr)
+        const table = createTable(ctx, 3, 3)
+        tr.replaceSelectionWith(table)
+        const { from } = tr.selection
+        const pos = from - table.nodeSize + 2
+        dispatch(tr)
+        requestAnimationFrame(() => {
+          const selection = NodeSelection.create(view.state.tr.doc, pos)
+          dispatch(view.state.tr.setSelection(selection).scrollIntoView())
+        })
+      },
+    })
 
-            const command = clearContentAndAddBlockType(imageBlockSchema.type(ctx))
-            command(state, dispatch)
-          },
-        },
-        {
-          key: 'code',
-          label: 'Code',
-          icon: codeIcon,
-          onRun: (ctx) => {
-            const view = ctx.get(editorViewCtx)
-            const { dispatch, state } = view
+  config?.buildMenu?.(groupBuilder)
 
-            const command = clearContentAndAddBlockType(codeBlockSchema.type(ctx))
-            command(state, dispatch)
-          },
-        },
-      ],
-    },
-  ]
+  let groups = groupBuilder.build()
 
   if (filter) {
     groups = groups
@@ -312,12 +244,9 @@ export function getGroups(filter?: string) {
   }
 
   const items = groups.flatMap(groups => groups.items)
-  items
-    .forEach(((item, index) => {
-      Object.assign(item, {
-        index,
-      })
-    }))
+  items.forEach(((item, index) => {
+    Object.assign(item, { index })
+  }))
 
   groups.reduce((acc, group) => {
     const end = acc + group.items.length
@@ -328,7 +257,7 @@ export function getGroups(filter?: string) {
   }, 0)
 
   return {
-    groups: groups as unknown as MenuItemGroup[],
+    groups: groups as MenuItemGroup[],
     size: items.length,
   }
 }

package/src/feature/block-edit/menu/group-builder.ts

@@ -0,0 +1,50 @@
+import type { MenuItem, MenuItemGroup } from './utils'
+
+export class GroupBuilder {
+  #groups: MenuItemGroup<false>[] = []
+
+  clear = () => {
+    this.#groups = []
+    return this
+  }
+
+  #getGroupInstance = (group: MenuItemGroup<false>) => {
+    const groupInstance = {
+      group,
+      addItem: (key: string, item: Omit<MenuItem, 'key' | 'index'>) => {
+        const data = { key, ...item }
+        group.items.push(data)
+        return groupInstance
+      },
+      clear: () => {
+        group.items = []
+        return groupInstance
+      },
+    }
+    return groupInstance
+  }
+
+  addGroup = (key: string, label: string) => {
+    const items: Omit<MenuItem, 'index'>[] = []
+    const group: MenuItemGroup<false> = {
+      key,
+      label,
+      items,
+    }
+    this.#groups.push(group)
+
+    return this.#getGroupInstance(group)
+  }
+
+  getGroup = (key: string) => {
+    const group = this.#groups.find(group => group.key === key)
+    if (!group)
+      throw new Error(`Group with key ${key} not found`)
+
+    return this.#getGroupInstance(group)
+  }
+
+  build = () => {
+    return this.#groups
+  }
+}

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

@@ -1,10 +1,11 @@
-import type { PluginView } from '@milkdown/prose/state'
-import type { EditorView } from '@milkdown/prose/view'
-import { SlashProvider, slashFactory } from '@milkdown/plugin-slash'
-import type { Ctx } from '@milkdown/ctx'
+import type { PluginView } from '@milkdown/kit/prose/state'
+import type { EditorView } from '@milkdown/kit/prose/view'
+import { SlashProvider, slashFactory } from '@milkdown/kit/plugin/slash'
+import type { Ctx } from '@milkdown/kit/ctx'
 import type { AtomicoThis } from 'atomico/types/dom'
-import { $ctx } from '@milkdown/utils'
+import { $ctx } from '@milkdown/kit/utils'
 import { defIfNotExists, isInCodeBlock, isInList } from '../../../utils'
+import type { BlockEditFeatureConfig } from '../index'
 import type { MenuProps } from './component'
 import { MenuElement } from './component'
 
@@ -21,9 +22,9 @@ export const menuAPI = $ctx({
 } as MenuAPI, 'menuAPICtx')
 
 defIfNotExists('milkdown-slash-menu', MenuElement)
-export function configureMenu(ctx: Ctx) {
+export function configureMenu(ctx: Ctx, config?: BlockEditFeatureConfig) {
   ctx.set(menu.key, {
-    view: view => new MenuView(ctx, view),
+    view: view => new MenuView(ctx, view, config),
   })
 }
 
@@ -32,10 +33,11 @@ class MenuView implements PluginView {
   readonly #slashProvider: SlashProvider
   #programmaticallyPos: number | null = null
 
-  constructor(ctx: Ctx, view: EditorView) {
+  constructor(ctx: Ctx, view: EditorView, config?: BlockEditFeatureConfig) {
     this.#content = new MenuElement()
     this.#content.hide = this.hide
     this.#content.ctx = ctx
+    this.#content.config = config
     // eslint-disable-next-line ts/no-this-alias
     const self = this
     this.#slashProvider = new SlashProvider({
@@ -70,6 +72,7 @@ class MenuView implements PluginView {
 
         return true
       },
+      offset: 10,
     })
 
     this.#slashProvider.onShow = () => {