@milkdown/crepe 7.5.9 → 7.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/crepe",
   "type": "module",
-  "version": "7.5.9",
+  "version": "7.6.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,14 +39,17 @@
     "@codemirror/language": "^6.10.1",
     "@codemirror/language-data": "^6.3.1",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.16.0",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.16.0",
     "atomico": "^1.75.1",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",
+    "katex": "^0.16.0",
     "nanoid": "^5.0.0",
-    "tslib": "^2.5.0",
-    "@milkdown/kit": "7.5.9"
+    "remark-math": "^6.0.0",
+    "tslib": "^2.8.1",
+    "unist-util-visit": "^5.0.0",
+    "@milkdown/kit": "7.6.1"
   },
   "nx": {
     "targets": {

package/src/core/crepe.ts

@@ -1,6 +1,7 @@
 import type { DefaultValue } from '@milkdown/kit/core'
 import {
   Editor,
+  EditorStatus,
   defaultValueCtx,
   editorViewOptionsCtx,
   rootCtx,
@@ -17,6 +18,8 @@ import { trailing } from '@milkdown/kit/plugin/trailing'
 import type { CrepeFeatureConfig } from '../feature'
 import { CrepeFeature, defaultFeatures, loadFeature } from '../feature'
 import { configureFeatures } from './slice'
+import type { ListenerManager } from '@milkdown/kit/plugin/listener'
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener'
 
 export interface CrepeConfig {
   features?: Partial<Record<CrepeFeature, boolean>>
@@ -62,6 +65,7 @@ export class Crepe {
         }))
       })
       .use(commonmark)
+      .use(listener)
       .use(history)
       .use(indent)
       .use(trailing)
@@ -102,4 +106,19 @@ export class Crepe {
   getMarkdown() {
     return this.#editor.action(getMarkdown())
   }
+
+  on(fn: (api: ListenerManager) => void) {
+    if (this.#editor.status !== EditorStatus.Created) {
+      this.#editor.config((ctx) => {
+        const listener = ctx.get(listenerCtx)
+        fn(listener)
+      })
+      return this
+    }
+    this.#editor.action((ctx) => {
+      const listener = ctx.get(listenerCtx)
+      fn(listener)
+    })
+    return this
+  }
 }

package/src/feature/block-edit/handle/index.ts

@@ -88,7 +88,7 @@ export function configureBlockHandle(
   ctx.set(blockConfig.key, {
     filterNodes: (pos) => {
       const filter = findParent((node) =>
-        ['table', 'blockquote'].includes(node.type.name)
+        ['table', 'blockquote', 'math_inline'].includes(node.type.name)
       )(pos)
       if (filter) return false
 

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

@@ -7,9 +7,10 @@ import type { Extension } from '@codemirror/state'
 import { basicSetup } from 'codemirror'
 import { keymap } from '@codemirror/view'
 import { defaultKeymap, indentWithTab } from '@codemirror/commands'
-import type { html } from 'atomico'
+import { html } from 'atomico'
 import type { DefineFeature, Icon } from '../shared'
-import { chevronDownIcon, clearIcon, searchIcon } from '../../icons'
+import { chevronDownIcon, clearIcon, editIcon, searchIcon } from '../../icons'
+import { visibilityOffIcon } from '../../icons/visibility-off'
 
 interface CodeMirrorConfig {
   extensions: Extension[]
@@ -26,7 +27,16 @@ interface CodeMirrorConfig {
   renderLanguage: (
     language: string,
     selected: boolean
-  ) => ReturnType<typeof html> | string | HTMLElement
+  ) => ReturnType<typeof html> | string
+
+  renderPreview: (
+    language: string,
+    content: string
+  ) => string | HTMLElement | null
+
+  previewToggleIcon: (previewOnlyMode: boolean) => ReturnType<Icon>
+  previewToggleText: (previewOnlyMode: boolean) => ReturnType<typeof html>
+  previewLabel: () => ReturnType<typeof html>
 }
 export type CodeMirrorFeatureConfig = Partial<CodeMirrorConfig>
 
@@ -62,6 +72,16 @@ export const defineFeature: DefineFeature<CodeMirrorFeatureConfig> = (
         searchPlaceholder: config.searchPlaceholder || 'Search language',
         noResultText: config.noResultText || 'No result',
         renderLanguage: config.renderLanguage || defaultConfig.renderLanguage,
+        renderPreview: config.renderPreview || defaultConfig.renderPreview,
+        previewToggleButton: (previewOnlyMode) => {
+          return html`
+            ${config.previewToggleIcon?.(previewOnlyMode) ||
+            (previewOnlyMode ? editIcon : visibilityOffIcon)}
+            ${config.previewToggleText?.(previewOnlyMode) ||
+            (previewOnlyMode ? 'Edit' : 'Hide')}
+          `
+        },
+        previewLabel: config.previewLabel || defaultConfig.previewLabel,
       }))
     })
     .use(codeBlockComponent)

package/src/feature/index.ts

@@ -8,6 +8,7 @@ import type { LinkTooltipFeatureConfig } from './link-tooltip'
 import type { ListItemFeatureConfig } from './list-item'
 import type { ToolbarFeatureConfig } from './toolbar'
 import type { TableFeatureConfig } from './table'
+import type { LatexFeatureConfig } from './latex'
 
 export enum CrepeFeature {
   CodeMirror = 'code-mirror',
@@ -19,6 +20,7 @@ export enum CrepeFeature {
   Toolbar = 'toolbar',
   Placeholder = 'placeholder',
   Table = 'table',
+  Latex = 'latex',
 }
 
 export interface CrepeFeatureConfig {
@@ -31,6 +33,7 @@ export interface CrepeFeatureConfig {
   [CrepeFeature.Toolbar]?: ToolbarFeatureConfig
   [CrepeFeature.CodeMirror]?: CodeMirrorFeatureConfig
   [CrepeFeature.Table]?: TableFeatureConfig
+  [CrepeFeature.Latex]?: LatexFeatureConfig
 }
 
 export const defaultFeatures: Record<CrepeFeature, boolean> = {
@@ -43,6 +46,7 @@ export const defaultFeatures: Record<CrepeFeature, boolean> = {
   [CrepeFeature.Toolbar]: true,
   [CrepeFeature.CodeMirror]: true,
   [CrepeFeature.Table]: true,
+  [CrepeFeature.Latex]: true,
 }
 
 export async function loadFeature(
@@ -87,5 +91,9 @@ export async function loadFeature(
       const { defineFeature } = await import('./table')
       return defineFeature(editor, config)
     }
+    case CrepeFeature.Latex: {
+      const { defineFeature } = await import('./latex')
+      return defineFeature(editor, config)
+    }
   }
 }

package/src/feature/latex/block-latex.ts

@@ -0,0 +1,25 @@
+import { codeBlockSchema } from '@milkdown/kit/preset/commonmark'
+
+export const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
+  return (ctx) => {
+    const baseSchema = prev(ctx)
+    return {
+      ...baseSchema,
+      toMarkdown: {
+        match: baseSchema.toMarkdown.match,
+        runner: (state, node) => {
+          const language = node.attrs.language
+          if (language.toLowerCase() === 'latex') {
+            state.addNode(
+              'math',
+              undefined,
+              node.content.firstChild?.text || ''
+            )
+          } else {
+            return baseSchema.toMarkdown.runner(state, node)
+          }
+        },
+      },
+    }
+  }
+})

package/src/feature/latex/index.ts

@@ -0,0 +1,73 @@
+import type { KatexOptions } from 'katex'
+import katex from 'katex'
+import { codeBlockConfig } from '@milkdown/kit/component/code-block'
+import { CrepeFeature } from '../..'
+import { FeaturesCtx } from '../../core/slice'
+import type { DefineFeature, Icon } from '../shared'
+import { remarkMathBlockPlugin, remarkMathPlugin } from './remark'
+import { mathInlineSchema } from './inline-latex'
+import { defIfNotExists } from '../../utils'
+import { LatexInlineEditElement } from './inline-tooltip/component'
+import { inlineLatexTooltip } from './inline-tooltip/tooltip'
+import { LatexInlineTooltip } from './inline-tooltip/view'
+import { confirmIcon } from '../../icons'
+import { mathBlockInputRule, mathInlineInputRule } from './input-rule'
+import { blockLatexSchema } from './block-latex'
+
+export interface LatexConfig {
+  katexOptions: KatexOptions
+  inlineEditConfirm: Icon
+}
+
+export type LatexFeatureConfig = Partial<LatexConfig>
+
+defIfNotExists('milkdown-latex-inline-edit', LatexInlineEditElement)
+export const defineFeature: DefineFeature<LatexFeatureConfig> = (
+  editor,
+  config
+) => {
+  editor
+    .config((ctx) => {
+      const flags = ctx.get(FeaturesCtx)
+      const isCodeMirrorEnabled = flags.includes(CrepeFeature.CodeMirror)
+      if (!isCodeMirrorEnabled) {
+        throw new Error('You need to enable CodeMirror to use LaTeX feature')
+      }
+
+      ctx.update(codeBlockConfig.key, (prev) => ({
+        ...prev,
+        renderPreview: (language, content) => {
+          if (language.toLowerCase() === 'latex' && content.length > 0) {
+            return renderLatex(content, config?.katexOptions)
+          }
+          const renderPreview = prev.renderPreview
+          return renderPreview(language, content)
+        },
+      }))
+
+      ctx.set(inlineLatexTooltip.key, {
+        view: (view) => {
+          return new LatexInlineTooltip(ctx, view, {
+            inlineEditConfirm: config?.inlineEditConfirm ?? (() => confirmIcon),
+            ...config,
+          })
+        },
+      })
+    })
+    .use(remarkMathPlugin)
+    .use(remarkMathBlockPlugin)
+    .use(mathInlineSchema)
+    .use(inlineLatexTooltip)
+    .use(mathInlineInputRule)
+    .use(mathBlockInputRule)
+    .use(blockLatexSchema)
+}
+
+function renderLatex(content: string, options?: KatexOptions) {
+  const html = katex.renderToString(content, {
+    ...options,
+    throwOnError: false,
+    displayMode: true,
+  })
+  return html
+}

package/src/feature/latex/inline-latex.ts

@@ -0,0 +1,55 @@
+import { $nodeSchema } from '@milkdown/kit/utils'
+import katex from 'katex'
+
+export const mathInlineId = 'math_inline'
+
+/// Schema for inline math node.
+/// Add support for:
+///
+/// ```markdown
+/// $a^2 + b^2 = c^2$
+/// ```
+export const mathInlineSchema = $nodeSchema(mathInlineId, () => ({
+  group: 'inline',
+  inline: true,
+  draggable: true,
+  atom: true,
+  attrs: {
+    value: {
+      default: '',
+    },
+  },
+  parseDOM: [
+    {
+      tag: `span[data-type="${mathInlineId}"]`,
+      getAttrs: (dom) => {
+        return {
+          value: (dom as HTMLElement).dataset.value ?? '',
+        }
+      },
+    },
+  ],
+  toDOM: (node) => {
+    const code: string = node.attrs.value
+    const dom = document.createElement('span')
+    dom.dataset.type = mathInlineId
+    dom.dataset.value = code
+    katex.render(code, dom, {
+      throwOnError: false,
+    })
+
+    return dom
+  },
+  parseMarkdown: {
+    match: (node) => node.type === 'inlineMath',
+    runner: (state, node, type) => {
+      state.addNode(type, { value: node.value as string })
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === mathInlineId,
+    runner: (state, node) => {
+      state.addNode('inlineMath', undefined, node.attrs.value)
+    },
+  },
+}))

package/src/feature/latex/inline-tooltip/component.ts

@@ -0,0 +1,38 @@
+import { c, h, html, type Component } from 'atomico'
+import type { LatexConfig } from '..'
+import type { EditorView } from '@milkdown/kit/prose/view'
+
+type LatexEditComponentProps = {
+  config: Partial<LatexConfig>
+  innerView: EditorView
+  updateValue: () => void
+}
+
+export const latexEditComponent: Component<LatexEditComponentProps> = ({
+  config,
+  innerView,
+  updateValue,
+}) => {
+  const onMouseDown = (e: MouseEvent) => {
+    e.preventDefault()
+    updateValue?.()
+  }
+  return html`
+    <host>
+      <div class="container">
+        ${innerView && h(innerView.dom, {})}
+        <button onmousedown=${onMouseDown}>
+          ${config?.inlineEditConfirm?.()}
+        </button>
+      </div>
+    </host>
+  `
+}
+
+latexEditComponent.props = {
+  config: Object,
+  innerView: Object,
+  updateValue: Function,
+}
+
+export const LatexInlineEditElement = c(latexEditComponent)

package/src/feature/latex/inline-tooltip/tooltip.ts

@@ -0,0 +1,3 @@
+import { tooltipFactory } from '@milkdown/kit/plugin/tooltip'
+
+export const inlineLatexTooltip = tooltipFactory('INLINE_LATEX')

package/src/feature/latex/inline-tooltip/view.ts

@@ -0,0 +1,122 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+import { TooltipProvider } from '@milkdown/kit/plugin/tooltip'
+import type { PluginView } from '@milkdown/kit/prose/state'
+import { EditorState, NodeSelection } from '@milkdown/kit/prose/state'
+import { EditorView } from '@milkdown/kit/prose/view'
+import { mathInlineId } from '../inline-latex'
+import { LatexInlineEditElement } from './component'
+import type { LatexConfig } from '..'
+import { keymap } from '@milkdown/kit/prose/keymap'
+import { redo, undo } from '@milkdown/kit/prose/history'
+import { Schema } from '@milkdown/kit/prose/model'
+
+export class LatexInlineTooltip implements PluginView {
+  #content = new LatexInlineEditElement()
+  #provider: TooltipProvider
+  #dom: HTMLElement
+  #innerView: EditorView | null
+
+  constructor(
+    readonly ctx: Ctx,
+    view: EditorView,
+    config: Partial<LatexConfig>
+  ) {
+    this.#provider = new TooltipProvider({
+      debounce: 0,
+      content: this.#content,
+      shouldShow: this.#shouldShow,
+      offset: 10,
+      floatingUIOptions: {
+        placement: 'bottom',
+      },
+    })
+    this.#content.config = config
+    this.#provider.update(view)
+    this.#dom = document.createElement('div')
+    this.#innerView = null
+  }
+
+  #onHide = () => {
+    if (this.#innerView) {
+      this.#innerView.destroy()
+      this.#innerView = null
+    }
+  }
+
+  #shouldShow = (view: EditorView) => {
+    const shouldShow = () => {
+      const { selection, schema } = view.state
+      if (selection.empty) return false
+      if (!(selection instanceof NodeSelection)) return false
+      const node = selection.node
+      if (node.type.name !== mathInlineId) return false
+
+      const textFrom = selection.from
+
+      const paragraph = schema.nodes.paragraph!.create(
+        null,
+        schema.text(node.attrs.value)
+      )
+
+      const innerView = new EditorView(this.#dom, {
+        state: EditorState.create({
+          doc: paragraph,
+          schema: new Schema({
+            nodes: {
+              doc: {
+                content: 'block+',
+              },
+              paragraph: {
+                content: 'inline*',
+                group: 'block',
+                parseDOM: [{ tag: 'p' }],
+                toDOM() {
+                  return ['p', 0]
+                },
+              },
+              text: {
+                group: 'inline',
+              },
+            },
+          }),
+          plugins: [
+            keymap({
+              'Mod-z': undo,
+              'Mod-Z': redo,
+              'Mod-y': redo,
+              Enter: () => {
+                this.#content.updateValue?.()
+                return true
+              },
+            }),
+          ],
+        }),
+      })
+
+      this.#innerView = innerView
+      this.#content.innerView = this.#innerView
+      this.#content.updateValue = () => {
+        const { tr } = view.state
+        tr.setNodeAttribute(textFrom, 'value', innerView.state.doc.textContent)
+        view.dispatch(tr)
+        requestAnimationFrame(() => {
+          view.focus()
+        })
+      }
+      return true
+    }
+
+    const show = shouldShow()
+    if (!show) this.#onHide()
+    return show
+  }
+
+  update = (view: EditorView, prevState?: EditorState) => {
+    this.#provider.update(view, prevState)
+  }
+
+  destroy = () => {
+    this.#provider.destroy()
+    this.#content.remove()
+  }
+}

package/src/feature/latex/input-rule.ts

@@ -0,0 +1,25 @@
+import { $inputRule } from '@milkdown/kit/utils'
+import { nodeRule } from '@milkdown/kit/prose'
+import { mathInlineSchema } from './inline-latex'
+import { codeBlockSchema } from '@milkdown/kit/preset/commonmark'
+import { textblockTypeInputRule } from '@milkdown/kit/prose/inputrules'
+
+/// Input rule for inline math.
+/// When you type $E=MC^2$, it will create an inline math node.
+export const mathInlineInputRule = $inputRule((ctx) =>
+  nodeRule(/(?:\$)([^$]+)(?:\$)$/, mathInlineSchema.type(ctx), {
+    getAttr: (match) => {
+      return {
+        value: match[1] ?? '',
+      }
+    },
+  })
+)
+
+/// A input rule for creating block math.
+/// For example, `$$ ` will create a code block with language javascript.
+export const mathBlockInputRule = $inputRule((ctx) =>
+  textblockTypeInputRule(/^\$\$[\s\n]$/, codeBlockSchema.type(ctx), () => ({
+    language: 'LaTeX',
+  }))
+)

package/src/feature/latex/remark.ts

@@ -0,0 +1,35 @@
+import remarkMath from 'remark-math'
+import { $remark } from '@milkdown/kit/utils'
+import type { Node } from '@milkdown/kit/transformer'
+import { visit } from 'unist-util-visit'
+
+export const remarkMathPlugin = $remark<'remarkMath', undefined>(
+  'remarkMath',
+  () => remarkMath
+)
+
+function visitMathBlock(ast: Node) {
+  return visit(
+    ast,
+    'math',
+    (
+      node: Node & { value: string },
+      index: number,
+      parent: Node & { children: Node[] }
+    ) => {
+      const { value } = node as Node & { value: string }
+      const newNode = {
+        type: 'code',
+        lang: 'LaTeX',
+        value,
+      }
+      parent.children.splice(index, 1, newNode)
+    }
+  )
+}
+
+/// Turn math block into code block with language LaTeX.
+export const remarkMathBlockPlugin = $remark(
+  'remarkMathBlock',
+  () => () => visitMathBlock
+)

package/src/feature/shared.ts

@@ -6,4 +6,4 @@ export type DefineFeature<Config = unknown> = (
   config?: Config
 ) => void | Promise<void>
 
-export type Icon = () => HTMLElement | ReturnType<typeof html> | string | null
+export type Icon = () => ReturnType<typeof html> | string | null