import { plugins , schema , toolbar , } from '@aeaton/react-prosemirror-config-default' ; import { ChangeHandler , Editor , EditorProvider , Floater , HtmlEditor , Toolbar , useDebounce , } from '@aeaton/react-prosemirror' ; import { createHTMLTransformer , createJSONTransformer , createNullTransformer , } from '@aeaton/prosemirror-transformers' ; import { Node as ProsemirrorNode } from 'prosemirror-model' ; import React , { useMemo , useState } from 'react' ; import './styles/demo.css' ; import './styles/prosemirror.css' ; const htmlTransformer = createHTMLTransformer ( schema ) ; const jsonTransformer = createJSONTransformer ( schema ) ; const nullTransformer = createNullTransformer ( ) ; const initialValue = `<p></p>` ; const initialDoc = htmlTransformer . parse ( initialValue ) ; const floatingTools = toolbar . slice ( 0 , 2 ) ; const fixedTools = toolbar . slice ( 2 ) ; export const App = ( ) => { const [ doc , setDoc ] = useState < ProsemirrorNode > ( initialDoc ) ; const [ html , setHTML ] = useState < string > ( initialValue ) ; return ( < div > < div className = "prosemirror-demo" > < div className = "prosemirror-demo-editor" > < HtmlEditor schema = { schema } plugins = { plugins } value = { initialValue } handleChange = { setHTML } debounce = { 1000 } > < Toolbar toolbar = { toolbar } /> < Editor autoFocus / > < /HtmlEditor> < /div> < div className = "prosemirror-demo-output" > < pre > { html } < /pre> < /div> < /div> < div className = "prosemirror-demo" > < div className = "prosemirror-demo-editor" > < EditorProvider plugins = { plugins } doc = { initialDoc } > < ChangeHandler handleChange = { setDoc } transformer = { nullTransformer } / > < Toolbar toolbar = { fixedTools } /> < Floater > < Toolbar toolbar = { floatingTools } /> < /Floater> < Editor autoFocus / > < /EditorProvider> < /div> { doc !== undefined && ( < div className = "prosemirror-demo-output" > < JSONOutput doc = { doc } /> < HTMLOutput doc = { doc } / > < /div>)} < /div> < /div>); } ; const JSONOutput = ( { doc } ) => { const debouncedDoc = useDebounce ( doc , 1000 ) ; const json = useMemo ( ( ) => jsonTransformer . serialize ( debouncedDoc ) , [ debouncedDoc , ] ) ; return ( < div className = "output" > < pre > { json } < /pre> < /div>); } ; const HTMLOutput = ( { doc } ) => { const [ html , setHTML ] = useState ( '' ) ; const handleClick = ( ) => { setHTML ( htmlTransformer . serialize ( doc ) ) ; } ; return ( < div className = "output" > < button type = "button" onClick = { handleClick } > Show HTML < /button> < pre > { html } < /pre> < /div>); } ;