Add table support to Post editor (#388)

Co-authored-by: Sam Hamilton <sam@sh81.com>

Author: rcmonsayac

assets/js/app.js

@@ -24,8 +24,6 @@ Hooks.EditorJS = {
   },
 };
 
-Hooks.HiddenInputChange = {};
-
 Hooks.HandleDragNDrop = {
   mounted() {
     const dragNDropList = document.querySelector(

assets/js/editor.js

@@ -2,6 +2,7 @@ import EditorJS from "@editorjs/editorjs";
 import Header from "@editorjs/header";
 import Image from "@editorjs/image";
 import List from "@editorjs/list";
+import Table from "@editorjs/table";
 import editorParser from "editorjs-html";
 
 const csrfToken = document
@@ -16,18 +17,39 @@ const customImageParser = ({ data }) => {
     alt="${alt}" ${data.caption ? `caption="${data.caption}"` : ""} />`;
 };
 
-const parser = editorParser({ image: customImageParser });
+const customTableParser = ({ data }) => {
+  let tableBody = "";
+
+  data.content.forEach((element, index) => {
+    const cellTag = data.withHeadings && index == 0 ? "th" : "td";
+    let row = "";
+
+    row = "<tr>";
+
+    element.forEach((elem) => {
+      row += `<${cellTag}> ${elem} </${cellTag}>`;
+    });
+
+    tableBody += row + "</tr>";
+  });
+
+  return "<table>" + tableBody + "</table>";
+};
+
+const parser = editorParser({
+  image: customImageParser,
+  table: customTableParser,
+});
 
 const HTMLEditorJS = (element) => {
   const inputEditorJSON = document.querySelector("#form-editor-json");
   const inputHTML = document.querySelector("#form-html");
 
-  inputEditorJSON.value = element.dataset.postData
-    ? JSON.stringify(JSON.parse(element.dataset.postData))
-    : "";
-  inputHTML.value = element.dataset.postData
-    ? JSON.stringify(parser.parse(JSON.parse(element.dataset.postData)))
-    : "";
+  if (element.dataset.postData) {
+    const jsonData = JSON.parse(element.dataset.postData);
+    inputEditorJSON.value = JSON.stringify(jsonData);
+    inputHTML.value = parser.parse(jsonData);
+  }
 
   const editor = new EditorJS({
     tools: {
@@ -48,12 +70,19 @@ const HTMLEditorJS = (element) => {
         class: List,
         inlineToolbar: true,
       },
+      table: {
+        class: Table,
+        inlineToolbar: true,
+        config: {
+          withHeadings: true,
+        },
+      },
     },
     data: JSON.parse(element.dataset.postData || "{}"),
     onChange: () => {
       editor.save().then((outputData) => {
         inputEditorJSON.value = JSON.stringify(outputData);
-        inputHTML.value = JSON.stringify(parser.parse(outputData));
+        inputHTML.value = parser.parse(outputData);
       });
     },
   });

assets/package-lock.json

@@ -14,6 +14,7 @@
     "@editorjs/header": "^2.8.8",
     "@editorjs/image": "github:martide/editor-js-image#WEB-8452-image-alt",
     "@editorjs/list": "^2.0.3",
+    "@editorjs/table": "^2.4.3",
     "@eslint/js": "^9.18.0",
     "@tailwindcss/typography": "^0.5.16",
     "editorjs-html": "^4.0.5",

assets/package.json

@@ -255,10 +255,8 @@ defmodule Literature.PostFormComponent do
 
   @impl Phoenix.LiveComponent
   def handle_event("save", %{"post" => post_params}, socket) do
-    html = post_params["html"]
-    html = if is_binary(html) and html != "", do: Jason.decode!(post_params["html"]), else: []
     action = socket.assigns.action
-    post_params = post_params |> Map.put("html", html) |> merge_post_params(socket, action)
+    post_params = merge_post_params(post_params, socket, action)
     post = socket.assigns.post
 
     socket
@@ -343,10 +341,22 @@ defmodule Literature.PostFormComponent do
   defp put_validation(changeset, :edit_post), do: Map.put(changeset, :action, :validate)
 
   defp build_html(%{"html" => html} = params) do
-    html = Enum.map(html, &parse_image_tag/1)
+    html =
+      (html || "")
+      |> Floki.parse_fragment!()
+      |> Enum.map(&parse_tag/1)
+
     %{params | "html" => html}
   end
 
+  defp parse_tag({"img", _, _} = image_tag) do
+    image_tag
+    |> Floki.raw_html()
+    |> parse_image_tag()
+  end
+
+  defp parse_tag(tag), do: Floki.raw_html(tag)
+
   defp delete_icon(assigns) do
     ~H"""
     <svg

lib/literature/components/forms/post_form_component.ex

@@ -69,6 +69,7 @@ defmodule Literature.MixProject do
       {:timex, "~> 3.7"},
       {:poolboy, "~> 1.5"},
       {:ex_cldr_languages, "~> 0.3"},
+      {:floki, "~> 0.33"},
 
       # Test
       {:credo, "~> 1.6", only: [:test, :dev], runtime: false},

mix.exs

@@ -149,7 +149,7 @@ defmodule Literature.PostLiveTest do
 
       assert html =~ "New Post"
 
-      html = Jason.encode!(["<p>some html</p>"])
+      html = "<p>some html</p>"
 
       new_live
       |> form("#post-form",
@@ -226,7 +226,7 @@ defmodule Literature.PostLiveTest do
         Routes.literature_dashboard_path(conn, :edit_post, publication.slug, post.slug)
       )
 
-      html = Jason.encode!(["<p>some html</p>"])
+      html = "<p>some html</p>"
 
       view
       |> form("#post-form", post: @update_attrs)
@@ -237,7 +237,7 @@ defmodule Literature.PostLiveTest do
       assert path == Routes.literature_dashboard_path(conn, :list_posts, publication.slug)
       assert flash["success"] == "Post updated successfully"
 
-      assert Literature.get_post!(post.id).html == Jason.decode!(html)
+      assert Literature.get_post!(post.id).html == [html]
 
       # Will not be able to follow redirect since redirect happens after async result
     end