Loomio

Improved formatting with markdown

Paul Smith
Paul Smith Public Seen by 149
Paul Smith

Paul Smith August 4th, 2012 23:09

Background: https://trello.com/c/rFovhOID

There seems to be a bit of consensus on the idea of adding formatting to proposals/comments etc.

I did a bit of research into this while trying to learn integration tests and ended up in favour of Github style markdown as seen here:
https://github.com/mojombo/github-flavored-markdown/issues/1

If it's useful you can have a look at an example of redcarpet in loomio with these changes:
https://github.com/tixpaul/loomio/tree/feature/markdown

There's lots of different ways and styles to do this, if it's needed at all. Thoughts?

Richard D. Bartlett

Richard D. Bartlett August 5th, 2012 04:18

This would make me so damn happy. Markdown is so beautiful.

Jon Lemmon

Jon Lemmon August 5th, 2012 23:01

Sweet. Can we use github-flavored markdown with redcarpet? I definitely think formatting for comments is necessary in the long-term, I'm just not entirely convinced on the best way to do it. Does github-flavored markdown provide everything we need? From a non-coder's perspective, would they find it easy-to-use? If we add in a WYSIWYG editor later on would it play nicely?

In terms of markdown... I do like github-flavored markdown better because it handles line-breaks nicely.

Benjamin Knight

Benjamin Knight August 6th, 2012 02:24

Any kind of markdown is all good with me

Paul Smith

Paul Smith August 6th, 2012 07:03

Ah the github flavoured markdown isn't as easy as a WYSIWYG however:

It is really intuitive, less tech savvy people will be put off only until they try it.

If we just embedded a cheatsheet help button I'm sure it wouldn't take long for people to adopt it.

I typed out a big rant about wysiwyg editors and their validation and sanitization problems butttt then I found MarkitUp.

http://markitup.jaysalvat.com/examples/markdown/

Apparently there's even a github repo with a tidy guide:
https://github.com/ZhangHanDong/rails_markitup

As far as whether it will do everything you need, I believe it's actually the same markdown engine Github actually uses (http://github.github.com/github-flavored-markdown/) and it's really flexible if there was something else that came up.

Jon Lemmon

Jon Lemmon August 6th, 2012 09:32

Ah sweet. That all looks good to me. And I think a cheat-sheet for now would do just fine.

Chris Taklis

Chris Taklis June 25th, 2013 16:18

Maybe it is better with WYSIWYG or visual editor, so any member can use it easily.

Richard D. Bartlett

Richard D. Bartlett June 25th, 2013 21:08

Totally agree @christaklis. My ideal comment box would have drag-and-drop images too.

I wonder if there are any good gems out there to handle this? If not we should build one!

Matthew Bartlett

Matthew Bartlett June 25th, 2013 23:03

@richarddbartlett Jack_up looks like it could do the trick

Chris Taklis

Chris Taklis September 15th, 2013 09:57

how is that going? because some members of my group asked again and again how to format their text.

Matthew Bartlett

Matthew Bartlett September 15th, 2013 20:18

hi @christaklis — the comment box is shortly going to be improved a little, so that when a user attaches an image it will insert an image preview into the comment. Should be live next week. But I'm sorry, I have no idea when WYSIWYG commenting might be coming down the pipeline!

Chris Taklis

Chris Taklis September 16th, 2013 07:30

I think the most important is the context discussion box and comments of course.

But usually in the context discussion's box we usually write a big text or update it with something new. There must be as simple we can everyone to format the text so to look good in others eyes.

Richard D. Bartlett

Richard D. Bartlett September 19th, 2013 01:03

@christaklis, just checking, have you read this?

Chris Taklis

Chris Taklis September 19th, 2013 06:29

@richarddbartlett of course I have read it. I use it often but the other members of my group can not understand it easy.

Richard D. Bartlett

Richard D. Bartlett September 19th, 2013 06:47

@christaklis can you think of any examples of websites that do text formatting in a really use friendly way?

Chris Taklis

Chris Taklis September 19th, 2013 08:49

here a screenshot from google search how do i think it.

somethink like that:

@richarddbartlett here is the wysiwyg builder site: (http://wysiwygwebbuilder.com/)

Chris Taklis

Chris Taklis September 19th, 2013 10:19

I made a small mock-up to understand everyone.

i think like that for beginning it would be easy for every member of each group can format their text.

it is a simple bar with few buttons (or all the formating buttons, like quote, headings, code, etc.), and when you select the text you want and press the button you wish in the bar it transforms the text in the "markdown".

So the buttons can convert the text to the code you have to put each time.

Except of course if the designers / developers go to wysiwyg or visual editors!

Benjamin Knight

Benjamin Knight September 19th, 2013 20:54

This is really nice @christaklis! This is definitely coming, we'll just need to figure out when we can prioritise it. Will keep you posted!

Rob Guthrie

Rob Guthrie September 19th, 2013 22:47

Hey...... I just found this:
http://toopay.github.io/bootstrap-markdown/

I rekon someone would feel pretty cool if they decided to put that in for us.

I would like to try using it as the default editor around loomio. (both comments and positions)

I wonder if we could throw it in an enable it only for some groups to get well tested user feedback.

Richard D. Bartlett

Richard D. Bartlett September 19th, 2013 23:51

That looks great @christaklis! Looks like the kind of little coding project for me to take on in my spare time one of these days :)

Rob Guthrie

Rob Guthrie September 20th, 2013 00:06

@richarddbartlett I think you missed my post! No coding project for you!

Richard D. Bartlett

Richard D. Bartlett September 20th, 2013 00:10

Rad @robertguthrie, looks like my project got a lot easier! We have a way to enable beta features eh? So I could slap this on the Loomio Community and Enspiral groups and we could play for a week or two?

Chris Taklis

Chris Taklis September 20th, 2013 08:45

@robertguthrie that is exactly what we want a simple editor. As I see it is ready so no one has to develop it from zero but to put only that code.

Richard D. Bartlett

Richard D. Bartlett September 23rd, 2013 08:09

@christaklis @robertguthrie @matthewbartlett @benjaminknightloom
what do you think of these mockups?

Here's the comment box with bigger more attractive buttons:
http://i.imgur.com/arXBuNl.png

And when you click on the "A" icon, it brings up more formatting options:
http://i.imgur.com/4RZ0fOJ.png

So you put in some text:
http://i.imgur.com/HYp7TEe.png

And hit 'preview':
http://i.imgur.com/wz75Te3.png

Chris Taklis

Chris Taklis September 23rd, 2013 08:19

@richarddbartlett that mockups are excellent.

Only it would be better if also had button for images.

Matthew Bartlett

Matthew Bartlett September 23rd, 2013 08:22

@richarddbartlett love it. Wonder if you could lose 'Comment preview:' + maybe even the border around the preview? (which border doesn't quite align with the comment box). GREAT though

Matthew Bartlett

Matthew Bartlett September 23rd, 2013 08:25

@richarddbartlett I wonder now why we wouldn't just show everyone the formatting buttons from ze get-go?

Rob Guthrie

Rob Guthrie September 23rd, 2013 08:35

Richard I love it. I think that hiding the formatting buttons at first is right, it's way less complex looking that way.

Really nice and clean mockups.

Richard D. Bartlett

Richard D. Bartlett September 23rd, 2013 09:27

@matthewbartlett I think you're right about losing the heading and border on the comment preview.

@christaklis a button for adding images is an obvious next step, but I think we could get this version out first, and add images later as there is a fair bit of extra work in that.

Also I should add that clicking the '?' button would bring up a Markdown cheat-sheet, like how Github does it.

Chris Taklis

Chris Taklis September 23rd, 2013 09:30

@richarddbartlett i totally agree. Get this version and is updated or extended in the future.

Chris Taklis

Chris Taklis August 31st, 2014 15:18

Any news about this? It's over one year discussion...

Richard D. Bartlett

Richard D. Bartlett August 31st, 2014 19:49

Hehe @christaklis the news is: the way we have markdown implemented is really nasty so every time someone starts to fix it they run away.

It will definitely happen at some point in the future, it is just a more difficult job than I imagined a year ago.

Chris Taklis

Chris Taklis August 31st, 2014 21:44

that's too bad news... that would help a lot of people who don't understand markup.

i wait news about the development of this... i hope that won't "fall in the drawer"!

Alanna Irving

Alanna Irving September 1st, 2014 01:35

@robertguthrie is actually working on this today! Expect some improvements soon and vast improvements in the next several weeks. @christaklis we are moving away from markdown and into using HTML formatting that's a lot more user friendly and also will allow formatting when people reply by email. But as @richarddbartlett said it's actually a complicated issue.

Chris Taklis

Chris Taklis September 1st, 2014 07:38

thanks @alanna that's good news! i want to see how it will become... so i am waiting till it's ready!