Add toggle list support

Author: timolins

README.md

@@ -2,7 +2,6 @@
 
 ![npm version](https://badgen.net/npm/v/react-notion) ![npm version](https://badgen.net/david/dep/splitbee/react-notion) ![minzipped sized](https://badgen.net/bundlephobia/minzip/react-notion)
 
-
 A React renderer for Notion pages.
 Use Notion as CMS for your blog, documentation or personal site.
 
@@ -111,14 +110,14 @@ Most common block types are supported. We happily accept pull requests to add su
 | Link              | ✅ Yes     |                      |
 | Code              | ✅ Yes     |                      |
 | Web Bookmark      | ✅ Yes     |                      |
+| Toggle List       | ✅ Yes     |                      |
 | Databases         | ❌ Missing |                      |
 | Checkbox          | ❌ Missing |                      |
-| Toggle List       | ❌ Missing |                      |
 | Table Of Contents | ❌ Missing |                      |
 
 ## Credits
 
 - [Tobias Lins](https://tobi.sh) – Idea, Code
 - [Timo Lins](https://timo.sh) – Code, Documentation
 - [samwightt](https://github.com/samwightt) – Inspiration & API Typings
-- [All people that contributed 💕](https://github.com/splitbee/react-notion/graphs/contributors) 
+- [All people that contributed 💕](https://github.com/splitbee/react-notion/graphs/contributors)

src/block.tsx

@@ -245,6 +245,13 @@ export const Block: React.FC<Block> = props => {
           </a>
         </div>
       );
+    case "toggle":
+      return (
+        <details className="notion-toggle">
+          <summary>{renderChildText(blockValue.properties.title)}</summary>
+          <div>{children}</div>
+        </details>
+      );
     default:
       if (process.env.NODE_ENV !== "production") {
         console.log("Unsupported type " + block?.value?.type);

src/styles.css

@@ -219,6 +219,7 @@ h3 {
 
 .notion-list li {
   padding: 6px 0px;
+  white-space: pre-wrap;
 }
 
 .notion-asset-wrapper {
@@ -232,7 +233,6 @@ h3 {
 
 .notion-text {
   white-space: pre-wrap;
-  word-break: break-word;
   caret-color: rgb(55, 53, 47);
 }
 .notion-block {
@@ -399,3 +399,7 @@ h3 {
 .notion-callout-text {
   margin-left: 8px;
 }
+
+.notion-toggle > div {
+  margin-left: 1.1em;
+}

src/types.ts

@@ -182,6 +182,13 @@ interface CalloutValueType extends BaseValueType {
   };
 }
 
+interface ToggleValueType extends BaseValueType {
+  type: "toggle";
+  properties: {
+    title: DecorationType[];
+  };
+}
+
 export interface ContentValueType extends BaseValueType {
   properties: {
     source: string[][];
@@ -238,7 +245,8 @@ export type BlockValueType =
   | VideoValueType
   | EmbedValueType
   | CalloutValueType
-  | BookmarkValueType;
+  | BookmarkValueType
+  | ToggleValueType;
 
 export interface BlockType {
   role: string;