diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js index 3576a03a8cade6e3d206b833e97f4333d76934f6..40c8dafce3ca4984cd284070391b3f5a02ef79e4 100644 --- a/editors/demo/src/Editoria/Editoria.js +++ b/editors/demo/src/Editoria/Editoria.js @@ -1,4 +1,4 @@ -import React, { useLayoutEffect, useState, useMemo } from 'react'; +import React, { useLayoutEffect, useState, useMemo, useRef } from 'react'; import { Wax } from 'wax-prosemirror-core'; @@ -38,11 +38,15 @@ const Editoria = () => { finalConfig = configMobile; key = 'editoriaMobile'; } + const editorRef = useRef(); const EditoriaComponent = useMemo( () => ( <> + <button onClick={() => editorRef.current.getContent()}>Click</button> + <Wax + ref={editorRef} key={key} config={finalConfig} autoFocus diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js index 9cda7e62c3fd4cd62f1781bfd7da792e4fafc584..61602663578b05881a7d27a9268f6952d35fccab 100644 --- a/wax-prosemirror-core/src/Wax.js +++ b/wax-prosemirror-core/src/Wax.js @@ -1,5 +1,11 @@ /* eslint react/prop-types: 0 */ -import React, { useEffect, useState } from 'react'; +import React, { + useEffect, + useState, + forwardRef, + useRef, + useImperativeHandle, +} from 'react'; import { each } from 'lodash'; import { DOMSerializer } from 'prosemirror-model'; @@ -23,7 +29,7 @@ const createApplication = props => { return application; }; -const Wax = props => { +const Wax = forwardRef((props, ref) => { const [application, setApplication] = useState(); useEffect(() => { @@ -32,6 +38,12 @@ const Wax = props => { return () => newApplication.resetApp(); }, []); + useImperativeHandle(ref, () => ({ + getContent() { + console.log('content'); + }, + })); + const { autoFocus, browserSpellCheck, @@ -114,7 +126,7 @@ const Wax = props => { </PortalProvider> </WaxProvider> ); -}; +}); Wax.defaultProps = { config: { services: [] },