✨(template) allow to insert variable in message template

Author: sdemagny

src/frontend/src/features/layouts/components/mailbox-settings/modal-compose-template/_index.scss

@@ -3,3 +3,21 @@
     margin-bottom: var(--c--theme--spacings--s);
   }
 }
+
+.template-composer {
+  span[data-inline-content-type="template-variable"] {
+    align-items: center;
+    padding: 0 4px;
+    border-radius: 6px;
+    background: var(--c--theme--colors--primary-100);
+    color: var(--c--theme--colors--primary-800);
+    font-size: 12px;
+    border: 1px solid var(--c--theme--colors--primary-300);
+    user-select: none;
+    font-family: monospace;
+  }
+
+  .node-template-variable.ProseMirror-selectednode span[data-inline-content-type="template-variable"] {
+    background: #94badc;
+  }
+}

src/frontend/src/features/layouts/components/mailbox-settings/modal-compose-template/template-composer.tsx

@@ -1,5 +1,6 @@
 import { BlockNoteViewField } from "@/features/blocknote/blocknote-view-field";
 import { BlockNoteSchema, defaultBlockSpecs, defaultInlineContentSpecs } from "@blocknote/core";
+import { InlineTemplateVariable, TemplateVariableSelector } from "@/features/blocknote/inline-template-variable";
 import * as locales from '@blocknote/core/locales';
 import { useCreateBlockNote } from "@blocknote/react";
 import { FieldProps } from "@openfun/cunningham-react";
@@ -9,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { Toolbar } from "@/features/blocknote/toolbar";
 import MailHelper from "@/features/utils/mail-helper";
 import { BlockSignature, BlockSignatureConfigProps, SignatureTemplateSelector } from "@/features/blocknote/signature-block";
-import { MessageTemplateTypeChoices, useMailboxesMessageTemplatesAvailableList } from "@/features/api/gen";
+import { MessageTemplateTypeChoices, useMailboxesMessageTemplatesAvailableList, usePlaceholdersRetrieve } from "@/features/api/gen";
 import { useMailboxContext } from "@/features/providers/mailbox";
 
 const TEMPLATE_BLOCKNOTE_SCHEMA = BlockNoteSchema.create({
@@ -19,6 +20,7 @@ const TEMPLATE_BLOCKNOTE_SCHEMA = BlockNoteSchema.create({
     },
     inlineContentSpecs: {
         ...defaultInlineContentSpecs,
+        'template-variable': InlineTemplateVariable,
     }
 });
 
@@ -41,6 +43,13 @@ export const TemplateComposer = ({ blockNoteOptions, defaultValue, disabled = fa
     const form = useFormContext();
     const { selectedMailbox } = useMailboxContext();
 
+    const { data: { data: placeholders = {} } = {}, isLoading: isLoadingPlaceholders } = usePlaceholdersRetrieve({
+        query: {
+            refetchOnMount: true,
+            refetchOnWindowFocus: true,
+        }
+    });
+
     const { data: { data: activeSignatures = [] } = {}, isLoading: isLoadingSignatures } = useMailboxesMessageTemplatesAvailableList(
         selectedMailbox?.id || "",
         {
@@ -167,6 +176,10 @@ export const TemplateComposer = ({ blockNoteOptions, defaultValue, disabled = fa
                         isLoading={isLoadingSignatures}
                         mailboxId={selectedMailbox?.id}
                     />
+                    <TemplateVariableSelector
+                        variables={placeholders}
+                        isLoading={isLoadingPlaceholders}
+                    />
                 </Toolbar>
             </BlockNoteViewField>
             <input {...form.register("htmlBody")} type="hidden" />