@milkdown/crepe 7.12.1 → 7.13.1

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

@@ -1,109 +1,4 @@
-import type { Ctx } from '@milkdown/kit/ctx'
-import type { Attrs, NodeType } from '@milkdown/kit/prose/model'
-import type { Command, Transaction } from '@milkdown/kit/prose/state'
-
-import { findWrapping } from '@milkdown/kit/prose/transform'
-
-export interface MenuItem {
-  index: number
-  key: string
+export type SlashMenuItem = {
   label: string
   icon: string
-  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/latex/command.ts

@@ -0,0 +1,48 @@
+import type { Node } from '@milkdown/kit/prose/model'
+
+import { findNodeInSelection } from '@milkdown/kit/prose'
+import { NodeSelection, TextSelection } from '@milkdown/kit/prose/state'
+import { $command } from '@milkdown/kit/utils'
+
+import { mathInlineSchema } from './inline-latex'
+
+export const toggleLatexCommand = $command('ToggleLatex', (ctx) => {
+  return () => (state, dispatch) => {
+    const {
+      hasNode: hasLatex,
+      pos: latexPos,
+      target: latexNode,
+    } = findNodeInSelection(state, mathInlineSchema.type(ctx))
+
+    const { selection, doc, tr } = state
+    if (!hasLatex) {
+      const text = doc.textBetween(selection.from, selection.to)
+      let _tr = tr.replaceSelectionWith(
+        mathInlineSchema.type(ctx).create({
+          value: text,
+        })
+      )
+      if (dispatch) {
+        dispatch(
+          _tr.setSelection(NodeSelection.create(_tr.doc, selection.from))
+        )
+      }
+      return true
+    }
+
+    const { from, to } = selection
+    if (!latexNode || latexPos < 0) return false
+
+    let _tr = tr.delete(latexPos, latexPos + 1)
+    const content = (latexNode as Node).attrs.value
+    _tr = _tr.insertText(content, latexPos)
+    if (dispatch) {
+      dispatch(
+        _tr.setSelection(
+          TextSelection.create(_tr.doc, from, to + content.length - 1)
+        )
+      )
+    }
+    return true
+  }
+})

package/src/feature/latex/index.ts

@@ -9,6 +9,7 @@ import { crepeFeatureConfig, useCrepeFeatures } from '../../core/slice'
 import { CrepeFeature } from '../../feature'
 import { confirmIcon } from '../../icons'
 import { blockLatexSchema } from './block-latex'
+import { toggleLatexCommand } from './command'
 import { mathInlineSchema } from './inline-latex'
 import { inlineLatexTooltip } from './inline-tooltip/tooltip'
 import { LatexInlineTooltip } from './inline-tooltip/view'
@@ -59,6 +60,7 @@ export const latex: DefineFeature<LatexFeatureConfig> = (editor, config) => {
     .use(mathInlineInputRule)
     .use(mathBlockInputRule)
     .use(blockLatexSchema)
+    .use(toggleLatexCommand)
 }
 
 function renderLatex(content: string, options?: KatexOptions) {

package/src/feature/toolbar/component.tsx

@@ -1,43 +1,21 @@
 import type { Ctx } from '@milkdown/kit/ctx'
-import type { MarkType, NodeType, Node } from '@milkdown/kit/prose/model'
+import type { Selection } from '@milkdown/kit/prose/state'
 
 import { Icon } from '@milkdown/kit/component'
-import { linkTooltipAPI } from '@milkdown/kit/component/link-tooltip'
-import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
-import {
-  emphasisSchema,
-  inlineCodeSchema,
-  linkSchema,
-  strongSchema,
-  toggleEmphasisCommand,
-  toggleInlineCodeCommand,
-  toggleStrongCommand,
-} from '@milkdown/kit/preset/commonmark'
-import {
-  strikethroughSchema,
-  toggleStrikethroughCommand,
-} from '@milkdown/kit/preset/gfm'
-import {
-  NodeSelection,
-  TextSelection,
-  type Selection,
-} from '@milkdown/kit/prose/state'
+import { editorCtx, EditorStatus } from '@milkdown/kit/core'
 import clsx from 'clsx'
-import { defineComponent, type Ref, type ShallowRef, h, Fragment } from 'vue'
+import {
+  defineComponent,
+  type Ref,
+  type ShallowRef,
+  h,
+  Fragment,
+  computed,
+} from 'vue'
 
 import type { ToolbarFeatureConfig } from '.'
 
-import { useCrepeFeatures } from '../../core/slice'
-import { CrepeFeature } from '../../feature'
-import {
-  boldIcon,
-  codeIcon,
-  functionsIcon,
-  italicIcon,
-  linkIcon,
-  strikethroughIcon,
-} from '../../icons'
-import { mathInlineSchema } from '../latex/inline-latex'
+import { getGroups, type ToolbarItem } from './config'
 
 h
 Fragment
@@ -74,181 +52,53 @@ 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()
       ctx && fn(ctx)
     }
 
-    const isActive = (mark: MarkType) => {
-      const selection = props.selection.value
-      if (!ctx || !selection) return false
-      const { state } = ctx.get(editorViewCtx)
-      if (!state) return false
-      const { doc } = state
-      return doc.rangeHasMark(selection.from, selection.to, mark)
-    }
-
-    const containsNode = (node: NodeType) => {
-      const selection = props.selection.value
-      if (!ctx || !selection) return false
-      const { state } = ctx.get(editorViewCtx)
-      if (!state) return false
-      const { doc } = state
-      if (selection instanceof NodeSelection) {
-        return selection.node.type === node
-      }
-
-      const { from, to } = selection
+    function checkActive(checker: ToolbarItem['active']) {
+      // make sure the function subscribed to vue reactive
+      props.selection.value
+      // Check if the edtior is ready
+      const status = ctx.get(editorCtx).status
+      if (status !== EditorStatus.Created) return false
 
-      let hasNode = false
-      doc.nodesBetween(from, to, (n) => {
-        if (n.type === node) {
-          hasNode = true
-          return false
-        }
-        return true
-      })
-
-      return hasNode
+      return checker(ctx)
     }
 
-    const flags = useCrepeFeatures(ctx).get()
-    const isLatexEnabled = flags?.includes(CrepeFeature.Latex)
-
-    const toggleLatex = (ctx: Ctx) => {
-      const hasLatex = containsNode(mathInlineSchema.type(ctx))
-      const view = ctx.get(editorViewCtx)
-      const { selection, doc, tr } = view.state
-      if (!hasLatex) {
-        const text = doc.textBetween(selection.from, selection.to)
-        let _tr = tr.replaceSelectionWith(
-          mathInlineSchema.type(ctx).create({
-            value: text,
-          })
-        )
-        view.dispatch(
-          _tr.setSelection(NodeSelection.create(_tr.doc, selection.from))
-        )
-        return
-      }
-
-      const { from, to } = selection
-      let pos = -1
-      let node: Node | null = null
-      doc.nodesBetween(from, to, (n, p) => {
-        if (node) return false
-        if (n.type === mathInlineSchema.type(ctx)) {
-          pos = p
-          node = n
-          return false
-        }
-        return true
-      })
-      if (!node || pos < 0) return
-
-      let _tr = tr.delete(pos, pos + 1)
-      const content = (node as Node).attrs.value
-      _tr = _tr.insertText(content, pos)
-      view.dispatch(
-        _tr.setSelection(
-          TextSelection.create(_tr.doc, from, to + content.length - 1)
-        )
-      )
-    }
+    const groupInfo = computed(() => getGroups(config, ctx))
 
     return () => {
       return (
         <>
-          <button
-            type="button"
-            class={clsx(
-              'toolbar-item',
-              ctx && isActive(strongSchema.type(ctx)) && 'active'
-            )}
-            onPointerdown={onClick((ctx) => {
-              const commands = ctx.get(commandsCtx)
-              commands.call(toggleStrongCommand.key)
-            })}
-          >
-            <Icon icon={config?.boldIcon ?? boldIcon} />
-          </button>
-          <button
-            type="button"
-            class={clsx(
-              'toolbar-item',
-              ctx && isActive(emphasisSchema.type(ctx)) && 'active'
-            )}
-            onPointerdown={onClick((ctx) => {
-              const commands = ctx.get(commandsCtx)
-              commands.call(toggleEmphasisCommand.key)
-            })}
-          >
-            <Icon icon={config?.italicIcon ?? italicIcon} />
-          </button>
-          <button
-            type="button"
-            class={clsx(
-              'toolbar-item',
-              ctx && isActive(strikethroughSchema.type(ctx)) && 'active'
-            )}
-            onPointerdown={onClick((ctx) => {
-              const commands = ctx.get(commandsCtx)
-              commands.call(toggleStrikethroughCommand.key)
-            })}
-          >
-            <Icon icon={config?.strikethroughIcon ?? strikethroughIcon} />
-          </button>
-          <div class="divider"></div>
-          <button
-            type="button"
-            class={clsx(
-              'toolbar-item',
-              ctx && isActive(inlineCodeSchema.type(ctx)) && 'active'
-            )}
-            onPointerdown={onClick((ctx) => {
-              const commands = ctx.get(commandsCtx)
-              commands.call(toggleInlineCodeCommand.key)
-            })}
-          >
-            <Icon icon={config?.codeIcon ?? codeIcon} />
-          </button>
-          {isLatexEnabled && (
-            <button
-              type="button"
-              class={clsx(
-                'toolbar-item',
-                ctx && containsNode(mathInlineSchema.type(ctx)) && 'active'
-              )}
-              onPointerdown={onClick(toggleLatex)}
-            >
-              <Icon icon={config?.latexIcon ?? functionsIcon} />
-            </button>
-          )}
-          <button
-            type="button"
-            class={clsx(
-              'toolbar-item',
-              ctx && isActive(linkSchema.type(ctx)) && 'active'
-            )}
-            onPointerdown={onClick((ctx) => {
-              const view = ctx.get(editorViewCtx)
-              const { selection } = view.state
-
-              if (isActive(linkSchema.type(ctx))) {
-                ctx
-                  .get(linkTooltipAPI.key)
-                  .removeLink(selection.from, selection.to)
-                return
+          {groupInfo.value
+            .map((group) => {
+              return group.items.map((item) => {
+                return (
+                  <button
+                    type="button"
+                    class={clsx(
+                      'toolbar-item',
+                      ctx && checkActive(item.active) && 'active'
+                    )}
+                    onPointerdown={onClick(item.onRun)}
+                  >
+                    <Icon icon={item.icon} />
+                  </button>
+                )
+              })
+            })
+            .reduce((acc, curr, index) => {
+              if (index === 0) {
+                acc.push(...curr)
+              } else {
+                acc.push(<div class="divider"></div>, ...curr)
               }
-
-              ctx.get(linkTooltipAPI.key).addLink(selection.from, selection.to)
-              hide?.()
-            })}
-          >
-            <Icon icon={config?.linkIcon ?? linkIcon} />
-          </button>
+              return acc
+            }, [])}
         </>
       )
     }

package/src/feature/toolbar/config.ts

@@ -0,0 +1,136 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+
+import { toggleLinkCommand } from '@milkdown/kit/component/link-tooltip'
+import { commandsCtx } from '@milkdown/kit/core'
+import {
+  emphasisSchema,
+  inlineCodeSchema,
+  isMarkSelectedCommand,
+  isNodeSelectedCommand,
+  linkSchema,
+  strongSchema,
+  toggleEmphasisCommand,
+  toggleInlineCodeCommand,
+  toggleStrongCommand,
+} from '@milkdown/kit/preset/commonmark'
+import {
+  strikethroughSchema,
+  toggleStrikethroughCommand,
+} from '@milkdown/kit/preset/gfm'
+
+import type { ToolbarFeatureConfig } from '.'
+
+import { CrepeFeature } from '..'
+import { useCrepeFeatures } from '../../core/slice'
+import {
+  boldIcon,
+  codeIcon,
+  functionsIcon,
+  italicIcon,
+  linkIcon,
+  strikethroughIcon,
+} from '../../icons'
+import { GroupBuilder } from '../../utils/group-builder'
+import { toggleLatexCommand } from '../latex/command'
+import { mathInlineSchema } from '../latex/inline-latex'
+
+export type ToolbarItem = {
+  active: (ctx: Ctx) => boolean
+  icon: string
+}
+
+export function getGroups(config?: ToolbarFeatureConfig, ctx?: Ctx) {
+  const groupBuilder = new GroupBuilder<ToolbarItem>()
+
+  groupBuilder
+    .addGroup('formatting', 'Formatting')
+    .addItem('bold', {
+      icon: config?.boldIcon ?? boldIcon,
+      active: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        return commands.call(isMarkSelectedCommand.key, strongSchema.type(ctx))
+      },
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleStrongCommand.key)
+      },
+    })
+    .addItem('italic', {
+      icon: config?.italicIcon ?? italicIcon,
+      active: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        return commands.call(
+          isMarkSelectedCommand.key,
+          emphasisSchema.type(ctx)
+        )
+      },
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleEmphasisCommand.key)
+      },
+    })
+    .addItem('strikethrough', {
+      icon: config?.strikethroughIcon ?? strikethroughIcon,
+      active: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        return commands.call(
+          isMarkSelectedCommand.key,
+          strikethroughSchema.type(ctx)
+        )
+      },
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleStrikethroughCommand.key)
+      },
+    })
+
+  const functionGroup = groupBuilder.addGroup('function', 'Function')
+  functionGroup.addItem('code', {
+    icon: config?.codeIcon ?? codeIcon,
+    active: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return commands.call(
+        isMarkSelectedCommand.key,
+        inlineCodeSchema.type(ctx)
+      )
+    },
+    onRun: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      commands.call(toggleInlineCodeCommand.key)
+    },
+  })
+
+  const flags = ctx && useCrepeFeatures(ctx).get()
+  const isLatexEnabled = flags?.includes(CrepeFeature.Latex)
+  if (isLatexEnabled) {
+    functionGroup.addItem('latex', {
+      icon: config?.latexIcon ?? functionsIcon,
+      active: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        return commands.call(
+          isNodeSelectedCommand.key,
+          mathInlineSchema.type(ctx)
+        )
+      },
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleLatexCommand.key)
+      },
+    })
+  }
+  functionGroup.addItem('link', {
+    icon: config?.linkIcon ?? linkIcon,
+    active: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return commands.call(isMarkSelectedCommand.key, linkSchema.type(ctx))
+    },
+    onRun: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      commands.call(toggleLinkCommand.key)
+    },
+  })
+
+  config?.buildToolbar?.(groupBuilder)
+
+  return groupBuilder.build()
+}

package/src/feature/toolbar/index.ts

@@ -10,7 +10,9 @@ import { TooltipProvider, tooltipFactory } from '@milkdown/kit/plugin/tooltip'
 import { TextSelection } from '@milkdown/kit/prose/state'
 import { createApp, ref, shallowRef, type App, type ShallowRef } from 'vue'
 
+import type { GroupBuilder } from '../../utils'
 import type { DefineFeature } from '../shared'
+import type { ToolbarItem } from './config'
 
 import { crepeFeatureConfig } from '../../core/slice'
 import { CrepeFeature } from '../../feature'
@@ -23,6 +25,7 @@ interface ToolbarConfig {
   linkIcon: string
   strikethroughIcon: string
   latexIcon: string
+  buildToolbar: (builder: GroupBuilder<ToolbarItem>) => void
 }
 
 export type ToolbarFeatureConfig = Partial<ToolbarConfig>

package/src/utils/checker.ts

@@ -0,0 +1,11 @@
+import type { Selection } from '@milkdown/kit/prose/state'
+
+export function isInCodeBlock(selection: Selection) {
+  const type = selection.$from.parent.type
+  return type.name === 'code_block'
+}
+
+export function isInList(selection: Selection) {
+  const type = selection.$from.node(selection.$from.depth - 1)?.type
+  return type?.name === 'list_item'
+}

package/src/utils/group-builder.ts

@@ -0,0 +1,68 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+
+export type MenuItem<T> = {
+  index: number
+  key: string
+  onRun: (ctx: Ctx) => void
+} & T
+
+type WithRange<T, HasIndex extends true | false = true> = HasIndex extends true
+  ? T & { range: [start: number, end: number] }
+  : T
+
+export type MenuItemGroup<T, HasIndex extends true | false = true> = WithRange<
+  {
+    key: string
+    label: string
+    items: HasIndex extends true ? MenuItem<T>[] : Omit<MenuItem<T>, 'index'>[]
+  },
+  HasIndex
+>
+
+export class GroupBuilder<T> {
+  #groups: MenuItemGroup<T, false>[] = []
+
+  clear = () => {
+    this.#groups = []
+    return this
+  }
+
+  #getGroupInstance = (group: MenuItemGroup<T, false>) => {
+    const groupInstance = {
+      group,
+      addItem: (key: string, item: Omit<MenuItem<T>, 'key' | 'index'>) => {
+        const data = { ...item, key } as MenuItem<T>
+        group.items.push(data)
+        return groupInstance
+      },
+      clear: () => {
+        group.items = []
+        return groupInstance
+      },
+    }
+    return groupInstance
+  }
+
+  addGroup = (key: string, label: string) => {
+    const items: Omit<MenuItem<T>, 'index'>[] = []
+    const group: MenuItemGroup<T, 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/utils/index.ts

@@ -1,11 +1,3 @@
-import type { Selection } from '@milkdown/kit/prose/state'
-
-export function isInCodeBlock(selection: Selection) {
-  const type = selection.$from.parent.type
-  return type.name === 'code_block'
-}
-
-export function isInList(selection: Selection) {
-  const type = selection.$from.node(selection.$from.depth - 1)?.type
-  return type?.name === 'list_item'
-}
+export * from './checker'
+export * from './group-builder'
+export * from './types'