How to use react-mathquill - 3 common examples

import {
  katexBlockNode,
  katexInlineNode,
  orderedListNode,
  unorderedListNode
} from '../../model'
import { Button } from '../../toolbar/button'
import { Dropdown, Option } from '../../toolbar/dropdown'
import { HoveringOverlay } from '../hovering-overlay'
import { InlineCheckbox } from '../inline-checkbox'
import { isList } from '../list'
import { Math } from './math-component'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const MathQuill: React.ComponentType = canUseDOM
  ? require('react-mathquill').default
  : () => null

interface MathField {
  typedText(text: string): void

  latex(): string
}

const EditorWrapper = styled.div<{ inline: boolean }>(props => {
  return {
    whiteSpace: undefined,
    overflowWrap: undefined,
    ...(props.inline
      ? {
          display: 'inline-block'
        }

constructor() {
    super();
    addMathquillStyles();
    this.state = {
      latex: '\\frac{1}{\\sqrt{2}}\\cdot 2',
    };
  }

import * as React from 'react'
import { Editor } from 'slate'

import {
  NodeRendererProps,
  NodeEditorProps,
  TextPlugin,
  NodeControlsProps,
  trimSelection
} from '../..'
import { SlatePluginClosure } from '../../factory/types'
import { katexBlockNode, katexInlineNode } from '../../model'
import { DefaultEditorComponent } from './editor'

if (canUseDOM) {
  require('react-mathquill').addStyles()
}

export const isKatex = (editor: Editor) => {
  return (
    editor.value.blocks.some(block =>
      block ? block.type === katexBlockNode : false
    ) ||
    editor.value.inlines.some(inline =>
      inline ? inline.type === katexInlineNode : false
    )
  )
}
export const insertKatex = (editor: Editor) => {
  if (editor.value.selection.isExpanded) {
    trimSelection(editor)
    const selection = document.getSelection()