fix: general integration readiness patches

.changeset/chilled-kids-tease.md

@@ -0,0 +1,5 @@
+---
+"@mod-protocol/react-editor": patch
+---
+
+feat: expose tiptap editor config

.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`

.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

.changeset/small-houses-tie.md

@@ -0,0 +1,5 @@
+---
+"@mod-protocol/react-editor": patch
+---
+
+fix: placeholder text

docs/pages/integrate/creation.mdx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 # Creation Mods
 
@@ -56,15 +56,26 @@ 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";
 import { CastLengthUIIndicator } from "@mod-protocol/react-ui-shadcn/dist/components/cast-length-ui-indicator";
 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<ModManifest | null>(null);
+  const [currentMod, setCurrentMod] = React.useState<ModManifest | null>(null);
 
   return (
     <form onSubmit={handleSubmit}>
@@ -138,15 +148,10 @@ export default function EditorExample() {
           }}
         >
           <PopoverTrigger></PopoverTrigger>
-          <ModsSearch
-            mods={creationMods}
-            onSelect={setCurrentMod}
-          />
+          <ModsSearch mods={creationMods} onSelect={setCurrentMod} />
           <PopoverContent className="w-[400px] ml-2" align="start">
             <div className="space-y-4">
-              <h4 className="font-medium leading-none">
-                {currentMod?.name}
-              </h4>
+              <h4 className="font-medium leading-none">{currentMod?.name}</h4>
               <hr />
               <CreationMod
                 input={getText()}
@@ -192,7 +197,7 @@ You can choose to filter or select which Mods are available
 ```tsx
 ...
 <ModsSearch
-  mods={creationMods.filter(mod => ['infura-ipfs-upload', 'livepeer-video'].includes(mod.slug)}
+  mods={creationMods.filter(mod => ['infura-ipfs-upload', 'livepeer-video'].includes(mod.slug))}
   onSelect={setCurrentMod}
 />
-```
+```

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",

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: undefined, // TODO: Look up farcaster user by FID
+        creator: row.collection_creator_fid
+          ? { fid: row.collection_creator_fid }
+          : undefined,
       },
     };
   }
@@ -132,6 +134,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",

examples/api/src/app/api/open-graph/lib/url-handlers/local-fetch.ts

@@ -125,6 +125,11 @@ async function localFetchHandler(url: string): Promise<UrlMetadata> {
     return null;
   }
 
+  if (!(urlMetadata.image || urlMetadata.logo)) {
+    console.error(`[Local Fetch] No image or logo found for ${url}`);
+    return null;
+  }
+
   return urlMetadata;
 }
 

examples/api/src/app/api/open-graph/lib/util.ts

@@ -35,15 +35,18 @@ async function fetchUserData(address: string): Promise<FarcasterUser | null> {
 }
 
 export function toUrlMetadata(nftMetadata: NFTMetadata): UrlMetadata {
+  // If the creator is an object, it's a FarcasterUser
+  const creator = nftMetadata?.collection?.creator;
+
   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,

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]"
         />
-        <EmbedsEditor embeds={getEmbeds()} setEmbeds={setEmbeds} />
+        <EmbedsEditor
+          embeds={getEmbeds()}
+          setEmbeds={setEmbeds}
+          RichEmbed={({ embed }) => (
+            <RichEmbed
+              api={API_URL}
+              defaultRichEmbedMod={defaultRichEmbedMod}
+              mods={[defaultRichEmbedMod]}
+              embed={embed}
+              renderers={renderers}
+            />
+          )}
+        />
       </div>
       <div className="flex flex-row pt-2 gap-1">
         <ChannelPicker

examples/nextjs-shadcn/src/app/globals.css

@@ -1,76 +1,85 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
     --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;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+
+  /* 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;
+  }
+}

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,

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",
       },
     ],
   },

packages/core/src/embeds.ts

@@ -31,7 +31,7 @@ export type FarcasterUser = {
 };
 
 export type NFTMetadata = {
-  owner?: FarcasterUser;
+  owner?: Partial<FarcasterUser>;
   tokenId?: string;
   mediaUrl?: string;
   mintUrl?: string;
@@ -47,7 +47,7 @@ export type NFTMetadata = {
     description?: string;
     imageUrl?: string;
     openSeaUrl?: string;
-    creator?: FarcasterUser;
+    creator?: Partial<FarcasterUser>;
   };
 };
 

packages/core/src/manifest.ts

@@ -181,6 +181,7 @@ export type ModElement =
   | {
       type: "text";
       label: string;
+      variant?: "bold" | "secondary" | "regular";
     }
   | {
       type: "image";