From 78fc7c521ec91e15a255e90536336b81680471c0 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:30:27 +0200 Subject: [PATCH 01/19] feat: add bold, secondary, regular text component variants --- mods/url-render/src/fullimage.ts | 9 ++++++++- packages/core/src/manifest.ts | 1 + packages/core/src/renderer.ts | 2 ++ .../react-ui-shadcn/src/renderers/text.tsx | 20 +++++++++++++++++-- packages/react/src/index.tsx | 5 ++++- 5 files changed, 33 insertions(+), 4 deletions(-) diff --git a/mods/url-render/src/fullimage.ts b/mods/url-render/src/fullimage.ts index fa67947b..02bbaa0e 100644 --- a/mods/url-render/src/fullimage.ts +++ b/mods/url-render/src/fullimage.ts @@ -11,13 +11,20 @@ const fullimage: ModElement[] = [ onsuccess: "#fullimage", }, elements: [ + { + type: "text", + label: "{{embed.metadata.publisher}}", + variant: "secondary", + }, { type: "text", label: "{{embed.metadata.title}}", + variant: "regular", }, { type: "text", - label: "{{embed.metadata.publisher}}", + label: "{{embed.metadata.description}}", + variant: "secondary", }, ], }, diff --git a/packages/core/src/manifest.ts b/packages/core/src/manifest.ts index cedd013a..3e47b32c 100644 --- a/packages/core/src/manifest.ts +++ b/packages/core/src/manifest.ts @@ -181,6 +181,7 @@ export type ModElement = | { type: "text"; label: string; + variant?: "bold" | "secondary" | "regular"; } | { type: "image"; diff --git a/packages/core/src/renderer.ts b/packages/core/src/renderer.ts index b7f7760a..58407364 100644 --- a/packages/core/src/renderer.ts +++ b/packages/core/src/renderer.ts @@ -21,6 +21,7 @@ export type ModElementRef = | { type: "text"; label: string; + variant?: "bold" | "secondary" | "regular"; events?: undefined; } | { @@ -1114,6 +1115,7 @@ export class Renderer { { type: "text", label: this.replaceInlineContext(el.label), + variant: el.variant, }, key ); diff --git a/packages/react-ui-shadcn/src/renderers/text.tsx b/packages/react-ui-shadcn/src/renderers/text.tsx index 562b4730..6e0f5d21 100644 --- a/packages/react-ui-shadcn/src/renderers/text.tsx +++ b/packages/react-ui-shadcn/src/renderers/text.tsx @@ -1,9 +1,25 @@ import React from "react"; import { Renderers } from "@mod-protocol/react"; +import { cva } from "class-variance-authority"; +import { cn } from "../lib/utils"; + +const textVariants = cva("my-0 flex-1 text-sm", { + variants: { + variant: { + bold: "font-bold", + regular: "", + secondary: "text-muted-foreground", + }, + }, + defaultVariants: { + variant: "regular", + }, +}); export const TextRenderer = ( props: React.ComponentProps ) => { - const { label } = props; - return

{label}

; + const { label, variant = "regular" } = props; + + return

{label}

; }; diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx index 02aab639..c4437d10 100644 --- a/packages/react/src/index.tsx +++ b/packages/react/src/index.tsx @@ -46,7 +46,10 @@ export type Renderers = { onChange: (value: string) => void; onPick: (value: any) => void; }>; - Text: React.ComponentType<{ label: string }>; + Text: React.ComponentType<{ + label: string; + variant?: "bold" | "regular" | "secondary"; + }>; Link: React.ComponentType<{ label: string; url: string; From e921b832c5a953c4601f0b5dddac7cc6f0bfd786 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:31:26 +0200 Subject: [PATCH 02/19] fix: only render first matching miniapp --- packages/react/src/render-embed.tsx | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/react/src/render-embed.tsx b/packages/react/src/render-embed.tsx index 494f2168..4f21089a 100644 --- a/packages/react/src/render-embed.tsx +++ b/packages/react/src/render-embed.tsx @@ -1,14 +1,12 @@ "use client"; -import React from "react"; import { - RichEmbedContext, - Embed, ModManifest, + RichEmbedContext, canRenderEntrypointWithContext, } from "@mod-protocol/core"; -import { ResolverTypes, RenderMod, Renderers } from "."; +import { RenderMod, Renderers, ResolverTypes } from "."; type Props = RichEmbedContext & { renderers: Renderers; @@ -61,16 +59,15 @@ export function RichEmbed(props: Props) { return getMatchingMods([props.defaultRichEmbedMod]); }); - return matchingMods.length - ? matchingMods.map((mod, index) => ( - - )) - : null; + const miniapp = matchingMods[0]; + + return miniapp ? ( + + ) : null; } From 4d520241a284df90136533ef3babcf66884614c9 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:32:22 +0200 Subject: [PATCH 03/19] fix(react-ui-shadcn): card absolute layout --- packages/react-ui-shadcn/src/renderers/card.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-ui-shadcn/src/renderers/card.tsx b/packages/react-ui-shadcn/src/renderers/card.tsx index 8675e648..8962ebf1 100644 --- a/packages/react-ui-shadcn/src/renderers/card.tsx +++ b/packages/react-ui-shadcn/src/renderers/card.tsx @@ -21,11 +21,6 @@ export const CardRenderer = ( {imageSrc ? (
- Image {topLeftBadge ? ( {topLeftBadge} ) : null} @@ -44,6 +39,11 @@ export const CardRenderer = ( {bottomRightBadge} ) : null} + Image
) : null} From 9db5a2f766613c1143859f34952fd7d4ff21ebfd Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:32:53 +0200 Subject: [PATCH 04/19] fix(react-ui-shadcn): spacing on horizontal layout --- packages/react-ui-shadcn/src/renderers/horizontal-layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui-shadcn/src/renderers/horizontal-layout.tsx b/packages/react-ui-shadcn/src/renderers/horizontal-layout.tsx index 7f2b1635..8e305fd4 100644 --- a/packages/react-ui-shadcn/src/renderers/horizontal-layout.tsx +++ b/packages/react-ui-shadcn/src/renderers/horizontal-layout.tsx @@ -5,7 +5,7 @@ export const HorizontalLayoutRenderer = ( props: React.ComponentProps ) => { return ( -
+
{props.children}
); From c12d7783815ce73475c58d0541809aa7e87bcf05 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:34:47 +0200 Subject: [PATCH 05/19] chore(api): creator/owner in nft metadata can be user object or reference --- .../api/src/app/api/cast-embeds-metadata/route.ts | 3 ++- examples/api/src/app/api/open-graph/lib/util.ts | 12 +++++++++--- packages/core/src/embeds.ts | 4 ++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/examples/api/src/app/api/cast-embeds-metadata/route.ts b/examples/api/src/app/api/cast-embeds-metadata/route.ts index 62ea20c8..a13463bc 100644 --- a/examples/api/src/app/api/cast-embeds-metadata/route.ts +++ b/examples/api/src/app/api/cast-embeds-metadata/route.ts @@ -41,7 +41,7 @@ function formatRow(row): EmbedWithCastHash { name: row.collection_name, openSeaUrl: row.collection_open_sea_url || undefined, ownerCount: row.collection_owner_count || undefined, - creator: undefined, // TODO: Look up farcaster user by FID + creator: row.collection_creator_fid || undefined, }, }; } @@ -132,6 +132,7 @@ export async function POST(request: NextRequest) { "nft_collections.name as collection_name", "nft_collections.open_sea_url as collection_open_sea_url", "nft_collections.owner_count as collection_owner_count", + "nft_collections.creator_fid as collection_creator_fid", // NFT metadata "nft_metadata.token_id as nft_token_id", diff --git a/examples/api/src/app/api/open-graph/lib/util.ts b/examples/api/src/app/api/open-graph/lib/util.ts index 956c0891..56848de3 100644 --- a/examples/api/src/app/api/open-graph/lib/util.ts +++ b/examples/api/src/app/api/open-graph/lib/util.ts @@ -35,15 +35,21 @@ async function fetchUserData(address: string): Promise { } export function toUrlMetadata(nftMetadata: NFTMetadata): UrlMetadata { + // If the creator is an object, it's a FarcasterUser + const creator = + typeof nftMetadata?.collection?.creator === "object" + ? (nftMetadata?.collection?.creator as FarcasterUser) + : null; + return { image: nftMetadata.mediaUrl ? { url: nftMetadata.mediaUrl } : undefined, description: nftMetadata.collection.description, alt: nftMetadata.collection.name, title: nftMetadata.collection.name, - publisher: nftMetadata.collection.creator?.displayName, - logo: nftMetadata.collection.creator + publisher: creator?.displayName, + logo: creator ? { - url: nftMetadata.collection.creator.pfp.url, + url: creator.pfp.url, } : undefined, nft: nftMetadata, diff --git a/packages/core/src/embeds.ts b/packages/core/src/embeds.ts index a3739389..95e15dc9 100644 --- a/packages/core/src/embeds.ts +++ b/packages/core/src/embeds.ts @@ -31,7 +31,7 @@ export type FarcasterUser = { }; export type NFTMetadata = { - owner?: FarcasterUser; + owner?: FarcasterUser | string; // Resolved user or FID tokenId?: string; mediaUrl?: string; mintUrl?: string; @@ -47,7 +47,7 @@ export type NFTMetadata = { description?: string; imageUrl?: string; openSeaUrl?: string; - creator?: FarcasterUser; + creator?: FarcasterUser | string; // Resolved user or FID }; }; From c40669de23c7753c5343279319bb503c3752d95d Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:36:23 +0200 Subject: [PATCH 06/19] fix(opengraph): try fallback if no image returned in local fetch --- .changeset/fair-tigers-grab.md | 8 ++++++++ .changeset/modern-ways-juggle.md | 6 ++++++ .../app/api/open-graph/lib/url-handlers/local-fetch.ts | 5 +++++ 3 files changed, 19 insertions(+) create mode 100644 .changeset/fair-tigers-grab.md create mode 100644 .changeset/modern-ways-juggle.md diff --git a/.changeset/fair-tigers-grab.md b/.changeset/fair-tigers-grab.md new file mode 100644 index 00000000..f2c56e01 --- /dev/null +++ b/.changeset/fair-tigers-grab.md @@ -0,0 +1,8 @@ +--- +"@mod-protocol/react-ui-shadcn": patch +"@miniapps/url-render": patch +"@mod-protocol/react": patch +"@mod-protocol/core": patch +--- + +feat: text component variants: `bold`, `secondary`, `regular` diff --git a/.changeset/modern-ways-juggle.md b/.changeset/modern-ways-juggle.md new file mode 100644 index 00000000..b440b748 --- /dev/null +++ b/.changeset/modern-ways-juggle.md @@ -0,0 +1,6 @@ +--- +"@mod-protocol/core": minor +"api": minor +--- + +chore: users mentioned in NFT metadata can either be an FID or FarcasterUser object depending on context diff --git a/examples/api/src/app/api/open-graph/lib/url-handlers/local-fetch.ts b/examples/api/src/app/api/open-graph/lib/url-handlers/local-fetch.ts index 3f2fe8b8..244b263a 100644 --- a/examples/api/src/app/api/open-graph/lib/url-handlers/local-fetch.ts +++ b/examples/api/src/app/api/open-graph/lib/url-handlers/local-fetch.ts @@ -125,6 +125,11 @@ async function localFetchHandler(url: string): Promise { return null; } + if (!(urlMetadata.image || urlMetadata.logo)) { + console.error(`[Local Fetch] No image or logo found for ${url}`); + return null; + } + return urlMetadata; } From 386e772bc7ab5351b967c1eaca26cbab357a089a Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Tue, 28 Nov 2023 17:28:13 +0200 Subject: [PATCH 07/19] fix(react-ui-shadcn): stop event propagation on card click --- packages/react-ui-shadcn/src/renderers/card.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react-ui-shadcn/src/renderers/card.tsx b/packages/react-ui-shadcn/src/renderers/card.tsx index 8962ebf1..08dff36c 100644 --- a/packages/react-ui-shadcn/src/renderers/card.tsx +++ b/packages/react-ui-shadcn/src/renderers/card.tsx @@ -17,7 +17,13 @@ export const CardRenderer = ( onClick, } = props; return ( -
+
{ + e.stopPropagation(); + onClick(); + }} + > {imageSrc ? (
From c6e347cc45160e02836562850cc0c343d9e9cc9e Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Thu, 30 Nov 2023 12:06:03 +0200 Subject: [PATCH 08/19] fix(editor): expose editor config, fix placeholder --- .changeset/chilled-kids-tease.md | 5 +++++ .changeset/small-houses-tie.md | 5 +++++ packages/react-editor/src/create-editor-config.tsx | 11 ++++++++--- packages/react-editor/src/use-editor.tsx | 10 +++++++++- 4 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 .changeset/chilled-kids-tease.md create mode 100644 .changeset/small-houses-tie.md diff --git a/.changeset/chilled-kids-tease.md b/.changeset/chilled-kids-tease.md new file mode 100644 index 00000000..09be9e49 --- /dev/null +++ b/.changeset/chilled-kids-tease.md @@ -0,0 +1,5 @@ +--- +"@mod-protocol/react-editor": patch +--- + +feat: expose tiptap editor config diff --git a/.changeset/small-houses-tie.md b/.changeset/small-houses-tie.md new file mode 100644 index 00000000..723492a5 --- /dev/null +++ b/.changeset/small-houses-tie.md @@ -0,0 +1,5 @@ +--- +"@mod-protocol/react-editor": patch +--- + +fix: placeholder text diff --git a/packages/react-editor/src/create-editor-config.tsx b/packages/react-editor/src/create-editor-config.tsx index f552f081..ca27bb97 100644 --- a/packages/react-editor/src/create-editor-config.tsx +++ b/packages/react-editor/src/create-editor-config.tsx @@ -10,13 +10,14 @@ import { clipboardTextParser, transformPastedHTML, } from "./extension-clipboard"; +import { EditorOptions } from "@tiptap/core"; export type EditorConfig = { placeholderText: string; - onAddLink: (link: Link) => void; renderMentionsSuggestionConfig: Pick; linkClassName: string; + editorOptions?: Partial; }; export function createEditorConfig({ @@ -24,12 +25,12 @@ export function createEditorConfig({ renderMentionsSuggestionConfig, linkClassName, onAddLink, -}: EditorConfig) { + editorOptions = {}, +}: EditorConfig): Partial { return { editorProps: { attributes: { // min-height allows clicking in the box and creating focus on the input - // TODO: configurable/options style: "outline: 0; min-height: 200px;", }, // attributes: { @@ -39,6 +40,7 @@ export function createEditorConfig({ transformPastedHTML: transformPastedHTML, // Prevents weird paste new line inconsistencies when coming from textedit, plaintext, ... clipboardTextParser: clipboardTextParser, + ...editorOptions.editorProps, }, extensions: [ // you can find pro extensions at https://embed-pro.tiptap.dev/preview/Nodes/Emoji?inline=false&hideSource=true @@ -49,6 +51,9 @@ export function createEditorConfig({ TipTapParagraph, TipTapPlaceholder.configure({ placeholder: placeholderText, + // https://github.com/ueberdosis/tiptap/issues/2659#issuecomment-1230954941 + emptyEditorClass: + "cursor-text before:content-[attr(data-placeholder)] before:absolute before:text-foreground-secondary before:opacity-50 before-pointer-events-none", }), // TipTapCustomImagePlugin, diff --git a/packages/react-editor/src/use-editor.tsx b/packages/react-editor/src/use-editor.tsx index 21f4d05b..8ef9a898 100644 --- a/packages/react-editor/src/use-editor.tsx +++ b/packages/react-editor/src/use-editor.tsx @@ -72,6 +72,7 @@ export function useEditor({ linkClassName, renderMentionsSuggestionConfig, maxEmbeds = FARCASTER_MAX_EMBEDS, + editorOptions, }: useEditorParameter): useEditorReturn { const [embeds, setEmbeds] = useState([]); @@ -184,8 +185,15 @@ export function useEditor({ placeholderText, onAddLink, renderMentionsSuggestionConfig, + editorOptions, }), - [linkClassName, placeholderText, renderMentionsSuggestionConfig, onAddLink] + [ + linkClassName, + placeholderText, + renderMentionsSuggestionConfig, + onAddLink, + editorOptions, + ] ); const editor: Editor | null = useTipTapEditor(editorConfig); useEffect(() => { From 4f283ab612d6033e3c394a446886eb2d7ddfcd27 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 1 Dec 2023 14:41:06 +0200 Subject: [PATCH 09/19] feat: url embeds rendered by url renderer miniapp --- packages/react-ui-shadcn/package.json | 9 ++-- packages/react-ui-shadcn/src/lib/embeds.tsx | 49 +++++---------------- 2 files changed, 16 insertions(+), 42 deletions(-) diff --git a/packages/react-ui-shadcn/package.json b/packages/react-ui-shadcn/package.json index abc529f6..a8e3d2e0 100644 --- a/packages/react-ui-shadcn/package.json +++ b/packages/react-ui-shadcn/package.json @@ -8,10 +8,11 @@ "dev": "npm run build -- --watch" }, "dependencies": { - "@mod-protocol/core": "*", - "@mod-protocol/farcaster": "*", - "@mod-protocol/react": "*", - "@mod-protocol/react-editor": "*", + "@mod-protocol/core": "^0.0.2", + "@mod-protocol/farcaster": "^0.0.1", + "@mod-protocol/react": "^0.0.2", + "@mod-protocol/react-editor": "^0.0.2", + "@mod-protocol/miniapp-registry": "*", "@primer/octicons-react": "^19.5.0", "@radix-ui/react-aspect-ratio": "^1.0.3", "@radix-ui/react-avatar": "^1.0.4", diff --git a/packages/react-ui-shadcn/src/lib/embeds.tsx b/packages/react-ui-shadcn/src/lib/embeds.tsx index 71c192a8..3b7ef831 100644 --- a/packages/react-ui-shadcn/src/lib/embeds.tsx +++ b/packages/react-ui-shadcn/src/lib/embeds.tsx @@ -9,6 +9,9 @@ import { Cross1Icon } from "@radix-ui/react-icons"; import { Button } from "components/ui/button"; import { Skeleton } from "components/ui/skeleton"; import { VideoRenderer } from "../renderers/video"; +import { RenderEmbed } from "@mod-protocol/react"; +import * as miniapps from "@mod-protocol/miniapp-registry"; +import { renderers } from "../renderers"; function shorten(str?: string, maxLength = 64) { if (!str) return str; @@ -19,6 +22,7 @@ function shorten(str?: string, maxLength = 64) { export const EmbedsEditor = (props: { embeds: Embed[]; setEmbeds: (e: Embed[]) => void; + apiUrl?: string; }) => { return ( <> @@ -51,45 +55,14 @@ export const EmbedsEditor = (props: { Loading... - ) : hasFullSizedImage(embed) ? ( -
-
- {embed.metadata?.title} -
-
-
- {shorten(embed.metadata?.title)} -
-
- {embed.metadata?.publisher} -
-
-
) : ( -
-
-
- {embed.metadata?.title} -
- {shorten(embed.metadata?.title)} -
-
-
- {embed.metadata?.publisher} -
-
-
+ RenderEmbed({ + api: props.apiUrl || "https://api.modprotocol.org/api", + defaultContentMiniApp: miniapps.defaultContentMiniApp, + contentMiniApps: [miniapps.defaultContentMiniApp], + embed, + renderers: renderers, + }) )}
))} From d01be3209741423bf39215bc568a995790326bf9 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Mon, 4 Dec 2023 20:46:21 +0200 Subject: [PATCH 10/19] fix(docs): remove user id context (not implemented) --- docs/pages/integrate/creation.mdx | 33 ++++++++++++++++++------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/docs/pages/integrate/creation.mdx b/docs/pages/integrate/creation.mdx index 0284d14a..0ecde562 100644 --- a/docs/pages/integrate/creation.mdx +++ b/docs/pages/integrate/creation.mdx @@ -1,4 +1,4 @@ -import Image from 'next/image' +import Image from "next/image"; # Creation Mods @@ -56,7 +56,14 @@ import { import { CreationMod } from "@mod-protocol/react"; import { useEditor, EditorContent } from "@mod-protocol/react-editor"; import { creationMods } from "@mod-protocol/mod-registry"; -import { Embed, ModManifest, fetchUrlMetadata, handleAddEmbed, handleOpenFile, handleSetInput } from "@mod-protocol/core"; +import { + Embed, + ModManifest, + fetchUrlMetadata, + handleAddEmbed, + handleOpenFile, + handleSetInput, +} from "@mod-protocol/core"; // UI implementation import { createRenderMentionsSuggestionConfig } from "@mod-protocol/react-ui-shadcn/dist/lib/mentions"; import { ModsSearch } from "@mod-protocol/react-ui-shadcn/dist/components/creation-mods-search"; @@ -64,7 +71,11 @@ import { CastLengthUIIndicator } from "@mod-protocol/react-ui-shadcn/dist/compon import { ChannelPicker } from "@mod-protocol/react-ui-shadcn/dist/components/channel-picker"; import { EmbedsEditor } from "@mod-protocol/react-ui-shadcn/dist/lib/embeds"; import { Button } from "@mod-protocol/react-ui-shadcn/dist/components/ui/button"; -import { Popover, PopoverContent, PopoverTrigger } from "@mod-protocol/react-ui-shadcn/dist/components/ui/popover"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@mod-protocol/react-ui-shadcn/dist/components/ui/popover"; import { renderers } from "@mod-protocol/react-ui-shadcn/dist/renderers"; // Optionally replace with your API_URL here if you want to self host by running your own instance of https://github.com/mod-protocol/mod/tree/main/examples/api @@ -112,8 +123,7 @@ export default function EditorExample() { }), }); - const [currentMod, setCurrentMod] = - React.useState(null); + const [currentMod, setCurrentMod] = React.useState(null); return (
@@ -138,15 +148,10 @@ export default function EditorExample() { }} > - +
-

- {currentMod?.name} -

+

{currentMod?.name}


['infura-ipfs-upload', 'livepeer-video'].includes(mod.slug)} + mods={creationMods.filter(mod => ['infura-ipfs-upload', 'livepeer-video'].includes(mod.slug))} onSelect={setCurrentMod} /> -``` \ No newline at end of file +``` From a89aa644c9f51ee9f9b53fa163b9497d998c0a07 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Tue, 5 Dec 2023 14:45:12 +0200 Subject: [PATCH 11/19] fix: pr comments --- .../api/cast-embeds-metadata/by-url/route.ts | 1 + .../src/app/api/cast-embeds-metadata/route.ts | 4 ++- .../api/src/app/api/open-graph/lib/util.ts | 5 +-- .../nextjs-shadcn/src/app/editor-example.tsx | 18 +++++++++-- packages/core/src/embeds.ts | 4 +-- packages/react-ui-shadcn/src/lib/embeds.tsx | 31 ++++++------------- .../react-ui-shadcn/src/renderers/card.tsx | 1 + 7 files changed, 33 insertions(+), 31 deletions(-) diff --git a/examples/api/src/app/api/cast-embeds-metadata/by-url/route.ts b/examples/api/src/app/api/cast-embeds-metadata/by-url/route.ts index 5d7941dc..acb349dd 100644 --- a/examples/api/src/app/api/cast-embeds-metadata/by-url/route.ts +++ b/examples/api/src/app/api/cast-embeds-metadata/by-url/route.ts @@ -51,6 +51,7 @@ export async function POST(request: NextRequest) { "nft_collections.name as collection_name", "nft_collections.open_sea_url as collection_open_sea_url", "nft_collections.owner_count as collection_owner_count", + "nft_collections.creator_fid as collection_creator_fid", // NFT metadata "nft_metadata.token_id as nft_token_id", diff --git a/examples/api/src/app/api/cast-embeds-metadata/route.ts b/examples/api/src/app/api/cast-embeds-metadata/route.ts index a13463bc..5149d5a3 100644 --- a/examples/api/src/app/api/cast-embeds-metadata/route.ts +++ b/examples/api/src/app/api/cast-embeds-metadata/route.ts @@ -41,7 +41,9 @@ function formatRow(row): EmbedWithCastHash { name: row.collection_name, openSeaUrl: row.collection_open_sea_url || undefined, ownerCount: row.collection_owner_count || undefined, - creator: row.collection_creator_fid || undefined, + creator: row.collection_creator_fid + ? { fid: row.collection_creator_fid } + : undefined, }, }; } diff --git a/examples/api/src/app/api/open-graph/lib/util.ts b/examples/api/src/app/api/open-graph/lib/util.ts index 56848de3..01a19218 100644 --- a/examples/api/src/app/api/open-graph/lib/util.ts +++ b/examples/api/src/app/api/open-graph/lib/util.ts @@ -36,10 +36,7 @@ async function fetchUserData(address: string): Promise { export function toUrlMetadata(nftMetadata: NFTMetadata): UrlMetadata { // If the creator is an object, it's a FarcasterUser - const creator = - typeof nftMetadata?.collection?.creator === "object" - ? (nftMetadata?.collection?.creator as FarcasterUser) - : null; + const creator = nftMetadata?.collection?.creator; return { image: nftMetadata.mediaUrl ? { url: nftMetadata.mediaUrl } : undefined, diff --git a/examples/nextjs-shadcn/src/app/editor-example.tsx b/examples/nextjs-shadcn/src/app/editor-example.tsx index 2e624bc9..0906d3d2 100644 --- a/examples/nextjs-shadcn/src/app/editor-example.tsx +++ b/examples/nextjs-shadcn/src/app/editor-example.tsx @@ -11,9 +11,9 @@ import { getFarcasterMentions, getMentionFidsByUsernames, } from "@mod-protocol/farcaster"; -import { CreationMod } from "@mod-protocol/react"; +import { CreationMod, RichEmbed } from "@mod-protocol/react"; import { useEditor, EditorContent } from "@mod-protocol/react-editor"; -import { creationMods } from "@mod-protocol/mod-registry"; +import { creationMods, defaultRichEmbedMod } from "@mod-protocol/mod-registry"; import { Embed, EthPersonalSignActionResolverInit, @@ -164,7 +164,19 @@ export default function EditorExample() { autoFocus className="w-full h-full min-h-[200px]" /> - + ( + + )} + />
; tokenId?: string; mediaUrl?: string; mintUrl?: string; @@ -47,7 +47,7 @@ export type NFTMetadata = { description?: string; imageUrl?: string; openSeaUrl?: string; - creator?: FarcasterUser | string; // Resolved user or FID + creator?: Partial; }; }; diff --git a/packages/react-ui-shadcn/src/lib/embeds.tsx b/packages/react-ui-shadcn/src/lib/embeds.tsx index 3b7ef831..d75de13e 100644 --- a/packages/react-ui-shadcn/src/lib/embeds.tsx +++ b/packages/react-ui-shadcn/src/lib/embeds.tsx @@ -9,31 +9,26 @@ import { Cross1Icon } from "@radix-ui/react-icons"; import { Button } from "components/ui/button"; import { Skeleton } from "components/ui/skeleton"; import { VideoRenderer } from "../renderers/video"; -import { RenderEmbed } from "@mod-protocol/react"; -import * as miniapps from "@mod-protocol/miniapp-registry"; -import { renderers } from "../renderers"; -function shorten(str?: string, maxLength = 64) { - if (!str) return str; - if (str.length > maxLength) return str.slice(0, maxLength - 3) + "..."; - return str; -} - -export const EmbedsEditor = (props: { +export const EmbedsEditor = ({ + embeds, + setEmbeds, + RichEmbed, +}: { embeds: Embed[]; setEmbeds: (e: Embed[]) => void; - apiUrl?: string; + RichEmbed: (props: { embed: Embed }) => JSX.Element; }) => { return ( <> - {props.embeds.map((embed, i) => ( + {embeds.map((embed, i) => (
))} diff --git a/packages/react-ui-shadcn/src/renderers/card.tsx b/packages/react-ui-shadcn/src/renderers/card.tsx index 08dff36c..57b46ae2 100644 --- a/packages/react-ui-shadcn/src/renderers/card.tsx +++ b/packages/react-ui-shadcn/src/renderers/card.tsx @@ -20,6 +20,7 @@ export const CardRenderer = (
{ + // Prevent double event firing when clicking child components e.stopPropagation(); onClick(); }} From 81d8c699718f58af0479c9c33f3807c5246f74c2 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Tue, 5 Dec 2023 18:43:59 +0200 Subject: [PATCH 12/19] chore: placeholder styles --- examples/nextjs-shadcn/src/app/globals.css | 49 +++++++++++++--------- examples/nextjs-shadcn/tailwind.config.js | 11 +++++ 2 files changed, 40 insertions(+), 20 deletions(-) diff --git a/examples/nextjs-shadcn/src/app/globals.css b/examples/nextjs-shadcn/src/app/globals.css index 340a1c4b..b232afea 100644 --- a/examples/nextjs-shadcn/src/app/globals.css +++ b/examples/nextjs-shadcn/src/app/globals.css @@ -1,7 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; - + @layer base { :root { --background: 0 0% 100%; @@ -9,63 +9,63 @@ --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; - + --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; - + --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; - + --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; - + --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; - + --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; - + --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; - + --radius: 0.5rem; } - + .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; - + --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; - + --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; - + --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; - + --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; - + --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; - + --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; - + --destructive: 0 42.8% 40.6%; --destructive-foreground: 210 40% 98%; - + --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; - --ring: hsl(212.7,26.8%,83.9); + --ring: hsl(212.7, 26.8%, 83.9); } } - + @layer base { * { @apply border-border; @@ -73,4 +73,13 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file + + /* https://github.com/ueberdosis/tiptap/issues/2659#issuecomment-1230954941 */ + .ProseMirror p.is-editor-empty:first-child::before { + content: attr(data-placeholder); + float: left; + pointer-events: none; + height: 0; + @apply text-muted-foreground; + } +} diff --git a/examples/nextjs-shadcn/tailwind.config.js b/examples/nextjs-shadcn/tailwind.config.js index 8714e99b..d4e779b6 100644 --- a/examples/nextjs-shadcn/tailwind.config.js +++ b/examples/nextjs-shadcn/tailwind.config.js @@ -6,6 +6,17 @@ module.exports = { // make sure tailwind doesn't tree shake classes used by the library "../../packages/react-ui-shadcn/dist/**/*.{ts,tsx,css,js}", ], + // Placeholder styles are not included in bundle by default because + // the element is rendered dynamically in the editor, so must be manually + // added here + safelist: [ + "cursor-text", + "before:content-[attr(data-placeholder)]", + "before:absolute", + "before:text-foreground-secondary", + "before:opacity-50", + "before:pointer-events-none", + ], theme: { container: { center: true, From b2780c48e515f5d1030ef07d3b8c56ea7ebbea13 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Wed, 6 Dec 2023 16:24:34 +0200 Subject: [PATCH 13/19] fix: move imgur miniapp to mod --- packages/mod-registry/src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/mod-registry/src/index.ts b/packages/mod-registry/src/index.ts index 57f32541..5aad6aa6 100644 --- a/packages/mod-registry/src/index.ts +++ b/packages/mod-registry/src/index.ts @@ -11,8 +11,10 @@ import ImageRender from "@mods/image-render"; import ChatGPTShorten from "@mods/chatgpt-shorten"; // import ZoraNftMinter from "@mods/zora-nft-minter"; // import DALLE from "@mods/dall-e"; +import ImgurUpload from "@mods/imgur-upload"; export const allMods = [ + ImgurUpload, InfuraIPFSUpload, LivepeerVideo, GiphyPicker, From ec37c8fd125adf17d791971033fea46e804394a2 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Wed, 6 Dec 2023 16:35:28 +0200 Subject: [PATCH 14/19] fix: pr comments --- packages/react-ui-shadcn/package.json | 2 +- packages/react/src/render-embed.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-ui-shadcn/package.json b/packages/react-ui-shadcn/package.json index a8e3d2e0..a5e3559a 100644 --- a/packages/react-ui-shadcn/package.json +++ b/packages/react-ui-shadcn/package.json @@ -12,7 +12,7 @@ "@mod-protocol/farcaster": "^0.0.1", "@mod-protocol/react": "^0.0.2", "@mod-protocol/react-editor": "^0.0.2", - "@mod-protocol/miniapp-registry": "*", + "@mod-protocol/mod-registry": "*", "@primer/octicons-react": "^19.5.0", "@radix-ui/react-aspect-ratio": "^1.0.3", "@radix-ui/react-avatar": "^1.0.4", diff --git a/packages/react/src/render-embed.tsx b/packages/react/src/render-embed.tsx index 4f21089a..a5fa4ce1 100644 --- a/packages/react/src/render-embed.tsx +++ b/packages/react/src/render-embed.tsx @@ -59,14 +59,14 @@ export function RichEmbed(props: Props) { return getMatchingMods([props.defaultRichEmbedMod]); }); - const miniapp = matchingMods[0]; + const mod = matchingMods[0]; - return miniapp ? ( + return mod ? ( ) : null; From 1325f6fe51573b948265547af45854716b7eec42 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Wed, 6 Dec 2023 16:35:34 +0200 Subject: [PATCH 15/19] fix: build --- tsconfig.json | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 98527d65..9bb22b39 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,11 +9,10 @@ "esModuleInterop": true, "preserveSymlinks": true, "incremental": true, + "composite": true, "declarationMap": true, "paths": { - "@mods/*": [ - "./mods/*" - ], + "@mods/*": ["./mods/*"] }, "jsx": "react-jsx", "module": "ESNext", @@ -31,22 +30,14 @@ "sourceMap": false, "strictNullChecks": true, "target": "es2019", - "types": [ - "node" - ], - "lib": [ - "es2021", - "dom", - "esnext" - ], + "types": ["node"], + "lib": ["es2021", "dom", "esnext"], "strict": true, "noFallthroughCasesInSwitch": true, "noUncheckedIndexedAccess": true }, - "exclude": [ - "_" - ], + "exclude": ["_"], "typeAcquisition": { "enable": true } -} \ No newline at end of file +} From 8f235f2cb83d24dbbfef94e2ca616fae7963388d Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Wed, 6 Dec 2023 19:14:39 +0200 Subject: [PATCH 16/19] fix: base context with scoped user id --- packages/core/src/renderer.ts | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/core/src/renderer.ts b/packages/core/src/renderer.ts index 58407364..743decbd 100644 --- a/packages/core/src/renderer.ts +++ b/packages/core/src/renderer.ts @@ -158,25 +158,26 @@ export type ModElementRef = }; }; -export type CreationContext = { - input: any; +export type BaseContext = { user?: { wallet?: { - address: string; + address?: string; + }; + farcaster?: { + fid?: string; }; }; +}; + +export type CreationContext = BaseContext & { + input: any; embeds: Embed[]; /** The url of the api hosting the mod backends. (including /api) **/ api: string; }; -// Render Mods only are triggered by a single embed right now -export type RichEmbedContext = { - user?: { - wallet?: { - address: string; - }; - }; +// Render Mini-apps only are triggered by a single embed right now +export type RichEmbedContext = BaseContext & { embed: Embed; api: string; }; From 218ce33f3d813d1af01496922094af8a92fc378d Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Wed, 6 Dec 2023 19:32:45 +0200 Subject: [PATCH 17/19] fix: padding of embeds --- packages/react-ui-shadcn/src/renderers/container.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui-shadcn/src/renderers/container.tsx b/packages/react-ui-shadcn/src/renderers/container.tsx index b29d2f3f..5728980a 100644 --- a/packages/react-ui-shadcn/src/renderers/container.tsx +++ b/packages/react-ui-shadcn/src/renderers/container.tsx @@ -5,7 +5,7 @@ export const ContainerRenderer = ( props: React.ComponentProps ) => { return ( -
+
{props.children}
); From 765a9865f25d4d82b518cb8740a941f5259b8e85 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Wed, 6 Dec 2023 19:40:36 +0200 Subject: [PATCH 18/19] fix: embeds editor delete button styling --- packages/react-ui-shadcn/src/lib/embeds.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui-shadcn/src/lib/embeds.tsx b/packages/react-ui-shadcn/src/lib/embeds.tsx index d75de13e..bf90198b 100644 --- a/packages/react-ui-shadcn/src/lib/embeds.tsx +++ b/packages/react-ui-shadcn/src/lib/embeds.tsx @@ -24,7 +24,7 @@ export const EmbedsEditor = ({ {embeds.map((embed, i) => (