usewaypoint / email-builder-js Goto Github PK

When using a text block it would be helpful if it supports new lines. Whenever I add a new line in the text, it's not applied in the design. Not sure if this is a conscious decision? Because of the not supporting of new lines, most blocks have to be converted to a HTML block, which feels overkill.

The current system does not support embedding local image files in HTML files. This causes inconvenience for users as they have to first upload images to online storage and then use the image links in HTML.

We need to add a feature that allows users to read image files directly from the local file system and embed them into HTML files. This will improve the user experience and streamline the workflow.

As described in this Stack Overflow question: https://stackoverflow.com/questions/74885017/node-js-reading-local-image-file-and-use-them-in-html-files

<img src="data:image/png;base64,${img}" />

Hey there,

I'm curious if your brand name is displayed on the email editor upon integration and usage. Additionally, could you confirm if it's compatible with Angular 17?

Thanks

Kiko

-LOOKING FOR MORE?
Waypoint is an email API service with a hosted 'pro' template builder with Markdown, dynamic variables, loops, conditionals, drag and drop, layouts, and more.

how to host it on a hosting service like bluehost, hostinger...?

Hi, thank you for such a great library.

May I ask how can I implement placeholder/variable in the email template?
My use case is to create a welcome email template, but the name of the user is a variable. So that when I send the welcome email, I can insert the name of the user for each recipient.

Currently one of the possible way is that I can put something like {{userName}} in the content section, and then replace it right before send. Am I correct?

Thanks in advance.

I need Read the content from emaileditor and write some custom HTML inputs into the emaileditor and this process need to be done from pure javascript/jquery. Also the js file is placed outside the React folder.

Is there any possible way to import html as a template? I don't find any documentation about it.

I am new to js. Can I have a steps to integrate email-builder in my php project.

Facing below issue

Hi there,

I've been trying to integrate the renderHtmlDocument method from your repository into my project but haven't had any luck. It appears that this method isn’t actually available in the repository. I might be overlooking something, but I couldn’t find it in the codebase.

Additionally, I attempted to implement it on the server but faced similar issues. Could you please confirm if this method is part of an upcoming release? Access to it would indeed be very beneficial for my needs.

Thank you for your assistance!

import { renderHtmlDocument } from '@usewaypoint/email-builder';
import nodemailer from "nodemailer";

// Replace this with your transport configuration
const transportConfig = {}
const transporter = nodemailer.createTransport(transportConfig);

// Replace this with the JSON for your Reader document
const CONFIGURATION: TReaderDocument = {}

await transporter.sendMail({
  from: '[email protected]'
  to: '[email protected]',
  subject: 'Hello',
  html: renderHtmlDocument(CONFIGURATION, 'root'),
});

Since i checked all your details in website for slack channel. or discord server. So kindle please share way to get involved in the community

In the builder it would be cool if you can export the JSON, or import it. So that I can store an email design locally, and when I like to tweak it import (or copy paste) the JSON again, so that I can continu designing the email template.

I need some developer documentation. i.e., After integration with my project, hiding left navigation bar(template area), hiding some top options (like, download JSON file, Import JSON), read the editor content from Javascript. Where can I find this details. I could not see any documents in the github. Could you please share the details

There is no way to add hyperlink to a text

Thank you for the awesome project. However, there is no clear license. Under what license is it distributed? MIT, Apache, MPL, GPL or else...?

Hey,

Loving what you guys are doing with this email builder. I noticed a small bug. When applying a border radius to a container, the border radius is not correctly applied. Nothing happens with the borders, unless you specify a border color. In that case, only the border itself will be rounded, instead of the container itself. Notice the white background color in the corners:

Used the following settings:

When I apply a border radius, I expect this to work, also when no specific border color is specified. Next to that you can only define the border radius for the full container, you can choose to have a different radius for the left top corner and the right top corner only. Having this ability will allow users to create also beautiful rounded templates. Now the builder only supports rectangular designs.

Description

Currently, if users accidentally close the browser tab or experience a browser crash while using the email builder, they lose all their progress and work. This can be extremely frustrating, especially if they have spent a significant amount of time creating or modifying an email template.

To prevent this frustrating scenario and ensure users don't lose their hard work, I think that it would be beneficial to implement a feature that automatically saves their progress at regular intervals or whenever changes are made. This way, when they reopen the email builder, they can pick up right where they left off.

Is this something that already is or could be added to the roadmap or development timeline for the email builder in the near future? If not, what would be the best way to contribute or propose this feature?

First of all, thank you for making this open source!

is there any alternative to renderToStaticMarkup for NextJS?

I keep getting this error when I'm trying to compile it to a production build using NextJs

(Use node --trace-deprecation ...to show where the warning was created)
   Collecting page data  .TypeError: (0 , d.createContext) is not a function
    at 89934 (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/chunks/2076.js:94:11183)
    at __webpack_require__ (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/webpack-runtime.js:1:161)
    at 23688 (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:13235)
    at __webpack_require__ (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/webpack-runtime.js:1:161)
    at __webpack_exec__ (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:15994)
    at /Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:16046
    at __webpack_require__.X (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/webpack-runtime.js:1:1707)
    at /Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:16007
    at Object.<anonymous> (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:16089)
    at Module._compile (node:internal/modules/cjs/loader:1368:14)
unhandledRejection Error: Failed to collect page data for /api/trpc/[trpc]
    at /Users/alvindivina/Documents/GitHub/webcommerce/node_modules/next/dist/build/utils.js:1211:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

Including email-builder-js is strictly limited as it is not CommonJS compiled.

Here is CommonJS compiled version: lib

Here is TS working example, lib added to srouce: sample

Whenever you like to design an email template with a 'floating logo', the the container should not have a background color, or the background color must be the same as the backdrop color. Not sure if allowing transparant color (or no background color) on (container) elements have compatiblity issues in email clients, but I assume that that should work fine. If that's not the case, then it would be really convenient to use the configured backdrop color easily as the background color of a container component. Right now, you need to switch from the component edit mode, to the global styles view, copy the backdrop color, switch back again, and paste it there.

Would be a nice enhancements of the email builder.

Hello team,

Amazing work you have done so far and thank you for making this open source.

Few request: when do you think we can have these features?

1. Sidebar blocks instead of inline (unlayer example)
2. Drag and Drop for blocks
3. Re-positioning of elements within the content

Great work @jordanisip @cohitre

Does the current version support Preview Text?

Hi! I saw this package in reddit and was very interested in its capabilities and wanted to see if I can hook it up to my nuxt application!

I know it's built with react, but there's been some working going on with web components or the veaury package, so maybe there is a way I can convert it to web component and use it in vue, just want to get a confirmation on if this is feasible before I try, thanks

Hi Team, I just discovered email-builder today, I'm quite keen to get involved and assist with new features, but it will take me a bit of time to get up to speed with the current codebase.

The first enhancement I would suggest is the ability to configure Tags that can be included in various text areas, IE, {customer_name}, {custom_tag1} etc, which can then be parsed by a sending system to replace those tags before sending the final email. The request here is simply to allow us to specify a list of common tags selectable from a drop down, that are automatically inserted at the current cursor location when a user creates a new template. This saves from having to manually type out the codes.

Hello there, I really like the way you guys are doing this and thank you for sharing it to the public.

However, as an Arabic developer, I find it a hustle to download the desired font (Arabic supported fonts) or to modify the template manually each time I export to HTML. What I would love to is to have the following:

1- Add more global fonts, try google fonts maybe?
2- RTL Support, its an HTML attribute.
3- Add the ability to use variables using the format {{variableName}}.

Again I appreciate the work and efforts.
Thanks guys.