@milkdown/crepe 7.11.1 → 7.12.1

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

@@ -18,8 +18,8 @@ import { TextSelection } from '@milkdown/kit/prose/state'
 import type { BlockEditFeatureConfig } from '../index'
 import type { MenuItemGroup } from './utils'
 
-import { CrepeFeature } from '../../..'
-import { FeaturesCtx } from '../../../core/slice'
+import { useCrepeFeatures } from '../../../core/slice'
+import { CrepeFeature } from '../../../feature'
 import {
   bulletListIcon,
   codeIcon,
@@ -51,7 +51,7 @@ export function getGroups(
   config?: BlockEditFeatureConfig,
   ctx?: Ctx
 ) {
-  const flags = ctx?.get(FeaturesCtx)
+  const flags = ctx && useCrepeFeatures(ctx).get()
   const isLatexEnabled = flags?.includes(CrepeFeature.Latex)
   const isImageBlockEnabled = flags?.includes(CrepeFeature.ImageBlock)
   const isTableEnabled = flags?.includes(CrepeFeature.Table)
@@ -61,7 +61,7 @@ export function getGroups(
     .addGroup('text', config?.slashMenuTextGroupLabel ?? 'Text')
     .addItem('text', {
       label: config?.slashMenuTextLabel ?? 'Text',
-      icon: config?.slashMenuTextIcon?.() ?? textIcon,
+      icon: config?.slashMenuTextIcon ?? textIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -72,7 +72,7 @@ export function getGroups(
     })
     .addItem('h1', {
       label: config?.slashMenuH1Label ?? 'Heading 1',
-      icon: config?.slashMenuH1Icon?.() ?? h1Icon,
+      icon: config?.slashMenuH1Icon ?? h1Icon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -85,7 +85,7 @@ export function getGroups(
     })
     .addItem('h2', {
       label: config?.slashMenuH2Label ?? 'Heading 2',
-      icon: config?.slashMenuH2Icon?.() ?? h2Icon,
+      icon: config?.slashMenuH2Icon ?? h2Icon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -98,7 +98,7 @@ export function getGroups(
     })
     .addItem('h3', {
       label: config?.slashMenuH3Label ?? 'Heading 3',
-      icon: config?.slashMenuH3Icon?.() ?? h3Icon,
+      icon: config?.slashMenuH3Icon ?? h3Icon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -111,7 +111,7 @@ export function getGroups(
     })
     .addItem('h4', {
       label: config?.slashMenuH4Label ?? 'Heading 4',
-      icon: config?.slashMenuH4Icon?.() ?? h4Icon,
+      icon: config?.slashMenuH4Icon ?? h4Icon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -124,7 +124,7 @@ export function getGroups(
     })
     .addItem('h5', {
       label: config?.slashMenuH5Label ?? 'Heading 5',
-      icon: config?.slashMenuH5Icon?.() ?? h5Icon,
+      icon: config?.slashMenuH5Icon ?? h5Icon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -137,7 +137,7 @@ export function getGroups(
     })
     .addItem('h6', {
       label: config?.slashMenuH6Label ?? 'Heading 6',
-      icon: config?.slashMenuH6Icon?.() ?? h6Icon,
+      icon: config?.slashMenuH6Icon ?? h6Icon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -150,7 +150,7 @@ export function getGroups(
     })
     .addItem('quote', {
       label: config?.slashMenuQuoteLabel ?? 'Quote',
-      icon: config?.slashMenuQuoteIcon?.() ?? quoteIcon,
+      icon: config?.slashMenuQuoteIcon ?? quoteIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -163,7 +163,7 @@ export function getGroups(
     })
     .addItem('divider', {
       label: config?.slashMenuDividerLabel ?? 'Divider',
-      icon: config?.slashMenuDividerIcon?.() ?? dividerIcon,
+      icon: config?.slashMenuDividerIcon ?? dividerIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -177,7 +177,7 @@ export function getGroups(
     .addGroup('list', config?.slashMenuListGroupLabel ?? 'List')
     .addItem('bullet-list', {
       label: config?.slashMenuBulletListLabel ?? 'Bullet List',
-      icon: config?.slashMenuBulletListIcon?.() ?? bulletListIcon,
+      icon: config?.slashMenuBulletListIcon ?? bulletListIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -190,7 +190,7 @@ export function getGroups(
     })
     .addItem('ordered-list', {
       label: config?.slashMenuOrderedListLabel ?? 'Ordered List',
-      icon: config?.slashMenuOrderedListIcon?.() ?? orderedListIcon,
+      icon: config?.slashMenuOrderedListIcon ?? orderedListIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -203,7 +203,7 @@ export function getGroups(
     })
     .addItem('todo-list', {
       label: config?.slashMenuTaskListLabel ?? 'Todo List',
-      icon: config?.slashMenuTaskListIcon?.() ?? todoListIcon,
+      icon: config?.slashMenuTaskListIcon ?? todoListIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -224,7 +224,7 @@ export function getGroups(
   if (isImageBlockEnabled) {
     advancedGroup.addItem('image', {
       label: config?.slashMenuImageLabel ?? 'Image',
-      icon: config?.slashMenuImageIcon?.() ?? imageIcon,
+      icon: config?.slashMenuImageIcon ?? imageIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -237,7 +237,7 @@ export function getGroups(
 
   advancedGroup.addItem('code', {
     label: config?.slashMenuCodeBlockLabel ?? 'Code',
-    icon: config?.slashMenuCodeBlockIcon?.() ?? codeIcon,
+    icon: config?.slashMenuCodeBlockIcon ?? codeIcon,
     onRun: (ctx) => {
       const view = ctx.get(editorViewCtx)
       const { dispatch, state } = view
@@ -250,7 +250,7 @@ export function getGroups(
   if (isTableEnabled) {
     advancedGroup.addItem('table', {
       label: config?.slashMenuTableLabel ?? 'Table',
-      icon: config?.slashMenuTableIcon?.() ?? tableIcon,
+      icon: config?.slashMenuTableIcon ?? tableIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view
@@ -278,7 +278,7 @@ export function getGroups(
   if (isLatexEnabled) {
     advancedGroup.addItem('math', {
       label: config?.slashMenuMathLabel ?? 'Math',
-      icon: config?.slashMenuMathIcon?.() ?? functionsIcon,
+      icon: config?.slashMenuMathIcon ?? functionsIcon,
       onRun: (ctx) => {
         const view = ctx.get(editorViewCtx)
         const { dispatch, state } = view

package/src/feature/code-mirror/index.ts

@@ -9,19 +9,26 @@ import {
 } from '@milkdown/kit/component/code-block'
 import { basicSetup } from 'codemirror'
 
-import type { DefineFeature, Icon } from '../shared'
+import type { DefineFeature } from '../shared'
 
-import { chevronDownIcon, clearIcon, editIcon, searchIcon } from '../../icons'
-import { visibilityOffIcon } from '../../icons/visibility-off'
+import { crepeFeatureConfig } from '../../core/slice'
+import {
+  chevronDownIcon,
+  clearIcon,
+  editIcon,
+  searchIcon,
+  visibilityOffIcon,
+} from '../../icons'
+import { CrepeFeature } from '../index'
 
 interface CodeMirrorConfig {
   extensions: Extension[]
   languages: LanguageDescription[]
   theme: Extension
 
-  expandIcon: Icon
-  searchIcon: Icon
-  clearSearchIcon: Icon
+  expandIcon: string
+  searchIcon: string
+  clearSearchIcon: string
 
   searchPlaceholder: string
   noResultText: string
@@ -33,41 +40,38 @@ interface CodeMirrorConfig {
     content: string
   ) => string | HTMLElement | null
 
-  previewToggleIcon: (previewOnlyMode: boolean) => ReturnType<Icon>
+  previewToggleIcon: (previewOnlyMode: boolean) => string
   previewToggleText: (previewOnlyMode: boolean) => string
-  previewLabel: () => string
+  previewLabel: string
 }
 export type CodeMirrorFeatureConfig = Partial<CodeMirrorConfig>
 
-export const defineFeature: DefineFeature<CodeMirrorFeatureConfig> = (
+export const codeMirror: DefineFeature<CodeMirrorFeatureConfig> = (
   editor,
   config = {}
 ) => {
   editor
-    .config(async (ctx) => {
-      let { languages, theme } = config
-      if (!languages) {
-        const { languages: langList } = await import(
-          '@codemirror/language-data'
-        )
-        languages = langList
+    .config(crepeFeatureConfig(CrepeFeature.CodeMirror))
+    .config((ctx) => {
+      const { languages = [], theme } = config
+      const extensions = [
+        keymap.of(defaultKeymap.concat(indentWithTab)),
+        basicSetup,
+      ]
+      if (theme) {
+        extensions.push(theme)
       }
-      if (!theme) {
-        const { oneDark } = await import('@codemirror/theme-one-dark')
-        theme = oneDark
+      if (config.extensions) {
+        extensions.push(...config.extensions)
       }
+
       ctx.update(codeBlockConfig.key, (defaultConfig) => ({
-        extensions: [
-          keymap.of(defaultKeymap.concat(indentWithTab)),
-          basicSetup,
-          theme,
-          ...(config?.extensions ?? []),
-        ],
+        extensions,
         languages,
 
-        expandIcon: () => config.expandIcon?.() || chevronDownIcon,
-        searchIcon: () => config.searchIcon?.() || searchIcon,
-        clearSearchIcon: () => config.clearSearchIcon?.() || clearIcon,
+        expandIcon: config.expandIcon || chevronDownIcon,
+        searchIcon: config.searchIcon || searchIcon,
+        clearSearchIcon: config.clearSearchIcon || clearIcon,
         searchPlaceholder: config.searchPlaceholder || 'Search language',
         noResultText: config.noResultText || 'No result',
         renderLanguage: config.renderLanguage || defaultConfig.renderLanguage,

package/src/feature/cursor/index.ts

@@ -1,9 +1,15 @@
-import { cursor, dropCursorConfig } from '@milkdown/kit/plugin/cursor'
+import {
+  cursor as cursorPlugin,
+  dropCursorConfig,
+} from '@milkdown/kit/plugin/cursor'
 import { $prose } from '@milkdown/kit/utils'
 import { createVirtualCursor } from 'prosemirror-virtual-cursor'
 
 import type { DefineFeature } from '../shared'
 
+import { crepeFeatureConfig } from '../../core/slice'
+import { CrepeFeature } from '../index'
+
 interface CursorConfig {
   color: string | false
   width: number
@@ -11,11 +17,9 @@ interface CursorConfig {
 }
 export type CursorFeatureConfig = Partial<CursorConfig>
 
-export const defineFeature: DefineFeature<CursorFeatureConfig> = (
-  editor,
-  config
-) => {
+export const cursor: DefineFeature<CursorFeatureConfig> = (editor, config) => {
   editor
+    .config(crepeFeatureConfig(CrepeFeature.Cursor))
     .config((ctx) => {
       ctx.update(dropCursorConfig.key, () => ({
         class: 'crepe-drop-cursor',
@@ -23,7 +27,7 @@ export const defineFeature: DefineFeature<CursorFeatureConfig> = (
         color: config?.color ?? false,
       }))
     })
-    .use(cursor)
+    .use(cursorPlugin)
 
   if (config?.virtual === false) {
     return

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

@@ -7,24 +7,26 @@ import {
   inlineImageConfig,
 } from '@milkdown/kit/component/image-inline'
 
-import type { DefineFeature, Icon } from '../shared'
+import type { DefineFeature } from '../shared'
 
+import { crepeFeatureConfig } from '../../core/slice'
 import { captionIcon, imageIcon, confirmIcon } from '../../icons'
+import { CrepeFeature } from '../index'
 
 interface ImageBlockConfig {
   onUpload: (file: File) => Promise<string>
   proxyDomURL: (url: string) => Promise<string> | string
 
-  inlineImageIcon: Icon
-  inlineConfirmButton: Icon
-  inlineUploadButton: Icon
+  inlineImageIcon: string
+  inlineConfirmButton: string
+  inlineUploadButton: string
   inlineUploadPlaceholderText: string
   inlineOnUpload: (file: File) => Promise<string>
 
-  blockImageIcon: Icon
-  blockConfirmButton: Icon
-  blockCaptionIcon: Icon
-  blockUploadButton: Icon
+  blockImageIcon: string
+  blockConfirmButton: string
+  blockCaptionIcon: string
+  blockUploadButton: string
   blockCaptionPlaceholderText: string
   blockUploadPlaceholderText: string
   blockOnUpload: (file: File) => Promise<string>
@@ -32,26 +34,27 @@ interface ImageBlockConfig {
 
 export type ImageBlockFeatureConfig = Partial<ImageBlockConfig>
 
-export const defineFeature: DefineFeature<ImageBlockFeatureConfig> = (
+export const imageBlock: DefineFeature<ImageBlockFeatureConfig> = (
   editor,
   config
 ) => {
   editor
+    .config(crepeFeatureConfig(CrepeFeature.ImageBlock))
     .config((ctx) => {
       ctx.update(inlineImageConfig.key, (value) => ({
-        uploadButton: config?.inlineUploadButton ?? (() => 'Upload'),
-        imageIcon: config?.inlineImageIcon ?? (() => imageIcon),
-        confirmButton: config?.inlineConfirmButton ?? (() => confirmIcon),
+        uploadButton: config?.inlineUploadButton ?? 'Upload',
+        imageIcon: config?.inlineImageIcon ?? imageIcon,
+        confirmButton: config?.inlineConfirmButton ?? confirmIcon,
         uploadPlaceholderText:
           config?.inlineUploadPlaceholderText ?? 'or paste link',
         onUpload: config?.inlineOnUpload ?? config?.onUpload ?? value.onUpload,
         proxyDomURL: config?.proxyDomURL,
       }))
       ctx.update(imageBlockConfig.key, (value) => ({
-        uploadButton: config?.blockUploadButton ?? (() => 'Upload file'),
-        imageIcon: config?.blockImageIcon ?? (() => imageIcon),
-        captionIcon: config?.blockCaptionIcon ?? (() => captionIcon),
-        confirmButton: config?.blockConfirmButton ?? (() => 'Confirm'),
+        uploadButton: config?.blockUploadButton ?? 'Upload file',
+        imageIcon: config?.blockImageIcon ?? imageIcon,
+        captionIcon: config?.blockCaptionIcon ?? captionIcon,
+        confirmButton: config?.blockConfirmButton ?? 'Confirm',
         captionPlaceholderText:
           config?.blockCaptionPlaceholderText ?? 'Write Image Caption',
         uploadPlaceholderText:

package/src/feature/index.ts

@@ -1,5 +1,3 @@
-import type { Editor } from '@milkdown/kit/core'
-
 import type { BlockEditFeatureConfig } from './block-edit'
 import type { CodeMirrorFeatureConfig } from './code-mirror'
 import type { CursorFeatureConfig } from './cursor'
@@ -7,7 +5,7 @@ import type { ImageBlockFeatureConfig } from './image-block'
 import type { LatexFeatureConfig } from './latex'
 import type { LinkTooltipFeatureConfig } from './link-tooltip'
 import type { ListItemFeatureConfig } from './list-item'
-import type { PlaceHolderFeatureConfig } from './placeholder'
+import type { PlaceholderFeatureConfig } from './placeholder'
 import type { TableFeatureConfig } from './table'
 import type { ToolbarFeatureConfig } from './toolbar'
 
@@ -52,7 +50,7 @@ export interface CrepeFeatureConfig {
   [CrepeFeature.LinkTooltip]?: LinkTooltipFeatureConfig
   [CrepeFeature.ImageBlock]?: ImageBlockFeatureConfig
   [CrepeFeature.BlockEdit]?: BlockEditFeatureConfig
-  [CrepeFeature.Placeholder]?: PlaceHolderFeatureConfig
+  [CrepeFeature.Placeholder]?: PlaceholderFeatureConfig
   [CrepeFeature.Toolbar]?: ToolbarFeatureConfig
   [CrepeFeature.CodeMirror]?: CodeMirrorFeatureConfig
   [CrepeFeature.Table]?: TableFeatureConfig
@@ -71,52 +69,3 @@ export const defaultFeatures: Record<CrepeFeature, boolean> = {
   [CrepeFeature.Table]: true,
   [CrepeFeature.Latex]: true,
 }
-
-export async function loadFeature(
-  feature: CrepeFeature,
-  editor: Editor,
-  config?: never
-) {
-  switch (feature) {
-    case CrepeFeature.CodeMirror: {
-      const { defineFeature } = await import('./code-mirror')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.ListItem: {
-      const { defineFeature } = await import('./list-item')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.LinkTooltip: {
-      const { defineFeature } = await import('./link-tooltip')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.ImageBlock: {
-      const { defineFeature } = await import('./image-block')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.Cursor: {
-      const { defineFeature } = await import('./cursor')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.BlockEdit: {
-      const { defineFeature } = await import('./block-edit')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.Placeholder: {
-      const { defineFeature } = await import('./placeholder')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.Toolbar: {
-      const { defineFeature } = await import('./toolbar')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.Table: {
-      const { defineFeature } = await import('./table')
-      return defineFeature(editor, config)
-    }
-    case CrepeFeature.Latex: {
-      const { defineFeature } = await import('./latex')
-      return defineFeature(editor, config)
-    }
-  }
-}

package/src/feature/latex/index.ts

@@ -3,10 +3,10 @@ import type { KatexOptions } from 'katex'
 import { codeBlockConfig } from '@milkdown/kit/component/code-block'
 import katex from 'katex'
 
-import type { DefineFeature, Icon } from '../shared'
+import type { DefineFeature } from '../shared'
 
-import { CrepeFeature } from '../..'
-import { FeaturesCtx } from '../../core/slice'
+import { crepeFeatureConfig, useCrepeFeatures } from '../../core/slice'
+import { CrepeFeature } from '../../feature'
 import { confirmIcon } from '../../icons'
 import { blockLatexSchema } from './block-latex'
 import { mathInlineSchema } from './inline-latex'
@@ -17,18 +17,16 @@ import { remarkMathBlockPlugin, remarkMathPlugin } from './remark'
 
 export interface LatexConfig {
   katexOptions: KatexOptions
-  inlineEditConfirm: Icon
+  inlineEditConfirm: string
 }
 
 export type LatexFeatureConfig = Partial<LatexConfig>
 
-export const defineFeature: DefineFeature<LatexFeatureConfig> = (
-  editor,
-  config
-) => {
+export const latex: DefineFeature<LatexFeatureConfig> = (editor, config) => {
   editor
+    .config(crepeFeatureConfig(CrepeFeature.Latex))
     .config((ctx) => {
-      const flags = ctx.get(FeaturesCtx)
+      const flags = useCrepeFeatures(ctx).get()
       const isCodeMirrorEnabled = flags.includes(CrepeFeature.CodeMirror)
       if (!isCodeMirrorEnabled) {
         throw new Error('You need to enable CodeMirror to use LaTeX feature')
@@ -48,7 +46,7 @@ export const defineFeature: DefineFeature<LatexFeatureConfig> = (
       ctx.set(inlineLatexTooltip.key, {
         view: (view) => {
           return new LatexInlineTooltip(ctx, view, {
-            inlineEditConfirm: config?.inlineEditConfirm ?? (() => confirmIcon),
+            inlineEditConfirm: config?.inlineEditConfirm ?? confirmIcon,
             ...config,
           })
         },

package/src/feature/latex/inline-tooltip/component.tsx

@@ -48,7 +48,7 @@ export const LatexTooltip = defineComponent<LatexTooltipProps>({
         <div class="container">
           {props.innerView && <div ref={innerViewRef} />}
           <button onPointerdown={onUpdate}>
-            <Icon icon={props.config.inlineEditConfirm?.()} />
+            <Icon icon={props.config.inlineEditConfirm} />
           </button>
         </div>
       )

package/src/feature/link-tooltip/index.ts

@@ -4,34 +4,37 @@ import {
   linkTooltipPlugin,
 } from '@milkdown/kit/component/link-tooltip'
 
-import type { DefineFeature, Icon } from '../shared'
+import type { DefineFeature } from '../shared'
 
+import { crepeFeatureConfig } from '../../core/slice'
 import { copyIcon, editIcon, removeIcon, confirmIcon } from '../../icons'
+import { CrepeFeature } from '../index'
 
 interface LinkTooltipConfig {
-  linkIcon: Icon
-  editButton: Icon
-  removeButton: Icon
-  confirmButton: Icon
+  linkIcon: string
+  editButton: string
+  removeButton: string
+  confirmButton: string
   inputPlaceholder: string
   onCopyLink: (link: string) => void
 }
 
 export type LinkTooltipFeatureConfig = Partial<LinkTooltipConfig>
 
-export const defineFeature: DefineFeature<LinkTooltipFeatureConfig> = (
+export const linkTooltip: DefineFeature<LinkTooltipFeatureConfig> = (
   editor,
   config
 ) => {
   editor
+    .config(crepeFeatureConfig(CrepeFeature.LinkTooltip))
     .config(configureLinkTooltip)
     .config((ctx) => {
       ctx.update(linkTooltipConfig.key, (prev) => ({
         ...prev,
-        linkIcon: config?.linkIcon ?? (() => copyIcon),
-        editButton: config?.editButton ?? (() => editIcon),
-        removeButton: config?.removeButton ?? (() => removeIcon),
-        confirmButton: config?.confirmButton ?? (() => confirmIcon),
+        linkIcon: config?.linkIcon ?? copyIcon,
+        editButton: config?.editButton ?? editIcon,
+        removeButton: config?.removeButton ?? removeIcon,
+        confirmButton: config?.confirmButton ?? confirmIcon,
         inputPlaceholder: config?.inputPlaceholder ?? 'Paste link...',
         onCopyLink: config?.onCopyLink ?? (() => {}),
       }))

package/src/feature/list-item/index.ts

@@ -5,18 +5,20 @@ import {
   listItemBlockConfig,
 } from '@milkdown/kit/component/list-item-block'
 
-import type { DefineFeature, Icon } from '../shared'
+import type { DefineFeature } from '../shared'
 
+import { crepeFeatureConfig } from '../../core/slice'
 import {
   bulletIcon,
   checkBoxCheckedIcon,
   checkBoxUncheckedIcon,
 } from '../../icons'
+import { CrepeFeature } from '../index'
 
 export interface ListItemConfig {
-  bulletIcon: Icon
-  checkBoxCheckedIcon: Icon
-  checkBoxUncheckedIcon: Icon
+  bulletIcon: string
+  checkBoxCheckedIcon: string
+  checkBoxUncheckedIcon: string
 }
 
 export type ListItemFeatureConfig = Partial<ListItemConfig>
@@ -25,23 +27,24 @@ function configureListItem(ctx: Ctx, config?: ListItemFeatureConfig) {
   ctx.set(listItemBlockConfig.key, {
     renderLabel: ({ label, listType, checked }) => {
       if (checked == null) {
-        if (listType === 'bullet') return config?.bulletIcon?.() ?? bulletIcon
+        if (listType === 'bullet') return config?.bulletIcon ?? bulletIcon
 
         return label
       }
 
-      if (checked) return config?.checkBoxCheckedIcon?.() ?? checkBoxCheckedIcon
+      if (checked) return config?.checkBoxCheckedIcon ?? checkBoxCheckedIcon
 
-      return config?.checkBoxUncheckedIcon?.() ?? checkBoxUncheckedIcon
+      return config?.checkBoxUncheckedIcon ?? checkBoxUncheckedIcon
     },
   })
 }
 
-export const defineFeature: DefineFeature<ListItemFeatureConfig> = (
+export const listItem: DefineFeature<ListItemFeatureConfig> = (
   editor,
   config
 ) => {
   editor
+    .config(crepeFeatureConfig(CrepeFeature.ListItem))
     .config((ctx) => configureListItem(ctx, config))
     .use(listItemBlockComponent)
 }

package/src/feature/loader.ts

@@ -0,0 +1,52 @@
+import type { Editor } from '@milkdown/kit/core'
+
+import { blockEdit } from './block-edit'
+import { codeMirror } from './code-mirror'
+import { cursor } from './cursor'
+import { imageBlock } from './image-block'
+import { CrepeFeature } from './index'
+import { latex } from './latex'
+import { linkTooltip } from './link-tooltip'
+import { listItem } from './list-item'
+import { placeholder } from './placeholder'
+import { table } from './table'
+import { toolbar } from './toolbar'
+
+export function loadFeature(
+  feature: CrepeFeature,
+  editor: Editor,
+  config?: never
+) {
+  switch (feature) {
+    case CrepeFeature.CodeMirror: {
+      return codeMirror(editor, config)
+    }
+    case CrepeFeature.ListItem: {
+      return listItem(editor, config)
+    }
+    case CrepeFeature.LinkTooltip: {
+      return linkTooltip(editor, config)
+    }
+    case CrepeFeature.ImageBlock: {
+      return imageBlock(editor, config)
+    }
+    case CrepeFeature.Cursor: {
+      return cursor(editor, config)
+    }
+    case CrepeFeature.BlockEdit: {
+      return blockEdit(editor, config)
+    }
+    case CrepeFeature.Placeholder: {
+      return placeholder(editor, config)
+    }
+    case CrepeFeature.Toolbar: {
+      return toolbar(editor, config)
+    }
+    case CrepeFeature.Table: {
+      return table(editor, config)
+    }
+    case CrepeFeature.Latex: {
+      return latex(editor, config)
+    }
+  }
+}