chore: outlines support toggle h1-h6 (AppFlowy-IO#72)

* chore: outlines support toggle h1-h6

* fix: add anchor point to outline content

Author: qinluhe

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

@@ -26,6 +26,12 @@ export const Outline = memo(
 
       if (element) {
         void (async () => {
+          const search = new URLSearchParams(window.location.search);
+
+          search.set('blockId', heading.blockId);
+
+          window.history.replaceState(null, '', `${window.location.pathname}?${search.toString()}`);
+
           await smoothScrollIntoViewIfNeeded(element, {
             behavior: 'smooth',
             block: 'start',

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

@@ -11,7 +11,11 @@ export function extractHeadings (editor: ReactEditor, maxDepth: number): Heading
   function traverse (children: (Element | Text)[]) {
     for (const block of children) {
       if (Text.isText(block)) continue;
-      if (block.type === BlockType.HeadingBlock && (block as HeadingNode).data?.level <= maxDepth) {
+      // Include only heading and toggle list heading blocks
+      if (([
+        BlockType.HeadingBlock,
+        BlockType.ToggleListBlock,
+      ].includes(block.type as BlockType)) && 'level' in (block as HeadingNode).data && (block as HeadingNode).data?.level <= maxDepth) {
         headings.push({
           ...block,
           data: {

src/components/editor/components/blocks/toggle-list/ToggleList.tsx

@@ -41,6 +41,7 @@ export const ToggleList = memo(
           {...attributes}
           ref={ref}
           className={className}
+          id={level ? `heading-${blockId}` : undefined}
         >
           {children}
           {!readOnly && !collapsed && node.children.slice(1).length === 0 &&