amemo

Adventures in Markdown / Rich Text Editing & Rendering in Phoenix LiveView

Try it! amemo.fly.dev

Input some random Markdown into the <textarea>

# Hello World! 😊

Write something **bold**, _italic_ or ***both*** with a 
[link](https://mvp.fly.dev/)
and some code `dbg("hello")`.  
Pasting URLs directly works too: 
https://mvp.fly.dev

![iteles](https://avatars.githubusercontent.com/u/4185328?s=80&v=4)

+ Bullet Point
1. Ordered List

Watch it render to HTML server-side in real-time!

Understand it!

If you want to fully understand the code in this mini-project, please follow the LiveView Counter Tutorial: dwyl/phoenix-liveview-counter-tutorial

Run it on your localhost

git clone git@github.com:nelsonic/amemo.git && cd amemo
mix deps.get
mix s

Then open localhost:4000 in your fave browser you should see something similar to the following:

Build Log

mix phx.new amemo --no-mailer --no-dashboard --no-gettext

All the relevant code for this is contained in: lib/amemo_web/live/editor.ex

Previous Efforts/Explorations

Implement Quill Rich Text Editor

I attempted to add the quill Rich Text Editor ...

Relevant links:

• https://quilljs.com
• https://quilljs.com/guides/why-quill
• https://github.com/quilljs/quill

Open lib/app_web/templates/post/form.html.eex and add Quill starter code: https://quilljs.com/docs/quickstart

e.g: lib/app_web/templates/post/form.html.eex#L8

It kinda worked. But was not maintained so I scrapped it issues#64 in favour of starting from scratch with LiveView.