fix: support react18 strict mode (#85)

Author: d3m1d0v

demo/Playground.tsx

@@ -43,7 +43,7 @@ logger.setLogger({
     ...console,
 });
 
-export const Playground = React.memo<PlaygroundProps>((props) => {
+const Playground = React.memo<PlaygroundProps>((props) => {
     const {initial, allowHTML, breaks, linkify, linkifyTlds} = props;
     const [previewType, setPreviewType] = React.useState<string>(PreviewType.Markup);
     const [yfmRaw, setYfmRaw] = React.useState<MarkupString>(initial || '');
@@ -199,9 +199,17 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         </div>
     );
 });
-
 Playground.displayName = 'Playground';
 
+const PlaygroundStrict: React.FC<PlaygroundProps> = (props) => (
+    <React.StrictMode>
+        <Playground {...props} />
+    </React.StrictMode>
+);
+PlaygroundStrict.displayName = 'PlaygroundStrict';
+
+export {PlaygroundStrict as Playground};
+
 // const fileUploadHandler: FileUploadHandler = async (file) => {
 //     console.info('[Playground] Uploading file: ' + file.name);
 //     await randomDelay(1000, 3000);

demo/ProseMirrorDevTools.tsx

@@ -1,24 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import {useEffect} from 'react';
 import type {EditorView} from 'prosemirror-view';
-import applyDevTools from 'prosemirror-dev-tools';
-
-const DEVTOOLS_CLASS_NAME = '__prosemirror-dev-tools__';
+import {applyDevTools, removeDevTools} from 'prosemirror-dev-toolkit';
 
 export type ProseMirrorDevToolsProps = {
     view: EditorView;
 };
 
 export function ProseMirrorDevTools({view}: ProseMirrorDevToolsProps) {
-    React.useEffect(() => {
+    useEffect(() => {
         applyDevTools(view);
-    }, [view]);
-    React.useLayoutEffect(() => {
         return () => {
-            const devToolsRoot = document.querySelector(`.${DEVTOOLS_CLASS_NAME}`);
-            if (devToolsRoot) ReactDOM.unmountComponentAtNode(devToolsRoot);
+            removeDevTools();
         };
     }, [view]);
-
     return null;
 }