Add media and AI plugins, refresh editor configs

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

editor/components/cta/cta.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Megaphone } from "lucide-react";
 import { CTA, type CTAProps } from "@/editor/components/cta/cta";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const ctaEditor: ComponentConfig<CTAProps> = {
   label: "Call to action",
@@ -37,7 +39,7 @@ export const ctaEditor: ComponentConfig<CTAProps> = {
         href: { label: "Link", type: "text" },
       },
     },
-    imageUrl: { label: "Background image URL", type: "text" },
+    imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     align: {
       label: "Alignment",
       type: "radio",

editor/components/hero/hero.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { LayoutTemplate } from "lucide-react";
 import { Hero, type HeroProps } from "@/editor/components/hero/hero";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const heroEditor: ComponentConfig<HeroProps> = {
   label: "Hero",
@@ -39,7 +41,7 @@ export const heroEditor: ComponentConfig<HeroProps> = {
         href: { label: "Link", type: "text" },
       },
     },
-    imageUrl: { label: "Background image URL", type: "text" },
+    imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     align: {
       label: "Alignment",
       type: "radio",

editor/components/landing/image-gallery.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Images } from "lucide-react";
 import { ImageGallery, type ImageGalleryProps } from "@/editor/components/landing/image-gallery";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
   label: "Image gallery",
@@ -36,9 +38,9 @@ export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
       label: "Images",
       type: "array",
       defaultItemProps: { src: "", alt: "" },
-      getItemSummary: (it) => it?.alt || it?.src || "Image",
+      getItemSummary: (it) => it?.caption || "Image",
       arrayFields: {
-        src: { label: "Image URL", type: "text" },
+        src: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
         alt: { label: "Alt text", type: "text", contentEditable: true },
         caption: { label: "Caption", type: "text", contentEditable: true },
       },

editor/components/landing/newsletter-cta.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Mail } from "lucide-react";
 import { NewsletterCta, type NewsletterCtaProps } from "@/editor/components/landing/newsletter-cta";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
   label: "Newsletter",
@@ -23,7 +25,7 @@ export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
     subheading: { label: "Subheading", type: "textarea", contentEditable: true },
     buttonLabel: { label: "Button label", type: "text", contentEditable: true },
     endpoint: { label: "Submit endpoint", type: "text" },
-    imageUrl: { label: "Image URL", type: "text" },
+    imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     layout: {
       label: "Layout",
       type: "radio",

editor/components/logos/logos.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Award } from "lucide-react";
 import { Logos, type LogosProps } from "@/editor/components/logos/logos";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const logosEditor: ComponentConfig<LogosProps> = {
   label: "Press / Logos",
@@ -33,7 +35,7 @@ export const logosEditor: ComponentConfig<LogosProps> = {
       defaultItemProps: { src: "", alt: "" },
       getItemSummary: (it) => it?.alt || "Logo",
       arrayFields: {
-        src: { label: "Image URL", type: "text" },
+        src: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
         alt: { label: "Alt text", type: "text", contentEditable: true },
       },
     },

editor/components/testimonials/testimonials.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Quote } from "lucide-react";
 import { Testimonials, type TestimonialsProps } from "@/editor/components/testimonials/testimonials";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
   label: "Testimonials",
@@ -48,7 +50,7 @@ export const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
         quote: { label: "Quote", type: "textarea", contentEditable: true },
         author: { label: "Author", type: "text", contentEditable: true },
         role: { label: "Role", type: "text", contentEditable: true },
-        avatar: { label: "Avatar URL", type: "text" },
+        avatar: { label: "Avatar", ...imageField({ adapter: frontendAiMediaAdapter }) },
       },
     },
   },