frontend/react-editor-shopify-nextjs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update plugin-media

Browse Source
This commit is contained in:
Rami Bitar
2026-06-05 12:05:39 -04:00
parent 244832db64
commit 555dade01a
12 changed files with 15 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/commerce/collection.editor.tsx
View File

@@ -1,7 +1,5 @@
import { ComponentConfig } from "@reacteditor/core"; import { ComponentConfig } from "@reacteditor/core";
import { FolderOpen } from "lucide-react"; import { FolderOpen } from "lucide-react";
import { imageField } from "@reacteditor/plugin-media/field";
import { frontendAiMediaAdapter } from "@/services/media-adapter";
import { CollectionView, type CollectionProps } from "@/components/commerce/collection"; import { CollectionView, type CollectionProps } from "@/components/commerce/collection";
const collectionEditor: ComponentConfig<CollectionProps> = { const collectionEditor: ComponentConfig<CollectionProps> = {
@@ -64,7 +62,7 @@ const collectionEditor: ComponentConfig<CollectionProps> = {
}, },
customCoverImage: { customCoverImage: {
label: "Custom cover image", label: "Custom cover image",
...imageField({ adapter: frontendAiMediaAdapter }), type: "image",
}, },
columns: { columns: {
label: "Columns", label: "Columns",

4
components/cta/cta.editor.tsx
View File

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

4
components/hero/hero.editor.tsx
View File

@@ -1,8 +1,6 @@
import { ComponentConfig } from "@reacteditor/core"; import { ComponentConfig } from "@reacteditor/core";
import { imageField } from "@reacteditor/plugin-media/field";
import { LayoutTemplate } from "lucide-react"; import { LayoutTemplate } from "lucide-react";
import { Hero, type HeroProps } from "@/components/hero/hero"; import { Hero, type HeroProps } from "@/components/hero/hero";
import { frontendAiMediaAdapter } from "@/services/media-adapter";
const heroEditor: ComponentConfig<HeroProps> = { const heroEditor: ComponentConfig<HeroProps> = {
label: "Hero", label: "Hero",
@@ -51,7 +49,7 @@ const heroEditor: ComponentConfig<HeroProps> = {
}, },
getItemSummary: (item) => item?.label || "Button", getItemSummary: (item) => item?.label || "Button",
}, },
imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) }, imageUrl: { label: "Background image", type: "image" },
align: { align: {
label: "Alignment", label: "Alignment",
type: "radio", type: "radio",

4
components/landing/image-gallery.editor.tsx
View File

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

4
components/landing/newsletter-cta.editor.tsx
View File

@@ -1,8 +1,6 @@
import { ComponentConfig, Fields } from "@reacteditor/core"; import { ComponentConfig, Fields } from "@reacteditor/core";
import { imageField } from "@reacteditor/plugin-media/field";
import { Mail } from "lucide-react"; import { Mail } from "lucide-react";
import { NewsletterCta, type NewsletterCtaProps } from "@/components/landing/newsletter-cta"; import { NewsletterCta, type NewsletterCtaProps } from "@/components/landing/newsletter-cta";
import { frontendAiMediaAdapter } from "@/services/media-adapter";
const baseFields: Fields<NewsletterCtaProps> = { const baseFields: Fields<NewsletterCtaProps> = {
tagline: { label: "Tagline", type: "text", contentEditable: true }, tagline: { label: "Tagline", type: "text", contentEditable: true },
@@ -18,7 +16,7 @@ const baseFields: Fields<NewsletterCtaProps> = {
{ label: "Klaviyo", value: "klaviyo" }, { label: "Klaviyo", value: "klaviyo" },
], ],
}, },
imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) }, imageUrl: { label: "Image", type: "image" },
layout: { layout: {
label: "Layout", label: "Layout",
type: "radio", type: "radio",

4
components/logos/logos.editor.tsx
View File

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

4
components/navigation/navigation.editor.tsx
View File

@@ -1,8 +1,6 @@
import { ComponentConfig } from "@reacteditor/core"; import { ComponentConfig } from "@reacteditor/core";
import { Menu as MenuIcon } from "lucide-react"; import { Menu as MenuIcon } from "lucide-react";
import { imageField } from "@reacteditor/plugin-media/field";
import { Navigation, type NavigationProps } from "@/components/navigation/navigation"; import { Navigation, type NavigationProps } from "@/components/navigation/navigation";
import { frontendAiMediaAdapter } from "@/services/media-adapter";
const navigationEditor: ComponentConfig<NavigationProps> = { const navigationEditor: ComponentConfig<NavigationProps> = {
label: "Navigation", label: "Navigation",
@@ -24,7 +22,7 @@ const navigationEditor: ComponentConfig<NavigationProps> = {
tone: "default", tone: "default",
}, },
fields: { fields: {
logo: { label: "Logo", ...imageField({ adapter: frontendAiMediaAdapter }) }, logo: { label: "Logo", type: "image" },
brand: { label: "Logo Alt", type: "text", contentEditable: true }, brand: { label: "Logo Alt", type: "text", contentEditable: true },
links: { links: {
label: "Links", label: "Links",

4
components/testimonials/testimonials.editor.tsx
View File

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

4
config/root.tsx
View File

@@ -1,8 +1,6 @@
import { DefaultRootProps, RootConfig } from "@reacteditor/core"; import { DefaultRootProps, RootConfig } from "@reacteditor/core";
import { createFieldGoogleFonts } from "@reacteditor/field-google-fonts"; import { createFieldGoogleFonts } from "@reacteditor/field-google-fonts";
import { imageField } from "@reacteditor/plugin-media/field";
import { ThemeProvider, ThemeProps } from "@/components/ThemeProvider"; import { ThemeProvider, ThemeProps } from "@/components/ThemeProvider";
import { frontendAiMediaAdapter } from "@/services/media-adapter";
export type RootProps = DefaultRootProps & export type RootProps = DefaultRootProps &
ThemeProps & { ThemeProps & {
@@ -39,7 +37,7 @@ export const Root: RootConfig<{
fields: { fields: {
title: { label: "Page title", type: "text" }, title: { label: "Page title", type: "text" },
description: { label: "Description", type: "textarea" }, description: { label: "Description", type: "textarea" },
ogImage: { label: "OG image", ...imageField({ adapter: frontendAiMediaAdapter }) }, ogImage: { label: "OG image", type: "image" },
headerFont: { label: "Header font", ...headerFontField }, headerFont: { label: "Header font", ...headerFontField },
headerFontWeight: { headerFontWeight: {
label: "Header font weight", label: "Header font weight",

2
package.json
View File

@@ -29,7 +29,7 @@
"@reacteditor/field-google-fonts": "^0.0.3", "@reacteditor/field-google-fonts": "^0.0.3",
"@reacteditor/field-shopify": "^0.0.2", "@reacteditor/field-shopify": "^0.0.2",
"@reacteditor/plugin-ai": "0.0.8", "@reacteditor/plugin-ai": "0.0.8",
"@reacteditor/plugin-media": "0.0.5", "@reacteditor/plugin-media": "0.0.6",
"@reacteditor/plugin-shopify": "^0.0.1", "@reacteditor/plugin-shopify": "^0.0.1",
"@reacteditor/plugin-tailwind-cdn": "^0.0.3", "@reacteditor/plugin-tailwind-cdn": "^0.0.3",
"@shopify/storefront-api-client": "^1.0.0", "@shopify/storefront-api-client": "^1.0.0",

2
tsconfig.tsbuildinfo
View File

File diff suppressed because one or more lines are too long

8
yarn.lock
View File

@@ -1228,10 +1228,10 @@
remark-gfm "^4.0.0" remark-gfm "^4.0.0"
use-stick-to-bottom "^1.1.1" use-stick-to-bottom "^1.1.1"
"@reacteditor/plugin-media@0.0.5": "@reacteditor/plugin-media@0.0.6":
version "0.0.5" version "0.0.6"
resolved "https://registry.yarnpkg.com/@reacteditor/plugin-media/-/plugin-media-0.0.5.tgz#7fa53c73f30ff2521a4bec3164127b00b7fadf7d" resolved "https://registry.yarnpkg.com/@reacteditor/plugin-media/-/plugin-media-0.0.6.tgz#15f35e8d4af3982c4fe3d10767615b501eeb1f24"
integrity sha512-7FusJstm2BOEGxVg4JWWw7QMzujGVvJzMac5ESWGxh4kC1hOBcOL8bUstv/j4fD/Uj7mAjEaXbLPRUzdgn45Bw== integrity sha512-uj5ANPZ3DVDyNb9h40TMzQrOeB9d6/b0HNroOWbYCL4WG5l9NnWG3bXU3y5qu9n3GR2LOFvNVuBFCXwbpOOq5A==
"@reacteditor/plugin-shopify@^0.0.1": "@reacteditor/plugin-shopify@^0.0.1":
version "0.0.1" version "0.0.1"