Hello all,
I recently started experimenting with Phoenix for a personal project, and am loving it so far. However, I’ve gotten really stuck with Webpack and using node modules in my project. I don’t have any experience in front end development, and am in over my head with some of these topics.
I’m trying to use the node module simplemde to be able to turn a textarea into a markdown editor. While I was able to get it working by including the CDN in my html.eex file as follows:
<%= form_for @changeset, Routes.post_path(@conn, :create), fn f -> %>
<%= label f, :title %>
<%= text_input f, :title, required: true, placeholder: "Post Title" %>
<%= error_tag f, :title %>
<%= label f, :body %>
<%= textarea f, :body, rows: 20, required: true, focusable: true, placeholder: "Post Body" %>
<%= error_tag f, :body %>
<div class="row">
<div class="column">
<%= submit "Publish" %>
</div>
<div class="column column-50">
<%= link "Save", class: "button button-outline", to: Routes.post_path(@conn, :index), data: [confirm: "Really discard all changes?"] %>
</div>
<div class="column">
<%= link "Discard", class: "button button-outline float-right", to: Routes.post_path(@conn, :index), data: [confirm: "Really discard all changes?"] %>
</div>
</div>
<% end %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script type="text/javascript">
new SimpleMDE({
element: document.getElementById('post_body'),
spellChecker: true
})
</script>
I’ve been having great difficulty actually adding it to my project via webpack though. The steps I’ve taken have been:
Added to package.json and installed node modules
"simplemde": "^1.11.2"
npm install
Added the import to my app.js file:
import css from "../css/app.css"
import "phoenix_html"
import SimpleMDE from "simplemde"
Tried to use simplemde within a script tag of my html.eex file (for brevity, it is the same code as above, except I removed the stylesheet and script with the cdn src tag)
This resulted in the textarea returning to the plain html textarea, with no markdown controls, and an error that SimpleMDE is not defined in the browser console.
My next idea was to remove the script tag with the setup for simplemde from the html.eex file and move it to the app.js file. This worked, and the code is as follows:
import css from "../css/app.css"
import "phoenix_html"
import SimpleMDE from "simplemde"
new SimpleMDE({
element: document.getElementById('post_body'),
spellChecker: true
})
There seem to be two problems with this approach, however. 1) the formatting of the textarea isn’t correct. I believe I still need to import or include the stylesheet. 2) this solution applies to all of the pages across my application, because it is in the app.js file. So, when I go to any other page, I get console error messages that say SimpleMDE: Error. No element was found (like it should, since there is no element with id post_body on those pages).
So, from this I have several questions:
How do I share the modules that have been imported to the scripts within my html files?
What is the best practice for using javascript in my application - does it make more sense to always create a javascript file instead of embedding it into a script tag? (is that more maintainable?)
I’m quite certain that the CSS file for simplemde can be imported as well - how do I go about that, and in the future how do I figure out what the names of importable objects are?
I appreciate the help! Cheers
