search

nelsonic / amemo

Richtext writing research :mag:
https://amemo.fly.dev
GNU General Public License v2.0
6 stars 0 forks source link

readme

# `amemo` Adventures in `Markdown` / `Rich Text` Editing & Rendering in `Phoenix LiveView` ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/nelsonic/amemo/ci.yml?label=build&style=flat-square&branch=main) [![codecov.io](https://img.shields.io/codecov/c/github/nelsonic/amemo/main.svg?style=flat-square)](http://codecov.io/github/nelsonic/amemo?branch=main) [![Hex.pm](https://img.shields.io/hexpm/v/phoenix?color=brightgreen&style=flat-square)](https://hex.pm/packages/elixir_auth_google) [![contributions welcome](https://img.shields.io/badge/feedback-welcome-brightgreen.svg?style=flat-square)](https://github.com/nelsonic/amemo/issues) [![HitCount](https://hits.dwyl.com/nelsonic/amemo.svg)](https://hits.dwyl.com/nelsonic/amemo)

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:

amemo-localhost

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:

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

quill-implemented

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