@milkdown/crepe 7.4.0 → 7.5.0

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

@@ -0,0 +1,89 @@
+import type { html } from 'atomico'
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { Command, Transaction } from '@milkdown/kit/prose/state'
+import type { Attrs, NodeType } from '@milkdown/kit/prose/model'
+import { findWrapping } from '@milkdown/kit/prose/transform'
+
+export 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
+
+export type MenuItemGroup<HasIndex extends true | false = true> = WithRange<{
+  key: string
+  label: string
+  items: HasIndex extends true ? MenuItem[] : Omit<MenuItem, 'index'>[]
+}, HasIndex>
+
+export 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
+}
+
+export function setBlockType(tr: Transaction, nodeType: NodeType, attrs: Attrs | null = null) {
+  const { from, to } = tr.selection
+  return tr.setBlockType(from, to, nodeType, attrs)
+}
+
+export 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)
+}
+
+export function addBlockType(tr: Transaction, nodeType: NodeType, attrs: Attrs | null = null) {
+  const node = nodeType.createAndFill(attrs)
+  if (!node)
+    return null
+
+  return tr.replaceSelectionWith(node)
+}
+
+export 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
+  }
+}
+
+export 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
+  }
+}
+
+export 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
+  }
+}

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

@@ -1,28 +1,26 @@
-import { codeBlockComponent, codeBlockConfig } from '@milkdown/components/code-block'
+import { codeBlockComponent, codeBlockConfig } from '@milkdown/kit/component/code-block'
 import type { LanguageDescription } from '@codemirror/language'
 import type { Extension } from '@codemirror/state'
 import { basicSetup } from 'codemirror'
 import { keymap } from '@codemirror/view'
 import { defaultKeymap, indentWithTab } from '@codemirror/commands'
-import { html } from 'atomico'
-import type { DefineFeature } from '../shared'
-
-const clearIcon = 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_1098_15553)">
-      <path d="M18.3007 5.70973C17.9107 5.31973 17.2807 5.31973 16.8907 5.70973L12.0007 10.5897L7.1107 5.69973C6.7207 5.30973 6.0907 5.30973 5.7007 5.69973C5.3107 6.08973 5.3107 6.71973 5.7007 7.10973L10.5907 11.9997L5.7007 16.8897C5.3107 17.2797 5.3107 17.9097 5.7007 18.2997C6.0907 18.6897 6.7207 18.6897 7.1107 18.2997L12.0007 13.4097L16.8907 18.2997C17.2807 18.6897 17.9107 18.6897 18.3007 18.2997C18.6907 17.9097 18.6907 17.2797 18.3007 16.8897L13.4107 11.9997L18.3007 7.10973C18.6807 6.72973 18.6807 6.08973 18.3007 5.70973Z" fill="#817567"/>
-    </g>
-    <defs>
-      <clipPath id="clip0_1098_15553">
-        <rect width="24" height="24" fill="white"/>
-      </clipPath>
-    </defs>
-  </svg>
-`
+import type { html } from 'atomico'
+import type { DefineFeature, Icon } from '../shared'
+import { chevronDownIcon, clearIcon, searchIcon } from '../../icons'
 
 interface CodeMirrorConfig {
+  extensions: Extension[]
   languages: LanguageDescription[]
   theme: Extension
+
+  expandIcon: Icon
+  searchIcon: Icon
+  clearSearchIcon: Icon
+
+  searchPlaceholder: string
+  noResultText: string
+
+  renderLanguage: (language: string, selected: boolean) => ReturnType<typeof html> | string | HTMLElement
 }
 export type CodeMirrorFeatureConfig = Partial<CodeMirrorConfig>
 
@@ -42,10 +40,20 @@ export const defineFeature: DefineFeature<CodeMirrorFeatureConfig> = (editor, co
         theme = nord
       }
       ctx.update(codeBlockConfig.key, defaultConfig => ({
-        ...defaultConfig,
+        extensions: [
+          keymap.of(defaultKeymap.concat(indentWithTab)),
+          basicSetup,
+          theme,
+          ...config?.extensions ?? [],
+        ],
         languages,
-        clearSearchIcon: () => clearIcon,
-        extensions: [basicSetup, keymap.of(defaultKeymap.concat(indentWithTab)), theme],
+
+        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,
       }))
     })
     .use(codeBlockComponent)

package/src/feature/cursor/index.ts

@@ -1,4 +1,4 @@
-import { cursor, dropCursorConfig } from '@milkdown/plugin-cursor'
+import { cursor, dropCursorConfig } from '@milkdown/kit/plugin/cursor'
 
 import type { DefineFeature } from '../shared'
 
@@ -6,13 +6,12 @@ interface CursorConfig {
   color: string | false
   width: number
 }
-export type CursorFeatureConfig = CursorConfig
+export type CursorFeatureConfig = Partial<CursorConfig>
 
 export const defineFeature: DefineFeature<CursorFeatureConfig> = (editor, config) => {
   editor
     .config((ctx) => {
-      ctx.update(dropCursorConfig.key, value => ({
-        ...value,
+      ctx.update(dropCursorConfig.key, () => ({
         class: 'crepe-drop-cursor',
         width: config?.width ?? 4,
         color: config?.color ?? false,

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

@@ -1,53 +1,46 @@
-import { imageBlockComponent, imageBlockConfig } from '@milkdown/components/image-block'
-import { imageInlineComponent, inlineImageConfig } from '@milkdown/components/image-inline'
-import { html } from 'atomico'
-import type { DefineFeature } from '../shared'
+import { imageBlockComponent, imageBlockConfig } from '@milkdown/kit/component/image-block'
+import { imageInlineComponent, inlineImageConfig } from '@milkdown/kit/component/image-inline'
+import type { DefineFeature, Icon } from '../shared'
+import { captionIcon, confirmIcon, imageIcon } from '../../icons'
 
-const imageIcon = 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_1013_1596)">
-      <path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM14.14 11.86L11.14 15.73L9 13.14L6 17H18L14.14 11.86Z" fill="#817567"/>
-    </g>
-    <defs>
-      <clipPath id="clip0_1013_1596">
-        <rect width="24" height="24" fill="white"/>
-      </clipPath>
-    </defs>
-  </svg>
-`
+interface ImageBlockConfig {
+  onUpload: (file: File) => Promise<string>
 
-const confirmIcon = 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_1013_1606)">
-      <path d="M9.00012 16.1998L5.50012 12.6998C5.11012 12.3098 4.49012 12.3098 4.10012 12.6998C3.71012 13.0898 3.71012 13.7098 4.10012 14.0998L8.29012 18.2898C8.68012 18.6798 9.31012 18.6798 9.70012 18.2898L20.3001 7.69982C20.6901 7.30982 20.6901 6.68982 20.3001 6.29982C19.9101 5.90982 19.2901 5.90982 18.9001 6.29982L9.00012 16.1998Z" fill="#817567"/>
-    </g>
-    <defs>
-      <clipPath id="clip0_1013_1606">
-        <rect width="24" height="24" fill="white"/>
-      </clipPath>
-    </defs>
-  </svg>
-`
+  inlineImageIcon: Icon
+  inlineConfirmButton: Icon
+  inlineUploadButton: Icon
+  inlineUploadPlaceholderText: string
+  inlineOnUpload: (file: File) => Promise<string>
 
-const captionIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z"/></svg>
-`
+  blockImageIcon: Icon
+  blockConfirmButton: Icon
+  blockCaptionIcon: Icon
+  blockUploadButton: Icon
+  blockCaptionPlaceholderText: string
+  blockUploadPlaceholderText: string
+  blockOnUpload: (file: File) => Promise<string>
+}
+
+export type ImageBlockFeatureConfig = Partial<ImageBlockConfig>
 
-export const defineFeature: DefineFeature = (editor) => {
+export const defineFeature: DefineFeature<ImageBlockFeatureConfig> = (editor, config) => {
   editor
     .config((ctx) => {
       ctx.update(inlineImageConfig.key, value => ({
-        ...value,
-        imageIcon: () => imageIcon,
-        confirmButton: () => confirmIcon,
-        uploadPlaceholderText: 'or paste link',
+        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,
       }))
       ctx.update(imageBlockConfig.key, value => ({
-        ...value,
-        imageIcon: () => imageIcon,
-        captionIcon: () => captionIcon,
-        confirmButton: () => html`Confirm`,
-        captionPlaceholderText: 'Write Image Caption',
+        uploadButton: config?.blockUploadButton ?? (() => 'Upload file'),
+        imageIcon: config?.blockImageIcon ?? (() => imageIcon),
+        captionIcon: config?.blockCaptionIcon ?? (() => captionIcon),
+        confirmButton: config?.blockConfirmButton ?? (() => 'Confirm'),
+        captionPlaceholderText: config?.blockCaptionPlaceholderText ?? 'Write Image Caption',
+        uploadPlaceholderText: config?.blockUploadPlaceholderText ?? 'or paste link',
+        onUpload: config?.blockOnUpload ?? config?.onUpload ?? value.onUpload,
       }))
     })
     .use(imageBlockComponent)

package/src/feature/index.ts

@@ -1,6 +1,13 @@
-import type { Editor } from '@milkdown/core'
+import type { Editor } from '@milkdown/kit/core'
 import type { PlaceHolderFeatureConfig } from './placeholder'
 import type { CodeMirrorFeatureConfig } from './code-mirror'
+import type { BlockEditFeatureConfig } from './block-edit'
+import type { CursorFeatureConfig } from './cursor'
+import type { ImageBlockFeatureConfig } from './image-block'
+import type { LinkTooltipFeatureConfig } from './link-tooltip'
+import type { ListItemFeatureConfig } from './list-item'
+import type { ToolbarFeatureConfig } from './toolbar'
+import type { TableFeatureConfig } from './table'
 
 export enum CrepeFeature {
   CodeMirror = 'code-mirror',
@@ -11,22 +18,31 @@ export enum CrepeFeature {
   BlockEdit = 'block-edit',
   Toolbar = 'toolbar',
   Placeholder = 'placeholder',
+  Table = 'table',
 }
 
 export interface CrepeFeatureConfig {
+  [CrepeFeature.Cursor]?: CursorFeatureConfig
+  [CrepeFeature.ListItem]?: ListItemFeatureConfig
+  [CrepeFeature.LinkTooltip]?: LinkTooltipFeatureConfig
+  [CrepeFeature.ImageBlock]?: ImageBlockFeatureConfig
+  [CrepeFeature.BlockEdit]?: BlockEditFeatureConfig
   [CrepeFeature.Placeholder]?: PlaceHolderFeatureConfig
+  [CrepeFeature.Toolbar]?: ToolbarFeatureConfig
   [CrepeFeature.CodeMirror]?: CodeMirrorFeatureConfig
+  [CrepeFeature.Table]?: TableFeatureConfig
 }
 
 export const defaultFeatures: Record<CrepeFeature, boolean> = {
+  [CrepeFeature.Cursor]: true,
   [CrepeFeature.ListItem]: true,
   [CrepeFeature.LinkTooltip]: true,
   [CrepeFeature.ImageBlock]: true,
-  [CrepeFeature.Cursor]: true,
   [CrepeFeature.BlockEdit]: true,
   [CrepeFeature.Placeholder]: true,
   [CrepeFeature.Toolbar]: true,
-  [CrepeFeature.CodeMirror]: false,
+  [CrepeFeature.CodeMirror]: true,
+  [CrepeFeature.Table]: true,
 }
 
 export async function loadFeature(feature: CrepeFeature, editor: Editor, config?: never) {
@@ -63,5 +79,9 @@ export async function loadFeature(feature: CrepeFeature, editor: Editor, config?
       const { defineFeature } = await import('./toolbar')
       return defineFeature(editor, config)
     }
+    case CrepeFeature.Table: {
+      const { defineFeature } = await import('./table')
+      return defineFeature(editor, config)
+    }
   }
 }

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

@@ -1,17 +1,30 @@
-import { configureLinkTooltip, linkTooltipConfig, linkTooltipPlugin } from '@milkdown/components/link-tooltip'
-import type { DefineFeature } from '../shared'
-import { confirmIcon, deleteIcon, editIcon, linkIcon } from './consts'
+import { configureLinkTooltip, linkTooltipConfig, linkTooltipPlugin } from '@milkdown/kit/component/link-tooltip'
+import type { DefineFeature, Icon } from '../shared'
+import { confirmIcon, editIcon, linkIcon, removeIcon } from '../../icons'
 
-export const defineFeature: DefineFeature = (editor) => {
+interface LinkTooltipConfig {
+  linkIcon: Icon
+  editButton: Icon
+  removeButton: Icon
+  confirmButton: Icon
+  inputPlaceholder: string
+  onCopyLink: (link: string) => void
+}
+
+export type LinkTooltipFeatureConfig = Partial<LinkTooltipConfig>
+
+export const defineFeature: DefineFeature<LinkTooltipFeatureConfig> = (editor, config) => {
   editor
     .config(configureLinkTooltip)
     .config((ctx) => {
-      ctx.update(linkTooltipConfig.key, config => ({
-        ...config,
-        linkIcon: () => linkIcon,
-        editButton: () => editIcon,
-        removeButton: () => deleteIcon,
-        confirmButton: () => confirmIcon,
+      ctx.update(linkTooltipConfig.key, prev => ({
+        ...prev,
+        linkIcon: config?.linkIcon ?? (() => linkIcon),
+        editButton: config?.editButton ?? (() => editIcon),
+        removeButton: config?.removeButton ?? (() => removeIcon),
+        confirmButton: config?.confirmButton ?? (() => confirmIcon),
+        inputPlaceholder: config?.inputPlaceholder ?? 'Paste link...',
+        onCopyLink: config?.onCopyLink ?? (() => {}),
       }))
     })
     .use(linkTooltipPlugin)

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

@@ -1,26 +1,38 @@
-import type { Ctx } from '@milkdown/ctx'
-import { listItemBlockComponent, listItemBlockConfig } from '@milkdown/components/list-item-block'
+import type { Ctx } from '@milkdown/kit/ctx'
+import { listItemBlockComponent, listItemBlockConfig } from '@milkdown/kit/component/list-item-block'
 import { html } from 'atomico'
-import type { DefineFeature } from '../shared'
-import { bulletIcon } from './consts'
+import clsx from 'clsx'
+import type { DefineFeature, Icon } from '../shared'
+import { bulletIcon, checkBoxCheckedIcon, checkBoxUncheckedIcon } from '../../icons'
 
-function configureListItem(ctx: Ctx) {
+export interface ListItemConfig {
+  bulletIcon: Icon
+  checkBoxCheckedIcon: Icon
+  checkBoxUncheckedIcon: Icon
+}
+
+export type ListItemFeatureConfig = Partial<ListItemConfig>
+
+function configureListItem(ctx: Ctx, config?: ListItemFeatureConfig) {
   ctx.set(listItemBlockConfig.key, {
     renderLabel: ({ label, listType, checked, readonly }) => {
       if (checked == null) {
         if (listType === 'bullet')
-          return html`<span class='label'>${bulletIcon}</span>`
+          return html`<span class='label'>${config?.bulletIcon?.() ?? bulletIcon}</span>`
 
         return html`<span class='label'>${label}</span>`
       }
 
-      return html`<input disabled=${readonly} class='label' type="checkbox" checked=${checked} />`
+      if (checked)
+        return html`<span class=${clsx('label checkbox', readonly && 'readonly')}>${config?.checkBoxCheckedIcon?.() ?? checkBoxCheckedIcon}</span>`
+
+      return html`<span class=${clsx('label checkbox', readonly && 'readonly')}>${config?.checkBoxUncheckedIcon?.() ?? checkBoxUncheckedIcon}</span>`
     },
   })
 }
 
-export const defineFeature: DefineFeature = (editor) => {
+export const defineFeature: DefineFeature<ListItemFeatureConfig> = (editor, config) => {
   editor
-    .config(configureListItem)
+    .config(ctx => configureListItem(ctx, config))
     .use(listItemBlockComponent)
 }

package/src/feature/placeholder/index.ts

@@ -1,8 +1,9 @@
-import { $ctx, $prose } from '@milkdown/utils'
-import type { EditorState } from '@milkdown/prose/state'
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import type { Node } from '@milkdown/prose/model'
-import { Decoration, DecorationSet } from '@milkdown/prose/view'
+import { $ctx, $prose } from '@milkdown/kit/utils'
+import type { EditorState } from '@milkdown/kit/prose/state'
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state'
+import type { Node } from '@milkdown/kit/prose/model'
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view'
+import { findParent } from '@milkdown/kit/prose'
 import type { DefineFeature } from '../shared'
 import { isInCodeBlock, isInList } from '../../utils'
 
@@ -23,6 +24,10 @@ function createPlaceholderDecoration(
   if (node.content.size > 0)
     return null
 
+  const inTable = findParent(node => node.type.name === 'table')($pos)
+  if (inTable)
+    return null
+
   const before = $pos.before()
 
   return Decoration.node(before, before + node.nodeSize, {
@@ -55,7 +60,7 @@ export const placeholderPlugin = $prose((ctx) => {
         if (isInCodeBlock(state.selection) || isInList(state.selection))
           return null
 
-        const placeholderText = config.text
+        const placeholderText = config.text ?? 'Please enter...'
         const deco = createPlaceholderDecoration(state, placeholderText)
         if (!deco)
           return null

package/src/feature/shared.ts

@@ -1,3 +1,6 @@
-import type { Editor } from '@milkdown/core'
+import type { Editor } from '@milkdown/kit/core'
+import type { html } from 'atomico'
 
 export type DefineFeature<Config = unknown> = (editor: Editor, config?: Config) => void | Promise<void>
+
+export type Icon = () => HTMLElement | ReturnType<typeof html> | string | null

package/src/feature/table/index.ts

@@ -0,0 +1,54 @@
+import { tableBlock, tableBlockConfig } from '@milkdown/kit/component/table-block'
+import type { DefineFeature, Icon } from '../shared'
+import {
+  alignCenterIcon,
+  alignLeftIcon,
+  alignRightIcon,
+  dragHandleIcon,
+  plusIcon,
+  removeIcon,
+} from '../../icons'
+
+interface TableConfig {
+  addRowIcon: Icon
+  addColIcon: Icon
+  deleteRowIcon: Icon
+  deleteColIcon: Icon
+  alignLeftIcon: Icon
+  alignCenterIcon: Icon
+  alignRightIcon: Icon
+  colDragHandleIcon: Icon
+  rowDragHandleIcon: Icon
+}
+
+export type TableFeatureConfig = Partial<TableConfig>
+
+export const defineFeature: DefineFeature<TableFeatureConfig> = (editor, config) => {
+  editor.config((ctx) => {
+    ctx.update(tableBlockConfig.key, defaultConfig => ({
+      ...defaultConfig,
+      renderButton: (renderType) => {
+        switch (renderType) {
+          case 'add_row':
+            return config?.addRowIcon?.() ?? plusIcon
+          case 'add_col':
+            return config?.addColIcon?.() ?? plusIcon
+          case 'delete_row':
+            return config?.deleteRowIcon?.() ?? removeIcon
+          case 'delete_col':
+            return config?.deleteColIcon?.() ?? removeIcon
+          case 'align_col_left':
+            return config?.alignLeftIcon?.() ?? alignLeftIcon
+          case 'align_col_center':
+            return config?.alignCenterIcon?.() ?? alignCenterIcon
+          case 'align_col_right':
+            return config?.alignRightIcon?.() ?? alignRightIcon
+          case 'col_drag_handle':
+            return config?.colDragHandleIcon?.() ?? dragHandleIcon
+          case 'row_drag_handle':
+            return config?.rowDragHandleIcon?.() ?? dragHandleIcon
+        }
+      },
+    }))
+  }).use(tableBlock)
+}

package/src/feature/toolbar/component.ts

@@ -1,7 +1,7 @@
 import type { Component } from 'atomico'
 import { c, html, useEffect, useUpdate } from 'atomico'
-import type { Ctx } from '@milkdown/ctx'
-import { commandsCtx, editorViewCtx } from '@milkdown/core'
+import type { Ctx } from '@milkdown/kit/ctx'
+import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
 import {
   emphasisSchema,
   inlineCodeSchema,
@@ -10,19 +10,27 @@ import {
   toggleEmphasisCommand,
   toggleInlineCodeCommand,
   toggleStrongCommand,
-} from '@milkdown/preset-commonmark'
-import type { MarkType } from '@milkdown/prose/model'
+} from '@milkdown/kit/preset/commonmark'
+import type { MarkType } from '@milkdown/kit/prose/model'
 import clsx from 'clsx'
-import { linkTooltipAPI } from '@milkdown/components'
-import { boldIcon, codeIcon, italicIcon, linkIcon } from './consts'
+import { linkTooltipAPI } from '@milkdown/kit/component/link-tooltip'
+import { strikethroughSchema, toggleStrikethroughCommand } from '@milkdown/kit/preset/gfm'
+import { boldIcon, codeIcon, italicIcon, linkIcon, strikethroughIcon } from '../../icons'
+import type { ToolbarFeatureConfig } from './index'
 
 export interface ToolbarProps {
   ctx: Ctx
   hide: () => void
   show: boolean
+  config?: ToolbarFeatureConfig
 }
 
-export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) => {
+export const toolbarComponent: Component<ToolbarProps> = ({
+  ctx,
+  hide,
+  show,
+  config,
+}) => {
   const update = useUpdate()
   useEffect(() => {
     update()
@@ -50,7 +58,7 @@ export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) =
         commands.call(toggleStrongCommand.key)
       })}
     >
-      ${boldIcon}
+      ${config?.boldIcon?.() ?? boldIcon}
     </button>
     <button
       class=${clsx('toolbar-item', ctx && isActive(emphasisSchema.type(ctx)) && 'active')}
@@ -59,7 +67,16 @@ export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) =
         commands.call(toggleEmphasisCommand.key)
       })}
     >
-      ${italicIcon}
+      ${config?.italicIcon?.() ?? italicIcon}
+    </button>
+    <button
+      class=${clsx('toolbar-item', ctx && isActive(strikethroughSchema.type(ctx)) && 'active')}
+      onmousedown=${onClick((ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleStrikethroughCommand.key)
+      })}
+    >
+      ${config?.strikethroughIcon?.() ?? strikethroughIcon}
     </button>
     <div class="divider"></div>
     <button
@@ -69,7 +86,7 @@ export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) =
         commands.call(toggleInlineCodeCommand.key)
       })}
     >
-      ${codeIcon}
+      ${config?.codeIcon?.() ?? codeIcon}
     </button>
     <button
       class=${clsx('toolbar-item', ctx && isActive(linkSchema.type(ctx)) && 'active')}
@@ -86,7 +103,7 @@ export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) =
         hide?.()
       })}
     >
-      ${linkIcon}
+      ${config?.linkIcon?.() ?? linkIcon}
     </button>
   </host>`
 }
@@ -95,6 +112,7 @@ toolbarComponent.props = {
   ctx: Object,
   hide: Function,
   show: Boolean,
+  config: Object,
 }
 
 export const ToolbarElement = c(toolbarComponent)