[GH-ISSUE #171] How to use Button into mail content #57

New issue

Closed

opened 2026-03-01 14:39:47 +03:00 by kerem · 1 comment

kerem commented

2026-03-01 14:39:47 +03:00

Owner

Originally created by @AnthSuz on GitHub (Mar 26, 2025).
Original GitHub issue: https://github.com/arikchakma/maily.to/issues/171

Hello,

I've been trying to implement Maily in my project for 2 days now because it has an important asset for my use, the addition of a button in the body of the mail.

Only when I want to log the content of my mail in HTML format via generateHTML if I have a button in my body I get this error:
Uncaught RangeError: Unknown node type: button

I've seen the same problem with image or columns for example, but I haven't tested everything.

Looking at your code, I can see that when you copy html in your example, you're making a .post request where you send a button type as well and receive an a type.

How do you carry out the transformation?

Thanks,

My code :

import "@maily-to/core/style.css";

import { FromContentSms } from "@/components/parameters/automation/FormContentSms";
import { TagsEmailSms } from "@/components/parameters/automation/TagsEmailSms";
import { PageLayout } from "@/components/ui/pageLayout/PageLayout";
import { createFileRoute, useParams } from "@tanstack/react-router";
import { ActionType, typeType } from "..";
import { useState } from "react";
import { Editor } from "@maily-to/core";
import type { JSONContent, Editor as TiptapEditor } from "@tiptap/core";
import { Icons } from "@/components/ui/icons";
import { faEnvelope } from "@fortawesome/pro-light-svg-icons";
import { Input } from "@/components/ui/input";
import Typography from "@/components/ui/Typography";
import { generateHTML, generateJSON } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";
import { useGetPlaceConfig } from "@/services/place/useGetPlaceConfig";

export const Route = createFileRoute("/club/$clubId/settings/automation/$type/$action")({
component: RouteComponent,
});

function getValueFromTypeAndAction(type: typeType, action: ActionType) {
return valueFromTypeAndAction[type][action];
}

function RouteComponent() {
const params = useParams({ from: "/club/$clubId/settings/automation/$type/$action" });
const [editor, setEditor] = useState();
const { data: placeConfig } = useGetPlaceConfig();

return (
<PageLayout
title={getValueFromTypeAndAction(params.type as typeType, params.action as ActionType).titlePage}
link="/club/$clubId/settings/automation"
linkText="Email & SMS de service"
fullWidth
>

{params.type === "sms" && (
<FromContentSms
title={getValueFromTypeAndAction(params.type as typeType, params.action as ActionType).titleFormContent}
placeholder={getValueFromTypeAndAction(params.type as typeType, params.action as ActionType).placeholder}
data={getValueFromTypeAndAction(params.type as typeType, params.action as ActionType).data}
/>
)}

Sujet

    <button
      onClick={() => {
        console.log("LOG ->", generateHTML(editor?.getJSON() as JSONContent, [StarterKit]));
      }}
    >
      show html
    </button>
    <TagsEmailSms />
  </div>
</PageLayout>

);
}

Originally created by @AnthSuz on GitHub (Mar 26, 2025). Original GitHub issue: https://github.com/arikchakma/maily.to/issues/171 Hello, I've been trying to implement Maily in my project for 2 days now because it has an important asset for my use, the addition of a button in the body of the mail. Only when I want to log the content of my mail in HTML format via generateHTML if I have a button in my body I get this error: **_Uncaught RangeError: Unknown node type: button_** I've seen the same problem with image or columns for example, but I haven't tested everything. Looking at your code, I can see that when you copy html in your example, you're making a .post request where you send a button type as well and receive an a type. How do you carry out the transformation? Thanks, My code : import "@maily-to/core/style.css"; import { FromContentSms } from "@/components/parameters/automation/FormContentSms"; import { TagsEmailSms } from "@/components/parameters/automation/TagsEmailSms"; import { PageLayout } from "@/components/ui/pageLayout/PageLayout"; import { createFileRoute, useParams } from "@tanstack/react-router"; import { ActionType, typeType } from ".."; import { useState } from "react"; import { Editor } from "@maily-to/core"; import type { JSONContent, Editor as TiptapEditor } from "@tiptap/core"; import { Icons } from "@/components/ui/icons"; import { faEnvelope } from "@fortawesome/pro-light-svg-icons"; import { Input } from "@/components/ui/input"; import Typography from "@/components/ui/Typography"; import { generateHTML, generateJSON } from "@tiptap/core"; import StarterKit from "@tiptap/starter-kit"; import { useGetPlaceConfig } from "@/services/place/useGetPlaceConfig"; export const Route = createFileRoute("/club/$clubId/settings/automation/$type/$action")({ component: RouteComponent, }); function getValueFromTypeAndAction(type: typeType, action: ActionType) { return valueFromTypeAndAction[type][action]; } function RouteComponent() { const params = useParams({ from: "/club/$clubId/settings/automation/$type/$action" }); const [editor, setEditor] = useState<TiptapEditor>(); const { data: placeConfig } = useGetPlaceConfig(); return ( <PageLayout title={getValueFromTypeAndAction(params.type as typeType, params.action as ActionType).titlePage} link="/club/$clubId/settings/automation" linkText="Email & SMS de service" fullWidth > <div className="flex items-start gap-6"> {params.type === "sms" && ( <FromContentSms title={getValueFromTypeAndAction(params.type as typeType, params.action as ActionType).titleFormContent} placeholder={getValueFromTypeAndAction(params.type as typeType, params.action as ActionType).placeholder} data={getValueFromTypeAndAction(params.type as typeType, params.action as ActionType).data} /> )} <div className="border rounded-md bg-white p-4 pl-8 mb-6 w-3/5"> <div className="border rounded-md h-7 w-7 flex items-center justify-center mb-4 ml-4"> <Icons icon={faEnvelope} size="xs" /> </div> <div className="flex items-center pl-4"> <Typography weight="500">Sujet</Typography> <Input variant="s" className="!border-none focus:shadow-none" placeholder="Objet du mail" /> </div> <Editor config={{ hasMenuBar: false, wrapClassName: "!rounded-lg", bodyClassName: "!border-none !mt-0", autofocus: true, immediatelyRender: false, }} onCreate={setEditor} onUpdate={setEditor} contentJson={generateJSON(placeConfig?.email_appointment_cancelation?.email?.message || "", [StarterKit])} /> </div> <button onClick={() => { console.log("LOG ->", generateHTML(editor?.getJSON() as JSONContent, [StarterKit])); }} > show html </button> <TagsEmailSms /> </div> </PageLayout> ); }

kerem closed this issue

2026-03-01 14:39:47 +03:00

kerem commented

2026-03-01 14:39:47 +03:00

Author

Owner

@arikchakma commented on GitHub (Mar 29, 2025):

Please use renderer package to do so.

@arikchakma commented on GitHub (Mar 29, 2025): Please use [renderer](https://npm.im/@maily-to/render) package to do so.

kerem referenced this issue

2026-03-01 14:40:09 +03:00

[PR #57] [MERGED] chore(readme): added "backed by novu" badge ⚡️ #119

kerem referenced this issue

2026-03-15 02:09:56 +03:00

[PR #57] [MERGED] chore(readme): added "backed by novu" badge ⚡️ #346