{children}
;\n }\n};\n\nexport const SlateLeaf = ({ attributes, children, leaf }: any) => {\n if (leaf.bold) {\n children = {children};\n }\n\n if (leaf.code) {\n children ={children}
;\n }\n\n if (leaf.italic) {\n children = {children};\n }\n\n if (leaf.underline) {\n children = {children};\n }\n\n return {children};\n};\n\nexport const isBlockActive = (editor: any, format: any) => {\n const [match] = Editor.nodes(editor, {\n match: (n) => Element.isElement(n) && n.type === format,\n });\n return !!match;\n};\n\nexport const toggleBlock = (editor: any, format: any) => {\n const isActive = isBlockActive(editor, format);\n const isList = LIST_TYPES.includes(format);\n\n Transforms.unwrapNodes(editor, {\n match: (n) => Element.isElement(n) && LIST_TYPES.includes(n.type),\n split: true,\n });\n\n Transforms.setNodes(editor, {\n type: isActive ? 'paragraph' : isList ? 'list-item' : format,\n });\n\n if (!isActive && isList) {\n const block = { type: format, children: [] };\n Transforms.wrapNodes(editor, block);\n }\n};\n\nexport const isMarkActive = (editor: any, format: any) => {\n const marks = Editor.marks(editor);\n // @eslint-disable-next-line\n // @ts-ignore\n return marks ? marks[format] === true : false;\n};\n\nexport const toggleMark = (editor: any, format: any) => {\n const isActive = isMarkActive(editor, format);\n\n if (isActive) {\n Editor.removeMark(editor, format);\n } else {\n Editor.addMark(editor, format, true);\n }\n};\n","import { useEffect, useState } from 'react';\nimport { FaBold, FaCode, FaItalic, FaUnderline } from 'react-icons/fa';\nimport {\n MdFormatListNumbered,\n MdList,\n MdLooksOne,\n MdLooksTwo,\n} from 'react-icons/md';\nimport { Editor } from 'slate';\nimport { useSlate } from 'slate-react';\n\nimport { Box, ToggleButton, ToggleButtonGroup, useTheme } from '@mui/material';\nimport {\n isBlockActive,\n isMarkActive,\n toggleBlock,\n toggleMark,\n} from './SlateEditorUtil';\n\nconst BlockButton = ({ format, icon, disabled }: any) => {\n const editor = useSlate();\n return (\n