Merge pull request #7 from splitbee/fix-ordered-list-calculation

Improve logic that determines ordered list count

Author: tobiaslins

src/block.tsx

@@ -48,17 +48,17 @@ export type MapPageUrl = (pageId: string) => string;
 
 interface Block {
   block: BlockType;
-  parentBlock: BlockType;
   level: number;
+  listNumber?: number;
   mapPageUrl?: MapPageUrl;
 }
 
 export const Block: React.FC<Block> = props => {
-  const { block, parentBlock, children } = props;
+  const { block, children, listNumber, level } = props;
   const blockValue = block?.value;
   switch (blockValue?.type) {
     case "page":
-      if (props.level === 0) return <div className="notion">{children}</div>;
+      if (level === 0) return <div className="notion">{children}</div>;
       else {
         if (!blockValue.properties) return null;
         return (
@@ -111,14 +111,11 @@ export const Block: React.FC<Block> = props => {
       );
     case "bulleted_list":
     case "numbered_list":
-      const isTopLevel = block.value.type !== parentBlock?.value?.type;
-      const itemPosition =
-        1 + (parentBlock.value.content?.indexOf(block.value.id) || 0);
-      const wrapList = (content: React.ReactNode) =>
+      const wrapList = (content: React.ReactNode, start?: number) =>
         blockValue.type === "bulleted_list" ? (
           <ul className="notion-list notion-list-disc">{content}</ul>
         ) : (
-          <ol start={itemPosition} className="notion-list notion-list-numbered">
+          <ol start={start} className="notion-list notion-list-numbered">
             {content}
           </ol>
         );
@@ -140,7 +137,7 @@ export const Block: React.FC<Block> = props => {
         ) : null;
       }
 
-      return isTopLevel ? wrapList(output) : output;
+      return listNumber !== undefined ? wrapList(output, listNumber) : output;
 
     case "image":
     case "embed":

src/renderer.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { BlockMapType } from "./types";
 import { Block, MapPageUrl } from "./block";
 
+import { getListNumber } from "./utils";
+
 export interface NotionRendererProps {
   blockMap: BlockMapType;
   currentId?: string;
@@ -17,14 +19,22 @@ export const NotionRenderer: React.FC<NotionRendererProps> = ({
 }) => {
   const id = currentId || Object.keys(blockMap)[0];
   const currentBlock = blockMap[id];
-  if (!currentBlock) return null;
   const parentBlock = blockMap[currentBlock.value.parent_id];
+
+  if (!currentBlock) return null;
+
+  const listNumber =
+    currentBlock.value.type === "numbered_list" &&
+    parentBlock.value.type !== "numbered_list"
+      ? getListNumber(id, blockMap)
+      : undefined;
+
   return (
     <Block
       key={id}
       level={level}
       block={currentBlock}
-      parentBlock={parentBlock}
+      listNumber={listNumber}
       mapPageUrl={mapPageUrl}
     >
       {currentBlock?.value?.content?.map(contentId => (

src/utils.ts

@@ -1,8 +1,44 @@
-import { DecorationType } from "./types";
+import { DecorationType, BlockMapType } from "./types";
 
 export const classNames = (...classes: Array<string | undefined | false>) =>
   classes.filter(a => !!a).join(" ");
 
 export const getTextContent = (text: DecorationType[]) => {
   return text.reduce((prev, current) => prev + current[0], "");
 };
+
+const groupBlockContent = (blockMap: BlockMapType): string[][] => {
+  const output: string[][] = [];
+
+  let lastType: string | undefined = undefined;
+  let index = -1;
+
+  Object.keys(blockMap).forEach(id => {
+    blockMap[id].value.content?.forEach(blockId => {
+      const blockType = blockMap[blockId].value.type;
+
+      if (blockType !== lastType) {
+        index++;
+        lastType = blockType;
+        output[index] = [];
+      }
+
+      output[index].push(blockId);
+    });
+
+    lastType = undefined;
+  });
+
+  return output;
+};
+
+export const getListNumber = (blockId: string, blockMap: BlockMapType) => {
+  const groups = groupBlockContent(blockMap);
+  const group = groups.find(g => g.includes(blockId));
+
+  if (!group) {
+    return;
+  }
+
+  return group.indexOf(blockId) + 1;
+};