established quill and changed db for saving as json

assets/js/app.js

@@ -1,9 +1,15 @@
 // Svelte
 import 'svonix'
-
 // We import the CSS which is extracted to its own file by esbuild.
 // Remove this line if you add a your own CSS build pipeline (e.g postcss).
 import "../css/app.css"
+import { TextEditor } from './hooks/textEditHook'
+
+
+let Hooks = {}
+
+// WYSIWYG
+Hooks.TextEditor = TextEditor
 
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 // to get started and then uncomment the line below.
@@ -28,9 +34,10 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
-
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+
+let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
+
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -44,5 +51,4 @@ liveSocket.connect()
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
-
+window.liveSocket = liveSocket

assets/js/hooks/textEditHook.js

@@ -0,0 +1,23 @@
+import Quill from 'quill';
+export let TextEditor = {
+  mounted() {
+    console.log('Mounting');
+    let quill = new Quill(this.el, {
+      theme: 'snow'
+    });
+
+    quill.on('text-change', (delta, oldDelta, source) => {
+      if (source == 'api') {
+        console.log("An API call triggered this change.");
+      } else if (source == 'user') {
+        console.log(this);
+        this.pushEventTo(this.el.phxHookId, "text-editor", {"text_content": quill.getContents()})
+      }
+    });
+
+
+  },
+  updated(){
+    console.log('U');
+  }
+}

assets/js/svelte/editor.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { onMount } from "svelte";
+  export let placeholder;
+
+  let editor;
+
+  export let toolbarOptions = [
+    [{ header: 1 }, { header: 2 }, "blockquote", "link", "image", "video"],
+    ["bold", "italic", "underline", "strike"],
+    [{ list: "ordered" }, { list: "ordered" }],
+    [{ align: [] }],
+    ["clean"],
+  ];
+
+  onMount(async () => {
+    const { default: Quill } = await import("quill");
+
+    let quill = new Quill(editor, {
+      modules: {
+        toolbar: toolbarOptions,
+      },
+      theme: "snow",
+      placeholder: placeholder,
+    });
+  });
+</script>
+
+<div class="editor-wrapper">
+  <div bind:this={editor} />
+</div>
+
+<style>
+  @import "https://cdn.quilljs.com/1.3.6/quill.snow.css";
+</style>

assets/tailwind.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   mode: "jit",
-  purge: ["./js/**/*.js", "../lib/*_web/**/*.*ex"],
+  purge: ["./js/**/*.js", "./js/**/*.svelte", "../lib/*_web/**/*.*ex"],
   theme: {
     extend: {},
   },

lib/climate_coolers_web/live/person_profile_live/form_component.ex

@@ -26,6 +26,19 @@ defmodule ClimateCoolersWeb.PersonProfileLive.FormComponent do
     {:noreply, assign(socket, :changeset, changeset)}
   end
 
+  def handle_event("text-editor", %{"text_content" => content}, socket) do
+    IO.inspect(content)
+
+    {:noreply, socket}
+
+    # changeset =
+    #   socket.assigns.profile
+    #   |> PersonProfiles.change_profile(profile_params)
+    #   |> Map.put(:action, :validate)
+
+    # {:noreply, assign(socket, :changeset, changeset)}
+  end
+
   def handle_event("validate", props, socket) do
     changeset =
       socket.assigns.profile
@@ -49,7 +62,8 @@ defmodule ClimateCoolersWeb.PersonProfileLive.FormComponent do
     {:noreply, socket |> assign(:changeset, changeset)}
   end
 
-  def handle_event("save", %{"person_profile" => profile_params}, socket) do
+  def handle_event("save", %{"person_profile" => profile_params} = props, socket) do
+    IO.inspect(socket)
     save_profile(socket, socket.assigns.action, profile_params)
   end
 

lib/climate_coolers_web/live/person_profile_live/form_component.html.heex

@@ -1,4 +1,6 @@
 <div>
+  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+
   <h2><%= @title %></h2>
 
   <.form
@@ -14,27 +16,39 @@
     <%= error_tag f, :name %>
 
     <%= label f, :description %>
-    <%= text_input f, :description %>
+    <div id="editor" phx-hook="TextEditor" phx-target={@myself} />
     <%= error_tag f, :description %>
-  
+
     <%= label f, :birthdate %>
     <%= date_select f, :birthdate %>
     <%= error_tag f, :birthdate %>
 
     <%= inputs_for f, :links, fn fl -> %>
-      <p>Title</p>
-      <%= text_input fl, :title %>
-      <p>url</p>
-      <%= text_input fl, :url %>
+    <div class="flex flex-row space-x-6">
+      <div id="link-title">
+        <p>Title</p>
+        <%= text_input fl, :title %>
+      </div>
+      <div id="link-url">
+        <p>url</p>
+        <%= text_input fl, :url %>
+      </div>
+    </div>
     <% end %>
 
     <a phx-click="add-link" phx-target={@myself} >Add Link</a>
 
     <%= inputs_for f, :pics, [multipart: true], fn fl -> %>
-      <p>alt</p>
-      <%= text_input fl, :alt %>
-      <p>url</p>
-      <%= text_input fl, :url %>
+    <div class="flex flex-row space-x-6">
+      <div id="link-title">
+        <p>Caption</p>
+        <%= text_input fl, :alt %>
+      </div>
+      <div id="link-url">
+        <p>url</p>
+        <%= text_input fl, :url %>
+      </div>
+    </div>
     <% end %>
 
     <a phx-click="add-pic" phx-target={@myself} >Add Pic</a>
@@ -44,4 +58,7 @@
       <%= submit "Save", phx_disable_with: "Saving..." %>
     </div>
   </.form>
+
 </div>
+
+

mix.lock

@@ -23,10 +23,10 @@
   "phoenix_html": {:hex, :phoenix_html, "3.2.0", "1c1219d4b6cb22ac72f12f73dc5fad6c7563104d083f711c3fcd8551a1f4ae11", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "36ec97ba56d25c0136ef1992c37957e4246b649d620958a1f9fa86165f8bc54f"},
   "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.6.4", "d7ff34b2c8dd5fa950748496697da01ae1b6b259891ce1103e300bdc7abfbb99", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.3", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.17.1", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "ce2505256ab459663258ecba4158af130e6b7a5b85783fe442541fbb1236e1b2"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.3.3", "3a53772a6118d5679bf50fc1670505a290e32a1d195df9e069d8c53ab040c054", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "766796676e5f558dbae5d1bdb066849673e956005e3730dfd5affd7a6da4abac"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "0.17.6", "3665f3ec426ac8d681cd7753ad4c85d2d247094dc4dc6add80dd6e3026045389", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.5.9 or ~> 1.6.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "62f06d4bbfc4dc5595070bc338119ab08e8e67a011e2923f9366419622149b9c"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "0.17.7", "05a42377075868a678d446361effba80cefef19ab98941c01a7a4c7560b29121", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.5.9 or ~> 1.6.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "25eaf41028eb351b90d4f69671874643a09944098fefd0d01d442f40a6091b6f"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.0.0", "a1ae76717bb168cdeb10ec9d92d1480fec99e3080f011402c0a2d68d47395ffb", [:mix], [], "hexpm", "c52d948c4f261577b9c6fa804be91884b381a7f8f18450c5045975435350f771"},
   "phoenix_view": {:hex, :phoenix_view, "1.1.2", "1b82764a065fb41051637872c7bd07ed2fdb6f5c3bd89684d4dca6e10115c95a", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "7ae90ad27b09091266f6adbb61e1d2516a7c3d7062c6789d46a7554ec40f3a56"},
-  "plug": {:hex, :plug, "1.13.2", "33aba8e2b43ddd68d9d49b818ed2fb46da85f4ec3229bc4bcd0c981a640a4e71", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a95cdfe599e3524b98684376c3f3494cbfbc1f41fcddefc380cac3138dd7619d"},
+  "plug": {:hex, :plug, "1.13.3", "93b299039c21a8b82cc904d13812bce4ced45cf69153e8d35ca16ffb3e8c5d98", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "98c8003e4faf7b74a9ac41bee99e328b08f069bf932747d4a7532e97ae837a17"},
   "plug_cowboy": {:hex, :plug_cowboy, "2.5.2", "62894ccd601cf9597e2c23911ff12798a8a18d237e9739f58a6b04e4988899fe", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "ea6e87f774c8608d60c8d34022a7d073bd7680a0a013f049fc62bf35efea1044"},
   "plug_crypto": {:hex, :plug_crypto, "1.2.2", "05654514ac717ff3a1843204b424477d9e60c143406aa94daf2274fdd280794d", [:mix], [], "hexpm", "87631c7ad914a5a445f0a3809f99b079113ae4ed4b867348dd9eec288cecb6db"},
   "postgrex": {:hex, :postgrex, "0.16.1", "f94628a32c571266f53cd1e5fca705e626e2417bf1eee6f868985d14e874160a", [:mix], [{:connection, "~> 1.1", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "6b225df32c857b9430619dbe30200a7ae664e23415a771ae9209396ee8eeee64"},

package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@editorjs/editorjs": "^2.23.2",
+    "@editorjs/header": "^2.6.2",
+    "quill": "^1.3.7",
+    "svelte-editorjs": "^0.1.0"
+  }
+}

priv/repo/migrations/20220207150014_create_person_profiles.exs

@@ -4,7 +4,7 @@ defmodule ClimateCoolers.Repo.Migrations.CreatePersonProfiles do
   def change do
     create table(:person_profiles) do
       add :name, :string
-      add :description, :string
+      add :description, :json
       add :birthdate, :date
       add :owner_id, references(:users, on_delete: :nothing)
 

priv/repo/migrations/20220207154001_create_company_profiles.exs

@@ -4,7 +4,7 @@ defmodule ClimateCoolers.Repo.Migrations.CreateCompanyProfiles do
   def change do
     create table(:company_profiles) do
       add :name, :string
-      add :description, :string
+      add :description, :json
       add :established, :date
       add :url, :string
       add :owner_id, references(:users, on_delete: :nothing)