I’m trying to use this WYSIWYG Markdown editor in my live view form https://github.com/sparksuite/simplemde-markdown-editor
(Does anyone know which editor Elixir Forum uses, I want something like this).
Here’s my form
<div class="message_form" style="height: 100px;">
<%= form_for :message, "#", [phx_change: :typing, phx_submit: :save], fn f -> %>
<%= textarea f, :text, id: "wysiwyg", phx_hook: "messageTextarea" %>
<%= submit "Save" %>
<% end %>
</div>
Here’s my JS
Hooks.messageTextarea = {
mounted() {
new SimpleMDE({ element: document.getElementById("wysiwyg") });
},
updated() {
new SimpleMDE({ element: document.getElementById("wysiwyg") });
},
The editor appears when the page loads, but when the first character is typed, there is a reload, the editor appears again, but there’s no text in it. If I log the events, I seem to get a bunch of beforeUpdate
and updated
events firing. How can I keep my events, but stop it from reloading the text area on each character typed?