Notion Property
Collection Field
-
-
-
-
-
-
{fieldConfig.map(fieldConfig => {
const isUnsupported = !fieldConfig.field
diff --git a/plugins/notion/src/main.tsx b/plugins/notion/src/main.tsx
index a5fd0485..a806c276 100644
--- a/plugins/notion/src/main.tsx
+++ b/plugins/notion/src/main.tsx
@@ -61,7 +61,7 @@ async function runPlugin() {
const pluginContext = await getPluginContext()
const mode = framer.mode
- if (mode === "syncCollection" && shouldSyncImmediately(pluginContext)) {
+ if (mode === "syncManagedCollection" && shouldSyncImmediately(pluginContext)) {
assert(pluginContext.slugFieldId)
const result = await synchronizeDatabase(pluginContext.database, {
diff --git a/plugins/notion/src/notion.ts b/plugins/notion/src/notion.ts
index aeb037d4..2869086a 100644
--- a/plugins/notion/src/notion.ts
+++ b/plugins/notion/src/notion.ts
@@ -10,7 +10,7 @@ import {
import pLimit from "p-limit"
import { GetDatabaseResponse, PageObjectResponse, RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints"
import { assert, formatDate, isDefined, isString, slugify } from "./utils"
-import { Collection, CollectionField, CollectionItem, framer } from "framer-plugin"
+import { CollectionField, CollectionItemData, framer, ManagedCollection } from "framer-plugin"
import { useMutation, useQuery } from "@tanstack/react-query"
import { blocksToHtml, richTextToHTML } from "./blocksToHTML"
@@ -203,8 +203,11 @@ export function getCollectionFieldForProperty(property: NotionProperty): Collect
}
}
case "title":
- // The "title" field is required in Notion and is always used to set the "title" on the CMS item.
- return null
+ return {
+ type: "string",
+ id: property.id,
+ name: property.name,
+ }
case "multi_select":
default: {
// More Field types can be added here
@@ -306,9 +309,8 @@ async function processItem(
status: SyncStatus,
unsyncedItemIds: Set
,
lastSyncedTime: string | null
-): Promise {
+): Promise {
let slugValue: null | string = null
- let titleValue: null | string = null
const fieldData: Record = {}
@@ -329,15 +331,6 @@ async function processItem(
const property = item.properties[key]
assert(property)
- if (property.type === "title") {
- const resolvedTitle = getPropertyValue(property, { supportsHtml: false })
- if (!resolvedTitle || typeof resolvedTitle !== "string") {
- continue
- }
-
- titleValue = resolvedTitle
- }
-
if (property.id === slugFieldId) {
const resolvedSlug = getPropertyValue(property, { supportsHtml: false })
if (!resolvedSlug || typeof resolvedSlug !== "string") {
@@ -371,7 +364,7 @@ async function processItem(
fieldData[pageContentField.id] = contentHTML
}
- if (!slugValue || !titleValue) {
+ if (!slugValue) {
status.warnings.push({
url: item.url,
message: "Slug or Title is missing. Skipping item.",
@@ -383,7 +376,6 @@ async function processItem(
id: item.id,
fieldData,
slug: slugValue,
- title: titleValue,
}
}
@@ -423,7 +415,7 @@ export async function synchronizeDatabase(
assert(isFullDatabase(database))
assert(notion)
- const collection = await framer.getCollection()
+ const collection = await framer.getManagedCollection()
await collection.setFields(fields)
const fieldsById = new Map()
@@ -520,14 +512,14 @@ export function useDatabasesQuery() {
export interface PluginContextNew {
type: "new"
- collection: Collection
+ collection: ManagedCollection
isAuthenticated: boolean
}
export interface PluginContextUpdate {
type: "update"
database: GetDatabaseResponse
- collection: Collection
+ collection: ManagedCollection
collectionFields: CollectionField[]
lastSyncedTime: string
hasChangedFields: boolean
@@ -570,8 +562,6 @@ function getSuggestedFieldsForDatabase(database: GetDatabaseResponse, ignoredFie
// These fields were ignored by the user
if (ignoredFieldIds.includes(property.id)) continue
- if (property.type === "title") continue
-
const field = getCollectionFieldForProperty(property)
if (field) {
fields.push(field)
@@ -582,7 +572,7 @@ function getSuggestedFieldsForDatabase(database: GetDatabaseResponse, ignoredFie
}
export async function getPluginContext(): Promise {
- const collection = await framer.getCollection()
+ const collection = await framer.getManagedCollection()
const collectionFields = await collection.getFields()
const databaseId = await collection.getPluginData(pluginDatabaseIdKey)
const hasAuthToken = isAuthenticated()
diff --git a/plugins/phosphor/framer.json b/plugins/phosphor/framer.json
index 743fe3e8..a188ce70 100644
--- a/plugins/phosphor/framer.json
+++ b/plugins/phosphor/framer.json
@@ -1,6 +1,6 @@
{
"id": "XJovOL",
"name": "Phosphor",
- "modes": ["default"],
+ "modes": ["canvas"],
"icon": "/PhosphorIcons.png"
}
diff --git a/plugins/phosphor/package.json b/plugins/phosphor/package.json
index c14a17f7..193e464a 100644
--- a/plugins/phosphor/package.json
+++ b/plugins/phosphor/package.json
@@ -14,7 +14,7 @@
"dependencies": {
"@phosphor-icons/core": "^2.0.8",
"@phosphor-icons/react": "^2.0.15",
- "framer-plugin": "^0.2.0",
+ "framer-plugin": "^0.3.1",
"fuse.js": "^7.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/plugins/photobooth/framer.json b/plugins/photobooth/framer.json
index e8b007e5..51b7c974 100644
--- a/plugins/photobooth/framer.json
+++ b/plugins/photobooth/framer.json
@@ -1,6 +1,6 @@
{
"id": "T24Lew",
"name": "Photobooth",
- "modes": ["default", "image"],
+ "modes": ["canvas", "image"],
"icon": "/Photobooth.png"
}
diff --git a/plugins/photobooth/package.json b/plugins/photobooth/package.json
index 5273b46f..86945089 100644
--- a/plugins/photobooth/package.json
+++ b/plugins/photobooth/package.json
@@ -14,7 +14,7 @@
"dependencies": {
"base64-arraybuffer": "^1.0.2",
"framer-motion": "^11.0.8",
- "framer-plugin": "^0.2.0",
+ "framer-plugin": "^0.3.1",
"react": "^18",
"react-dom": "^18",
"react-webcam": "^7.2.0",
diff --git a/plugins/pong/framer.json b/plugins/pong/framer.json
index 02640462..9e127ed8 100644
--- a/plugins/pong/framer.json
+++ b/plugins/pong/framer.json
@@ -1,6 +1,6 @@
{
"id": "T24LXw",
"name": "Pong",
- "modes": ["default"],
+ "modes": ["canvas"],
"icon": "/framer.svg"
}
diff --git a/plugins/pong/package.json b/plugins/pong/package.json
index 886a6dee..02a2ce3e 100644
--- a/plugins/pong/package.json
+++ b/plugins/pong/package.json
@@ -12,7 +12,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "framer-plugin": "^0.2.0",
+ "framer-plugin": "^0.3.1",
"react": "^18",
"react-dom": "^18",
"vite-plugin-mkcert": "^1.17.5"
diff --git a/plugins/rss-feeds/framer.json b/plugins/rss-feeds/framer.json
index 2f30cd9b..059e8894 100644
--- a/plugins/rss-feeds/framer.json
+++ b/plugins/rss-feeds/framer.json
@@ -1,6 +1,6 @@
{
"id": "cad64a",
"name": "RSS Feeds",
- "modes": ["syncCollection", "configureCollection"],
+ "modes": ["syncManagedCollection", "configureManagedCollection"],
"icon": "/rss.png"
}
diff --git a/plugins/rss-feeds/package.json b/plugins/rss-feeds/package.json
index 28f5f64b..e980ebb2 100644
--- a/plugins/rss-feeds/package.json
+++ b/plugins/rss-feeds/package.json
@@ -12,7 +12,7 @@
},
"dependencies": {
"classnames": "^2.5.1",
- "framer-plugin": "^0.2.0",
+ "framer-plugin": "^0.3.1",
"react": "^18",
"react-dom": "^18",
"vite-plugin-mkcert": "^1"
diff --git a/plugins/rss-feeds/src/App.tsx b/plugins/rss-feeds/src/App.tsx
index c351f97d..32f1f0c9 100644
--- a/plugins/rss-feeds/src/App.tsx
+++ b/plugins/rss-feeds/src/App.tsx
@@ -1,4 +1,4 @@
-import { Collection, CollectionField, CollectionItem, framer } from "framer-plugin"
+import { CollectionField, CollectionItemData, framer, ManagedCollection } from "framer-plugin"
import "./App.css"
import { useState } from "react"
@@ -15,6 +15,7 @@ interface RSSSource {
const linkFieldId = "link"
const dateFieldId = "date"
const contentFieldId = "content"
+const titleFieldId = "title"
// A key to store the selected RSS source in the plugin data so it can be reused
export const rssSourceStorageKey = "rssSourceId"
@@ -76,6 +77,11 @@ function parseRSS(xmlDoc: Document) {
// Creates fields in the CMS collection for every key in the "RSSEntry" type.
function getCollectionFields(): CollectionField[] {
return [
+ {
+ type: "string",
+ name: "Title",
+ id: titleFieldId,
+ },
{
type: "link",
id: linkFieldId,
@@ -94,7 +100,7 @@ function getCollectionFields(): CollectionField[] {
]
}
-export async function importData(collection: Collection, sourceId: string) {
+export async function importData(collection: ManagedCollection, sourceId: string) {
const rssSource = rssSources.find(source => source.id === sourceId)
if (!rssSource) throw new Error("Invalid collection source id")
@@ -109,7 +115,7 @@ export async function importData(collection: Collection, sourceId: string) {
const unseenItemIds = new Set(await collection.getItemIds())
- const itemsToAdd: CollectionItem[] = []
+ const itemsToAdd: CollectionItemData[] = []
for (const item of items) {
// RSS items don't have an ID - we hash the title.
const id = simpleHash(item.title)
@@ -119,8 +125,8 @@ export async function importData(collection: Collection, sourceId: string) {
itemsToAdd.push({
id,
slug: slugify(item.title),
- title: item.title,
fieldData: {
+ [titleFieldId]: item.title,
[linkFieldId]: item.link,
[dateFieldId]: item.date,
[contentFieldId]: item.content,
@@ -139,7 +145,7 @@ export async function importData(collection: Collection, sourceId: string) {
}
interface Props {
- collection: Collection
+ collection: ManagedCollection
initialRssSourceId: string | null
}
diff --git a/plugins/rss-feeds/src/main.tsx b/plugins/rss-feeds/src/main.tsx
index 73ef68a6..38843665 100644
--- a/plugins/rss-feeds/src/main.tsx
+++ b/plugins/rss-feeds/src/main.tsx
@@ -7,10 +7,10 @@ import { App, importData } from "./App.tsx"
async function runPlugin() {
const mode = framer.mode
- const collection = await framer.getCollection()
+ const collection = await framer.getManagedCollection()
const rssSourceId = await collection.getPluginData("rssSourceId")
- if (mode === "syncCollection" && rssSourceId) {
+ if (mode === "syncManagedCollection" && rssSourceId) {
try {
await importData(collection, rssSourceId)
await framer.closePlugin()
diff --git a/plugins/threshold/framer.json b/plugins/threshold/framer.json
index 651d3ac7..f3a44c6b 100644
--- a/plugins/threshold/framer.json
+++ b/plugins/threshold/framer.json
@@ -1,6 +1,6 @@
{
"id": "793d3c",
"name": "Threshold",
- "modes": ["default", "editImage", "image"],
+ "modes": ["canvas", "editImage", "image"],
"icon": "/Threshold.png"
}
diff --git a/plugins/threshold/package.json b/plugins/threshold/package.json
index 033312d2..41b36734 100644
--- a/plugins/threshold/package.json
+++ b/plugins/threshold/package.json
@@ -14,7 +14,7 @@
},
"dependencies": {
"comlink": "^4.4.1",
- "framer-plugin": "^0.2.0",
+ "framer-plugin": "^0.3.1",
"react": "^18",
"react-dom": "^18",
"roughjs": "^4.6.6",
diff --git a/plugins/tidyup/framer.json b/plugins/tidyup/framer.json
index bc495e10..b566cc42 100644
--- a/plugins/tidyup/framer.json
+++ b/plugins/tidyup/framer.json
@@ -1,6 +1,6 @@
{
"id": "ZY9oHz",
"name": "Tidy Up",
- "modes": ["default"],
+ "modes": ["canvas"],
"icon": "/Tidy.png"
}
diff --git a/plugins/tidyup/package.json b/plugins/tidyup/package.json
index ffe5931c..39309b2e 100644
--- a/plugins/tidyup/package.json
+++ b/plugins/tidyup/package.json
@@ -11,7 +11,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "framer-plugin": "^0.2.0",
+ "framer-plugin": "^0.3.1",
"react": "^18",
"react-dom": "^18",
"vite-plugin-mkcert": "^1.17.5"
diff --git a/plugins/unsplash/framer.json b/plugins/unsplash/framer.json
index 0b877026..ee60f0ce 100644
--- a/plugins/unsplash/framer.json
+++ b/plugins/unsplash/framer.json
@@ -1,6 +1,6 @@
{
"id": "Blwwee",
"name": "Unsplash",
- "modes": ["default", "editImage", "image"],
+ "modes": ["canvas", "editImage", "image"],
"icon": "/Unsplash.png"
}
diff --git a/plugins/unsplash/package.json b/plugins/unsplash/package.json
index 926ffbc5..d49b9cf0 100644
--- a/plugins/unsplash/package.json
+++ b/plugins/unsplash/package.json
@@ -14,7 +14,7 @@
"@tanstack/react-query": "^5.28.6",
"blurhash": "^2.0.5",
"classnames": "^2.5.1",
- "framer-plugin": "^0.2.0",
+ "framer-plugin": "^0.3.1",
"react": "^18",
"react-blurhash": "^0.3.0",
"react-dom": "^18",
diff --git a/plugins/unsplash/src/App.tsx b/plugins/unsplash/src/App.tsx
index 27db8ab9..81f83520 100644
--- a/plugins/unsplash/src/App.tsx
+++ b/plugins/unsplash/src/App.tsx
@@ -10,7 +10,7 @@ import { Blurhash } from "react-blurhash"
const mode = framer.mode
-const minWindowWidth = mode === "default" ? 350 : 600
+const minWindowWidth = mode === "canvas" ? 350 : 600
const minColumnWidth = 100
const columnGap = 8
const sidePadding = 16 * 2
@@ -33,7 +33,7 @@ export function App() {
const mode = framer.mode
const randomPhoto = await getRandomPhoto(query)
- if (mode === "default") {
+ if (mode === "canvas") {
await framer.addImage({
image: randomPhoto.urls.full,
name: randomPhoto.alt_description ?? randomPhoto.description ?? "Unsplash Image",
@@ -102,7 +102,7 @@ const PhotosList = memo(function PhotosList({ query }: { query: string }) {
mutationFn: async (photo: UnsplashPhoto) => {
const mode = framer.mode
- if (mode === "default") {
+ if (mode === "canvas") {
await framer.addImage({
image: photo.urls.full,
name: photo.alt_description ?? photo.description ?? "Unsplash Image",