@milkdown/crepe 7.3.6 → 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,59 +1,59 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { codeBlockComponent, codeBlockConfig } from '@milkdown/components/code-block'
-import { languages } from '@codemirror/language-data'
+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 } from '@codemirror/commands'
-import { bespin, espresso, rosePineDawn } from 'thememirror'
-import { html } from 'atomico'
-import { ThemeCtx, injectStyle } from '../../core/slice'
-import type { DefineFeature } from '../shared'
-import { CrepeTheme } from '../../theme'
-import style from './style.css?inline'
+import { defaultKeymap, indentWithTab } from '@codemirror/commands'
+import type { html } from 'atomico'
+import type { DefineFeature, Icon } from '../shared'
+import { chevronDownIcon, clearIcon, searchIcon } from '../../icons'
 
-function pickTheme(theme: CrepeTheme) {
-  switch (theme) {
-    case CrepeTheme.Classic:
-      return rosePineDawn
-    case CrepeTheme.ClassicDark:
-      return bespin
-    default:
-      return espresso
-  }
-}
+interface CodeMirrorConfig {
+  extensions: Extension[]
+  languages: LanguageDescription[]
+  theme: Extension
 
-const check = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <path d="M5.99986 10.7799L3.21986 7.9999L2.27319 8.9399L5.99986 12.6666L13.9999 4.66656L13.0599 3.72656L5.99986 10.7799Z" fill="#49454F"/>
-  </svg>
-`
+  expandIcon: Icon
+  searchIcon: Icon
+  clearSearchIcon: Icon
 
-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>
-`
+  searchPlaceholder: string
+  noResultText: string
 
-export const defineFeature: DefineFeature = (editor) => {
-  editor.config(injectStyle(style))
-    .config(async (ctx) => {
-      const crepeTheme = ctx.get(ThemeCtx)
+  renderLanguage: (language: string, selected: boolean) => ReturnType<typeof html> | string | HTMLElement
+}
+export type CodeMirrorFeatureConfig = Partial<CodeMirrorConfig>
 
+export const defineFeature: DefineFeature<CodeMirrorFeatureConfig> = (editor, config = {}) => {
+  editor
+    .config(async (ctx) => {
+      let {
+        languages,
+        theme,
+      } = config
+      if (!languages) {
+        const { languages: langList } = await import('@codemirror/language-data')
+        languages = langList
+      }
+      if (!theme) {
+        const { nord } = await import('@uiw/codemirror-theme-nord')
+        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), pickTheme(crepeTheme)],
-        renderLanguage: (language, selected) => {
-          return html`<span class="leading">${selected ? check : null}</span>${language}`
-        },
+
+        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

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

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

@@ -1,57 +1,46 @@
-/* Copyright 2021, Milkdown by Mirone. */
-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 { injectStyle } from '../../core/slice'
-import style from './style.css?inline'
+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(injectStyle(style))
     .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,31 +1,48 @@
-/* Copyright 2021, Milkdown by Mirone. */
-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',
   ListItem = 'list-item',
   LinkTooltip = 'link-tooltip',
-  GapCursor = 'gap-cursor',
+  Cursor = 'cursor',
   ImageBlock = 'image-block',
   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.GapCursor]: 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) {
@@ -46,8 +63,8 @@ export async function loadFeature(feature: CrepeFeature, editor: Editor, config?
       const { defineFeature } = await import('./image-block')
       return defineFeature(editor, config)
     }
-    case CrepeFeature.GapCursor: {
-      const { defineFeature } = await import('./gap-cursor')
+    case CrepeFeature.Cursor: {
+      const { defineFeature } = await import('./cursor')
       return defineFeature(editor, config)
     }
     case CrepeFeature.BlockEdit: {
@@ -62,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,21 +1,30 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { configureLinkTooltip, linkTooltipConfig, linkTooltipPlugin } from '@milkdown/components/link-tooltip'
-import { injectStyle } from '../../core/slice'
-import type { DefineFeature } from '../shared'
-import { confirmIcon, deleteIcon, editIcon, linkIcon } from './consts'
-import style from './style.css?inline'
+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(injectStyle(style))
     .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,30 +1,38 @@
-/* Copyright 2021, Milkdown by Mirone. */
-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 { injectStyle } from '../../core/slice'
-import type { DefineFeature } from '../shared'
-import { bulletIcon } from './consts'
-import style from './style.css?inline'
+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: string, listType, checked?: boolean) => {
+    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 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(injectStyle(style))
-    .config(configureListItem)
+    .config(ctx => configureListItem(ctx, config))
     .use(listItemBlockComponent)
 }

package/src/feature/placeholder/index.ts

@@ -1,13 +1,11 @@
-/* Copyright 2021, Milkdown by Mirone. */
-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 { injectStyle } from '../../core/slice'
 import { isInCodeBlock, isInList } from '../../utils'
-import style from './style.css?inline'
 
 function isDocEmpty(doc: Node) {
   return doc.childCount <= 1 && !doc.firstChild?.content.size
@@ -26,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, {
@@ -34,7 +36,7 @@ function createPlaceholderDecoration(
   })
 }
 
-export interface PlaceholderConfig {
+interface PlaceholderConfig {
   text: string
   mode: 'doc' | 'block'
 }
@@ -58,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
@@ -71,7 +73,6 @@ export const placeholderPlugin = $prose((ctx) => {
 
 export const defineFeature: DefineFeature<PlaceHolderFeatureConfig> = (editor, config) => {
   editor
-    .config(injectStyle(style))
     .config((ctx) => {
       if (config) {
         ctx.update(placeholderConfig.key, (prev) => {

package/src/feature/shared.ts

@@ -1,4 +1,6 @@
-/* Copyright 2021, Milkdown by Mirone. */
-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
+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)
+}