feat: add math in slash menu (#1686)

Author: Saul-Mirone

Diff for: packages/crepe/src/feature/block-edit/index.ts

@@ -44,6 +44,8 @@ interface BlockEditConfig {
   slashMenuCodeBlockLabel: string
   slashMenuTableIcon: Icon
   slashMenuTableLabel: string
+  slashMenuMathIcon: Icon
+  slashMenuMathLabel: string
 }
 
 export type BlockEditFeatureConfig = Partial<BlockEditConfig>

Diff for: packages/crepe/src/feature/block-edit/menu/component.ts

@@ -28,7 +28,10 @@ export const menuComponent: Component<MenuProps> = ({
   filter,
   config,
 }) => {
-  const { groups, size } = useMemo(() => getGroups(filter, config), [filter])
+  const { groups, size } = useMemo(
+    () => getGroups(filter, config, ctx),
+    [filter]
+  )
 
   const host = useHost()
   const [hoverIndex, setHoverIndex] = useState(0)

Diff for: packages/crepe/src/feature/block-edit/menu/config.ts

@@ -28,6 +28,7 @@ import {
   tableIcon,
   textIcon,
   todoListIcon,
+  functionsIcon,
 } from '../../../icons'
 import type { BlockEditFeatureConfig } from '../index'
 import type { MenuItemGroup } from './utils'
@@ -38,8 +39,18 @@ import {
   clearRange,
 } from './utils'
 import { GroupBuilder } from './group-builder'
+import type { Ctx } from '@milkdown/kit/ctx'
+import { FeaturesCtx } from '../../../core/slice'
+import { CrepeFeature } from '../../..'
+
+export function getGroups(
+  filter?: string,
+  config?: BlockEditFeatureConfig,
+  ctx?: Ctx
+) {
+  const flags = ctx?.get(FeaturesCtx)
+  const isLatexEnabled = flags?.includes(CrepeFeature.Latex)
 
-export function getGroups(filter?: string, config?: BlockEditFeatureConfig) {
   const groupBuilder = new GroupBuilder()
   groupBuilder
     .addGroup('text', config?.slashMenuTextGroupLabel ?? 'Text')
@@ -200,7 +211,7 @@ export function getGroups(filter?: string, config?: BlockEditFeatureConfig) {
       },
     })
 
-  groupBuilder
+  const advancedGroup = groupBuilder
     .addGroup('advanced', config?.slashMenuAdvancedGroupLabel ?? 'Advanced')
     .addItem('image', {
       label: config?.slashMenuImageLabel ?? 'Image',
@@ -250,6 +261,22 @@ export function getGroups(filter?: string, config?: BlockEditFeatureConfig) {
       },
     })
 
+  if (isLatexEnabled) {
+    advancedGroup.addItem('math', {
+      label: config?.slashMenuMathLabel ?? 'Math',
+      icon: config?.slashMenuMathIcon?.() ?? functionsIcon,
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { dispatch, state } = view
+
+        const command = clearContentAndAddBlockType(codeBlockSchema.type(ctx), {
+          language: 'LaTex',
+        })
+        command(state, dispatch)
+      },
+    })
+  }
+
   config?.buildMenu?.(groupBuilder)
 
   let groups = groupBuilder.build()

Diff for: packages/crepe/src/feature/toolbar/component.ts

@@ -25,9 +25,9 @@ import {
   italicIcon,
   linkIcon,
   strikethroughIcon,
+  functionsIcon,
 } from '../../icons'
 import type { ToolbarFeatureConfig } from './index'
-import { functionsIcon } from '../../icons/functions'
 import { NodeSelection, TextSelection } from '@milkdown/kit/prose/state'
 import { mathInlineSchema } from '../latex/inline-latex'
 import { FeaturesCtx } from '../../core/slice'

Diff for: packages/crepe/src/icons/index.ts

@@ -34,3 +34,4 @@ export * from './strikethrough'
 export * from './table'
 export * from './text'
 export * from './todo-list'
+export * from './functions'