Add Github-style checkboxes to nodes

[jywarren]

We are preparing to participate in Google Code-in, and have reserved this issue for participants in GCI - but we'd love to have your help with another one! Please check out https://code.publiclab.org to see more.

Nodes on publiclab.org could use a means of making and checking off lists - just like her in github:

• scan text for * [ ] or * [x]
• replace at display time with <ul>...
• (Later follow up) make it possible to check the box and so update the original markdown from * [ ] to * [x]

Lists are made in github flavor markdown like this:

* [ ]
* [ ]
* [ ]

Try making checklists in the comments here to see!

[amitsin6h]

@jywarren am unable to get where we need to add the checkboxes.

[sagarpreet-chadha]

Hi @amitsin6h ...
I think we need to change this files :

1.) https://github.com/publiclab/plots2/blob/master/app/models/revision.rb

2.) https://github.com/publiclab/plots2/blob/master/config/initializers/constants.rb

For Regex expression , we can test here : http://rubular.com/ .

Thanks !

[jywarren]

Awesome, @sagarpreet-chadha -- great; @amitsin6h we'd love your help with this! I think we could start with just converting checkboxes in Markdown into HTML checkboxes. Then we can think about how to make them "checkable". One at a time, like a checklist! :-)

[jywarren]

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @publiclab/reviewers to get it labelled. Or, if this is not your first time, try to solve it yourself!

---

Here's a Regex expression which will find * [ ] or - [x] : http://rubular.com/r/wmVibUgpIt

/[-|\*] \[( |x)\]/

You could use it like this:

string.gsub(/[-|\*] \[( |x)\]/) do |match|
  checked = " checked='true'" if match == "x"
  "* <input type='checkbox' disabled='disabled' #{checked}/>"
end

[jywarren]

Hi, all! @amitsin6h any interest in this one, or is it up for grabs? Thank you!!!

[vishgoel007]

I want to try this.. first timer here

[sagarpreet-chadha]

Great !!!!!
Ask @publiclab/reviewers team here in case of any doubt .

Thanks so much 😃 🎈 !

[jywarren]

@publiclab/soc if anyone's looking for a break or wants to make a full-fledged first-timers-only issue out of this one, it'd be a fun one!

[cheneyshreve01]

I'd like to help out if it's still open, first-timer and first time with open source. @sagarpreet-chadha @jywarren

[sagarpreet-chadha]

That would be great 😄 !!!

[cheneyshreve01]

@sagarpreet-chadha Thanks, I'll get started :)

[cheneyshreve01]

@publiclab/reviewers looking for help on this issue
Based on the comments on the page, I'm assuming that I need to:

• edit the constants.rb to add a callout called CHECKBOX,
• add code to scan the body to see if the checkboxes are checked, and add code to render the checkboxes

I think I'm confused on how you actually render the checkboxes. So far I have:

constants.rb, added this line to search for checkbox

CHECKBOX = '/[-|\*] \[( |x)\]/'

revision.rb, added this line to the #render_body and #render_body_raw methods to search for checkboxes within body

def render_body
...
 body = body.gsub(Callouts.const_get(:CHECKBOX), Callouts.const_get(:CHECKBOX))
end 

def render_body_raw
 body = body.gsub(Callouts.const_get(:CHECKBOX), Callouts.const_get(:CHECKBOX))
end

I think those edits might be okay, if I'm understanding this task, but I'm confused on where we actually add the checkboxes? @sagarpreet-chadha gave some great hints in comments on how to use the regex, but unfortunately, I'm still a bit lost..

string.gsub(/[-|\*] \[( |x)\]/) do |match|
  checked = " checked='true'" if match == "x"
  "* <input type='checkbox' disabled='disabled' #{checked}/>"
end

How you translate that into the methods we need, e.g. the below method I wrote doesn't make sense to me because I'm not appending the checkboxes anywhere yet...

  def checkbox
    body.scan(Callouts.const_get(:CHECKBOX)).each do |match|
      checked = " checked='true'" if match == "x"
      # do we append to parent?
       "* <input type='checkbox' disabled='disabled' #{checked}/>"
    end
  end

Also, I'm unsure of where exactly we're putting these checkboxes, and how I can test this locally? Any help/tips appreciated, thanks :)

[sagarpreet-chadha]

Hi @cheneyshreve !

Great work so far 😄 !
I would recommend you to open a pull request with your changes .

This looks perfect !
CHECKBOX = '/[-|\*] \[( |x)\]/'
I guess we would need to take care of cases like [[] or maybe ][[] , etc . but we can do that later as a follow-up .

Okay so in this function :
body = body.gsub(Callouts.const_get(:CHECKBOX), Callouts.const_get(:CHECKBOX)) the first argument is the REGEX which searches the body for [ ] and the second argument should be the one that replaces [ ] with Checkbox tag <input type="checkbox"> --- this should also be a callout in constants.rb .

I hope this helps !!
Thanks :)

[sagarpreet-chadha]

This closed similar issue will make this more clear #1825 with PR #1826 😄 .

[sagarpreet-chadha]

@cheneyshreve ...another way would be to make two pair of callouts .

One callout for parsing * [ ] and after parsing replacing this via callout <input type="checkbox">

Another callout for parsing * [x] which would be replaced by <input type="checkbox" checked>

What do you think ?

[cheneyshreve01]

@sagarpreet-chadha thank you! I will take a look at the other issues you posted and follow-up.

[cheneyshreve01]

@sagarpreet-chadha I have made some edits and submitted a PR. I know there are still issues, but hopefully I'm on the right track. Thank you for your kindness and support during this process!

[jywarren]

This was completed by @cheneyshreve in #2452 - thanks!!!

I'm thinking about how we could get checkboxes to be editable as in GitHub. Could we break out some steps for that here?

• a javascript listener for each checkbox
• an AJAX request to edit the page and replace the checkbox with a checked/unchecked version?

It could use this code, for wikis:

plots2/app/controllers/wiki_controller.rb

Lines 369 to 390 in 10dcec3

	# replace subsection of wiki body
	def replace
	@node = Node.find(params[:id])
	if params[:before] && params[:after]
	# during round trip, strings are getting "\r\n" newlines converted to "\n",
	# so we're ensuring they remain "\r\n"; this may vary based on platform, unfortunately
	before = params[:before].gsub("\n", "\r\n")
	after = params[:after]#.gsub( "\n", "\r\n")
	if output = @node.replace(before, after, current_user)
	flash[:notice] = 'New revision created with your additions.' unless request.xhr?
	else
	flash[:error] = 'There was a problem replacing that text.' unless request.xhr?
	end
	else
	flash[:error] = "You must specify 'before' and 'after' terms to replace content in a wiki page."
	end
	if request.xhr?
	render json: output
	else
	redirect_to @node.path
	end
	end

But we'd have to think about how this works for research notes too. The above code seems based on this node.rb replace method:

plots2/app/models/node.rb

Lines 877 to 886 in 10dcec3

	def replace(before, after, user)
	matches = latest.body.scan(before)
	if matches.length == 1
	revision = new_revision(uid: user.id,
	body: latest.body.gsub(before, after))
	revision.save
	else
	false
	end
	end

What do you think? This seems like a potentially large project, but we could think about how to break it up into smaller pieces... maybe working on research notes first?