Skip to content

Add support for collections #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 7, 2020
Merged

Add support for collections #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b8e7822
Add support for collections
tobiaslins Jun 29, 2020
457ec8a
Minor styling fixes
tobiaslins Jul 1, 2020
589491a
Fix code blocks #15
tobiaslins Jul 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.6.1",
"version": "0.7.2",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
Expand Down
78 changes: 78 additions & 0 deletions src/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions src/components/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ const Code: React.FC<{ code: string; language: string }> = ({
const prismLanguage =
languages[language.toLowerCase()] || languages.javascript;

const langClass = `language-${language.toLowerCase()}`;

return (
<pre className="notion-code">
<pre className={`notion-code ${langClass}`}>
<code
className={`language-${language.toLowerCase()}`}
className={langClass}
dangerouslySetInnerHTML={{
__html: highlight(code, prismLanguage, language)
}}
Expand Down
88 changes: 85 additions & 3 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,6 @@
font-size: 1.875em;
margin-top: 1.4em;
}
.notion-h1:first-of-type {
margin-top: 0;
}
.notion-h2 {
font-size: 1.5em;
margin-top: 1.1em;
Expand Down Expand Up @@ -470,3 +467,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;
}
36 changes: 35 additions & 1 deletion src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,33 @@ interface CodeValueType extends BaseValueType {
language: DecorationType[];
};
}
interface CollectionValueType extends ContentValueType {
type: "collection_view";
}

interface TableGalleryType extends BaseValueType {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this should be GalleryCollectionType since it's not a table?

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.
Expand All @@ -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 {
Expand Down