diff --git a/packages/app/next.config.js b/packages/app/next.config.js
index c0fcfd65d9..ca5e167c16 100644
--- a/packages/app/next.config.js
+++ b/packages/app/next.config.js
@@ -3,7 +3,7 @@ const withTM = require('next-transpile-modules')(['@toeverything/pathfinder-logg
 /** @type {import('next').NextConfig} */
 const nextConfig = withTM({
   productionBrowserSourceMaps: true,
-  reactStrictMode: false,
+  reactStrictMode: true,
   swcMinify: false,
 });
 
diff --git a/packages/app/package.json b/packages/app/package.json
index 0aa4da3926..2a1c71808c 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@blocksuite/blocks": "^0.2.18",
-    "@blocksuite/editor": "^0.2.18",
+    "@blocksuite/blocks": "^0.2.19",
+    "@blocksuite/editor": "^0.2.19",
     "@emotion/css": "^11.10.0",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.10.0",
diff --git a/packages/app/src/components/editor.tsx b/packages/app/src/components/editor.tsx
index 0f8a526d97..4dcf1792e2 100644
--- a/packages/app/src/components/editor.tsx
+++ b/packages/app/src/components/editor.tsx
@@ -1,23 +1,50 @@
-import { Suspense, useEffect, useRef } from 'react';
-import type { EditorContainer } from '@blocksuite/editor';
-import '@blocksuite/blocks';
-import '@blocksuite/editor';
-import '@blocksuite/blocks/style';
 import { useEditor } from '@/components/editor-provider';
+import '@blocksuite/blocks';
+import '@blocksuite/blocks/style';
+import type { EditorContainer } from '@blocksuite/editor';
+import { createEditor } from '@blocksuite/editor';
+import { forwardRef, Suspense, useEffect, useRef } from 'react';
 import pkg from '../../package.json';
 import exampleMarkdown from './example-markdown';
+
+// eslint-disable-next-line react/display-name
+const BlockSuiteEditor = forwardRef<EditorContainer>(({}, ref) => {
+  const containerElement = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!containerElement.current) {
+      return;
+    }
+    const editor = createEditor();
+    containerElement.current.appendChild(editor);
+    if (ref) {
+      if ('current' in ref) {
+        ref.current = editor;
+      } else {
+        ref(editor);
+      }
+    }
+    return () => {
+      editor.remove();
+    };
+  }, [ref]);
+  return <div ref={containerElement} />;
+});
+
 export const Editor = () => {
-  const editorRef = useRef<EditorContainer>();
+  const editorRef = useRef<EditorContainer>(null);
   const { setEditor } = useEditor();
   useEffect(() => {
-    setEditor(editorRef.current!);
+    if (!editorRef.current) {
+      return;
+    }
+    setEditor(editorRef.current);
     const { store } = editorRef.current as EditorContainer;
     const pageId = store.addBlock({
       flavour: 'page',
       title: 'Welcome to the AFFiNE Alpha',
     });
     const groupId = store.addBlock({ flavour: 'group' }, pageId);
-    editorRef.current!.clipboard.importMarkdown(exampleMarkdown, `${groupId}`);
+    editorRef.current.clipboard.importMarkdown(exampleMarkdown, `${groupId}`);
     store.resetHistory();
   }, [setEditor]);
 
@@ -28,7 +55,7 @@ export const Editor = () => {
 
   return (
     <Suspense fallback={<div>Error!</div>}>
-      <editor-container ref={editorRef} />
+      <BlockSuiteEditor ref={editorRef} />
     </Suspense>
   );
 };
@@ -40,8 +67,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      // TODO fix type error
-      'editor-container': any; // EditorContainer
+      'editor-container': EditorContainer;
     }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbc2f6e7dc..3dada57ec8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
 
   packages/app:
     specifiers:
-      '@blocksuite/blocks': ^0.2.18
-      '@blocksuite/editor': ^0.2.18
+      '@blocksuite/blocks': ^0.2.19
+      '@blocksuite/editor': ^0.2.19
       '@emotion/css': ^11.10.0
       '@emotion/react': ^11.10.4
       '@emotion/server': ^11.10.0
@@ -47,8 +47,8 @@ importers:
       react-dom: 18.2.0
       typescript: 4.8.3
     dependencies:
-      '@blocksuite/blocks': 0.2.18
-      '@blocksuite/editor': 0.2.18
+      '@blocksuite/blocks': 0.2.19
+      '@blocksuite/editor': 0.2.19
       '@emotion/css': 11.10.0
       '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
       '@emotion/server': 11.10.0_@emotion+css@11.10.0
@@ -164,10 +164,10 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
-  /@blocksuite/blocks/0.2.18:
-    resolution: {integrity: sha512-z7ie506LgqQ+MywkOCZBHM1LK5ErKHfh3gQWExQNWvsGsI7+2tLL7xQM+3oyvRzYRUZsRJOti4ovVmv3RPtGpg==}
+  /@blocksuite/blocks/0.2.19:
+    resolution: {integrity: sha512-Xg1d8dIOb4qCYJ1u63zfgGdYfrV7S926srflCzbWuJOMAQ1auRPypHVCxidOir/S583B3l6t80vIhy0Xmu3+2Q==}
     dependencies:
-      '@blocksuite/store': 0.2.18
+      '@blocksuite/store': 0.2.19
       hotkeys-js: 3.10.0
       lit: 2.4.0
       quill: 1.3.7
@@ -178,11 +178,11 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/editor/0.2.18:
-    resolution: {integrity: sha512-8WSE4eDnemMNNdHWrenAOOTdupXLOCWkxgYmhOLq0NvkYRnfJCHihoiGCcUtta6B+uEjK1xCsxbF8s7WKSrqMQ==}
+  /@blocksuite/editor/0.2.19:
+    resolution: {integrity: sha512-KYgn+fvBSCEbo8XBVQd/NNSTw2xV+Ysyec1l+Jv6ukW22ezf05HZlG+tMgg2JDLEsiDHgVhqvqBAZA8BtYF6qw==}
     dependencies:
-      '@blocksuite/blocks': 0.2.18
-      '@blocksuite/store': 0.2.18
+      '@blocksuite/blocks': 0.2.19
+      '@blocksuite/store': 0.2.19
       lit: 2.4.0
       marked: 4.1.1
       turndown: 7.1.1
@@ -192,8 +192,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/store/0.2.18:
-    resolution: {integrity: sha512-OicZSUbiw0CydtmAW1NeqjW76r+5QROtqObS4dub13MPF8LyizpC2X8IV5BwDKv7xSjAX10GjOmWQfZXQqq1dg==}
+  /@blocksuite/store/0.2.19:
+    resolution: {integrity: sha512-/MSuLTd9zNJj7Mxmj6GC1NMzSQ6HHZJdbevn3/o3Sp41KKI2TYygmk26xwvi5duaNgw2GQISWDdHuHnweh8p8w==}
     dependencies:
       lib0: 0.2.52
       y-protocols: 1.0.5
@@ -1432,7 +1432,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
+      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
       debug: 3.2.7
       eslint: 8.22.0
       eslint-import-resolver-node: 0.3.6
@@ -1451,7 +1451,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
+      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9