feat: add latex feature for crepe (#1613)

* feat: add latex feature for crepe

* [autofix.ci] apply automated fixes

* feat: scaffold inline latex tooltip

* feat: add inline latex editor

* [autofix.ci] apply automated fixes

* chore: add inline math input rule

* feat: add input rule for math block

* chore: polish style

* chore: fix

* chore: fix style

* feat: add inline math tooltip button

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Saul-Mirone

Diff for: packages/components/src/code-block/config.ts

@@ -7,15 +7,21 @@ import { withMeta } from '../__internal__/meta'
 export interface CodeBlockConfig {
   extensions: Extension[]
   languages: LanguageDescription[]
-  expandIcon: () => ReturnType<typeof html> | string | HTMLElement
-  searchIcon: () => ReturnType<typeof html> | string | HTMLElement
-  clearSearchIcon: () => ReturnType<typeof html> | string | HTMLElement
+  expandIcon: () => ReturnType<typeof html> | string
+  searchIcon: () => ReturnType<typeof html> | string
+  clearSearchIcon: () => ReturnType<typeof html> | string
   searchPlaceholder: string
   noResultText: string
   renderLanguage: (
     language: string,
     selected: boolean
   ) => ReturnType<typeof html>
+  renderPreview: (
+    language: string,
+    content: string
+  ) => null | string | HTMLElement
+  previewToggleButton: (previewOnlyMode: boolean) => ReturnType<typeof html>
+  previewLabel: () => ReturnType<typeof html>
 }
 
 export const defaultConfig: CodeBlockConfig = {
@@ -27,6 +33,9 @@ export const defaultConfig: CodeBlockConfig = {
   searchPlaceholder: 'Search language',
   noResultText: 'No result',
   renderLanguage: (language) => html`${language}`,
+  renderPreview: () => null,
+  previewToggleButton: (previewOnlyMode) => (previewOnlyMode ? 'Edit' : 'Hide'),
+  previewLabel: () => 'Preview',
 }
 
 export const codeBlockConfig = $ctx(defaultConfig, 'codeBlockConfigCtx')

Diff for: packages/components/src/code-block/view/component.ts

@@ -17,6 +17,7 @@ import type { CodeBlockConfig } from '../config'
 import type { LanguageInfo } from './loader'
 
 export interface CodeComponentProps {
+  text: string
   selected: boolean
   codemirror: CodeMirror
   language: string
@@ -34,13 +35,16 @@ export const codeComponent: Component<CodeComponentProps> = ({
   language,
   config,
   isEditorReadonly,
+  text,
 }) => {
   const host = useHost()
   const triggerRef = useRef<HTMLButtonElement>()
   const pickerRef = useRef<HTMLDivElement>()
   const searchRef = useRef<HTMLInputElement>()
+  const previewRef = useRef<HTMLDivElement>()
   const [filter, setFilter] = useState('')
   const [showPicker, setShowPicker] = useState(false)
+  const [previewOnlyMode, setPreviewOnlyMode] = useState(false)
 
   const root = useMemo(() => host.current.getRootNode() as HTMLElement, [host])
 
@@ -182,6 +186,26 @@ export const codeComponent: Component<CodeComponentProps> = ({
     )
   }, [languages])
 
+  const preview = useMemo(() => {
+    const preview = config?.renderPreview?.(language ?? '', text ?? '')
+    return preview
+  }, [language, text])
+
+  useEffect(() => {
+    if (!previewRef.current) {
+      return
+    }
+
+    while (previewRef.current.firstChild) {
+      previewRef.current.removeChild(previewRef.current.firstChild)
+    }
+    if (typeof preview === 'string') {
+      previewRef.current.innerHTML = preview
+    } else if (preview instanceof HTMLElement) {
+      previewRef.current.appendChild(preview)
+    }
+  }, [preview])
+
   return html`<host class=${clsx(selected && 'selected')}>
     <div class="tools">
       <button
@@ -222,8 +246,25 @@ export const codeComponent: Component<CodeComponentProps> = ({
           </ul>
         </div>
       </div>
+      <button
+        class=${clsx('preview-toggle-button', !preview && 'hidden')}
+        onclick=${() => setPreviewOnlyMode(!previewOnlyMode)}
+      >
+        ${config?.previewToggleButton?.(previewOnlyMode)}
+      </button>
+    </div>
+    <div
+      class=${clsx('codemirror-host', preview && previewOnlyMode && 'hidden')}
+    >
+      ${h(codemirror?.dom, {})}
+    </div>
+    <div class=${clsx('preview-panel', !preview && 'hidden')}>
+      <div class=${clsx('preview-divider', previewOnlyMode && 'hidden')}></div>
+      <div class=${clsx('preview-label', previewOnlyMode && 'hidden')}>
+        ${config?.previewLabel?.()}
+      </div>
+      <div ref=${previewRef} class="preview"></div>
     </div>
-    <div class="codemirror-host">${h(codemirror?.dom, {})}</div>
   </host>`
 }
 
@@ -235,6 +276,7 @@ codeComponent.props = {
   setLanguage: Function,
   isEditorReadonly: Function,
   config: Object,
+  text: String,
 }
 
 export const CodeElement = c(codeComponent)

Diff for: packages/components/src/code-block/view/node-view.ts

@@ -84,7 +84,12 @@ export class CodeMirrorBlock implements NodeView {
     dom.getAllLanguages = this.getAllLanguages
     dom.setLanguage = this.setLanguage
     dom.isEditorReadonly = () => !this.view.editable
-    const { languages, extensions, ...viewConfig } = this.config
+    dom.text = this.node.textContent
+    const {
+      languages: _languages,
+      extensions: _extensions,
+      ...viewConfig
+    } = this.config
     dom.config = viewConfig
     return dom
   }
@@ -191,6 +196,7 @@ export class CodeMirrorBlock implements NodeView {
     if (this.updating) return true
 
     this.node = node
+    this.dom.text = node.textContent
     this.updateLanguage()
     if (this.view.editable === this.cm.state.readOnly) {
       this.cm.dispatch({

Diff for: packages/components/src/link-tooltip/preview/preview-view.ts

@@ -14,10 +14,6 @@ export class LinkPreviewTooltip implements PluginView {
 
   #hovering = false
 
-  // get #instance() {
-  //   return this.#provider.getInstance()
-  // }
-
   constructor(
     readonly ctx: Ctx,
     view: EditorView
@@ -32,15 +28,6 @@ export class LinkPreviewTooltip implements PluginView {
     this.#slice.on(this.#onStateChange)
   }
 
-  // setRect = (rect: DOMRect) => {
-  //   // this.#provider.getInstance()?.setProps({
-  //   //   getReferenceClientRect: () => rect,
-  //   // })
-  //   this.#provider.virtualElement = {
-  //     getBoundingClientRect: () => rect,
-  //   }
-  // }
-
   #onStateChange = ({ mode }: LinkToolTipState) => {
     if (mode === 'edit') this.#hide()
   }

Diff for: packages/crepe/package.json

@@ -64,14 +64,17 @@
     "@codemirror/language": "^6.10.1",
     "@codemirror/language-data": "^6.3.1",
     "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.16.0",
     "@milkdown/kit": "workspace:*",
-    "@codemirror/theme-one-dark": "^6.1.2",
     "atomico": "^1.75.1",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",
+    "katex": "^0.16.0",
     "nanoid": "^5.0.0",
-    "tslib": "^2.5.0"
+    "remark-math": "^6.0.0",
+    "tslib": "^2.5.0",
+    "unist-util-visit": "^5.0.0"
   },
   "nx": {
     "targets": {

Diff for: packages/crepe/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
 

Diff for: packages/crepe/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,18 @@ 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.previewToggleText?.(previewOnlyMode) || previewOnlyMode
+              ? editIcon
+              : visibilityOffIcon}
+            ${config.previewToggleIcon?.(previewOnlyMode) || previewOnlyMode
+              ? 'Edit'
+              : 'Hide'}
+          `
+        },
+        previewLabel: config.previewLabel || defaultConfig.previewLabel,
       }))
     })
     .use(codeBlockComponent)

Diff for: packages/crepe/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)
+    }
   }
 }

Diff for: packages/crepe/src/feature/latex/index.ts

@@ -0,0 +1,71 @@
+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'
+
+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)
+}
+
+function renderLatex(content: string, options?: KatexOptions) {
+  const html = katex.renderToString(content, {
+    ...options,
+    throwOnError: false,
+    displayMode: true,
+  })
+  return html
+}