Add full fledged visual e-mail editor

.gitignore

@@ -2,9 +2,16 @@ frontend/node_modules/
 frontend/.cache/
 frontend/yarn.lock
 frontend/build/
+frontend/public/static/email-builder/
+frontend/dist/
+email-builder/node_modules/
+email-builder/.cache/
+email-builder/yarn.lock
+email-builder/dist/
 .vscode/
 
 config.toml
 node_modules
 listmonk
-dist/*
+dist/*
+uploads/

Makefile

@@ -11,13 +11,23 @@ GOPATH ?= $(HOME)/go
 STUFFBIN ?= $(GOPATH)/bin/stuffbin
 FRONTEND_YARN_MODULES = frontend/node_modules
 FRONTEND_DIST = frontend/dist
+FRONTEND_EMAIL_BUILDER_DIST = frontend/public/static/email-builder
 FRONTEND_DEPS = \
 	$(FRONTEND_YARN_MODULES) \
+	$(FRONTEND_EMAIL_BUILDER_DIST) \
 	frontend/index.html \
 	frontend/package.json \
 	frontend/vite.config.js \
 	frontend/.eslintrc.js \
 	$(shell find frontend/fontello frontend/public frontend/src -type f)
+EMAIL_BUILDER_YARN_MODULES = email-builder/node_modules
+EMAIL_BUILDER_DIST = email-builder/dist
+EMAIL_BUILDER_DEPS = \
+	$(EMAIL_BUILDER_YARN_MODULES) \
+	email-builder/package.json \
+	email-builder/tsconfig.json \
+	email-builder/vite.config.ts \
+	$(shell find email-builder/src -type f)
 
 BIN := listmonk
 STATIC := config.toml.sample \
@@ -37,6 +47,10 @@ $(FRONTEND_YARN_MODULES): frontend/package.json frontend/yarn.lock
 	cd frontend && $(YARN) install
 	touch -c $(FRONTEND_YARN_MODULES)
 
+$(EMAIL_BUILDER_YARN_MODULES): frontend/package.json frontend/yarn.lock
+	cd email-builder && $(YARN) install
+	touch -c $(EMAIL_BUILDER_YARN_MODULES)
+
 # Build the backend to ./listmonk.
 $(BIN): $(shell find . -type f -name "*.go") go.mod go.sum schema.sql queries.sql permissions.json
 	CGO_ENABLED=0 go build -o ${BIN} -ldflags="-s -w -X 'main.buildString=${BUILDSTR}' -X 'main.versionString=${VERSION}'" cmd/*.go
@@ -51,9 +65,22 @@ $(FRONTEND_DIST): $(FRONTEND_DEPS)
 	export VUE_APP_VERSION="${VERSION}" && cd frontend && $(YARN) build
 	touch -c $(FRONTEND_DIST)
 
+# Build the JS email-builder dist.
+$(EMAIL_BUILDER_DIST): $(EMAIL_BUILDER_DEPS)
+	export VUE_APP_VERSION="${VERSION}" && cd email-builder && $(YARN) build
+	touch -c $(EMAIL_BUILDER_DIST)
+
+# Copy the build assets to frontend.
+$(FRONTEND_EMAIL_BUILDER_DIST): $(EMAIL_BUILDER_DIST)
+	mkdir -p $(FRONTEND_EMAIL_BUILDER_DIST)
+	cp -r $(EMAIL_BUILDER_DIST)/* $(FRONTEND_EMAIL_BUILDER_DIST)
+	touch -c $(FRONTEND_EMAIL_BUILDER_DIST)
 
 .PHONY: build-frontend
-build-frontend: $(FRONTEND_DIST)
+build-frontend: $(FRONTEND_EMAIL_BUILDER_DIST) $(FRONTEND_DIST)
+
+.PHONY: build-email-builder
+build-email-builder: $(EMAIL_BUILDER_DIST) $(FRONTEND_EMAIL_BUILDER_DIST)
 
 # Run the JS frontend server in dev mode.
 .PHONY: run-frontend

cmd/campaigns.go

@@ -113,24 +113,42 @@ func handleGetCampaign(c echo.Context) error {
 // handlePreviewCampaign renders the HTML preview of a campaign body.
 func handlePreviewCampaign(c echo.Context) error {
 	var (
-		app      = c.Get("app").(*App)
-		id, _    = strconv.Atoi(c.Param("id"))
-		tplID, _ = strconv.Atoi(c.FormValue("template_id"))
+		app   = c.Get("app").(*App)
+		id, _ = strconv.Atoi(c.Param("id"))
+		camp  models.Campaign
+		err   error
 	)
 
 	if id < 1 {
 		return echo.NewHTTPError(http.StatusBadRequest, app.i18n.T("globals.messages.invalidID"))
 	}
 
-	camp, err := app.core.GetCampaignForPreview(id, tplID)
-	if err != nil {
-		return err
-	}
-
 	// There's a body in the request to preview instead of the body in the DB.
 	if c.Request().Method == http.MethodPost {
-		camp.ContentType = c.FormValue("content_type")
-		camp.Body = c.FormValue("body")
+		var (
+			tplID, _    = strconv.Atoi(c.FormValue("template_id"))
+			contentType = c.FormValue("content_type")
+			body        = c.FormValue("body")
+			tp          *int
+		)
+
+		// For visual content type don't use the tempalte for preview, use only body.
+		if tplID > 0 && contentType != models.CampaignContentTypeVisual {
+			tp = &tplID
+		}
+
+		camp, err = app.core.GetCampaignForPreviewWithTemplate(id, tp)
+		if err != nil {
+			return err
+		}
+
+		camp.ContentType = contentType
+		camp.Body = body
+	} else {
+		camp, err = app.core.GetCampaignForPreview(id)
+		if err != nil {
+			return err
+		}
 	}
 
 	// Use a dummy campaign ID to prevent views and clicks from {{ TrackView }}
@@ -204,9 +222,6 @@ func handleCreateCampaign(c echo.Context) error {
 		o.Type = models.CampaignTypeRegular
 	}
 
-	if o.ContentType == "" {
-		o.ContentType = models.CampaignContentTypeRichtext
-	}
 	if o.Messenger == "" {
 		o.Messenger = "email"
 	}
@@ -218,7 +233,7 @@ func handleCreateCampaign(c echo.Context) error {
 		o = c
 	}
 
-	if o.ArchiveTemplateID == 0 {
+	if o.ArchiveTemplateID.Valid && o.ArchiveTemplateID.Int64 != 0 {
 		o.ArchiveTemplateID = o.TemplateID
 	}
 
@@ -240,7 +255,6 @@ func handleUpdateCampaign(c echo.Context) error {
 
 	if id < 1 {
 		return echo.NewHTTPError(http.StatusBadRequest, app.i18n.T("globals.messages.invalidID"))
-
 	}
 
 	cm, err := app.core.GetCampaign(id, "", "")
@@ -437,7 +451,11 @@ func handleTestCampaign(c echo.Context) error {
 	}
 
 	// The campaign.
-	camp, err := app.core.GetCampaignForPreview(campID, tplID)
+	var tid *int
+	if tplID > 0 {
+		tid = &tplID
+	}
+	camp, err := app.core.GetCampaignForPreviewWithTemplate(campID, tid)
 	if err != nil {
 		return err
 	}

cmd/install.go

@@ -168,7 +168,7 @@ func installTemplates(q *models.Queries) (int, int) {
 	}
 
 	var campTplID int
-	if err := q.CreateTemplate.Get(&campTplID, "Default campaign template", models.TemplateTypeCampaign, "", campTpl.ReadBytes()); err != nil {
+	if err := q.CreateTemplate.Get(&campTplID, "Default campaign template", models.TemplateTypeCampaign, "", campTpl.ReadBytes(), nil); err != nil {
 		lo.Fatalf("error creating default campaign template: %v", err)
 	}
 	if _, err := q.SetDefaultTemplate.Exec(campTplID); err != nil {
@@ -182,7 +182,7 @@ func installTemplates(q *models.Queries) (int, int) {
 	}
 
 	var archiveTplID int
-	if err := q.CreateTemplate.Get(&archiveTplID, "Default archive template", models.TemplateTypeCampaign, "", archiveTpl.ReadBytes()); err != nil {
+	if err := q.CreateTemplate.Get(&archiveTplID, "Default archive template", models.TemplateTypeCampaign, "", archiveTpl.ReadBytes(), nil); err != nil {
 		lo.Fatalf("error creating default campaign template: %v", err)
 	}
 
@@ -192,7 +192,7 @@ func installTemplates(q *models.Queries) (int, int) {
 		lo.Fatalf("error reading default e-mail template: %v", err)
 	}
 
-	if _, err := q.CreateTemplate.Exec("Sample transactional template", models.TemplateTypeTx, "Welcome {{ .Subscriber.Name }}", txTpl.ReadBytes()); err != nil {
+	if _, err := q.CreateTemplate.Exec("Sample transactional template", models.TemplateTypeTx, "Welcome {{ .Subscriber.Name }}", txTpl.ReadBytes(), nil); err != nil {
 		lo.Fatalf("error creating sample transactional template: %v", err)
 	}
 
@@ -227,6 +227,7 @@ func installCampaign(campTplID, archiveTplID int, q *models.Queries) {
 		archiveTplID,
 		`{"name": "Subscriber"}`,
 		nil,
+		nil,
 	); err != nil {
 		lo.Fatalf("error creating sample campaign: %v", err)
 	}

cmd/templates.go

@@ -63,15 +63,16 @@ func handlePreviewTemplate(c echo.Context) error {
 	var (
 		app   = c.Get("app").(*App)
 		id, _ = strconv.Atoi(c.Param("id"))
+		tpl   models.Template
 	)
 
-	tpl := models.Template{
-		Type: c.FormValue("template_type"),
-		Body: c.FormValue("body"),
-	}
-
 	// Body is posted.
-	if tpl.Body != "" {
+	if c.Request().Method == http.MethodPost {
+		tpl = models.Template{
+			Type: c.FormValue("template_type"),
+			Body: c.FormValue("body"),
+		}
+
 		if tpl.Type == "" {
 			tpl.Type = models.TemplateTypeCampaign
 		}
@@ -96,7 +97,7 @@ func handlePreviewTemplate(c echo.Context) error {
 
 	// Compile the campaign template.
 	var out []byte
-	if tpl.Type == models.TemplateTypeCampaign {
+	if tpl.Type == models.TemplateTypeCampaign || tpl.Type == models.TemplateTypeCampaignVisual {
 		camp := models.Campaign{
 			UUID:         dummyUUID,
 			Name:         app.i18n.T("templates.dummyName"),
@@ -157,7 +158,7 @@ func handleCreateTemplate(c echo.Context) error {
 
 	// Subject is only relevant for fixed tx templates. For campaigns,
 	// the subject changes per campaign and is on models.Campaign.
-	if o.Type == models.TemplateTypeCampaign {
+	if o.Type == models.TemplateTypeCampaign || o.Type == models.TemplateTypeCampaignVisual {
 		o.Subject = ""
 		f = app.manager.TemplateFuncs(nil)
 	} else {
@@ -170,7 +171,7 @@ func handleCreateTemplate(c echo.Context) error {
 	}
 
 	// Create the template the in the DB.
-	out, err := app.core.CreateTemplate(o.Name, o.Type, o.Subject, []byte(o.Body))
+	out, err := app.core.CreateTemplate(o.Name, o.Type, o.Subject, []byte(o.Body), o.BodySource)
 	if err != nil {
 		return err
 	}
@@ -220,7 +221,7 @@ func handleUpdateTemplate(c echo.Context) error {
 		return echo.NewHTTPError(http.StatusBadRequest, err.Error())
 	}
 
-	out, err := app.core.UpdateTemplate(id, o.Name, o.Subject, []byte(o.Body))
+	out, err := app.core.UpdateTemplate(id, o.Name, o.Subject, []byte(o.Body), o.BodySource)
 	if err != nil {
 		return err
 	}

email-builder/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Waypoint (Metaccountant, Inc.)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

email-builder/README.md

@@ -0,0 +1,10 @@
+# @usewaypoint/editor-sample
+
+Use this as a sample to self-host EmailBuilder.js.
+
+To run this locally, fork the repository and then in this directory run:
+
+- `npm install`
+- `npx vite`
+
+Once the server is running, open http://localhost:5173/email-builder-js/ in your browser.

email-builder/index.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/src/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/src/favicon/favicon-16x16.png" />
+    <meta name="viewport" content="width=900" />
+    <meta name="description" content="EmailBuilder.js interactive playground. Brought to you by Waypoint." />
+    <title>EmailBuilder.js &mdash; Free and Open Source Template Builder</title>
+    <style>
+      html {
+        margin: 0px;
+        height: 100vh;
+        width: 100%;
+      }
+      body {
+        min-height: 100vh;
+        width: 100%;
+      }
+      #root {
+        /* height: 100vh; */
+        width: 800px;
+        position: relative;
+      }
+      .root-wrapper {
+        padding: 100px;
+        background-color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="root-wrapper">
+      <div id="root" class="email-builder-container"></div>
+    </div>
+    <script type="module">
+      const testData = {
+        "root": {
+          "type": "EmailLayout",
+          "data": {
+            "backdropColor": "#F5F5F5",
+            "canvasColor": "#FFFFFF",
+            "textColor": "#262626",
+            "fontFamily": "MODERN_SANS",
+            "childrenIds": [
+              "block-1727858083795"
+            ]
+          }
+        },
+        "block-1727858083795": {
+          "type": "Text",
+          "data": {
+            "style": {
+              "fontWeight": "normal",
+              "padding": {
+                "top": 16,
+                "bottom": 16,
+                "right": 24,
+                "left": 24
+              }
+            },
+            "props": {
+              "markdown": false,
+              "text": "Test template"
+            }
+          }
+        }
+      }
+
+      import('/src/main.tsx')
+        .then(module => {
+          module.render('root', { data: testData, onChange: (json, html) => {
+            console.log("onChange", json, html)
+          }});
+        })
+        .catch(error => {
+          console.error('Error loading the module:', error);
+        });
+    </script>
+
+    <!-- Prod build -->
+    <!-- <script src="dist/listmonk-email-builder.umd.js"></script>
+    <script>
+      EmailBuilder.render("root");
+    </script> -->
+  </body>
+</html>