feat: 🎸 add toggle link command

packages/components/src/link-tooltip/command.ts

@@ -0,0 +1,19 @@
+import { linkSchema } from '@milkdown/preset-commonmark'
+import { $command } from '@milkdown/utils'
+
+import { linkTooltipAPI } from './slices'
+
+export const toggleLinkCommand = $command('ToggleLink', (ctx) => {
+  return () => (state) => {
+    const { doc, selection } = state
+    const mark = linkSchema.type(ctx)
+    const hasLink = doc.rangeHasMark(selection.from, selection.to, mark)
+    if (hasLink) {
+      ctx.get(linkTooltipAPI.key).removeLink(selection.from, selection.to)
+      return true
+    }
+
+    ctx.get(linkTooltipAPI.key).addLink(selection.from, selection.to)
+    return true
+  }
+})

packages/components/src/link-tooltip/index.ts

@@ -1,16 +1,19 @@
 import type { MilkdownPlugin } from '@milkdown/ctx'
 
+import { toggleLinkCommand } from './command'
 import { linkTooltipAPI, linkTooltipConfig, linkTooltipState } from './slices'
 import { linkEditTooltip, linkPreviewTooltip } from './tooltips'
 
 export * from './slices'
 export * from './configure'
 export * from './tooltips'
+export * from './command'
 
 export const linkTooltipPlugin: MilkdownPlugin[] = [
   linkTooltipState,
   linkTooltipAPI,
   linkTooltipConfig,
   linkPreviewTooltip,
   linkEditTooltip,
+  toggleLinkCommand,
 ].flat()

packages/crepe/src/feature/toolbar/component.tsx

@@ -2,7 +2,7 @@ import type { Ctx } from '@milkdown/kit/ctx'
 import type { Selection } from '@milkdown/kit/prose/state'
 
 import { Icon } from '@milkdown/kit/component'
-import { linkTooltipAPI } from '@milkdown/kit/component/link-tooltip'
+import { toggleLinkCommand } from '@milkdown/kit/component/link-tooltip'
 import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
 import {
   emphasisSchema,
@@ -72,7 +72,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
     },
   },
   setup(props) {
-    const { ctx, hide, config } = props
+    const { ctx, config } = props
 
     const onClick = (fn: (ctx: Ctx) => void) => (e: MouseEvent) => {
       e.preventDefault()
@@ -188,18 +188,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
               ctx && isActive(linkSchema.type(ctx)) && 'active'
             )}
             onPointerdown={onClick((ctx) => {
-              const view = ctx.get(editorViewCtx)
-              const { selection } = view.state
-
-              if (isMarkActive(linkSchema.type(ctx))) {
-                ctx
-                  .get(linkTooltipAPI.key)
-                  .removeLink(selection.from, selection.to)
-                return
-              }
-
-              ctx.get(linkTooltipAPI.key).addLink(selection.from, selection.to)
-              hide?.()
+              const commands = ctx.get(commandsCtx)
+              commands.call(toggleLinkCommand.key)
             })}
           >
             <Icon icon={config?.linkIcon ?? linkIcon} />