Merge branch 'develop' into feature/remove-react-fc

libs/components/editor-core/src/render-block/RenderBlock.tsx

@@ -1,7 +1,6 @@
 import { styled } from '@toeverything/components/ui';
-import { useLayoutEffect, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 
-// import { RenderChildren } from './RenderChildren';
 import { useEditor } from '../Contexts';
 import { useBlock } from '../hooks';
 
@@ -10,19 +9,21 @@ interface RenderBlockProps {
     hasContainer?: boolean;
 }
 
-export const RenderBlock = ({
+export function RenderBlock({
     blockId,
     hasContainer = true,
-}: RenderBlockProps) => {
+}: RenderBlockProps) {
     const { editor, editorElement } = useEditor();
     const { block } = useBlock(blockId);
-    const blockRef = useRef<HTMLDivElement>(null);
 
-    useLayoutEffect(() => {
-        if (block && blockRef.current) {
-            block.dom = blockRef.current;
-        }
-    });
+    const setRef = useCallback(
+        (dom: HTMLElement) => {
+            if (block != null && dom != null) {
+                block.dom = dom;
+            }
+        },
+        [block]
+    );
 
     const blockView = useMemo(() => {
         if (block?.type) {
@@ -54,17 +55,13 @@ export const RenderBlock = ({
     ) : null;
 
     return hasContainer ? (
-        <BlockContainer
-            block-id={blockId}
-            ref={blockRef}
-            data-block-id={blockId}
-        >
+        <BlockContainer block-id={blockId} ref={setRef} data-block-id={blockId}>
             {view}
         </BlockContainer>
     ) : (
         <> {view}</>
     );
-};
+}
 
 const BlockContainer = styled('div')(({ theme }) => ({
     fontSize: theme.typography.body1.fontSize,