chore: fix the outline content (AppFlowy-IO#76)

Author: qinluhe

src/components/editor/components/blocks/outline/Outline.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useCallback, useEffect, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Element } from 'slate';
 import { useReadOnly, useSlate } from 'slate-react';
@@ -12,12 +12,14 @@ export const Outline = memo(
     const [root, setRoot] = useState<HeadingNode[]>([]);
     const { t } = useTranslation();
     const readOnly = useReadOnly() || editor.isElementReadOnly(node as unknown as Element);
+    const [isReady, setIsReady] = useState(false);
 
     useEffect(() => {
+      if (!isReady) return;
       const root = nestHeadings(extractHeadings(editor, node.data.depth || 6));
 
       setRoot(root);
-    }, [editor, node.data.depth, editor.children]);
+    }, [editor, node.data.depth, editor.children, isReady]);
 
     const jumpToHeading = useCallback((heading: HeadingNode) => {
       const id = `heading-${heading.blockId}`;
@@ -62,6 +64,12 @@ export const Outline = memo(
       [jumpToHeading]
     );
 
+    useLayoutEffect(() => {
+      setTimeout(() => {
+        setIsReady(true);
+      }, 1000);
+    }, []);
+
     return (
       <div
         {...attributes}
@@ -72,7 +80,7 @@ export const Outline = memo(
         <div className={'absolute left-0 top-0 select-none caret-transparent'}>{children}</div>
         <div contentEditable={false} className={`flex w-full select-none flex-col`}>
           <div className={'text-md my-2 font-bold'}>{t('document.outlineBlock.placeholder')}</div>
-          {root.map(renderHeading)}
+          {isReady && root.map(renderHeading)}
         </div>
       </div>
     );

src/components/editor/components/blocks/outline/utils.ts

@@ -1,9 +1,11 @@
-import { BlockType } from '@/application/types';
-import { CustomEditor } from 'src/application/slate-yjs/command';
-import { HeadingNode } from '@/components/editor/editor.type';
 import { Element, Text } from 'slate';
 import { ReactEditor } from 'slate-react';
 
+import { BlockType } from '@/application/types';
+import { HeadingNode } from '@/components/editor/editor.type';
+
+import { CustomEditor } from 'src/application/slate-yjs/command';
+
 export function extractHeadings (editor: ReactEditor, maxDepth: number): HeadingNode[] {
   const headings: HeadingNode[] = [];
   const blocks = editor.children;
@@ -20,7 +22,7 @@ export function extractHeadings (editor: ReactEditor, maxDepth: number): Heading
           ...block,
           data: {
             level: (block as HeadingNode).data.level,
-            text: CustomEditor.getBlockTextContent(block, 2),
+            text: CustomEditor.getBlockTextContent(block, 2).trim(),
           },
           children: [],
         } as HeadingNode);