Add support for collections

We currently just support tables + basic support for gallery view

Author: tobiaslins

src/block.tsx

@@ -267,6 +267,84 @@ export const Block: React.FC<Block> = props => {
           {renderChildText(blockValue.properties.title)}
         </blockquote>
       );
+    case "collection_view":
+      if (!block) return null;
+      const collectionView = block?.collection?.types[0];
+
+      return (
+        <div>
+          <h3 className="notion-h3">
+            {renderChildText(block.collection?.title!)}
+          </h3>
+          {collectionView?.type === "table" && (
+            <div style={{ maxWidth: "100%", marginTop: 5 }}>
+              <table className="notion-table">
+                <thead>
+                  <tr className="notion-tr">
+                    {collectionView.format?.table_properties
+                      ?.filter(p => p.visible)
+                      .map(gp => (
+                        <th
+                          className="notion-th"
+                          style={{ minWidth: gp.width }}
+                        >
+                          {block.collection?.schema[gp.property].name}
+                        </th>
+                      ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {block?.collection?.data.map(row => (
+                    <tr className="notion-tr">
+                      {collectionView.format?.table_properties
+                        ?.filter(p => p.visible)
+                        .map(gp => (
+                          <td
+                            className={
+                              "notion-td " +
+                              (gp.property === "title" ? "notion-bold" : "")
+                            }
+                          >
+                            {
+                              renderChildText(
+                                row[block.collection?.schema[gp.property].name!]
+                              )!
+                            }
+                          </td>
+                        ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+          {collectionView?.type === "gallery" && (
+            <div className="notion-gallery">
+              {block.collection?.data.map((row, i) => (
+                <div key={`col-${i}`} className="notion-gallery-card">
+                  <div className="notion-gallery-content">
+                    {collectionView.format?.gallery_properties
+                      ?.filter(p => p.visible)
+                      .map((gp, idx) => (
+                        <p
+                          key={idx + "item"}
+                          className={
+                            "notion-gallery-data " +
+                            (idx === 0 ? "is-first" : "")
+                          }
+                        >
+                          {getTextContent(
+                            row[block.collection?.schema[gp.property].name!]
+                          )}
+                        </p>
+                      ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      );
     case "callout":
       return (
         <div

src/styles.css

@@ -470,3 +470,88 @@ img.notion-page-icon {
 .notion-toggle > div {
   margin-left: 1.1em;
 }
+
+.notion-table,
+.notion-th,
+.notion-td {
+  border: 1px solid rgba(55, 53, 47, 0.09);
+  border-collapse: collapse;
+}
+
+.notion-table {
+  border-left: none;
+  border-right: none;
+  border-spacing: 0px;
+  white-space: nowrap;
+}
+
+.notion-th,
+.notion-td {
+  font-weight: normal;
+  padding: 0.25em 0.5em;
+  line-height: 1.5;
+  min-height: 1.5em;
+  text-align: left;
+  font-size: 14px;
+}
+
+.notion-td.notion-bold {
+  font-weight: 500;
+}
+
+.notion-th {
+  color: rgba(55, 53, 47, 0.6);
+  font-size: 14px;
+}
+
+.notion-td:first-child,
+.notion-th:first-child {
+  border-left: 0;
+}
+
+.notion-td:last-child,
+.notion-th:last-child {
+  border-right: 0;
+}
+
+.notion-gallery {
+  display: grid;
+  position: relative;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 16px;
+  border-top: 1px solid rgba(55, 53, 47, 0.16);
+  padding-top: 16px;
+  padding-bottom: 4px;
+}
+.notion-gallery-card {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.1) 0px 2px 4px;
+  border-radius: 3px;
+  background: white;
+  overflow: hidden;
+  transition: background 100ms ease-out 0s;
+  position: static;
+  height: 100%;
+}
+
+.notion-gallery-content {
+  padding: 8px 10px 6px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.notion-gallery-data.is-first {
+  white-space: nowrap;
+  word-break: break-word;
+  caret-color: rgb(55, 53, 47);
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 21px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/types.ts

@@ -223,6 +223,33 @@ interface CodeValueType extends BaseValueType {
     language: DecorationType[];
   };
 }
+interface CollectionValueType extends ContentValueType {
+  type: "collection_view";
+}
+
+interface TableGalleryType extends BaseValueType {
+  type: "gallery";
+  format: {
+    gallery_cover: {
+      type: "page_cover";
+    };
+    gallery_cover_aspect: "cover";
+    gallery_properties: Array<{ visible: boolean; property: string }>;
+  };
+}
+interface TableCollectionType extends BaseValueType {
+  type: "table";
+  format: {
+    table_wrap: boolean;
+    table_properties: Array<{
+      visible: boolean;
+      property: string;
+      width: number;
+    }>;
+  };
+}
+
+export type CollectionViewType = TableGalleryType | TableCollectionType;
 
 /**
  * The different block values a block can have.
@@ -246,11 +273,18 @@ export type BlockValueType =
   | EmbedValueType
   | CalloutValueType
   | BookmarkValueType
-  | ToggleValueType;
+  | ToggleValueType
+  | CollectionValueType;
 
 export interface BlockType {
   role: string;
   value: BlockValueType;
+  collection?: {
+    title: DecorationType[];
+    types: CollectionViewType[];
+    data: Array<{ [key: string]: DecorationType[] }>;
+    schema: { [key: string]: { name: string; type: string } };
+  };
 }
 
 export interface NotionUserType {