✨(front) add mail signatures

Allow to manage maildomain's signature from the administration. Then
in the Message composer allow the user to select a signature then render
a preview in the MessageEditor

Author: jbpenrath

src/frontend/src/features/forms/components/message-editor/_index.scss renamed to src/frontend/src/features/blocknote/blocknote-view-field/_index.scss

@@ -1,23 +1,23 @@
-.message-editor {
-    &--error {
-        .message-editor {
+.composer-field {
+    &.c__field--error {
+        .composer-field-input {
             border-color: var(--c--theme--colors--error);
         }
     }
-    &--success {
-        .message-editor {
+    &.c__field--success {
+        .composer-field-input {
             border-color: var(--c--theme--colors--success);
         }
     }
     &--disabled {
         pointer-events: none;
-        .message-editor-input {
+        .composer-field-input {
             cursor: not-allowed;
             border-color: var(--c--theme--colors--greyscale-200);
         }
     }
 }
-.message-editor-input {
+.composer-field-input {
     border-radius: var(--c--components--forms-input--border-radius);
     border-width: var(--c--components--forms-input--border-width);
     border-color: var(--c--components--forms-input--border-color);

src/frontend/src/features/blocknote/blocknote-view-field/index.tsx

@@ -0,0 +1,26 @@
+import { BlockNoteView } from "@blocknote/mantine";
+import { Field, FieldProps } from "@openfun/cunningham-react";
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
+
+type BlockNoteViewFieldProps = PropsWithChildren<FieldProps & {
+    composerProps: Parameters<typeof BlockNoteView>[0];
+    disabled?: boolean;
+}>
+export const BlockNoteViewField = ({ composerProps, disabled = false, children, ...fieldProps }: BlockNoteViewFieldProps) => {
+    return (
+        <Field {...fieldProps} className={clsx(fieldProps?.className, "composer-field", { 'composer-field--disabled': disabled })}>
+            <BlockNoteView
+                theme="light"
+                sideMenu={false}
+                slashMenu={false}
+                formattingToolbar={false}
+                {...composerProps}
+                className={clsx(composerProps.className, "composer-field-input")}
+                editable={!disabled}
+            >
+                {children}
+            </BlockNoteView>
+        </Field>
+    )
+}

src/frontend/src/features/blocknote/inline-template-variable/_index.scss

@@ -0,0 +1 @@
+

src/frontend/src/features/blocknote/inline-template-variable/index.tsx

@@ -0,0 +1,85 @@
+import { createReactInlineContentSpec } from "@blocknote/react";
+import React, { useMemo } from "react";
+
+import "@blocknote/mantine/style.css";
+import {
+  useBlockNoteEditor,
+  useComponentsContext,
+} from "@blocknote/react";
+import { Icon, IconSize, Spinner } from "@gouvfr-lasuite/ui-kit";
+import { PlaceholdersRetrieve200 } from "@/features/api/gen";
+
+type TemplateVariableSelectorProps = {
+  variables: PlaceholdersRetrieve200;
+  isLoading: boolean;
+}
+
+export const TemplateVariableSelector = ({ variables, isLoading }: TemplateVariableSelectorProps) => {
+  const editor = useBlockNoteEditor();
+  const Components = useComponentsContext()!;
+  const variableItems = useMemo(() => {
+    if (!variables) return [];
+    return Object.entries(variables).map(([value, label]) => ({
+      text: label,
+      icon: null,
+      isSelected: false,
+      onClick: () => {
+        editor.insertInlineContent([{ type: "template-variable", props: { label, value } }, " "]);
+      }
+    }));
+  }, [variables]);
+
+  if (isLoading) {
+    return (
+      <Components.FormattingToolbar.Button icon={<Spinner size="sm" />} isDisabled={true} label="Loading variables..." mainTooltip="Loading variables..." />
+    );
+  }
+
+  if (!variables) {
+    return null;
+  }
+
+  return (
+    <Components.FormattingToolbar.Select
+      key={"templateVariableSelector"}
+      items={[
+        {
+          text: "Variables",
+          isSelected: true,
+          isDisabled: true,
+          icon: <Icon name="space_bar" size={IconSize.SMALL} />,
+          onClick: () => {}
+        },
+        ...variableItems,
+      ]}
+    />
+  );
+}
+
+
+export const InlineTemplateVariable = createReactInlineContentSpec(
+  {
+    type: "template-variable",
+    content: "none",
+    draggable: true,
+    propSchema: {
+      value: { default: "" },
+      label: { default: "" },
+    },
+  },
+  {
+    render: ({ inlineContent: { props } }) => {
+      return (
+        // TODO : Find a way to display variable name
+        // and (de)serialize this inline content during export and parsing
+        <span data-inline-type="template-variable">
+          {`{${props.value}}`}
+        </span>
+      );
+    },
+  }
+);
+
+
+
+

src/frontend/src/features/blocknote/signature-block/index.tsx

@@ -0,0 +1,132 @@
+import { createReactBlockSpec, useBlockNoteEditor, useComponentsContext, useEditorContentOrSelectionChange } from "@blocknote/react";
+import { MessageTemplateKindChoices, useMessageTemplatesList, useMessageTemplatesRenderRetrieve } from "@/features/api/gen";
+import { Icon, IconSize, Spinner } from "@gouvfr-lasuite/ui-kit";
+import { useEffect, useState } from "react";
+
+
+type SignatureTemplateSelectorProps = {
+    mailboxId: string;
+}
+
+export const SignatureTemplateSelector = ({ mailboxId }: SignatureTemplateSelectorProps) => {
+    const editor = useBlockNoteEditor();
+    const Components = useComponentsContext()!;
+    const { data: signatures, isLoading } = useMessageTemplatesList({
+        query: {
+            enabled: !!mailboxId,
+            meta: { noGlobalError: true },
+        },
+        request: {
+            params: {
+                mailbox_id: mailboxId,
+                kind: MessageTemplateKindChoices.signature,
+                is_active: "true",
+            }
+        }
+    });
+
+    // Tracks whether the text & background are both blue.
+    const [isSelected, setIsSelected] = useState<string>();
+
+    // Updates state on content or selection change.
+    useEditorContentOrSelectionChange(() => {
+        const signatureBlock = editor.getBlock('signature');
+        setIsSelected(signatureBlock?.props.templateId || null);
+    }, editor);
+
+    // Doesn't render unless a at least one block with inline content is
+    // selected. You can use a similar pattern of returning `null` to
+    // conditionally render buttons based on the editor state.
+    // const blocks = useSelectedBlocks();
+    // if (blocks.filter((block) => block.content !== undefined)) {
+    //   return null;
+    // }
+
+    useEffect(() => {
+        if(!isSelected) {
+            const signatureBlock = editor.getBlock('signature');
+            if (signatureBlock) {
+                setIsSelected(signatureBlock.props.templateId);
+            }
+        }
+    }, []);
+
+    if (isLoading) {
+        return <Spinner size="sm" />;
+    }
+
+    if (!mailboxId || !signatures?.data) {
+        return null;
+    }
+
+    return (
+      <Components.FormattingToolbar.Select
+        key={"templateVariableSelector"}
+        items={[
+          {
+            text: "Signatures",
+            isSelected: !isSelected,
+            isDisabled: true,
+            icon: <Icon name="content_copy" size={IconSize.SMALL} />,
+            onClick: () => {}
+          },
+          ...signatures.data.map((signature) => ({
+            text: `Signature : ${signature.name}`,
+            isSelected: isSelected === signature.id,
+            icon: <Icon name="content_copy" size={IconSize.SMALL} />,
+            onClick: () => {
+                const signatureBlock = editor.getBlock('signature');
+                if (signatureBlock) {
+                    editor.replaceBlocks(
+                        ["signature"],
+                        [{ id: "signature", type: "signature", props: { templateId: signature.id, mailboxId: mailboxId } }]);
+                } else {
+                    editor.insertBlocks(
+                        [{ id: "signature", type: "signature", props: { templateId: signature.id, mailboxId: mailboxId } }],
+                        editor.document[0].id,
+                        "after"
+                    );
+                }
+
+            }
+          })),
+        ]}
+      />
+    );
+  }
+
+export const BlockSignature = createReactBlockSpec(
+    {
+        type: "signature",
+        content: "none",
+        isSelectable: false,
+        propSchema: {
+            templateId: { default: "" },
+            mailboxId: { default: "" },
+            username: { default: "" },
+        }
+    },
+    {
+        render: ({ block : { props }}) => {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const { data: signature, isLoading } = useMessageTemplatesRenderRetrieve(props.templateId, {
+                request: {
+                    params: {
+                        mailbox_id: props.mailboxId
+                    }
+                }
+            });
+
+            if (isLoading) {
+                return <Spinner size="sm" />;
+            }
+
+            return (
+                <div dangerouslySetInnerHTML={{ __html: signature?.data.html_body || "" }} />
+            )
+        },
+        toExternalHTML: ({ block : { props }}) => {
+            return <p>{`<SignatureID>${props.templateId}</SignatureID>`}</p>
+        }
+    }
+)

src/frontend/src/features/forms/components/message-editor/toolbar.tsx renamed to src/frontend/src/features/blocknote/toolbar.tsx

@@ -1,6 +1,9 @@
 import { BasicTextStyleButton, BlockTypeSelect, CreateLinkButton, FormattingToolbar } from "@blocknote/react";
 
-const MessageEditorToolbar = () => {
+type ToolbarProps = {
+    children?: React.ReactNode;
+}
+export const Toolbar = ({ children }: ToolbarProps) => {
     return (
         <FormattingToolbar>
             <BlockTypeSelect key={"blockTypeSelect"} />
@@ -20,13 +23,8 @@ const MessageEditorToolbar = () => {
                 basicTextStyle={"strike"}
                 key={"strikeStyleButton"}
             />
-            <BasicTextStyleButton
-                key={"codeStyleButton"}
-                basicTextStyle={"code"}
-            />
             <CreateLinkButton key={"createLinkButton"} />
+            {children}
         </FormattingToolbar>
     )
 }
-
-export default MessageEditorToolbar;