JazzBrown1 / react-unicode-editor

2 stars 0 forks source link

Insert content from outside by using the function #2

Closed krAlena closed 2 years ago

krAlena commented 2 years ago

Hello, I try to insert text into the editor from outside by using the function. And my problem is the next one: the content is added only when the editor is focused and the active cursor is in it. Please check my solution on following codesandbox and I will be thankful for any help to improve it 🙏

https://codesandbox.io/s/peaceful-merkle-8f5e6p?file=/components/UnicondeEditorComponent.js

JazzBrown1 commented 2 years ago

Hey

Cool layout!.

You can push the value into the state and once the state is set call editorRef.refresh();

As for React, its not clean but I think this is the recommended way:

https://codesandbox.io/s/sleepy-wildflower-ju6bxe?file=/components/UnicondeEditorComponent.js:1299-1767

const [shouldRefresh, setShouldRefresh] = useState(false);

useEffect(() => { if (shouldRefresh) { editorRef.current.refresh(); setShouldRefresh(); } }, [shouldRefresh]);

const editorRef = useRef();

useImperativeHandle(props.myForwardedRef, () => ({ pushText: (text) => { if (editorRef.current) { setEditorValue([text, ...editorValue]); setShouldRefresh(true); } } }));

Let me know if you have any questions.

Jazz

krAlena commented 2 years ago

Hi! Thank you 👏 I appreciate your answer, it was very helpful