From f42aad15286af98e5a7e899fc20e9be450572847 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 10:51:19 -0400
Subject: [PATCH 01/36] Increase default window size

---
 plugins/notion/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/notion/src/App.tsx b/plugins/notion/src/App.tsx
index 6a64dc31..d592eac3 100644
--- a/plugins/notion/src/App.tsx
+++ b/plugins/notion/src/App.tsx
@@ -23,8 +23,8 @@ export function AuthenticatedApp({ context }: AuthenticatedAppProps) {
     )
 
     useEffect(() => {
-        const width = databaseConfig ? 360 : 325
-        const height = databaseConfig ? 425 : 370
+        const width = databaseConfig ? 600 : 325
+        const height = databaseConfig ? 500 : 370
         framer.showUI({
             width,
             height,

From 31b6026c120cc1fbbd538067f41399e1c21754fd Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 10:54:40 -0400
Subject: [PATCH 02/36] Improve design of unsupported fields

Show "Unsupported" text once per row.
Uncheck unsupported fields.
---
 plugins/notion/src/MapFields.tsx | 46 +++++++++++++++-----------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index b1bdb0d3..bbb175bc 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -257,7 +257,7 @@ export function MapDatabaseFields({
                                     <CheckboxTextfield
                                         value={property.name}
                                         disabled={!isSupported}
-                                        checked={!disabledFieldIds.has(property.id)}
+                                        checked={isSupported ? !disabledFieldIds.has(property.id) : false}
                                         onChange={() => {
                                             handleFieldToggle(property.id)
                                         }}
@@ -272,36 +272,32 @@ export function MapDatabaseFields({
                                     </div>
                                     <input
                                         type="text"
-                                        className={classNames("w-full", !isSupported && "opacity-50")}
+                                        className={classNames("w-full", !isSupported && "opacity-50 col-span-2")}
                                         disabled={!isSupported || disabledFieldIds.has(property.id)}
                                         placeholder={property.name}
-                                        value={isSupported ? (fieldNameOverrides[property.id] ?? "") : "Unsupported"}
+                                        value={isSupported ? fieldNameOverrides[property.id] ?? "" : "Unsupported"}
                                         onChange={e => {
                                             handleFieldNameChange(property.id, e.target.value)
                                         }}
                                     ></input>
-                                    <select
-                                        className="w-full"
-                                        onChange={event =>
-                                            handleFieldTypeChange(
-                                                property.id,
-                                                event.target.value as ManagedCollectionField["type"]
-                                            )
-                                        }
-                                        disabled={!isSupported}
-                                        value={!isSupported ? "unsupported" : fieldTypeByFieldId[property.id]}
-                                    >
-                                        {!isSupported && (
-                                            <option value="unsupported" disabled>
-                                                Unsupported
-                                            </option>
-                                        )}
-                                        {fieldOptions?.map(fieldOption => (
-                                            <option key={fieldOption} value={fieldOption}>
-                                                {labelByFieldTypeOption[fieldOption]}
-                                            </option>
-                                        ))}
-                                    </select>
+                                    {isSupported && (
+                                        <select
+                                            className="w-full"
+                                            onChange={event =>
+                                                handleFieldTypeChange(
+                                                    property.id,
+                                                    event.target.value as ManagedCollectionField["type"]
+                                                )
+                                            }
+                                            value={fieldTypeByFieldId[property.id]}
+                                        >
+                                            {fieldOptions?.map(fieldOption => (
+                                                <option key={fieldOption} value={fieldOption}>
+                                                    {labelByFieldTypeOption[fieldOption]}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    )}
                                 </Fragment>
                             )
                         })}

From b231fa7bdc67e689bda72418c97f5c16093b2ad3 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 11:08:03 -0400
Subject: [PATCH 03/36] Add support for phone number field

---
 plugins/notion/src/notion.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 129ef31d..ffd534e6 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -186,6 +186,7 @@ export const supportedNotionPropertyTypes = [
     "url",
     "files",
     "relation",
+    "phone_number",
 ] satisfies ReadonlyArray<NotionProperty["type"]>
 
 type SupportedPropertyType = (typeof supportedNotionPropertyTypes)[number]
@@ -209,6 +210,7 @@ export const supportedCMSTypeByNotionPropertyType = {
     email: ["formattedText", "string"],
     files: ["file", "image"],
     relation: ["multiCollectionReference"],
+    phone_number: ["string"],
 } satisfies Record<SupportedPropertyType, ReadonlyArray<ManagedCollectionField["type"]>>
 
 function assertFieldTypeMatchesPropertyType<T extends SupportedPropertyType>(
@@ -376,6 +378,16 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
+        case "phone_number": {
+            assertFieldTypeMatchesPropertyType(property.type, fieldType)
+
+            return {
+                type: "string",
+                id: property.id,
+                name: property.name,
+                userEditable: false,
+            }
+        }
         default: {
             assertNever(property)
         }
@@ -444,6 +456,11 @@ export function getPropertyValue(
             if (firstFile.type === "file") {
                 return firstFile.file.url
             }
+
+            return null
+        }
+        case "phone_number": {
+            return property.phone_number ?? ""
         }
     }
 }

From d04b1947cd7a0522be785450092dd45a913a78f1 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 11:23:28 -0400
Subject: [PATCH 04/36] Allow empty email fields, make default email type
 string

---
 plugins/notion/src/notion.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index ffd534e6..641704b8 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -207,7 +207,7 @@ export const supportedCMSTypeByNotionPropertyType = {
     select: ["enum"],
     status: ["enum"],
     url: ["link"],
-    email: ["formattedText", "string"],
+    email: ["string", "formattedText"],
     files: ["file", "image"],
     relation: ["multiCollectionReference"],
     phone_number: ["string"],
@@ -419,6 +419,13 @@ export function getPropertyValue(
 
             return richTextToPlainText(property.rich_text)
         }
+        case "email": {
+            if (supportsHtml) {
+                return `<p>${property.email ?? ""}</p>`
+            }
+
+            return property.email ?? ""
+        }
         case "select": {
             if (!property.select) return null
 
@@ -548,7 +555,7 @@ async function processItem(
         }
 
         const fieldValue = getPropertyValue(property, { supportsHtml: field.type === "formattedText" })
-        if (!fieldValue) {
+        if (fieldValue === null || fieldValue === undefined) {
             status.warnings.push({
                 url: item.url,
                 fieldId: field.id,

From b4f25de4cad6329dcc819adb3ea01f9a52bbf917 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 11:26:14 -0400
Subject: [PATCH 05/36] Make field type labels match Framer

---
 plugins/notion/src/MapFields.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index bbb175bc..519edb03 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -98,18 +98,18 @@ function getLastSynchronizedAtTimestamp(
 }
 
 const labelByFieldTypeOption: Record<ManagedCollectionField["type"], string> = {
-    boolean: "Boolean",
+    boolean: "Toggle",
     date: "Date",
     number: "Number",
     formattedText: "Formatted Text",
     color: "Color",
-    enum: "Enum",
+    enum: "Option",
     file: "File",
     image: "Image",
     link: "Link",
     string: "String",
     collectionReference: "Reference",
-    multiCollectionReference: "Multi Reference",
+    multiCollectionReference: "Multi-Reference",
 }
 
 export function MapDatabaseFields({

From ae210705e4c7e8e8574660df63566a17fcdad0a7 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 11:32:01 -0400
Subject: [PATCH 06/36] Fix importing status fields

---
 plugins/notion/src/notion.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 641704b8..68a1a50d 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -319,10 +319,10 @@ export function getCollectionFieldForProperty<
                 type: "enum",
                 id: property.id,
                 name: property.name,
-                cases: property.status.groups.map(group => {
+                cases: property.status.options.map(option => {
                     return {
-                        id: group.id,
-                        name: group.name,
+                        id: option.id,
+                        name: option.name,
                     }
                 }),
                 userEditable: false,
@@ -431,6 +431,11 @@ export function getPropertyValue(
 
             return property.select.id
         }
+        case "status": {
+            if (!property.status) return null
+
+            return property.status.id
+        }
         case "title":
             if (supportsHtml) {
                 return richTextToHTML(property.title)

From 064d1aa573e1a3d458d5ba88a5ee73ab8ee19500 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 11:34:00 -0400
Subject: [PATCH 07/36] Make "Next" a primary button

---
 plugins/notion/src/SelectDatabase.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/plugins/notion/src/SelectDatabase.tsx b/plugins/notion/src/SelectDatabase.tsx
index caf9be38..dab74764 100644
--- a/plugins/notion/src/SelectDatabase.tsx
+++ b/plugins/notion/src/SelectDatabase.tsx
@@ -3,6 +3,7 @@ import { richTextToPlainText, useDatabasesQuery } from "./notion"
 import { FormEvent, useEffect, useRef, useState } from "react"
 import notionConnectSrc from "./assets/notion-connect.png"
 import { assert } from "./utils"
+import { Button } from "./components/Button"
 
 interface SelectDatabaseProps {
     onDatabaseSelected: (database: GetDatabaseResponse) => void
@@ -106,9 +107,9 @@ export function SelectDatabase({ onDatabaseSelected }: SelectDatabaseProps) {
                     </select>
                 </div>
 
-                <button type="submit" disabled={!selectedDatabase}>
+                <Button type="submit" variant="primary" disabled={!selectedDatabase}>
                     Next
-                </button>
+                </Button>
             </div>
         </form>
     )

From 4b195ea42af26376ca33b9f09ff9cef2953bef6f Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 11:47:28 -0400
Subject: [PATCH 08/36] Prevent importing non-image files as images

---
 plugins/notion/src/notion.ts | 37 ++++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 68a1a50d..97fc2678 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -54,6 +54,8 @@ export const pageContentProperty: SupportedNotionProperty = {
     rich_text: {},
 }
 
+export const imageFileExtensions = ["jpg", "jpeg", "png", "gif", "apng", "webp", "svg"]
+
 // Naive implementation to be authenticated, a token could be expired.
 // For simplicity we just close the plugin and clear storage in that case.
 export function isAuthenticated() {
@@ -400,8 +402,10 @@ export function richTextToPlainText(richText: RichTextItemResponse[]) {
 
 export function getPropertyValue(
     property: PageObjectResponse["properties"][string],
-    { supportsHtml }: { supportsHtml: boolean }
+    { fieldType }: { fieldType: string }
 ): unknown | undefined {
+    const supportsHtml = fieldType === "formattedText"
+
     switch (property.type) {
         case "checkbox": {
             return property.checkbox
@@ -436,12 +440,13 @@ export function getPropertyValue(
 
             return property.status.id
         }
-        case "title":
+        case "title": {
             if (supportsHtml) {
                 return richTextToHTML(property.title)
             }
 
             return richTextToPlainText(property.title)
+        }
         case "number": {
             return property.number
         }
@@ -458,17 +463,25 @@ export function getPropertyValue(
             return property.relation.map(({ id }) => id)
         }
         case "files": {
-            const firstFile = property.files[0]
-            if (!firstFile) return null
+            for (const file of property.files) {
+                let url = null
 
-            if (firstFile.type === "external") {
-                return firstFile.external.url
-            }
+                if (file.type === "external") {
+                    url = file.external.url
+                } else if (file.type === "file") {
+                    url = file.file.url
+                }
 
-            if (firstFile.type === "file") {
-                return firstFile.file.url
-            }
+                if (!url) continue
 
+                if (fieldType === "image") {
+                    if (!imageFileExtensions.some(ext => url.toLowerCase().endsWith(ext))) {
+                        continue
+                    }
+                }
+
+                return url
+            }
             return null
         }
         case "phone_number": {
@@ -544,7 +557,7 @@ async function processItem(
         assert(property)
 
         if (property.id === slugFieldId) {
-            const resolvedSlug = getPropertyValue(property, { supportsHtml: false })
+            const resolvedSlug = getPropertyValue(property, { fieldType: "string" })
             if (!resolvedSlug || typeof resolvedSlug !== "string") {
                 continue
             }
@@ -559,7 +572,7 @@ async function processItem(
             continue
         }
 
-        const fieldValue = getPropertyValue(property, { supportsHtml: field.type === "formattedText" })
+        const fieldValue = getPropertyValue(property, { fieldType: field.type })
         if (fieldValue === null || fieldValue === undefined) {
             status.warnings.push({
                 url: item.url,

From 4ea15a006b2352f259c5836ad3f05850cf62909c Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 11:50:56 -0400
Subject: [PATCH 09/36] Sync blockquotes from Notion

---
 plugins/notion/src/blocksToHTML.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/plugins/notion/src/blocksToHTML.ts b/plugins/notion/src/blocksToHTML.ts
index c15abd4b..29c26c4f 100644
--- a/plugins/notion/src/blocksToHTML.ts
+++ b/plugins/notion/src/blocksToHTML.ts
@@ -94,6 +94,9 @@ export function blocksToHtml(blocks: BlockObjectResponse[]) {
             case "code":
                 htmlContent += `<pre><code class="language-${block.code.language.replace(" ", "-")}">${richTextToHTML(block.code.rich_text)}</code></pre>`
                 break
+            case "quote":
+                htmlContent += `<blockquote>${richTextToHTML(block.quote.rich_text)}</blockquote>`
+                break
             default:
                 // TODO: More block types can be added here!
                 break

From f8968c27eb7bdfd2fdc178f5ddef2eb4bf3a9306 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 12:03:49 -0400
Subject: [PATCH 10/36] Sync YouTube videos in formatted text

---
 plugins/notion/src/blocksToHTML.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/plugins/notion/src/blocksToHTML.ts b/plugins/notion/src/blocksToHTML.ts
index 29c26c4f..b629b4e1 100644
--- a/plugins/notion/src/blocksToHTML.ts
+++ b/plugins/notion/src/blocksToHTML.ts
@@ -1,6 +1,8 @@
 import { BlockObjectResponse, RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints"
 import { assert } from "./utils"
 
+const youtubeIdRegex = /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))(?<videoId>[^?&]+)/u
+
 export function richTextToHTML(texts: RichTextItemResponse[]) {
     return texts
         .map(({ plain_text, annotations, href }) => {
@@ -97,6 +99,16 @@ export function blocksToHtml(blocks: BlockObjectResponse[]) {
             case "quote":
                 htmlContent += `<blockquote>${richTextToHTML(block.quote.rich_text)}</blockquote>`
                 break
+            case "video":
+                if (block.video.type === "external") {
+                    const url = block.video.external.url
+                    const youtubeId = url.match(youtubeIdRegex)?.groups?.videoId
+                    if (youtubeId) {
+                        htmlContent += `<iframe src="https://www.youtube.com/embed/${youtubeId}"></iframe>`
+                        break
+                    }
+                }
+                break
             default:
                 // TODO: More block types can be added here!
                 break

From 2158f5c827443380f05e654058db11e944276e52 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 12:06:14 -0400
Subject: [PATCH 11/36] Improve Notion code block languages

---
 plugins/notion/src/blocksToHTML.ts | 84 +++++++++++++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/plugins/notion/src/blocksToHTML.ts b/plugins/notion/src/blocksToHTML.ts
index b629b4e1..d8f5e9d2 100644
--- a/plugins/notion/src/blocksToHTML.ts
+++ b/plugins/notion/src/blocksToHTML.ts
@@ -94,7 +94,14 @@ export function blocksToHtml(blocks: BlockObjectResponse[]) {
                 break
             }
             case "code":
-                htmlContent += `<pre><code class="language-${block.code.language.replace(" ", "-")}">${richTextToHTML(block.code.rich_text)}</code></pre>`
+                const language = codeLanguageMapping[block.code.language]
+                if (language) {
+                    htmlContent += `<pre data-language="${language}"><code>${richTextToHTML(
+                        block.code.rich_text
+                    )}</code></pre>`
+                } else {
+                    htmlContent += `<pre><code>${richTextToHTML(block.code.rich_text)}</code></pre>`
+                }
                 break
             case "quote":
                 htmlContent += `<blockquote>${richTextToHTML(block.quote.rich_text)}</blockquote>`
@@ -117,3 +124,78 @@ export function blocksToHtml(blocks: BlockObjectResponse[]) {
 
     return htmlContent
 }
+
+const codeLanguageMapping: Record<string, string | null> = {
+    abap: null,
+    arduino: null,
+    bash: "Shell",
+    basic: null,
+    c: "C",
+    clojure: null,
+    coffeescript: null,
+    "c++": "C++",
+    "c#": "C#",
+    css: "CSS",
+    dart: null,
+    diff: null,
+    docker: null,
+    elixir: null,
+    elm: null,
+    erlang: null,
+    flow: null,
+    fortran: null,
+    "f#": null,
+    gherkin: null,
+    glsl: null,
+    go: "Go",
+    graphql: null,
+    groovy: null,
+    haskell: "Haskell",
+    html: "HTML",
+    java: "Java",
+    javascript: "JavaScript",
+    json: null,
+    julia: "Julia",
+    kotlin: "Kotlin",
+    latex: null,
+    less: "Less",
+    lisp: null,
+    livescript: null,
+    lua: "Lua",
+    makefile: null,
+    markdown: "Markdown",
+    markup: null,
+    matlab: "MATLAB",
+    mermaid: null,
+    nix: null,
+    "objective-c": "Objective-C",
+    ocaml: null,
+    pascal: null,
+    perl: "Perl",
+    php: "PHP",
+    "plain text": null,
+    powershell: null,
+    prolog: null,
+    protobuf: null,
+    python: "Python",
+    r: null,
+    reason: null,
+    ruby: "Ruby",
+    rust: "Rust",
+    sass: null,
+    scala: "Scala",
+    scheme: null,
+    scss: "SCSS",
+    shell: "Shell",
+    sql: "SQL",
+    swift: "Swift",
+    typescript: "TypeScript",
+    "vb.net": null,
+    verilog: null,
+    vhdl: null,
+    "visual basic": null,
+    webassembly: null,
+    xml: null,
+    yaml: "YAML",
+    "java/c/c++/c#": null,
+}

From 88372ce71ea11af009bb01e68bb4fac4c082434c Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 12:17:35 -0400
Subject: [PATCH 12/36] Add unique ID field support

---
 plugins/notion/src/notion.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 97fc2678..4ada0270 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -189,6 +189,7 @@ export const supportedNotionPropertyTypes = [
     "files",
     "relation",
     "phone_number",
+    "unique_id",
 ] satisfies ReadonlyArray<NotionProperty["type"]>
 
 type SupportedPropertyType = (typeof supportedNotionPropertyTypes)[number]
@@ -213,6 +214,7 @@ export const supportedCMSTypeByNotionPropertyType = {
     files: ["file", "image"],
     relation: ["multiCollectionReference"],
     phone_number: ["string"],
+    unique_id: ["string", "number"],
 } satisfies Record<SupportedPropertyType, ReadonlyArray<ManagedCollectionField["type"]>>
 
 function assertFieldTypeMatchesPropertyType<T extends SupportedPropertyType>(
@@ -390,6 +392,16 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
+        case "unique_id": {
+            assertFieldTypeMatchesPropertyType(property.type, fieldType)
+
+            return {
+                type: fieldType,
+                id: property.id,
+                name: property.name,
+                userEditable: false,
+            }
+        }
         default: {
             assertNever(property)
         }
@@ -454,6 +466,12 @@ export function getPropertyValue(
             return property.url
         }
         case "unique_id": {
+            if (fieldType === "string") {
+                return property.unique_id.prefix
+                    ? `${property.unique_id.prefix}-${property.unique_id.number}`
+                    : String(property.unique_id.number)
+            }
+
             return property.unique_id.number
         }
         case "date": {

From 84a869d752b3f57640a1579f26e0d81b39cbdc15 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 12:41:41 -0400
Subject: [PATCH 13/36] Add title with link to Notion database

---
 plugins/notion/src/MapFields.tsx | 37 ++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index 519edb03..ac2f49ca 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -213,7 +213,8 @@ export function MapDatabaseFields({
         })
     }
 
-    const title = richTextToPlainText(database.title)
+    const plainTextTitle = richTextToPlainText(database.title)
+    const title = plainTextTitle.trim() ? plainTextTitle : "Untitled"
 
     return (
         <form onSubmit={handleSubmit} className="flex flex-col gap-2 flex-1">
@@ -222,6 +223,14 @@ export function MapDatabaseFields({
             <div className="h-[1px] border-b border-divider mb-2 sticky top-0" />
 
             <div className="flex-1 flex flex-col gap-6">
+                <a
+                    href={database.url}
+                    target="_blank"
+                    className="group w-fit max-w-full flex flex-row items-center gap-1.5"
+                >
+                    {database.icon && <DatabaseIcon icon={database.icon} size={24} />}
+                    <span className="group-hover:underline text-primary text-base font-bold">{title}</span>
+                </a>
                 <div className="flex flex-col gap-2 w-full">
                     <label className="text-tertiary" htmlFor="collectionName">
                         Slug Field
@@ -309,9 +318,33 @@ export function MapDatabaseFields({
                 <div className="tailwind-hell-escape-hatch-gradient-bottom" />
 
                 <Button variant="primary" isLoading={isLoading} disabled={!slugFieldId} className="w-full">
-                    Import from {title.trim() ? title : "Untitled"}
+                    Import from {title}
                 </Button>
             </div>
         </form>
     )
 }
+
+interface DatabaseIconProps {
+    icon: {
+        type: string
+        emoji?: string
+        external?: { url: string }
+        file?: { url: string }
+    }
+    size?: number
+}
+
+function DatabaseIcon({ icon, size = 20 }: DatabaseIconProps) {
+    if (!icon) return null
+
+    switch (icon.type) {
+        case "emoji":
+            return <span style={{ fontSize: `${size}px` }}>{icon.emoji}</span>
+        case "external":
+        case "file":
+            return <img src={icon[icon.type]?.url} style={{ width: size, height: size }} className="rounded-sm" />
+    }
+
+    return null
+}

From 3dd09887124d2104a2143c7fcf8e2f7f3824b077 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:02:15 -0400
Subject: [PATCH 14/36] Add support for Notion page cover images

---
 plugins/notion/src/MapFields.tsx |  2 +-
 plugins/notion/src/notion.ts     | 46 +++++++++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index ac2f49ca..2acc5c84 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -250,7 +250,7 @@ export function MapDatabaseFields({
                 </div>
 
                 <div className="flex flex-col gap-[10px] w-full items-center justify-center pb-[10px]">
-                    <div className="grid grid-cols-fieldPicker gap-3 w-full items-center justify-center text-tertiary mb-[-3px]">
+                    <div className="grid grid-cols-fieldPicker gap-2.5 w-full items-center justify-center text-tertiary mb-[-3px]">
                         <span>Notion Property</span>
                         <span className="col-start-3">Field Name</span>
                         <span>Field Type</span>
diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 4ada0270..4b652600 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -54,6 +54,14 @@ export const pageContentProperty: SupportedNotionProperty = {
     rich_text: {},
 }
 
+const pageCoverImageId = "page-cover"
+export const pageCoverImageProperty: SupportedNotionProperty = {
+    type: "cover-image",
+    id: pageCoverImageId,
+    name: "Cover Image",
+    description: "Page Cover Image",
+}
+
 export const imageFileExtensions = ["jpg", "jpeg", "png", "gif", "apng", "webp", "svg"]
 
 // Naive implementation to be authenticated, a token could be expired.
@@ -70,8 +78,8 @@ if (isAuthenticated()) {
 export function getNotionProperties(database: GetDatabaseResponse) {
     const result: NotionProperty[] = []
 
-    // This property is always there but not included in `"database.properties"
-    result.push(pageContentProperty)
+    // These properties are always there but not included in `"database.properties"
+    result.push(pageContentProperty, pageCoverImageProperty)
 
     for (const key in database.properties) {
         const property = database.properties[key]
@@ -193,9 +201,16 @@ export const supportedNotionPropertyTypes = [
 ] satisfies ReadonlyArray<NotionProperty["type"]>
 
 type SupportedPropertyType = (typeof supportedNotionPropertyTypes)[number]
-type SupportedNotionProperty = Extract<NotionProperty, { type: SupportedPropertyType }>
+type CustomPropertyType = "cover-image"
 
-export function isSupportedNotionProperty(property: NotionProperty): property is SupportedNotionProperty {
+type SupportedNotionProperty =
+    | Extract<NotionProperty, { type: SupportedPropertyType }>
+    | { type: CustomPropertyType; id: string; name: string; description: string }
+
+export function isSupportedNotionProperty(
+    property: NotionProperty | { type: CustomPropertyType }
+): property is SupportedNotionProperty {
+    if (property.type === "cover-image") return true
     return supportedNotionPropertyTypes.includes(property.type as SupportedPropertyType)
 }
 
@@ -215,7 +230,8 @@ export const supportedCMSTypeByNotionPropertyType = {
     relation: ["multiCollectionReference"],
     phone_number: ["string"],
     unique_id: ["string", "number"],
-} satisfies Record<SupportedPropertyType, ReadonlyArray<ManagedCollectionField["type"]>>
+    "cover-image": ["image"],
+} satisfies Record<SupportedPropertyType | CustomPropertyType, ReadonlyArray<ManagedCollectionField["type"]>>
 
 function assertFieldTypeMatchesPropertyType<T extends SupportedPropertyType>(
     propertyType: T,
@@ -233,7 +249,7 @@ function assertFieldTypeMatchesPropertyType<T extends SupportedPropertyType>(
  * That maps the Notion Property to the Framer CMS collection property type
  */
 export function getCollectionFieldForProperty<
-    TProperty extends Extract<NotionProperty, { type: SupportedPropertyType }>,
+    TProperty extends Extract<NotionProperty, { type: SupportedPropertyType | CustomPropertyType }>
 >(
     property: TProperty,
     fieldType: ManagedCollectionField["type"],
@@ -402,6 +418,16 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
+        case "cover-image": {
+            assertFieldTypeMatchesPropertyType(property.type, fieldType)
+
+            return {
+                type: "image",
+                id: property.id,
+                name: property.name,
+                userEditable: false,
+            }
+        }
         default: {
             assertNever(property)
         }
@@ -607,6 +633,14 @@ async function processItem(
         fieldData[pageContentProperty.id] = contentHTML
     }
 
+    if (fieldsById.has(pageCoverImageProperty.id) && item.cover) {
+        if (item.cover.type === "external") {
+            fieldData[pageCoverImageProperty.id] = item.cover.external.url
+        } else if (item.cover.type === "file") {
+            fieldData[pageCoverImageProperty.id] = item.cover.file.url
+        }
+    }
+
     if (!slugValue) {
         status.warnings.push({
             url: item.url,

From bee0c45ed5bdaec229a80e0b9928db13acbff377 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:04:12 -0400
Subject: [PATCH 15/36] Remove warnings for missing file and URL values

---
 plugins/notion/src/notion.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 4b652600..d311cdf1 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -489,7 +489,7 @@ export function getPropertyValue(
             return property.number
         }
         case "url": {
-            return property.url
+            return property.url ?? ""
         }
         case "unique_id": {
             if (fieldType === "string") {
@@ -508,7 +508,7 @@ export function getPropertyValue(
         }
         case "files": {
             for (const file of property.files) {
-                let url = null
+                let url = ""
 
                 if (file.type === "external") {
                     url = file.external.url
@@ -526,7 +526,7 @@ export function getPropertyValue(
 
                 return url
             }
-            return null
+            return ""
         }
         case "phone_number": {
             return property.phone_number ?? ""

From 8742256f09f192ed6b9ab0e7f27cca411a2869c7 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:06:42 -0400
Subject: [PATCH 16/36] Move title field to first in list of properties

---
 plugins/notion/src/MapFields.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index 2acc5c84..076c991b 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -23,7 +23,13 @@ import {
 import { assert } from "./utils"
 
 function getSortedProperties(database: GetDatabaseResponse): NotionProperty[] {
-    return getNotionProperties(database).sort((propertyA, propertyB) => {
+    const properties = getNotionProperties(database)
+    return properties.sort((propertyA, propertyB) => {
+        // Put title field first
+        if (propertyA.type === "title") return -1
+        if (propertyB.type === "title") return 1
+        
+        // Then sort by supported status
         const a = isSupportedNotionProperty(propertyA) ? -1 : 0
         const b = isSupportedNotionProperty(propertyB) ? -1 : 0
         return a - b

From 1b8d219eeb06afa5d86196d45d44283d22938af2 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:07:56 -0400
Subject: [PATCH 17/36] Import missing number as 0

---
 plugins/notion/src/notion.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index d311cdf1..c943e52f 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -486,7 +486,7 @@ export function getPropertyValue(
             return richTextToPlainText(property.title)
         }
         case "number": {
-            return property.number
+            return property.number ?? 0
         }
         case "url": {
             return property.url ?? ""

From 6f4a57292ae73422b947863a622b828adc20c4d3 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:15:02 -0400
Subject: [PATCH 18/36] Add support for people fields

---
 plugins/notion/src/notion.ts | 44 ++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index c943e52f..b50cb574 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -198,6 +198,9 @@ export const supportedNotionPropertyTypes = [
     "relation",
     "phone_number",
     "unique_id",
+    "people",
+    "created_by",
+    "last_edited_by",
 ] satisfies ReadonlyArray<NotionProperty["type"]>
 
 type SupportedPropertyType = (typeof supportedNotionPropertyTypes)[number]
@@ -230,6 +233,9 @@ export const supportedCMSTypeByNotionPropertyType = {
     relation: ["multiCollectionReference"],
     phone_number: ["string"],
     unique_id: ["string", "number"],
+    people: ["string"],
+    created_by: ["string"],
+    last_edited_by: ["string"],
     "cover-image": ["image"],
 } satisfies Record<SupportedPropertyType | CustomPropertyType, ReadonlyArray<ManagedCollectionField["type"]>>
 
@@ -428,6 +434,33 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
+        case "people": {
+            assertFieldTypeMatchesPropertyType(property.type, fieldType)
+            return {
+                type: "string",
+                id: property.id,
+                name: property.name,
+                userEditable: false,
+            }
+        }
+        case "created_by": {
+            assertFieldTypeMatchesPropertyType(property.type, fieldType)
+            return {
+                type: "string",
+                id: property.id,
+                name: property.name,
+                userEditable: false,
+            }
+        }
+        case "last_edited_by": {
+            assertFieldTypeMatchesPropertyType(property.type, fieldType)
+            return {
+                type: "string",
+                id: property.id,
+                name: property.name,
+                userEditable: false,
+            }
+        }
         default: {
             assertNever(property)
         }
@@ -531,6 +564,17 @@ export function getPropertyValue(
         case "phone_number": {
             return property.phone_number ?? ""
         }
+        case "people": {
+            const firstUser = property.people[0]
+            if (!firstUser) return ""
+            return "name" in firstUser ? firstUser.name : ""
+        }
+        case "created_by": {
+            return "name" in property.created_by ? property.created_by.name : ""
+        }
+        case "last_edited_by": {
+            return "name" in property.last_edited_by ? property.last_edited_by.name : ""
+        }
     }
 }
 

From e471b70ca842ca1c9f36c2418cd7c1eaa12791f5 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:17:15 -0400
Subject: [PATCH 19/36] Disable field type dropdown when only 1 value

---
 plugins/notion/src/MapFields.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index 076c991b..ac1782e5 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -28,7 +28,7 @@ function getSortedProperties(database: GetDatabaseResponse): NotionProperty[] {
         // Put title field first
         if (propertyA.type === "title") return -1
         if (propertyB.type === "title") return 1
-        
+
         // Then sort by supported status
         const a = isSupportedNotionProperty(propertyA) ? -1 : 0
         const b = isSupportedNotionProperty(propertyB) ? -1 : 0
@@ -297,7 +297,7 @@ export function MapDatabaseFields({
                                     ></input>
                                     {isSupported && (
                                         <select
-                                            className="w-full"
+                                            className={classNames("w-full", fieldOptions?.length === 1 && "opacity-50")}
                                             onChange={event =>
                                                 handleFieldTypeChange(
                                                     property.id,
@@ -305,6 +305,7 @@ export function MapDatabaseFields({
                                                 )
                                             }
                                             value={fieldTypeByFieldId[property.id]}
+                                            disabled={fieldOptions?.length === 1}
                                         >
                                             {fieldOptions?.map(fieldOption => (
                                                 <option key={fieldOption} value={fieldOption}>

From 5890a28f1d77e9ca1fcc7261b801b5d12c8fff78 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:21:51 -0400
Subject: [PATCH 20/36] Fix typo in file name

---
 plugins/notion/src/MapFields.tsx                                | 2 +-
 .../components/{CheckboxTexfield.tsx => CheckboxTextfield.tsx}  | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename plugins/notion/src/components/{CheckboxTexfield.tsx => CheckboxTextfield.tsx} (100%)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index ac1782e5..3526bcc7 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -4,7 +4,7 @@ import classNames from "classnames"
 import { ManagedCollectionField } from "framer-plugin"
 import { Fragment, useMemo, useState } from "react"
 import { Button } from "./components/Button"
-import { CheckboxTextfield } from "./components/CheckboxTexfield"
+import { CheckboxTextfield } from "./components/CheckboxTextfield"
 import { IconChevron } from "./components/Icons"
 import {
     NotionProperty,
diff --git a/plugins/notion/src/components/CheckboxTexfield.tsx b/plugins/notion/src/components/CheckboxTextfield.tsx
similarity index 100%
rename from plugins/notion/src/components/CheckboxTexfield.tsx
rename to plugins/notion/src/components/CheckboxTextfield.tsx

From 101e90097c441f0d7f690621877d2f80be544d5f Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:24:10 -0400
Subject: [PATCH 21/36] User select none, non-draggable images

---
 plugins/notion/src/Authenticate.tsx   | 4 ++--
 plugins/notion/src/MapFields.tsx      | 2 +-
 plugins/notion/src/SelectDatabase.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/notion/src/Authenticate.tsx b/plugins/notion/src/Authenticate.tsx
index c09eda68..a6c041ba 100644
--- a/plugins/notion/src/Authenticate.tsx
+++ b/plugins/notion/src/Authenticate.tsx
@@ -60,8 +60,8 @@ export function Authentication({ onAuthenticated, context }: AuthenticationProps
             })
     }
     return (
-        <div className="w-full h-full flex flex-col items-center justify-center gap-[20px] pb-4 overflo">
-            <img src={loginIllustration} className="max-w-100% rounded-md flex-shrink-0 select-none pointer-events-none" />
+        <div className="w-full h-full flex flex-col items-center justify-center gap-[20px] pb-4 select-none">
+            <img src={loginIllustration} draggable={false} className="max-w-100% rounded-md flex-shrink-0 pointer-events-none" />
 
             <div className="flex flex-col items-center gap-2 flex-1 justify-center w-full">
                 {isLoading ? (
diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index 3526bcc7..5673e7b3 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -223,7 +223,7 @@ export function MapDatabaseFields({
     const title = plainTextTitle.trim() ? plainTextTitle : "Untitled"
 
     return (
-        <form onSubmit={handleSubmit} className="flex flex-col gap-2 flex-1">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-2 flex-1 select-none">
             <div className="tailwind-hell-escape-hatch-gradient-top" />
 
             <div className="h-[1px] border-b border-divider mb-2 sticky top-0" />
diff --git a/plugins/notion/src/SelectDatabase.tsx b/plugins/notion/src/SelectDatabase.tsx
index dab74764..a7a8f92c 100644
--- a/plugins/notion/src/SelectDatabase.tsx
+++ b/plugins/notion/src/SelectDatabase.tsx
@@ -67,8 +67,8 @@ export function SelectDatabase({ onDatabaseSelected }: SelectDatabaseProps) {
     const selectEnabled = !isLoadingOrFetching && Boolean(data && data.length > 0)
 
     return (
-        <form className="flex flex-col gap-[10px] w-full h-full" onSubmit={handleSubmit}>
-            <img src={notionConnectSrc} className="rounded-md" />
+        <form className="flex flex-col gap-[10px] w-full h-full select-none" onSubmit={handleSubmit}>
+            <img src={notionConnectSrc} draggable={false} className="rounded-md" />
 
             <p>
                 To manually connect a database, open it in Notion, click on the three dots icon in the top right corner,

From 6a036baacf838cf01b3181c5442fa293a60bf07f Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 13:36:54 -0400
Subject: [PATCH 22/36] Update to framer-plugin 3.1.0

---
 plugins/notion/package.json  | 4 ++--
 plugins/notion/src/notion.ts | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugins/notion/package.json b/plugins/notion/package.json
index bcd7e2c9..62f88a1a 100644
--- a/plugins/notion/package.json
+++ b/plugins/notion/package.json
@@ -15,7 +15,7 @@
         "@notionhq/client": "^2.2.15",
         "@tanstack/react-query": "^5.29.2",
         "classnames": "^2.5.1",
-        "framer-plugin": "^2.0.4",
+        "framer-plugin": "^3.1.0",
         "react": "^18",
         "react-dom": "^18",
         "react-error-boundary": "^4.0.13",
@@ -35,6 +35,6 @@
         "tailwindcss": "^3.4.3",
         "typescript": "^5.3.3",
         "vite": "^6",
-        "vite-plugin-framer": "^1.0.1"
+        "vite-plugin-framer": "^1.0.7"
     }
 }
diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index b50cb574..1da48111 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -669,19 +669,19 @@ async function processItem(
             })
         }
 
-        fieldData[field.id] = fieldValue
+        fieldData[field.id] = { type: field.type, value: fieldValue }
     }
 
     if (fieldsById.has(pageContentProperty.id) && item.id) {
         const contentHTML = await getPageBlocksAsRichText(item.id)
-        fieldData[pageContentProperty.id] = contentHTML
+        fieldData[pageContentProperty.id] = { type: "formattedText", value: contentHTML }
     }
 
     if (fieldsById.has(pageCoverImageProperty.id) && item.cover) {
         if (item.cover.type === "external") {
-            fieldData[pageCoverImageProperty.id] = item.cover.external.url
+            fieldData[pageCoverImageProperty.id] = { type: "image", value: item.cover.external.url }
         } else if (item.cover.type === "file") {
-            fieldData[pageCoverImageProperty.id] = item.cover.file.url
+            fieldData[pageCoverImageProperty.id] = { type: "image", value: item.cover.file.url }
         }
     }
 

From 5e24fe5ccdb5e845b60003952ff31b0c57ae847a Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 14:05:16 -0400
Subject: [PATCH 23/36] Removed the ability to import page content as string

---
 plugins/notion/src/notion.ts | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 1da48111..6aca726a 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -47,11 +47,10 @@ export type NotionProperty = GetDatabaseResponse["properties"][string]
 // synced with the CMS
 const pageContentId = "page-content"
 export const pageContentProperty: SupportedNotionProperty = {
-    type: "rich_text",
+    type: "page-content",
     id: pageContentId,
     name: "Content",
     description: "Page Content",
-    rich_text: {},
 }
 
 const pageCoverImageId = "page-cover"
@@ -204,7 +203,7 @@ export const supportedNotionPropertyTypes = [
 ] satisfies ReadonlyArray<NotionProperty["type"]>
 
 type SupportedPropertyType = (typeof supportedNotionPropertyTypes)[number]
-type CustomPropertyType = "cover-image"
+type CustomPropertyType = "cover-image" | "page-content"
 
 type SupportedNotionProperty =
     | Extract<NotionProperty, { type: SupportedPropertyType }>
@@ -213,7 +212,7 @@ type SupportedNotionProperty =
 export function isSupportedNotionProperty(
     property: NotionProperty | { type: CustomPropertyType }
 ): property is SupportedNotionProperty {
-    if (property.type === "cover-image") return true
+    if (property.type === "cover-image" || property.type === "page-content") return true
     return supportedNotionPropertyTypes.includes(property.type as SupportedPropertyType)
 }
 
@@ -237,6 +236,7 @@ export const supportedCMSTypeByNotionPropertyType = {
     created_by: ["string"],
     last_edited_by: ["string"],
     "cover-image": ["image"],
+    "page-content": ["formattedText"],
 } satisfies Record<SupportedPropertyType | CustomPropertyType, ReadonlyArray<ManagedCollectionField["type"]>>
 
 function assertFieldTypeMatchesPropertyType<T extends SupportedPropertyType>(
@@ -425,8 +425,6 @@ export function getCollectionFieldForProperty<
             }
         }
         case "cover-image": {
-            assertFieldTypeMatchesPropertyType(property.type, fieldType)
-
             return {
                 type: "image",
                 id: property.id,
@@ -434,6 +432,14 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
+        case "page-content": {
+            return {
+                type: "formattedText",
+                id: property.id,
+                name: property.name,
+                userEditable: false,
+            }
+        }
         case "people": {
             assertFieldTypeMatchesPropertyType(property.type, fieldType)
             return {
@@ -732,7 +738,9 @@ async function processAllItems(
 
             if (isUnchangedSinceLastSync(item.last_edited_time, lastSyncedDate)) {
                 status.info.push({
-                    message: `Skipping. last updated: ${formatDate(item.last_edited_time)}, last synced: ${formatDate(lastSyncedDate!)}`,
+                    message: `Skipping. last updated: ${formatDate(item.last_edited_time)}, last synced: ${formatDate(
+                        lastSyncedDate!
+                    )}`,
                     url: item.url,
                 })
                 return null

From 58e5cf8bd83f022c8273aabf6083141ea4901c1f Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 14:40:33 -0400
Subject: [PATCH 24/36] Add Notion theme colors, primary log in button

---
 plugins/notion/src/App.css          | 16 ++++++++++++++++
 plugins/notion/src/Authenticate.tsx |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/plugins/notion/src/App.css b/plugins/notion/src/App.css
index c68fadf8..b2a88835 100644
--- a/plugins/notion/src/App.css
+++ b/plugins/notion/src/App.css
@@ -9,6 +9,22 @@ main {
     gap: 15px;
 }
 
+[data-framer-theme="light"] #root {
+    --framer-color-tint: #000;
+    --framer-color-tint-dark: #262626;
+}
+
+[data-framer-theme="dark"] #root {
+    --framer-color-tint: #fff;
+    --framer-color-tint-dark: #e3e3e3;
+    --framer-color-text-reversed: #000;
+}
+
+[data-framer-theme="dark"] input[type="checkbox"]:checked {
+    /* Copy of the checkbox SVG from the built-in Framer CSS, but with a black stroke color instead of white. */
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PHBhdGggZD0iTTMgNmwyIDIgNC00IiBmaWxsPSJ0cmFuc3BhcmVudCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSI4LjUiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIj48L3BhdGg+PHBhdGggZD0iTTMgNmw2IDAiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSI2IiBzdHJva2UtZGFzaG9mZnNldD0iNiIgPjwvcGF0aD48L3N2Zz4=) !important;
+}
+
 /* I know this is not good but I didn't have time to fight with Tailwind. */
 [data-framer-theme="light"] .tailwind-hell-escape-hatch-checkbox[type="checkbox"]:not(:checked) {
     background: rgba(0, 0, 0, 0.1);
diff --git a/plugins/notion/src/Authenticate.tsx b/plugins/notion/src/Authenticate.tsx
index a6c041ba..054df364 100644
--- a/plugins/notion/src/Authenticate.tsx
+++ b/plugins/notion/src/Authenticate.tsx
@@ -77,7 +77,7 @@ export function Authentication({ onAuthenticated, context }: AuthenticationProps
                 )}
             </div>
 
-            <Button onClick={handleAuth} isLoading={isLoading} disabled={isLoading}>
+            <Button onClick={handleAuth} isLoading={isLoading} disabled={isLoading} variant="primary">
                 Log In
             </Button>
         </div>

From cb74792ec8006a3b6ed2407c298cc053c810140d Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 14:47:26 -0400
Subject: [PATCH 25/36] Combine identical property type switch cases

---
 plugins/notion/src/notion.ts | 69 +++++-------------------------------
 1 file changed, 9 insertions(+), 60 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 6aca726a..71511442 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -263,7 +263,8 @@ export function getCollectionFieldForProperty<
 ): ManagedCollectionField | null {
     switch (property.type) {
         case "email":
-        case "rich_text": {
+        case "rich_text":
+        case "unique_id": {
             assertFieldTypeMatchesPropertyType(property.type, fieldType)
 
             return {
@@ -274,7 +275,8 @@ export function getCollectionFieldForProperty<
             }
         }
         case "date":
-        case "last_edited_time": {
+        case "last_edited_time":
+        case "created_time": {
             assertFieldTypeMatchesPropertyType(property.type, fieldType)
 
             return {
@@ -318,17 +320,11 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
-        case "created_time": {
-            assertFieldTypeMatchesPropertyType(property.type, fieldType)
-
-            return {
-                type: "date",
-                id: property.id,
-                name: property.name,
-                userEditable: false,
-            }
-        }
-        case "title": {
+        case "title":
+        case "phone_number":
+        case "people":
+        case "created_by":
+        case "last_edited_by": {
             assertFieldTypeMatchesPropertyType(property.type, fieldType)
 
             return {
@@ -404,26 +400,6 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
-        case "phone_number": {
-            assertFieldTypeMatchesPropertyType(property.type, fieldType)
-
-            return {
-                type: "string",
-                id: property.id,
-                name: property.name,
-                userEditable: false,
-            }
-        }
-        case "unique_id": {
-            assertFieldTypeMatchesPropertyType(property.type, fieldType)
-
-            return {
-                type: fieldType,
-                id: property.id,
-                name: property.name,
-                userEditable: false,
-            }
-        }
         case "cover-image": {
             return {
                 type: "image",
@@ -440,33 +416,6 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
-        case "people": {
-            assertFieldTypeMatchesPropertyType(property.type, fieldType)
-            return {
-                type: "string",
-                id: property.id,
-                name: property.name,
-                userEditable: false,
-            }
-        }
-        case "created_by": {
-            assertFieldTypeMatchesPropertyType(property.type, fieldType)
-            return {
-                type: "string",
-                id: property.id,
-                name: property.name,
-                userEditable: false,
-            }
-        }
-        case "last_edited_by": {
-            assertFieldTypeMatchesPropertyType(property.type, fieldType)
-            return {
-                type: "string",
-                id: property.id,
-                name: property.name,
-                userEditable: false,
-            }
-        }
         default: {
             assertNever(property)
         }

From cd16304e016238c020754bd6275d13359c0d535d Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 14:56:03 -0400
Subject: [PATCH 26/36] Button pressed colors, spinner color, pointer cursor

---
 plugins/notion/src/App.css                       | 2 ++
 plugins/notion/src/MapFields.tsx                 | 7 +++++--
 plugins/notion/src/SelectDatabase.tsx            | 2 +-
 plugins/notion/src/components/spinner.module.css | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/plugins/notion/src/App.css b/plugins/notion/src/App.css
index b2a88835..ee3b44a4 100644
--- a/plugins/notion/src/App.css
+++ b/plugins/notion/src/App.css
@@ -12,11 +12,13 @@ main {
 [data-framer-theme="light"] #root {
     --framer-color-tint: #000;
     --framer-color-tint-dark: #262626;
+    --framer-color-tint-extra-dark: #333333;
 }
 
 [data-framer-theme="dark"] #root {
     --framer-color-tint: #fff;
     --framer-color-tint-dark: #e3e3e3;
+    --framer-color-tint-extra-dark: #c3c3c3;
     --framer-color-text-reversed: #000;
 }
 
diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index 5673e7b3..782a513f 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -242,7 +242,7 @@ export function MapDatabaseFields({
                         Slug Field
                     </label>
                     <select
-                        className="w-full"
+                        className="w-full cursor-pointer"
                         value={slugFieldId ?? ""}
                         onChange={e => setSlugFieldId(e.target.value)}
                         required
@@ -297,7 +297,10 @@ export function MapDatabaseFields({
                                     ></input>
                                     {isSupported && (
                                         <select
-                                            className={classNames("w-full", fieldOptions?.length === 1 && "opacity-50")}
+                                            className={classNames(
+                                                "w-full",
+                                                fieldOptions?.length === 1 ? "opacity-50" : "cursor-pointer"
+                                            )}
                                             onChange={event =>
                                                 handleFieldTypeChange(
                                                     property.id,
diff --git a/plugins/notion/src/SelectDatabase.tsx b/plugins/notion/src/SelectDatabase.tsx
index a7a8f92c..fb8b4ec9 100644
--- a/plugins/notion/src/SelectDatabase.tsx
+++ b/plugins/notion/src/SelectDatabase.tsx
@@ -80,7 +80,7 @@ export function SelectDatabase({ onDatabaseSelected }: SelectDatabaseProps) {
                     <select
                         value={selectedDatabase ?? ""}
                         onChange={event => setSelectedDatabase(event.target.value)}
-                        className="flex-1 shrink-1"
+                        className="flex-1 shrink-1 cursor-pointer"
                         disabled={!selectEnabled}
                     >
                         {isLoadingOrFetching && (
diff --git a/plugins/notion/src/components/spinner.module.css b/plugins/notion/src/components/spinner.module.css
index d97fdc1c..65dc6960 100644
--- a/plugins/notion/src/components/spinner.module.css
+++ b/plugins/notion/src/components/spinner.module.css
@@ -7,7 +7,7 @@
 }
 
 .lightStyle {
-    background-color: #fff;
+    background-color: var(--framer-color-text-reversed);
 }
 
 .darkStyle {

From 3799b645ff2d425e0d87d41acc0aa6daadda44da Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 15:53:13 -0400
Subject: [PATCH 27/36] Formula and rollup field, more slug types

---
 plugins/notion/src/notion.ts | 170 ++++++++++++++++++++++++++++++-----
 1 file changed, 149 insertions(+), 21 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 71511442..0e9d46db 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -46,7 +46,7 @@ export type NotionProperty = GetDatabaseResponse["properties"][string]
 // property so it displays in the list where you can configure properties to be
 // synced with the CMS
 const pageContentId = "page-content"
-export const pageContentProperty: SupportedNotionProperty = {
+const pageContentProperty: SupportedNotionProperty = {
     type: "page-content",
     id: pageContentId,
     name: "Content",
@@ -54,14 +54,26 @@ export const pageContentProperty: SupportedNotionProperty = {
 }
 
 const pageCoverImageId = "page-cover"
-export const pageCoverImageProperty: SupportedNotionProperty = {
+const pageCoverImageProperty: SupportedNotionProperty = {
     type: "cover-image",
     id: pageCoverImageId,
     name: "Cover Image",
     description: "Page Cover Image",
 }
 
-export const imageFileExtensions = ["jpg", "jpeg", "png", "gif", "apng", "webp", "svg"]
+const imageFileExtensions = ["jpg", "jpeg", "png", "gif", "apng", "webp", "svg"]
+
+const defaultValueForFieldType: Record<ManagedCollectionField["type"], unknown> = {
+    string: "",
+    number: 0,
+    boolean: false,
+    date: null,
+    formattedText: "",
+    image: null,
+    link: "",
+    file: null,
+    enum: null,
+}
 
 // Naive implementation to be authenticated, a token could be expired.
 // For simplicity we just close the plugin and clear storage in that case.
@@ -123,7 +135,7 @@ export function initNotionClient() {
 }
 
 // The order in which we display slug fields
-const preferedSlugFieldOrder: NotionProperty["type"][] = ["title", "rich_text"]
+const preferedSlugFieldOrder: NotionProperty["type"][] = ["title", "rich_text", "unique_id", "formula", "rollup"]
 
 /**
  * Given a Notion Database returns a list of possible fields that can be used as
@@ -136,11 +148,8 @@ export function getPossibleSlugFields(database: GetDatabaseResponse) {
         const property = database.properties[key]
         assert(property)
 
-        switch (property.type) {
-            case "title":
-            case "rich_text":
-                options.push(property)
-                break
+        if (preferedSlugFieldOrder.includes(property.type)) {
+            options.push(property)
         }
     }
 
@@ -200,6 +209,8 @@ export const supportedNotionPropertyTypes = [
     "people",
     "created_by",
     "last_edited_by",
+    "formula",
+    "rollup",
 ] satisfies ReadonlyArray<NotionProperty["type"]>
 
 type SupportedPropertyType = (typeof supportedNotionPropertyTypes)[number]
@@ -226,7 +237,7 @@ export const supportedCMSTypeByNotionPropertyType = {
     last_edited_time: ["date"],
     select: ["enum"],
     status: ["enum"],
-    url: ["link"],
+    url: ["link", "string"],
     email: ["string", "formattedText"],
     files: ["file", "image"],
     relation: ["multiCollectionReference"],
@@ -235,6 +246,8 @@ export const supportedCMSTypeByNotionPropertyType = {
     people: ["string"],
     created_by: ["string"],
     last_edited_by: ["string"],
+    formula: ["string", "number", "boolean", "date", "link", "image", "file"],
+    rollup: ["string", "number", "boolean", "date", "link", "image", "file"],
     "cover-image": ["image"],
     "page-content": ["formattedText"],
 } satisfies Record<SupportedPropertyType | CustomPropertyType, ReadonlyArray<ManagedCollectionField["type"]>>
@@ -264,7 +277,8 @@ export function getCollectionFieldForProperty<
     switch (property.type) {
         case "email":
         case "rich_text":
-        case "unique_id": {
+        case "unique_id":
+        case "url": {
             assertFieldTypeMatchesPropertyType(property.type, fieldType)
 
             return {
@@ -274,6 +288,27 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
+        case "formula":
+        case "rollup": {
+            assertFieldTypeMatchesPropertyType(property.type, fieldType)
+
+            if (fieldType === "file") {
+                return {
+                    type: fieldType,
+                    id: property.id,
+                    name: property.name,
+                    userEditable: false,
+                    allowedFileTypes: [],
+                }
+            }
+
+            return {
+                type: fieldType,
+                id: property.id,
+                name: property.name,
+                userEditable: false,
+            }
+        }
         case "date":
         case "last_edited_time":
         case "created_time": {
@@ -350,16 +385,6 @@ export function getCollectionFieldForProperty<
                 userEditable: false,
             }
         }
-        case "url": {
-            assertFieldTypeMatchesPropertyType(property.type, fieldType)
-
-            return {
-                type: "link",
-                id: property.id,
-                name: property.name,
-                userEditable: false,
-            }
-        }
         case "files": {
             assertFieldTypeMatchesPropertyType(property.type, fieldType)
 
@@ -530,7 +555,89 @@ export function getPropertyValue(
         case "last_edited_by": {
             return "name" in property.last_edited_by ? property.last_edited_by.name : ""
         }
+
+        case "formula": {
+            const value = property.formula
+
+            if (!value) {
+                return defaultValueForFieldType[fieldType] ?? null
+            }
+
+            switch (fieldType) {
+                case "string":
+                    return String(value[value.type] ?? "")
+                case "link":
+                case "image":
+                case "file":
+                    const url = String(value[value.type] ?? "")
+                    if (url && isValidUrl(url)) {
+                        return url
+                    }
+                    return ""
+                case "number":
+                    return Number(value[value.type] ?? 0)
+                case "date":
+                    return value.type == "date" ? formatDateString(value.date) : null
+                case "boolean":
+                    return value.type == "boolean" ? value.boolean : Boolean(value[value.type])
+                default:
+                    return defaultValueForFieldType[fieldType] ?? null
+            }
+        }
+        case "rollup": {
+            const value = property.rollup
+
+            let result = null
+
+            switch (value?.type) {
+                case "array":
+                    const item = value.array[0]
+                    result = item ? getPropertyValue(item, { fieldType }) : defaultValueForFieldType[fieldType] ?? null
+                    break
+                case "number":
+                    result = value.number ?? 0
+                    break
+                case "date":
+                    result = formatDateString(value.date)
+                    break
+                default:
+                    result = defaultValueForFieldType[fieldType] ?? null
+                    break
+            }
+
+            switch (fieldType) {
+                case "string":
+                case "date":
+                    if (typeof result !== "string") {
+                        result = ""
+                    }
+                    break
+                case "image":
+                case "link":
+                case "file":
+                    if (!result || !isValidUrl(result)) {
+                        result = ""
+                    }
+                    break
+                case "number":
+                    if (typeof result !== "number") {
+                        result = 0
+                    }
+                    break
+                case "boolean":
+                    if (typeof result !== "boolean") {
+                        result = false
+                    }
+                    break
+                default:
+                    break
+            }
+
+            return result
+        }
     }
+
+    return null
 }
 
 export interface SynchronizeProgress {
@@ -1033,3 +1140,24 @@ export async function* iteratePaginatedAPI<Args extends PaginatedArgs, Item>(
         nextCursor = response.next_cursor
     } while (nextCursor)
 }
+
+function formatDateString(value: string) {
+    if (!value) return null
+
+    // Remove time from ISO string to prevent time zone issues when importing to Framer.
+    const date = new Date(value)
+
+    // Set the time to midnight (00:00:00.000)
+    date.setHours(0, 0, 0, 0)
+
+    return date.toISOString()
+}
+
+function isValidUrl(url: string): boolean {
+    try {
+        new URL(url)
+        return true
+    } catch {
+        return false
+    }
+}

From 7998b9be58059464c62d56d1e09d5ff8b7f77f04 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 15:53:29 -0400
Subject: [PATCH 28/36] Add pointer events none to overflow gradients

---
 plugins/notion/src/MapFields.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index 782a513f..a8a66236 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -224,7 +224,7 @@ export function MapDatabaseFields({
 
     return (
         <form onSubmit={handleSubmit} className="flex flex-col gap-2 flex-1 select-none">
-            <div className="tailwind-hell-escape-hatch-gradient-top" />
+            <div className="tailwind-hell-escape-hatch-gradient-top pointer-events-none" />
 
             <div className="h-[1px] border-b border-divider mb-2 sticky top-0" />
 
@@ -325,7 +325,7 @@ export function MapDatabaseFields({
             </div>
 
             <div className="left-0 bottom-0 pb-[15px] w-full flex justify-between sticky bg-primary pt-4 border-t border-divider border-opacity-20 items-center max-w-full">
-                <div className="tailwind-hell-escape-hatch-gradient-bottom" />
+                <div className="tailwind-hell-escape-hatch-gradient-bottom pointer-events-none" />
 
                 <Button variant="primary" isLoading={isLoading} disabled={!slugFieldId} className="w-full">
                     Import from {title}

From e783e6b64e73f94eb455fbb22b4c5b0cae1d503b Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 16:27:18 -0400
Subject: [PATCH 29/36] Allow syncing select fields with no value

---
 plugins/notion/src/notion.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 0e9d46db..ba1416b4 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -75,6 +75,8 @@ const defaultValueForFieldType: Record<ManagedCollectionField["type"], unknown>
     enum: null,
 }
 
+const noneOptionId = "__NONE__"
+
 // Naive implementation to be authenticated, a token could be expired.
 // For simplicity we just close the plugin and clear storage in that case.
 export function isAuthenticated() {
@@ -326,10 +328,16 @@ export function getCollectionFieldForProperty<
 
             return {
                 type: "enum",
-                cases: property.select.options.map(option => ({
-                    id: option.id,
-                    name: option.name,
-                })),
+                cases: [
+                    {
+                        id: noneOptionId,
+                        name: "",
+                    },
+                    ...property.select.options.map(option => ({
+                        id: option.id,
+                        name: option.name,
+                    })),
+                ],
                 id: property.id,
                 name: property.name,
                 userEditable: false,
@@ -482,7 +490,7 @@ export function getPropertyValue(
             return property.email ?? ""
         }
         case "select": {
-            if (!property.select) return null
+            if (!property.select) return noneOptionId
 
             return property.select.id
         }

From 804417f58e95bfe73a37864a416e461cfbfe3baf Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Sat, 3 May 2025 17:48:49 -0400
Subject: [PATCH 30/36] Improve field type selector

---
 plugins/notion/src/MapFields.tsx | 45 ++++++++++++++++----------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index a8a66236..cb354edb 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -295,28 +295,29 @@ export function MapDatabaseFields({
                                             handleFieldNameChange(property.id, e.target.value)
                                         }}
                                     ></input>
-                                    {isSupported && (
-                                        <select
-                                            className={classNames(
-                                                "w-full",
-                                                fieldOptions?.length === 1 ? "opacity-50" : "cursor-pointer"
-                                            )}
-                                            onChange={event =>
-                                                handleFieldTypeChange(
-                                                    property.id,
-                                                    event.target.value as ManagedCollectionField["type"]
-                                                )
-                                            }
-                                            value={fieldTypeByFieldId[property.id]}
-                                            disabled={fieldOptions?.length === 1}
-                                        >
-                                            {fieldOptions?.map(fieldOption => (
-                                                <option key={fieldOption} value={fieldOption}>
-                                                    {labelByFieldTypeOption[fieldOption]}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    )}
+                                    {isSupported &&
+                                        (fieldOptions?.length === 1 ? (
+                                            <div className="w-full self-stretch bg-tertiary text-primary flex flex-col justify-center rounded-lg px-2">
+                                                {labelByFieldTypeOption[fieldOptions[0]]}
+                                            </div>
+                                        ) : (
+                                            <select
+                                                className="w-full cursor-pointer"
+                                                onChange={event =>
+                                                    handleFieldTypeChange(
+                                                        property.id,
+                                                        event.target.value as ManagedCollectionField["type"]
+                                                    )
+                                                }
+                                                value={fieldTypeByFieldId[property.id]}
+                                            >
+                                                {fieldOptions?.map(fieldOption => (
+                                                    <option key={fieldOption} value={fieldOption}>
+                                                        {labelByFieldTypeOption[fieldOption]}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        ))}
                                 </Fragment>
                             )
                         })}

From 3e6614491588fdce66c2d489cd40342f3e17c03d Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Mon, 5 May 2025 06:23:55 -0400
Subject: [PATCH 31/36] More URL, email and phone number field types

---
 plugins/notion/src/notion.ts | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index ba1416b4..74f73914 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -62,6 +62,8 @@ const pageCoverImageProperty: SupportedNotionProperty = {
 }
 
 const imageFileExtensions = ["jpg", "jpeg", "png", "gif", "apng", "webp", "svg"]
+const EMAIL_REGEX = /\S[^\s@]*@\S+\.\S+/
+const PHONE_REGEX = /^(\+?[0-9])[0-9]{7,14}$/
 
 const defaultValueForFieldType: Record<ManagedCollectionField["type"], unknown> = {
     string: "",
@@ -239,11 +241,11 @@ export const supportedCMSTypeByNotionPropertyType = {
     last_edited_time: ["date"],
     select: ["enum"],
     status: ["enum"],
-    url: ["link", "string"],
-    email: ["string", "formattedText"],
+    url: ["link", "image", "file", "string"],
+    email: ["string", "formattedText", "link"],
     files: ["file", "image"],
     relation: ["multiCollectionReference"],
-    phone_number: ["string"],
+    phone_number: ["string", "link"],
     unique_id: ["string", "number"],
     people: ["string"],
     created_by: ["string"],
@@ -270,7 +272,7 @@ function assertFieldTypeMatchesPropertyType<T extends SupportedPropertyType>(
  * That maps the Notion Property to the Framer CMS collection property type
  */
 export function getCollectionFieldForProperty<
-    TProperty extends Extract<NotionProperty, { type: SupportedPropertyType | CustomPropertyType }>
+    TProperty extends Extract<NotionProperty, { type: SupportedPropertyType | CustomPropertyType }>,
 >(
     property: TProperty,
     fieldType: ManagedCollectionField["type"],
@@ -485,6 +487,8 @@ export function getPropertyValue(
         case "email": {
             if (supportsHtml) {
                 return `<p>${property.email ?? ""}</p>`
+            } else if (fieldType === "link" && EMAIL_REGEX.test(property.email ?? "")) {
+                return `mailto:${property.email}`
             }
 
             return property.email ?? ""
@@ -510,7 +514,16 @@ export function getPropertyValue(
             return property.number ?? 0
         }
         case "url": {
-            return property.url ?? ""
+            const value = property.url ?? ""
+            switch (fieldType) {
+                case "link":
+                case "file":
+                    return isValidUrl(value) ? value : ""
+                case "image":
+                    return imageFileExtensions.some(ext => value.toLowerCase().endsWith(ext)) ? value : ""
+                default:
+                    return value
+            }
         }
         case "unique_id": {
             if (fieldType === "string") {
@@ -550,6 +563,10 @@ export function getPropertyValue(
             return ""
         }
         case "phone_number": {
+            if (fieldType === "link" && PHONE_REGEX.test(property.phone_number ?? "")) {
+                return `tel:${property.phone_number}`
+            }
+
             return property.phone_number ?? ""
         }
         case "people": {
@@ -600,7 +617,9 @@ export function getPropertyValue(
             switch (value?.type) {
                 case "array":
                     const item = value.array[0]
-                    result = item ? getPropertyValue(item, { fieldType }) : defaultValueForFieldType[fieldType] ?? null
+                    result = item
+                        ? getPropertyValue(item, { fieldType })
+                        : (defaultValueForFieldType[fieldType] ?? null)
                     break
                 case "number":
                     result = value.number ?? 0

From b318f441b432e2a82c372b304d97924a88fe6c0c Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Mon, 5 May 2025 06:26:41 -0400
Subject: [PATCH 32/36] Improve image URL validation

---
 plugins/notion/src/notion.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 74f73914..1777978f 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -520,7 +520,7 @@ export function getPropertyValue(
                 case "file":
                     return isValidUrl(value) ? value : ""
                 case "image":
-                    return imageFileExtensions.some(ext => value.toLowerCase().endsWith(ext)) ? value : ""
+                    return isImageFileUrl(value) ? value : ""
                 default:
                     return value
             }
@@ -553,7 +553,7 @@ export function getPropertyValue(
                 if (!url) continue
 
                 if (fieldType === "image") {
-                    if (!imageFileExtensions.some(ext => url.toLowerCase().endsWith(ext))) {
+                    if (!isImageFileUrl(url)) {
                         continue
                     }
                 }
@@ -1181,6 +1181,8 @@ function formatDateString(value: string) {
 }
 
 function isValidUrl(url: string): boolean {
+    if (!url) return false
+
     try {
         new URL(url)
         return true
@@ -1188,3 +1190,11 @@ function isValidUrl(url: string): boolean {
         return false
     }
 }
+
+function isImageFileUrl(url: string): boolean {
+    if (!isValidUrl(url)) return false
+
+    // Remove URL parameters by taking everything before '?'
+    const urlWithoutParams = url.split("?")[0].toLowerCase()
+    return imageFileExtensions.some(ext => urlWithoutParams.endsWith(ext))
+}

From 7e9c0fd64afbdda01faadc7545c0ccfb67486ea6 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Mon, 5 May 2025 07:04:35 -0400
Subject: [PATCH 33/36] Allow syncing relation as a single reference field

---
 plugins/notion/src/notion.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index 1777978f..ddd1de1f 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -244,7 +244,7 @@ export const supportedCMSTypeByNotionPropertyType = {
     url: ["link", "image", "file", "string"],
     email: ["string", "formattedText", "link"],
     files: ["file", "image"],
-    relation: ["multiCollectionReference"],
+    relation: ["multiCollectionReference", "collectionReference"],
     phone_number: ["string", "link"],
     unique_id: ["string", "number"],
     people: ["string"],
@@ -428,7 +428,7 @@ export function getCollectionFieldForProperty<
             }
 
             return {
-                type: "multiCollectionReference",
+                type: fieldType,
                 id: property.id,
                 name: property.name,
                 collectionId: collectionId,
@@ -538,6 +538,10 @@ export function getPropertyValue(
             return property.date?.start
         }
         case "relation": {
+            if (fieldType === "collectionReference") {
+                return property.relation[0]?.id ?? null
+            }
+
             return property.relation.map(({ id }) => id)
         }
         case "files": {

From b34a2196634076f5fb1762ba730fee8dedb85a06 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Mon, 5 May 2025 07:19:47 -0400
Subject: [PATCH 34/36] Return first enum case when select is empty

---
 plugins/notion/src/notion.ts | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index ddd1de1f..cbe83ced 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -330,16 +330,10 @@ export function getCollectionFieldForProperty<
 
             return {
                 type: "enum",
-                cases: [
-                    {
-                        id: noneOptionId,
-                        name: "",
-                    },
-                    ...property.select.options.map(option => ({
-                        id: option.id,
-                        name: option.name,
-                    })),
-                ],
+                cases: property.select.options.map(option => ({
+                    id: option.id,
+                    name: option.name,
+                })),
                 id: property.id,
                 name: property.name,
                 userEditable: false,
@@ -463,7 +457,7 @@ export function richTextToPlainText(richText: RichTextItemResponse[]) {
 
 export function getPropertyValue(
     property: PageObjectResponse["properties"][string],
-    { fieldType }: { fieldType: string }
+    { fieldType, field }: { fieldType: string; field?: ManagedCollectionField }
 ): unknown | undefined {
     const supportsHtml = fieldType === "formattedText"
 
@@ -494,12 +488,16 @@ export function getPropertyValue(
             return property.email ?? ""
         }
         case "select": {
-            if (!property.select) return noneOptionId
+            if (!property.select) {
+                return field?.cases[0].id ?? null
+            }
 
             return property.select.id
         }
         case "status": {
-            if (!property.status) return null
+            if (!property.status) {
+                return field?.cases[0].id ?? null
+            }
 
             return property.status.id
         }
@@ -622,7 +620,7 @@ export function getPropertyValue(
                 case "array":
                     const item = value.array[0]
                     result = item
-                        ? getPropertyValue(item, { fieldType })
+                        ? getPropertyValue(item, { fieldType, field })
                         : (defaultValueForFieldType[fieldType] ?? null)
                     break
                 case "number":
@@ -738,7 +736,7 @@ async function processItem(
         assert(property)
 
         if (property.id === slugFieldId) {
-            const resolvedSlug = getPropertyValue(property, { fieldType: "string" })
+            const resolvedSlug = getPropertyValue(property, { fieldType: "string", field: fieldsById.get(property.id) })
             if (!resolvedSlug || typeof resolvedSlug !== "string") {
                 continue
             }
@@ -753,7 +751,7 @@ async function processItem(
             continue
         }
 
-        const fieldValue = getPropertyValue(property, { fieldType: field.type })
+        const fieldValue = getPropertyValue(property, { fieldType: field.type, field })
         if (fieldValue === null || fieldValue === undefined) {
             status.warnings.push({
                 url: item.url,

From b6802d43799909db2ec2059cf378d9284bd27571 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Mon, 5 May 2025 07:35:13 -0400
Subject: [PATCH 35/36] Fix email and phone number link validation

---
 plugins/notion/src/notion.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index cbe83ced..968c2373 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -481,8 +481,8 @@ export function getPropertyValue(
         case "email": {
             if (supportsHtml) {
                 return `<p>${property.email ?? ""}</p>`
-            } else if (fieldType === "link" && EMAIL_REGEX.test(property.email ?? "")) {
-                return `mailto:${property.email}`
+            } else if (fieldType === "link") {
+                return EMAIL_REGEX.test(property.email ?? "") ? `mailto:${property.email}` : ""
             }
 
             return property.email ?? ""
@@ -565,8 +565,8 @@ export function getPropertyValue(
             return ""
         }
         case "phone_number": {
-            if (fieldType === "link" && PHONE_REGEX.test(property.phone_number ?? "")) {
-                return `tel:${property.phone_number}`
+            if (fieldType === "link") {
+                return PHONE_REGEX.test(property.phone_number ?? "") ? `tel:${property.phone_number}` : ""
             }
 
             return property.phone_number ?? ""

From 2b28fba69e9cd60a8dbbc3883685b973c0431550 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Mon, 5 May 2025 07:38:10 -0400
Subject: [PATCH 36/36] Consistent padding in map fields UI

---
 plugins/notion/src/MapFields.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/notion/src/MapFields.tsx b/plugins/notion/src/MapFields.tsx
index cb354edb..a6a4cc79 100644
--- a/plugins/notion/src/MapFields.tsx
+++ b/plugins/notion/src/MapFields.tsx
@@ -290,19 +290,19 @@ export function MapDatabaseFields({
                                         className={classNames("w-full", !isSupported && "opacity-50 col-span-2")}
                                         disabled={!isSupported || disabledFieldIds.has(property.id)}
                                         placeholder={property.name}
-                                        value={isSupported ? fieldNameOverrides[property.id] ?? "" : "Unsupported"}
+                                        value={isSupported ? (fieldNameOverrides[property.id] ?? "") : "Unsupported"}
                                         onChange={e => {
                                             handleFieldNameChange(property.id, e.target.value)
                                         }}
                                     ></input>
                                     {isSupported &&
                                         (fieldOptions?.length === 1 ? (
-                                            <div className="w-full self-stretch bg-tertiary text-primary flex flex-col justify-center rounded-lg px-2">
+                                            <div className="w-full self-stretch bg-tertiary text-primary flex flex-col justify-center rounded-lg px-2.5">
                                                 {labelByFieldTypeOption[fieldOptions[0]]}
                                             </div>
                                         ) : (
                                             <select
-                                                className="w-full cursor-pointer"
+                                                className="w-full cursor-pointer px-2.5"
                                                 onChange={event =>
                                                     handleFieldTypeChange(
                                                         property.id,