diff --git a/assets/css/app.css b/assets/css/app.css
index 0d6370ee..e1bc5c7a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,6 +2,7 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
+@import "./easymde.css"
/* This file is for your main application CSS */
/* Alerts and form errors used by phx.new */
diff --git a/assets/js/controllers/editor_controller.js b/assets/js/controllers/editor_controller.js
new file mode 100644
index 00000000..6b1937bd
--- /dev/null
+++ b/assets/js/controllers/editor_controller.js
@@ -0,0 +1,14 @@
+import EasyMDE from 'EasyMDE'
+
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+ connect() {
+ this.editor = new EasyMDE({ element: this.element });
+ }
+
+ close() {
+ this.editor.remove();
+ }
+}
+
diff --git a/assets/js/controllers/index.js b/assets/js/controllers/index.js
index ed67f74e..f79bdd14 100644
--- a/assets/js/controllers/index.js
+++ b/assets/js/controllers/index.js
@@ -2,6 +2,7 @@ import { Application } from "@hotwired/stimulus"
import Dropdown from "stimulus-dropdown"
import Audio from "./audio_controller"
import Tabs from "./tabs_controller"
+import Editor from "./editor_controller"
const application = Application.start()
@@ -12,6 +13,7 @@ window.Stimulus = application
application.register("dropdown", Dropdown)
application.register("audio", Audio)
application.register("tabs", Tabs)
+application.register("editor", Editor)
export { application }
diff --git a/assets/package.json b/assets/package.json
index c1cb12d5..913b003b 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -2,13 +2,14 @@
"dependencies": {
"@hotwired/stimulus": "^3.0.1",
"@rails/activestorage": "^6.0.5",
- "stimulus-dropdown": "^2.0.0",
- "wavesurfer": "^1.3.4",
+ "easymde": "^2.16.1",
"phoenix": "^1.6.10",
"phoenix_html": "^3.2.0",
- "phoenix_live_view": "^0.17.10"
+ "phoenix_live_view": "^0.17.10",
+ "stimulus-dropdown": "^2.0.0",
+ "wavesurfer": "^1.3.4"
},
"scripts": {
"deploy": "cd .. && mix assets.deploy"
}
-}
\ No newline at end of file
+}
diff --git a/assets/yarn.lock b/assets/yarn.lock
index ffdf585d..0ad17236 100644
--- a/assets/yarn.lock
+++ b/assets/yarn.lock
@@ -14,11 +14,63 @@
dependencies:
spark-md5 "^3.0.0"
+"@types/codemirror@^5.60.4":
+ version "5.60.5"
+ resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.5.tgz#5b989a3b4bbe657458cf372c92b6bfda6061a2b7"
+ integrity sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==
+ dependencies:
+ "@types/tern" "*"
+
+"@types/estree@*":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+ integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
+"@types/marked@^4.0.1":
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.3.tgz#2098f4a77adaba9ce881c9e0b6baf29116e5acc4"
+ integrity sha512-HnMWQkLJEf/PnxZIfbm0yGJRRZYYMhb++O9M36UCTA9z53uPvVoSlAwJr3XOpDEryb7Hwl1qAx/MV6YIW1RXxg==
+
+"@types/tern@*":
+ version "0.23.4"
+ resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.4.tgz#03926eb13dbeaf3ae0d390caf706b2643a0127fb"
+ integrity sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==
+ dependencies:
+ "@types/estree" "*"
+
+codemirror-spell-checker@1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz#1c660f9089483ccb5113b9ba9ca19c3f4993371e"
+ integrity sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==
+ dependencies:
+ typo-js "*"
+
+codemirror@^5.63.1:
+ version "5.65.6"
+ resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.6.tgz#fc313797331cbeb3bcab0652d1ec9d0f40c23ab5"
+ integrity sha512-zNihMSMoDxK9Gqv9oEyDT8oM51rcRrQ+IEo2zyS48gJByBq5Fj8XuNEguMra+MuIOuh6lkpnLUJeL70DoTt6yw==
+
+easymde@^2.16.1:
+ version "2.16.1"
+ resolved "https://registry.yarnpkg.com/easymde/-/easymde-2.16.1.tgz#f4c2380312615cb33826f1a1fecfaa4022ff551a"
+ integrity sha512-FihYgjRsKfhGNk89SHSqxKLC4aJ1kfybPWW6iAmtb5GnXu+tnFPSzSaGBmk1RRlCuhFSjhF0SnIMGVPjEzkr6g==
+ dependencies:
+ "@types/codemirror" "^5.60.4"
+ "@types/marked" "^4.0.1"
+ codemirror "^5.63.1"
+ codemirror-spell-checker "1.1.2"
+ marked "^4.0.10"
+
hotkeys-js@>=3:
version "3.9.4"
resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.9.4.tgz#ce1aa4c3a132b6a63a9dd5644fc92b8a9b9cbfb9"
integrity sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q==
+marked@^4.0.10:
+ version "4.0.18"
+ resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.18.tgz#cd0ac54b2e5610cfb90e8fd46ccaa8292c9ed569"
+ integrity sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==
+
phoenix@^1.6.10:
version "1.6.10"
resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.6.10.tgz#6a5d0a330b32070fb7f90b96efa1244ba7c4da08"
@@ -53,6 +105,11 @@ stimulus-use@^0.50.0-2:
dependencies:
hotkeys-js ">=3"
+typo-js@*:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.2.1.tgz#334a0d8c3f6c56f2f1e15fdf6c31677793cbbe9b"
+ integrity sha512-bTGLjbD3WqZDR3CgEFkyi9Q/SS2oM29ipXrWfDb4M74ea69QwKAECVceYpaBu0GfdnASMg9Qfl67ttB23nePHg==
+
wavesurfer@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/wavesurfer/-/wavesurfer-1.3.4.tgz#17908abd20da11a8db460c5a176679621d519bfa"
diff --git a/lib/rauversion_web/live/track_live/components/edit_form_component.ex b/lib/rauversion_web/live/track_live/components/edit_form_component.ex
index 93db5f83..cd4d31ec 100644
--- a/lib/rauversion_web/live/track_live/components/edit_form_component.ex
+++ b/lib/rauversion_web/live/track_live/components/edit_form_component.ex
@@ -125,6 +125,17 @@ defmodule RauversionWeb.TrackLive.EditFormComponent do
+
+ <%= label f, :description, class: "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" %>
+
+
+
+ <%= textarea f, :description, "data-controller": "editor", class: "flex-1 block w-full focus:ring-orange-500 focus:border-orange-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
+ <%= error_tag f, :description %>
+
+
+
<%= label f, :private, "Privacy", class: "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" %>
diff --git a/lib/rauversion_web/templates/layout/root.html.heex b/lib/rauversion_web/templates/layout/root.html.heex
index 8c734093..bcbc93b5 100644
--- a/lib/rauversion_web/templates/layout/root.html.heex
+++ b/lib/rauversion_web/templates/layout/root.html.heex
@@ -7,6 +7,8 @@
<%= csrf_meta_tag() %>
<%= live_title_tag assigns[:page_title] || "Rauversion" %>
+
+