SimpleMDE

[Lloyd R. Prentice]

Hi Jesse and community,

I’d like to integrate SimpleMDE into my Writersglen project.

https://simplemde.com/

As a skill-building exercise my thought is to approach it in three steps:

1. Integrate it into a Nitrogen page as JavaScript. 

As you know, my JavaScript skills are nil, so this will be a first for me. I’d appreciate any tips.

2. Create a SimpleMDE Nitrogen element.

I have a general idea of how to do this based on our book. But I don’t understand how to integrate the various configuration options. Would much appreciate guidance.

3. Write up my experience as a tutorial.

If anyone in the community has trod this path, I’d much appreciate your thoughts and code.

All the best,

Lloyd

Sent from my iPad

[braun...@gmail.com]

You just have to emit the js code with wf:wire.

Suppose your element is #simplemde{}. That record contains all options you want to support through nitrogen:

-record(simplemde, {?ELEMENT_BASE(element_simplemde),

    status,

    promptURLs,

   spellChecker,

   ...

}).

Then in the element implementation you emit the DOM node, and you run the js code through the websocket (wf:wire):

 

render_element(#simplemde{status=Status, spellChecker=SpellChecker}) ->   

    Id = wf:temp_id(),

    wf:wire(wf:f("var simplemde = new SimpleMDE({ element: document.getElementById('~s'), status: ~p, spellChecker:~p }); ",

          [Id, Status, SpellChecker])),

    #textarea {html_id=Id}.

Just simple as that. Maybe you will have to use wf:defer instead of wf:wire which also evaluates js code in the browser

but it puts the code at the end of the nitrogen js queue because that document.getElementById must happen after rendering

the textarea node itself, right?

Your element can support more complex options like 'insertTexts' but you have to make sure you are emitting sane JS code. Thats

why my example only uses 'status' and 'spellchecker' which are just booleans. For that you can use wf:f, wf:wire, wf:json_encode,

and wf:js_escape functions to format clean js code. wf:f in particular is just a wrapper to io_lib:format/2. To support all SimpleMDE options

you will have to eventually craft the js string with wf:f (or io_lib:format). Its just a string formatting game...

[Jesse Gumm]

Thanks for those details Franklin! 

Also, for some additional info, you could look into the TinyMCE nitrogen plugin I use:

https://github.com/choptastic/nitrogen_tinymce

It's likely the bones are very similar.

-Jesse

--
You received this message because you are subscribed to the Google Groups "Nitrogen Project / The Nitrogen Web Framework for Erlang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nitrogenweb...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nitrogenweb/59547787-571c-4876-86be-fd8f32921dd1n%40googlegroups.com.

[Lloyd R. Prentice]

Many thanks, Braun,

I’ll give it a shot. But given my inexperience, I still feel like I’m missing first principles.

 I edited the custom elements chapter in Build It with Nitrogen, but feel like we may have obscured the forest by focusing too intently on trees.

But I do very much appreciate your response.

Lloyd

Sent from my iPad

On Jun 18, 2021, at 9:24 PM, braun...@gmail.com <braun...@gmail.com> wrote:



--

[Lloyd R. Prentice]

Hi Jesse,

I looked at the TinyMCE code first thing. But, again, not enough context to enable me to create the SimpleMDE element.

As you know, my JavaScript experience is nil. Without this experience, or sufficient context, the TinyMCE is so much hand-waving.

Best,

L.

Sent from my iPad

On Jun 19, 2021, at 8:16 AM, Jesse Gumm <gu...@sigma-star.com> wrote:



To view this discussion on the web visit https://groups.google.com/d/msgid/nitrogenweb/CAPTXyXe%3DYaxPc6KnSg7JPWECV9Y%3DeM92uyoDWHcwcVXc4_5vzQ%40mail.gmail.com.

[Jesse Gumm]

Hey Lloyd,

I've been thinking of putting together a video tutorial for this. Seems like it would be a short enough and interesting enough example.

From reading through the SimpleMDE docs, it looks like it would be maybe one actual line of Javascript (as the bare minimum), aside from loading the Javascript file with the <script> tag, or loading the dependency dynamically. 

-Jesse

To view this discussion on the web visit https://groups.google.com/d/msgid/nitrogenweb/48290334-0EFC-431C-B7A6-6E621EEA3E5D%40writersglen.com.

[Lloyd R. Prentice]

Outstanding!

Would much appreciate it.

It might be good to start one level deeper than you did with the custom elements Build It chapter—perhaps with help of a block diagram that shows data flow from Erlang record to html and JavaScript to web server. Maybe even reference specific modules and functions in Nitrogen core that facilitate the data flow.

I’ve been working hard on PDF generation. Turns out that LaTeX has a markdown package. So SimpleMDE will be a terrific asset. The tricky part is how to compose the  LaTeX templates to style the document. From my naive perspective, the LaTeX ecosystem is sprawling and ugly.

Once I have this more-or-less pinned down, I’ll write Erlang functions to manage the  markdown and template editors, project/resource directory tree, and PDF generation code. That will constitute 80% of the WG backend.

Pleased to see that Build It purchases keep dribbling in. I believe we could accelerate the pace if we could get a newsletter or blog going.

Your seasonal work easing up a bit? Let me know when you’re feeling less pressure so we can catch up on the phone.

All the best,

L.

Sent from my iPad

On Jun 27, 2021, at 10:57 AM, Jesse Gumm <gu...@sigma-star.com> wrote:



To view this discussion on the web visit https://groups.google.com/d/msgid/nitrogenweb/CAPTXyXfuvSPQng3U3coUwtZ1mYC91oLXjC2%2BJ43QiBTizB_P_A%40mail.gmail.com.