@carlonicora/nextjs-jsonapi 5.3.0 → 5.4.0

package/messages/it.json

@@ -736,6 +736,99 @@
       }
     }
   },
+  "blog": {
+    "admin": {
+      "title": "Blog",
+      "newPost": "Nuovo articolo",
+      "editPost": "Modifica articolo",
+      "newCategory": "Nuova categoria",
+      "editCategory": "Modifica categoria",
+      "empty": "Nessun articolo. Scrivi il primo.",
+      "emptyCategories": "Nessuna categoria."
+    },
+    "tabs": {
+      "posts": "Articoli",
+      "categories": "Categorie",
+      "layout": "Impaginazione"
+    },
+    "fields": {
+      "title": "Titolo",
+      "slug": "Slug",
+      "slugHelp": "L'ultima parte dell'indirizzo dell'articolo. Cambiarlo rompe i link che puntano già all'articolo.",
+      "summary": "Sommario",
+      "summaryHelp": "Lascialo vuoto e lo scriverà l'AI a partire dal testo.",
+      "body": "Testo",
+      "coverImage": "Immagine di copertina",
+      "coverImageAlt": "Descrizione dell'immagine di copertina",
+      "categories": "Categorie",
+      "originalLanguage": "Lingua originale",
+      "name": "Nome",
+      "description": "Descrizione",
+      "image": "Immagine",
+      "status": "Stato",
+      "publishedAt": "Pubblicato",
+      "languages": "Lingue pronte"
+    },
+    "status": {
+      "draft": "Bozza",
+      "published": "Pubblicato",
+      "unpublished": "Ritirato"
+    },
+    "actions": {
+      "publish": "Pubblica",
+      "unpublish": "Ritira",
+      "edit": "Modifica",
+      "translateAgain": "Traduci di nuovo",
+      "compareWithOriginal": "Confronta con l'originale",
+      "hideComparison": "Nascondi confronto"
+    },
+    "translation": {
+      "original": "Originale",
+      "translatedFrom": "Lingua originale: {language}, tradotto il {date}",
+      "editedByHand": "Modificato a mano",
+      "overwriteWarning": "Modificare l'originale lo farà tradurre di nuovo e sostituirà queste modifiche.",
+      "translating": "Traduzione in corso…",
+      "failed": "Traduzione non riuscita",
+      "pending": "In attesa di traduzione"
+    },
+    "layout": {
+      "title": "Impaginazione dell'elenco pubblico",
+      "featured": "In evidenza",
+      "featuredDescription": "L'articolo più recente in grande, poi una griglia di schede su tre colonne.",
+      "column": "Colonna",
+      "columnDescription": "Una colonna di lettura stretta, una riga per articolo con l'immagine accanto al testo.",
+      "rail": "Barra laterale",
+      "railDescription": "Ricerca e categorie in una barra laterale, l'articolo più recente in grande, gli altri su due colonne.",
+      "saved": "Impaginazione salvata"
+    },
+    "public": {
+      "eyebrow": "Blog",
+      "title": "Note e guide",
+      "subtitle": "Idee, guide e novità dal team.",
+      "all": "Tutti",
+      "search": "Cerca",
+      "searchPlaceholder": "Cerca negli articoli",
+      "loadMore": "Carica altri",
+      "readingTime": "{minutes} min di lettura",
+      "updated": "Aggiornato il {date}",
+      "by": "Di {author}",
+      "back": "Tutti gli articoli",
+      "moreIn": "Altro in {category}",
+      "empty": "Ancora nessun articolo.",
+      "noResults": "Nessun articolo corrisponde alla ricerca."
+    },
+    "entities": {
+      "post": "Articolo",
+      "posts": "Articoli",
+      "category": "Categoria",
+      "categories": "Categorie"
+    },
+    "errors": {
+      "title": "Il titolo è obbligatorio",
+      "name": "Il nome è obbligatorio",
+      "language": "Scegli la lingua originale"
+    }
+  },
   "canvas": {
     "toolbar": {
       "fitView": "Adatta alla vista",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",
@@ -74,6 +74,16 @@
       "import": "./dist/features/help/server.mjs",
       "require": "./dist/features/help/server.js"
     },
+    "./blog": {
+      "types": "./dist/features/blog/index.d.ts",
+      "import": "./dist/features/blog/index.mjs",
+      "require": "./dist/features/blog/index.js"
+    },
+    "./blog/server": {
+      "types": "./dist/features/blog/server.d.ts",
+      "import": "./dist/features/blog/server.mjs",
+      "require": "./dist/features/blog/server.js"
+    },
     "./tokenusage": {
       "types": "./dist/features/tokenusage/index.d.ts",
       "import": "./dist/features/tokenusage/index.mjs",

package/src/components/editors/BlockNoteEditor.tsx

@@ -78,6 +78,13 @@ export type BlockNoteEditorProps = {
   diffContent?: PartialBlock[];
   placeholder?: string;
   bordered?: boolean;
+  /**
+   * Storage folder for pasted images, used instead of the current company's
+   * `companies/<companyId>/<type>` folder: the image key becomes
+   * `<uploadKeyPrefix>/<id>/<file name>`. For platform content edited by users
+   * who belong to no company (the blog). Omitted: the company folder, as before.
+   */
+  uploadKeyPrefix?: string;
   inlineContentSpecs?: Record<string, any>;
   renderOverlays?: (editor: any) => React.ReactNode;
   enableMentions?: boolean;
@@ -405,6 +412,7 @@ export default function BlockNoteEditor({
   diffContent,
   placeholder,
   bordered,
+  uploadKeyPrefix,
   inlineContentSpecs,
   renderOverlays,
   enableMentions,
@@ -547,7 +555,7 @@ export default function BlockNoteEditor({
 
   const uploadImage = useCallback(
     async (file: File): Promise<string> => {
-      if (!company) {
+      if (!company && !uploadKeyPrefix) {
         errorToast({
           title: t(`common.errors.upload`),
           error: t(`common.errors.upload_description`),
@@ -556,7 +564,9 @@ export default function BlockNoteEditor({
       }
 
       const fileType = file.type;
-      const key = `companies/${company.id}/${type}/${id}/${file.name}`;
+      const key = uploadKeyPrefix
+        ? `${uploadKeyPrefix}/${id}/${file.name}`
+        : `companies/${company!.id}/${type}/${id}/${file.name}`;
 
       const s3: S3Interface = await S3Service.getPreSignedUrl({
         key: key,
@@ -577,7 +587,7 @@ export default function BlockNoteEditor({
 
       return signedImage.url;
     },
-    [company, id, t],
+    [company, id, t, type, uploadKeyPrefix],
   );
 
   // Utility: Remove trailing empty blocks for read-only display

package/src/components/forms/FormBlockNote.tsx

@@ -41,6 +41,7 @@ export function FormBlockNote({
   aiConfig,
   aiHandleRef,
   headerAction,
+  uploadKeyPrefix,
 }: {
   form: any;
   id: string;
@@ -74,6 +75,8 @@ export function FormBlockNote({
   aiHandleRef?: React.MutableRefObject<import("../editors/BlockNoteEditor").BlockNoteAiHandle | null>;
   /** Rendered on the label row, right-aligned — e.g. a "Suggest impression" button. */
   headerAction?: React.ReactNode;
+  /** See `BlockNoteEditorProps.uploadKeyPrefix`. */
+  uploadKeyPrefix?: string;
 }) {
   const initialContentRef = useRef<any>(null);
   const lastEditorContentRef = useRef<any>(undefined);
@@ -133,6 +136,7 @@ export function FormBlockNote({
               bordered
               inlineContentSpecs={inlineContentSpecs}
               renderOverlays={renderOverlays}
+              uploadKeyPrefix={uploadKeyPrefix}
               enableMentions={enableMentions}
               mentionSearchFn={mentionSearchFn}
               mentionSearchParams={mentionSearchParams}

package/src/components/navigations/ContentTitle.tsx

@@ -11,9 +11,20 @@ type TitleProps = {
   className?: string;
   module?: ModuleWithPermissions;
   prioritizeFunctions?: boolean;
+  /** Renders the title line as a real heading (public SEO pages). Omitted: a plain div, as before. */
+  headingLevel?: 1 | 2;
 };
 
-export function ContentTitle({ module, type, element, functions, className, prioritizeFunctions }: TitleProps) {
+export function ContentTitle({
+  module,
+  type,
+  element,
+  functions,
+  className,
+  prioritizeFunctions,
+  headingLevel,
+}: TitleProps) {
+  const ElementTag = headingLevel === 1 ? "h1" : headingLevel === 2 ? "h2" : "div";
   const [clientFunctions, setClientFunctions] = useState<ReactNode>(null);
   const [isClient, setIsClient] = useState(false);
 
@@ -43,9 +54,9 @@ export function ContentTitle({ module, type, element, functions, className, prio
           </div>
         )}
         {/* Element (name) - truncates with ellipsis when space is limited */}
-        <div className={cn("text-primary text-3xl font-semibold", prioritizeFunctions ? "truncate" : "w-full")}>
+        <ElementTag className={cn("text-primary text-3xl font-semibold", prioritizeFunctions ? "truncate" : "w-full")}>
           {element}
-        </div>
+        </ElementTag>
       </div>
       {/* Functions section - doesn't shrink when prioritizeFunctions is true */}
       {isClient && clientFunctions && (

package/src/core/index.ts

@@ -75,6 +75,10 @@ export * from "../features/email-automation/EmailAutomationTriggerModule";
 // server page can wrap EmailAutomationService.findOne in cache(). The client-marked
 // ./email-automations entry carries only components, contexts and hooks.
 export * from "../features/email-automation/data";
+// Blog modules and data: server-safe, same placement as email automation above.
+// The client-marked ./blog entry carries only components, contexts and hooks.
+export * from "../features/blog/BlogModules";
+export * from "../features/blog/data";
 export * from "../features/handbook/HandbookPageModule";
 export * from "../features/handbook/HandbookSectionModule";
 export * from "../features/handbook/HandbookThreadMessageModule";

package/src/core/registry/ModuleRegistry.ts

@@ -46,6 +46,12 @@ export interface FoundationModuleDefinitions {
   EmailAutomationStep: ModuleWithPermissions;
   EmailAutomationEnrollment: ModuleWithPermissions;
   EmailAutomationTrigger: ModuleWithPermissions;
+  // Blog modules
+  BlogPost: ModuleWithPermissions;
+  BlogPostTranslation: ModuleWithPermissions;
+  BlogCategory: ModuleWithPermissions;
+  BlogCategoryTranslation: ModuleWithPermissions;
+  BlogSettings: ModuleWithPermissions;
   // Referral modules
   Referral: ModuleWithPermissions;
   ReferralStats: ModuleWithPermissions;

package/src/features/blog/BlogModules.ts

@@ -0,0 +1,49 @@
+import { NewspaperIcon } from "lucide-react";
+import { ModuleFactory } from "../../permissions";
+import { BlogCategory } from "./data/BlogCategory";
+import { BlogCategoryTranslation } from "./data/BlogCategoryTranslation";
+import { BlogPost } from "./data/BlogPost";
+import { BlogPostTranslation } from "./data/BlogPostTranslation";
+import { BlogSettings } from "./data/BlogSettings";
+import { BLOG_MODULE_ID } from "./types/blog.constants";
+
+export const BlogPostModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: BLOG_MODULE_ID,
+    pageUrl: "/administration/blog",
+    name: "blog-posts",
+    model: BlogPost,
+    icon: NewspaperIcon,
+  });
+
+export const BlogPostTranslationModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: BLOG_MODULE_ID,
+    name: "blog-post-translations",
+    model: BlogPostTranslation,
+    icon: NewspaperIcon,
+  });
+
+export const BlogCategoryModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: BLOG_MODULE_ID,
+    name: "blog-categories",
+    model: BlogCategory,
+    icon: NewspaperIcon,
+  });
+
+export const BlogCategoryTranslationModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: BLOG_MODULE_ID,
+    name: "blog-category-translations",
+    model: BlogCategoryTranslation,
+    icon: NewspaperIcon,
+  });
+
+export const BlogSettingsModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: BLOG_MODULE_ID,
+    name: "blog-settings",
+    model: BlogSettings,
+    icon: NewspaperIcon,
+  });

package/src/features/blog/components/admin/BlogAdminContainer.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { RoundPageContainer } from "../../../../components";
+import { Modules } from "../../../../core";
+import { AdministrationProvider } from "../../../administration/contexts/AdministrationContext";
+import { BlogCategoriesList } from "./BlogCategoriesList";
+import { BlogLayoutSetting } from "./BlogLayoutSetting";
+import { BlogPostsList } from "./BlogPostsList";
+
+/**
+ * Blog admin page: posts, categories and the public list layout, one tab each.
+ * Client component because `module={Modules.BlogPost}` carries an icon component.
+ * Mirrors features/email-automation/components/containers/EmailAutomationsListContainer.tsx.
+ */
+export function BlogAdminContainer() {
+  const t = useTranslations();
+
+  return (
+    <AdministrationProvider>
+      <RoundPageContainer
+        module={Modules.BlogPost}
+        fullWidth
+        tabs={[
+          { sectionKey: "posts", label: t("blog.tabs.posts"), content: <BlogPostsList fullWidth /> },
+          { sectionKey: "categories", label: t("blog.tabs.categories"), content: <BlogCategoriesList fullWidth /> },
+          { sectionKey: "layout", label: t("blog.tabs.layout"), content: <BlogLayoutSetting /> },
+        ]}
+      />
+    </AdministrationProvider>
+  );
+}

package/src/features/blog/components/admin/BlogCategoriesList.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { TagIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { Button, EmptyState } from "../../../../shadcnui";
+import { BlogCategoryFields, BlogCategoryInterface, BlogCategoryService } from "../../data";
+import "../../hooks/useBlogCategoryTableStructure";
+import { BlogCategoryEditor } from "./BlogCategoryEditor";
+
+type BlogCategoriesListProps = {
+  /** Pass when the list is the page's own content inside a `RoundPageContainer fullWidth`. */
+  fullWidth?: boolean;
+};
+
+/**
+ * Admin categories table. Categories have no page of their own: creating and
+ * editing both stay on this tab and refresh the list.
+ * Mirrors features/email-automation/components/lists/EmailAutomationsList.tsx.
+ */
+export function BlogCategoriesList({ fullWidth }: BlogCategoriesListProps = {}) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<BlogCategoryInterface> = useDataListRetriever({
+    retriever: (params) => BlogCategoryService.findMany(params),
+    retrieverParams: {},
+    module: Modules.BlogCategory,
+  });
+
+  const functions: ReactNode[] = [
+    <BlogCategoryEditor
+      key="create-blog-category"
+      onSuccess={data.refresh}
+      trigger={
+        <Button render={<div />} nativeButton={false} size="sm" variant="outline">
+          {t("blog.admin.newCategory")}
+        </Button>
+      }
+    />,
+  ];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[BlogCategoryFields.name, BlogCategoryFields.languages]}
+      tableGeneratorType={Modules.BlogCategory}
+      functions={functions}
+      fullWidth={fullWidth}
+      title={t("blog.entities.categories")}
+      emptyState={<EmptyState icon={TagIcon} title={t("blog.admin.emptyCategories")} />}
+    />
+  );
+}

package/src/features/blog/components/admin/BlogCategoryEditor.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronDownIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import { EditorSheet, FormInput, FormSelect, FormTextarea, SectionHeader } from "../../../../components";
+import { Modules } from "../../../../core";
+import { getI18nSupportedLocales, useI18nLocale } from "../../../../i18n";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../shadcnui";
+import {
+  BlogCategoryInterface,
+  BlogCategoryService,
+  BlogCategoryTranslationInterface,
+  BlogCategoryTranslationService,
+} from "../../data";
+import { BlogCoverImageField, BlogImageSelection, uploadBlogImage } from "./BlogCoverImageField";
+import { BlogTranslationStatus, useBlogLanguageName } from "./BlogTranslationStatus";
+import { BLOG_CATEGORY_UPLOAD_PREFIX } from "../../types/blog.constants";
+
+type BlogCategoryEditorProps = {
+  /** Edit mode when present. */
+  category?: BlogCategoryInterface;
+  trigger?: ReactNode;
+  onSuccess?: () => void | Promise<void>;
+};
+
+const buildTranslationSchema = (t: (key: string) => string) =>
+  z.object({
+    id: z.string(),
+    name: z.string().min(1, { message: t("blog.errors.name") }),
+    slug: z.string().optional(),
+    description: z.string().optional(),
+  });
+
+const buildFormSchema = (t: (key: string) => string) =>
+  z.object({
+    id: z.string().uuid(),
+    originalLanguage: z.string().min(1, { message: t("blog.errors.language") }),
+    name: z.string().min(1, { message: t("blog.errors.name") }),
+    slug: z.string().optional(),
+    description: z.string().optional(),
+    image: z.string().optional(),
+    translations: z.array(buildTranslationSchema(t)),
+  });
+
+type TranslationValues = z.infer<ReturnType<typeof buildTranslationSchema>>;
+
+const sameTranslation = (a: TranslationValues, b?: TranslationValues) =>
+  !!b && a.name === b.name && (a.slug ?? "") === (b.slug ?? "") && (a.description ?? "") === (b.description ?? "");
+
+/**
+ * Creates a category, or edits its original-language text and image plus, in
+ * edit mode, each AI translation by hand (one collapsible section per language).
+ * Submit updates the category when the original changed (which re-translates
+ * every other language) and each translation that changed (marked `manual`).
+ * Mirrors features/how-to/components/forms/HowToEditor.tsx.
+ */
+export function BlogCategoryEditor({ category, trigger, onSuccess }: BlogCategoryEditorProps) {
+  const t = useTranslations();
+  const formSchema = useMemo(() => buildFormSchema(t), [t]);
+  const locale = useI18nLocale();
+  const languageName = useBlogLanguageName();
+  const [image, setImage] = useState<BlogImageSelection>(null);
+
+  const languages = useMemo(() => getI18nSupportedLocales(), []);
+  const original = category?.original;
+  const translations: BlogCategoryTranslationInterface[] = useMemo(
+    () => (category?.translations ?? []).filter((translation) => !translation.isOriginal),
+    [category],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: category?.id || v4(),
+      originalLanguage: category?.originalLanguage ?? (languages.includes(locale) ? locale : languages[0]),
+      name: original?.name ?? category?.name ?? "",
+      slug: original?.slug ?? "",
+      description: original?.description ?? "",
+      // The stored value is a signed URL, not a key: only a newly picked file writes a key.
+      image: "",
+      translations: translations.map((translation) => ({
+        id: translation.id,
+        name: translation.name ?? "",
+        slug: translation.slug ?? "",
+        description: translation.description ?? "",
+      })),
+    }),
+    [category, original, translations, languages, locale],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("blog.entities.category")}
+      entityName={original?.name ?? category?.name}
+      title={category ? t("blog.admin.editCategory") : t("blog.admin.newCategory")}
+      isEdit={!!category}
+      module={Modules.BlogCategory}
+      size="md"
+      onSubmit={async (values) => {
+        if (values.image && image) await uploadBlogImage({ key: values.image, selection: image });
+        const imageKey = values.image && image ? values.image : undefined;
+
+        if (!category) {
+          return BlogCategoryService.create({
+            id: values.id,
+            originalLanguage: values.originalLanguage,
+            name: values.name,
+            description: values.description,
+            image: imageKey,
+          });
+        }
+
+        const defaults = getDefaultValues();
+        const originalChanged =
+          !!imageKey ||
+          !sameTranslation(
+            { id: values.id, name: values.name, slug: values.slug, description: values.description },
+            { id: defaults.id, name: defaults.name, slug: defaults.slug, description: defaults.description },
+          );
+
+        if (originalChanged) {
+          await BlogCategoryService.update({
+            id: values.id,
+            originalLanguage: category?.originalLanguage,
+            name: values.name,
+            slug: values.slug || undefined,
+            description: values.description,
+            image: imageKey,
+          });
+        }
+
+        for (const translation of values.translations) {
+          const before = defaults.translations.find((candidate) => candidate.id === translation.id);
+          if (sameTranslation(translation, before)) continue;
+          await BlogCategoryTranslationService.update({
+            id: translation.id,
+            name: translation.name,
+            slug: translation.slug || undefined,
+            description: translation.description,
+          });
+        }
+
+        return { id: values.id };
+      }}
+      onReset={() => {
+        setImage(null);
+        return getDefaultValues();
+      }}
+      onSuccess={onSuccess ?? (() => {})}
+      trigger={trigger}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        {!category && (
+          <FormSelect
+            form={form}
+            id="originalLanguage"
+            name={t("blog.fields.originalLanguage")}
+            values={languages.map((language) => ({ id: language, text: languageName(language) }))}
+            isRequired
+          />
+        )}
+        <FormInput form={form} id="name" name={t("blog.fields.name")} isRequired />
+        {category && (
+          <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
+        )}
+        <FormTextarea form={form} id="description" name={t("blog.fields.description")} />
+        <BlogCoverImageField
+          form={form}
+          id="image"
+          label={t("blog.fields.image")}
+          keyPrefix={BLOG_CATEGORY_UPLOAD_PREFIX}
+          entityId={form.getValues("id")}
+          currentUrl={category?.image}
+          selection={image}
+          onSelectionChange={setImage}
+        />
+
+        {translations.length > 0 && (
+          <div className="flex flex-col gap-y-2">
+            <SectionHeader className="mt-2">{t("blog.fields.languages")}</SectionHeader>
+            {translations.map((translation, index) => (
+              <Collapsible key={translation.id} className="rounded-md border">
+                <CollapsibleTrigger className="flex w-full items-center justify-between gap-x-2 px-3 py-2 text-start">
+                  <span className="flex items-center gap-x-2 text-sm font-medium">
+                    {languageName(translation.language)}
+                    <BlogTranslationStatus aiStatus={translation.aiStatus} />
+                  </span>
+                  <ChevronDownIcon className="text-muted-foreground size-4" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="flex flex-col gap-y-4 border-t p-3">
+                  {translation.aiStatus === "failed" && (
+                    <BlogTranslationStatus
+                      aiStatus={translation.aiStatus}
+                      onRetranslate={async () => {
+                        await BlogCategoryTranslationService.retranslate({ id: translation.id });
+                        await onSuccess?.();
+                      }}
+                    />
+                  )}
+                  <FormInput form={form} id={`translations.${index}.name`} name={t("blog.fields.name")} isRequired />
+                  <FormInput
+                    form={form}
+                    id={`translations.${index}.slug`}
+                    name={t("blog.fields.slug")}
+                    description={t("blog.fields.slugHelp")}
+                  />
+                  <FormTextarea
+                    form={form}
+                    id={`translations.${index}.description`}
+                    name={t("blog.fields.description")}
+                  />
+                </CollapsibleContent>
+              </Collapsible>
+            ))}
+          </div>
+        )}
+      </div>
+    </EditorSheet>
+  );
+}