Plate editor component

plateEditor.tsx

import ReactDOM from 'react-dom'
import React, { useMemo, useState } from 'react'
import {
    createPlateComponents,
    createPlateOptions,
    HeadingToolbar,
    PlatePlugin,
    Plate,
    ToolbarSearchHighlight,
    createAlignPlugin,
    createAutoformatPlugin,
    createBlockquotePlugin,
    createBoldPlugin,
    createCodeBlockPlugin,
    createCodePlugin,
    createExitBreakPlugin,
    createHeadingPlugin,
    createHighlightPlugin,
    createHistoryPlugin,
    createKbdPlugin,
    createImagePlugin,
    createItalicPlugin,
    createLinkPlugin,
    createListPlugin,
    createMediaEmbedPlugin,
    createNodeIdPlugin,
    createParagraphPlugin,
    createReactPlugin,
    createResetNodePlugin,
    createSelectOnBackspacePlugin,
    createSoftBreakPlugin,
    createDndPlugin,
    createStrikethroughPlugin,
    createSubscriptPlugin,
    createSuperscriptPlugin,
    createTablePlugin,
    createTodoListPlugin,
    createTrailingBlockPlugin,
    createUnderlinePlugin,
    createDeserializeHTMLPlugin,
    useFindReplacePlugin,
    SPEditor,
    MARK_COLOR,
    withStyledProps,
    StyledLeaf,
    MARK_BG_COLOR,
    createFontColorPlugin,
    createFontBackgroundColorPlugin,
    createDeserializeMDPlugin,
    createDeserializeCSVPlugin,
    createDeserializeAstPlugin,
    createNormalizeTypesPlugin,
    createFontSizePlugin,
    ELEMENT_PARAGRAPH,
    ELEMENT_IMAGE,
    ELEMENT_MEDIA_EMBED,
    serializeHTMLFromNodes,
    createEditorPlugins,
    ToolbarImage,
} from '@udecode/plate'
import {
    optionsExitBreakPlugin,
    optionsResetBlockTypePlugin,
    optionsSoftBreakPlugin,
    optionsAutoformat,
} from './config/pluginOptions'
import { EditableProps } from 'slate-react/dist/components/editable'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

import { HistoryEditor } from 'slate-history'
import { ReactEditor } from 'slate-react'
import { initialValue } from './config/initialValues'
import styled from 'styled-components'
import ImageIcon from '../../components/icons/image'
type TEditor = SPEditor & ReactEditor & HistoryEditor

const id = 'Examples/Playground'
let components = createPlateComponents({
    // customize your components by plugin key
})

const options = createPlateOptions({
    // customize your options by plugin key
})
const editableProps = {
    placeholder: 'Tell your story...',
    style: {
        padding: '25px',
    },
}

const StyledButton = styled.button`
    background: none;
    border: 0;
    cursor: pointer;
`

const Plugins = () => {
    const [debugValue, setDebugValue] = useState([])
    const pluginsMemo: PlatePlugin<TEditor>[] = useMemo(() => {
        const plugins = [
            createReactPlugin(),
            createHistoryPlugin(),
            createParagraphPlugin(),
            createBlockquotePlugin(),
            createTodoListPlugin(),
            createHeadingPlugin(),
            createImagePlugin(),

            createLinkPlugin(),
            createListPlugin(),
            createTablePlugin(),
            createMediaEmbedPlugin(),

            createCodeBlockPlugin(),

            createBoldPlugin(),
            createCodePlugin(),
            createItalicPlugin(),
            createHighlightPlugin(),
            createUnderlinePlugin(),
            createStrikethroughPlugin(),
            createSubscriptPlugin(),
            createSuperscriptPlugin(),
            createFontColorPlugin(),
            createFontBackgroundColorPlugin(),
            createFontSizePlugin(),
            createKbdPlugin(),
            createNodeIdPlugin(),
            createDndPlugin(),
            createAutoformatPlugin(optionsAutoformat),
            createResetNodePlugin(optionsResetBlockTypePlugin),
            createSoftBreakPlugin(optionsSoftBreakPlugin),
            createExitBreakPlugin(optionsExitBreakPlugin),
            createTrailingBlockPlugin({
                type: ELEMENT_PARAGRAPH,
            }),
            createSelectOnBackspacePlugin({
                allow: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED],
            }),
            createMediaEmbedPlugin(),
        ]

        plugins.push(
            ...[
                createDeserializeMDPlugin({ plugins }),
                createDeserializeCSVPlugin({ plugins }),
                createDeserializeHTMLPlugin({ plugins }),
                createDeserializeAstPlugin({ plugins }),
            ]
        )

        return plugins
    }, [])
    const nodes = [...debugValue]
    const editor = createEditorPlugins()
    const html = serializeHTMLFromNodes(editor, {
        plugins: pluginsMemo,
        nodes,
    })
    console.log(html)
    return (
        <DndProvider backend={HTML5Backend}>
            <Plate
                id={id}
                plugins={pluginsMemo}
                components={components}
                options={options}
                editableProps={editableProps}
                initialValue={initialValue}
                onChange={(newValue) => {
                    setDebugValue(newValue)
                    console.log(newValue)
                }}
            >
                <ToolbarImage icon={`image`} />
                {/* <HeadingToolbar></HeadingToolbar> */}
            </Plate>
        </DndProvider>
    )
}
export default Plugins