[ASK] How to Implementation KaTex

[muslimmuda15]

When i typing $$c = \pm\sqrt{a^2 + b^2}$$
The render should be like this

[mattias-skold]

Below is our KaTex plugin implementation
If think the discussion should rather be how can the community publish and share MDX-editor plugins in the best way

import { CodeBlockEditorDescriptor, useCodeBlockEditorContext, usePublisher, insertCodeBlock$, ButtonWithTooltip } from '@mdxeditor/editor'


import katex from 'katex'

import { useCellValues } from '@mdxeditor/gurx'

import { HoverEditMenuContainer} from "./EditContainers"

export const KaTeXPreview: React.FC<{ code: string }> = ({ code }) => {
    const ref = React.useRef<HTMLDivElement>(null)

    React.useEffect(() => {
        if (ref.current) {
            if (code != null && code.trim() != "") {
                const html = katex.renderToString(code, { throwOnError: false });
                ref.current.innerHTML = html
            }
        }
    }, [code])

    return <div ref={ref}><img alt="KaTeX formula" src="https://cdn.vsassets.io/ext/ms.vss-wiki-web/wiki-renderer-content/images/Presentation/load-query-results.E9hPWO.svg" width="75%" /></div>
}

export const KaTeXCodeEditorDescriptor: CodeBlockEditorDescriptor = {
    match: (language, _meta) => {
        return language === 'katex' || language == 'kaTeX'
    },
    priority: 0,
    Editor: (props) => {
        const cb = useCodeBlockEditorContext()
        const [code, setCode] = React.useState(props.code)
        const [editMode, setEditMode] = React.useState(props.code == null || props.code == "")


        return (
            <div onKeyDown={(e) => e.nativeEvent.stopImmediatePropagation()} style={{ position: "relative" }}>
                <div style={{ display: 'flex' }}>
                    {editMode && (
                        <div style={{ position: "relative" }}>
                            <textarea
                                style={{ flex: 1 }}
                                rows={5}
                                cols={40}
                                defaultValue={props.code}
                                onChange={(e) => {
                                    setCode(e.target.value)
                                    cb.setCode(e.target.value)
                                }}
                            />
                            <button style={{ position: "absolute", top: "1px", right: "16px" }} onClick={e => setEditMode(false)}>X</button>
                        </div>)}
                    <HoverEditMenuContainer onEditChange={(isEdit) => setEditMode(isEdit)}>
                        <KaTeXPreview code={code} />
                    </HoverEditMenuContainer>
                </div>
            </div>
        )
    }
}

[muslimmuda15]

Is there any toolbar of formula like there?
https://editor.codecogs.com/