simple_form_markdown_editor 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c5c6a73ac5c7888296fde17f9ae33f400503c003
+  data.tar.gz: 9e5e6861ebc55abb6f60d3d4557fe8b5b4259b63
+SHA512:
+  metadata.gz: c0cba84a45c4023bc1e08287e1edabe4da75fd5c000d7c8793c0a89d7455ae9f2377bd9a51c844558f4bf877fbb6067e4838790424a99ef5c28884996a831c27
+  data.tar.gz: b237ae007a6f238bd28453532a2cf2544629fab7472e718b26e895248a1f440ccf0a808249d305f9dc712bb981f8e823b8f8105b0bc10948a69134bcb1d11796

data/.gitignore

@@ -0,0 +1,2 @@
+test/dummy/Gemfile.lock
+pkg

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in simple_form_localized_input.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,126 @@
+PATH
+  remote: .
+  specs:
+    simple_form_markdown_editor (0.0.1)
+      autoprefixer-rails
+      rails (>= 4.2)
+      redcarpet
+      responders (~> 2.0)
+      simple_form (>= 3.0.2)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actionmailer (4.2.0)
+      actionpack (= 4.2.0)
+      actionview (= 4.2.0)
+      activejob (= 4.2.0)
+      mail (~> 2.5, >= 2.5.4)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
+    actionpack (4.2.0)
+      actionview (= 4.2.0)
+      activesupport (= 4.2.0)
+      rack (~> 1.6.0)
+      rack-test (~> 0.6.2)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
+      rails-html-sanitizer (~> 1.0, >= 1.0.1)
+    actionview (4.2.0)
+      activesupport (= 4.2.0)
+      builder (~> 3.1)
+      erubis (~> 2.7.0)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
+      rails-html-sanitizer (~> 1.0, >= 1.0.1)
+    activejob (4.2.0)
+      activesupport (= 4.2.0)
+      globalid (>= 0.3.0)
+    activemodel (4.2.0)
+      activesupport (= 4.2.0)
+      builder (~> 3.1)
+    activerecord (4.2.0)
+      activemodel (= 4.2.0)
+      activesupport (= 4.2.0)
+      arel (~> 6.0)
+    activesupport (4.2.0)
+      i18n (~> 0.7)
+      json (~> 1.7, >= 1.7.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    arel (6.0.0)
+    autoprefixer-rails (5.1.7.1)
+      execjs
+      json
+    builder (3.2.2)
+    erubis (2.7.0)
+    execjs (2.4.0)
+    globalid (0.3.3)
+      activesupport (>= 4.1.0)
+    hike (1.2.3)
+    i18n (0.7.0)
+    json (1.8.2)
+    loofah (2.0.1)
+      nokogiri (>= 1.5.9)
+    mail (2.6.3)
+      mime-types (>= 1.16, < 3)
+    mime-types (2.4.3)
+    mini_portile (0.6.2)
+    minitest (5.5.1)
+    multi_json (1.11.0)
+    nokogiri (1.6.6.2)
+      mini_portile (~> 0.6.0)
+    rack (1.6.0)
+    rack-test (0.6.3)
+      rack (>= 1.0)
+    rails (4.2.0)
+      actionmailer (= 4.2.0)
+      actionpack (= 4.2.0)
+      actionview (= 4.2.0)
+      activejob (= 4.2.0)
+      activemodel (= 4.2.0)
+      activerecord (= 4.2.0)
+      activesupport (= 4.2.0)
+      bundler (>= 1.3.0, < 2.0)
+      railties (= 4.2.0)
+      sprockets-rails
+    rails-deprecated_sanitizer (1.0.3)
+      activesupport (>= 4.2.0.alpha)
+    rails-dom-testing (1.0.6)
+      activesupport (>= 4.2.0.beta, < 5.0)
+      nokogiri (~> 1.6.0)
+      rails-deprecated_sanitizer (>= 1.0.1)
+    rails-html-sanitizer (1.0.2)
+      loofah (~> 2.0)
+    railties (4.2.0)
+      actionpack (= 4.2.0)
+      activesupport (= 4.2.0)
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (10.4.2)
+    redcarpet (3.2.2)
+    responders (2.1.0)
+      railties (>= 4.2.0, < 5)
+    simple_form (3.1.0)
+      actionpack (~> 4.0)
+      activemodel (~> 4.0)
+    sprockets (2.12.3)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    sprockets-rails (2.2.4)
+      actionpack (>= 3.0)
+      activesupport (>= 3.0)
+      sprockets (>= 2.8, < 4.0)
+    thor (0.19.1)
+    thread_safe (0.3.5)
+    tilt (1.4.1)
+    tzinfo (1.2.2)
+      thread_safe (~> 0.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bundler (~> 1.6)
+  rake
+  simple_form_markdown_editor!

data/README.md

@@ -0,0 +1,111 @@
+# SimpleForm Markdown Editor
+
+A simple [Markdown](http://daringfireball.net/projects/markdown/) editor inspired by [gollum_editor](https://github.com/samknight/gollum_editor), the editor used for Github's wiki pages.
+
+[Markdown](http://daringfireball.net/projects/markdown/) rendering is handled by [Redcarpet](https://github.com/vmg/redcarpet).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'simple_form_markdown_editor'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install simple_form_markdown_editor
+
+## Usage
+
+Require the javascripts in `application.js`:
+
+    //= require simple_form_markdown_editor
+
+And require the stylesheets in `application.css`:
+
+    *= require simple_form_markdown_editor
+
+Finally mount the engine in your routes:
+
+    mount SimpleFormMarkdownEditor::Engine => "/"
+
+Use in forms:
+
+    = form.input :markdown, as: :markdown_editor
+
+## Configuration
+
+Configuration is possible app-wide (using an initializer) and per input.
+
+Refer to [redcarpet](https://github.com/vmg/redcarpet) for a list of available [extensions](https://github.com/vmg/redcarpet#and-its-like-really-simple-to-use) and [render](https://github.com/vmg/redcarpet#darling-i-packed-you-a-couple-renderers-for-lunch) options.
+
+### Global
+
+```ruby
+# config/initializers/simple_form_markdown_editor.rb
+
+SimpleFormMarkdownEditor::MarkdownEditor.configure do |c|
+  c.buttons = [ %w(h1 h2 h3), %w(strong em), %w(a img) ]
+  c.help = { enabled: true, visible: false }
+  c.extensions = {
+    footnotes: true,
+    smartypants: true,
+    lax_spacing: true,
+    escape_html: false
+  }
+  c.render_options = {
+    :no_images,
+    :no_links
+  }
+end
+```
+
+### Input
+
+```ruby
+= f.input :markdown, as: :markdown_editor, help: { enabled: true, visible: false }, buttons: [ %w(h1 h2), %w(a img) ]
+```
+
+## Internationalization
+
+All strings (buttons, help etc.) are defined in a `I18n` `YAML` file along with buttons and tabs. This can easily be overridden and extended to other languages:
+
+```YAML
+# simple_form_markdown_editor.en.yml
+
+en:
+  simple_form_markdown_editor:
+    tabs:
+      edit: Write
+      preview: Sneak peek
+    buttons:
+      h1: Header 1
+      h2: Header 2
+      h3: Header 3
+      a: Link
+      img: Image
+    help:
+      block_elements:
+        title: Blocks
+        elements:
+          headers:
+            title: # Headers
+            text: A very good explanation
+```
+
+
+## Testing
+
+The gem includes a rails app for easy testing, simply `cd test/dummy`, `bundle install` and `bundle exec bin/rails s`, then direct your browser to `127.0.0.1:3000` to see the editor in action.
+
+## Todo
+
+* How to make it possible to plug in other render engines?
+* How to implement "custom Markdown" (basic gsub)?
+* Highlighting trailing spaces (for linebreaks)?
+* Implement keyboard shortcuts
+* Implement Ctrl+z
+* Implement install task (create YML and config)?

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/controllers/simple_form_markdown_editor/previews_controller.rb

@@ -0,0 +1,21 @@
+require 'responders'
+
+module SimpleFormMarkdownEditor
+  class PreviewsController < ActionController::Base
+
+    respond_to :html
+
+    def preview
+      respond_to do |format|
+        format.html { render text: SimpleFormMarkdownEditor::Renderer.call(preview_params) }
+      end
+    end
+
+    private # =============================================================
+
+    def preview_params
+      params.require(:text)
+    end
+
+  end
+end

data/config/routes.rb

@@ -0,0 +1,7 @@
+# NOTE: Is this the best way to do it? Users will have to mount the engine. Alternative?
+
+SimpleFormMarkdownEditor::Engine.routes.draw do
+  scope module: :simple_form_markdown_editor do
+    post "/preview" => "previews#preview", as: :preview
+  end
+end

data/lib/assets/javascripts/simple_form_markdown_editor/simple_form_markdown_editor_buttons.js.coffee

@@ -0,0 +1,135 @@
+# https://github.com/jquery-boilerplate/jquery-boilerplate/
+do ($ = jQuery, window, document) ->
+
+  pluginName = 'simple_form_markdown_editor_buttons'
+  defaults =
+    debug: false
+    definitions:
+      'strong':     '**%{str}**'
+      'em':         '*%{str}*'
+      'code':       '`%{str}`'
+      'hr':         '%{str}***'
+      'ul':         '* %{str}'
+      'ol':         '1. %{str}'
+      'blockquote': '> %{str}'
+      'h1':         '# %{str}'
+      'h2':         '## %{str}'
+      'h3':         '### %{str}'
+      'h4':         '#### %{str}'
+      'h5':         '##### %{str}'
+      'h6':         '###### %{str}'
+      'a':          '[%{str}](|)'
+      'img':        '![%{str}](|)'
+
+  # ---------------------------------------------------------------------
+
+  class Plugin
+    constructor: (@element, options) ->
+      @settings = $.extend {}, defaults, options
+
+      @$element = $(@element)
+
+      @_defaults = defaults
+      @_name = pluginName
+
+      @init()
+
+    init: ->
+      console.log 'init' if @settings.debug
+
+      @get_help_button().addClass('active') if @help_is_visible()
+
+      @get_help_button().on 'click', (e) =>
+        $(e.currentTarget).toggleClass('active')
+        @toggle_help_visibility()
+
+      @get_command_buttons().on 'click', (e) =>
+        $btn = $(e.currentTarget)
+        cmd = $btn.attr('value')
+        @execute_command(cmd)
+
+    # ---------------------------------------------------------------------
+
+    get_textarea: -> @get_editor_div().children('textarea')
+    get_editor_div: -> @$element.children('div.editor')
+    get_header_div: -> @$element.children('div.header:first')
+    get_help_div: -> @$element.children('div.help')
+    get_button_groups_ul: -> @get_header_div().find('ul.button_groups')
+    get_button_group_lis: -> @get_button_groups_ul().children('li.button_group')
+    get_buttons_uls: -> @get_button_group_lis().children('ul.buttons')
+    get_button_lis: -> @get_buttons_uls().children('li.button')
+    get_buttons: -> @get_button_lis().children('button')
+    get_command_buttons: -> @get_buttons().not(@get_help_button())
+    get_help_button: -> @get_buttons().filter('.help')
+
+    help_is_visible: -> @get_help_div().attr('data-visible') == 'true'
+
+    execute_command: (cmd) ->
+      $textarea = @get_textarea()
+      selection = @get_selection($textarea)
+      definition = @settings.definitions[cmd]
+      replacement = definition.replace('%{str}', selection.text)
+      caret_pos = replacement.indexOf('|')
+      start = selection.start
+      end = selection.start + replacement.length
+      if caret_pos > -1
+        replacement = replacement.replace(/\|/g, '')
+        start = selection.start + caret_pos
+        end = selection.start + caret_pos
+      @replace_selection($textarea, replacement)
+      @set_selection($textarea, start, end)
+
+    get_selection: ($e) ->
+      {
+        start: $e[0].selectionStart
+        end: $e[0].selectionEnd
+        length: $e[0].selectionEnd - $e[0].selectionStart
+        text: $e.val().substring($e[0].selectionStart, $e[0].selectionEnd)
+      }
+
+    set_selection: ($e, start, end) ->
+      $e.focus()
+      $e[0].selectionStart = start
+      $e[0].selectionEnd = end
+
+    replace_selection: ($e, string) ->
+      start = $e[0].selectionStart
+      end = $e[0].selectionEnd
+      val = $e.val()
+      $e.val(val.substring(0, start) + string + val.substring(end, val.length))
+
+    toggle_help_visibility: ->
+      @get_help_div().attr('data-visible', String(!@help_is_visible()))
+
+  # ---------------------------------------------------------------------
+
+  # A really lightweight plugin wrapper around the constructor,
+  # preventing against multiple instantiations and allowing any
+  # public function (ie. a function whose name doesn't start
+  # with an underscore) to be called via the jQuery plugin,
+  # e.g. $(element).defaultPluginName('functionName', arg1, arg2)
+
+  $.fn[pluginName] = (options) ->
+    args = arguments
+    if options is `undefined` or typeof options is "object"
+      @each ->
+        $.data this, "plugin_" + pluginName, new Plugin(this, options)  unless $.data(this, "plugin_" + pluginName)
+
+    else if typeof options is "string" and options[0] isnt "_" and options isnt "init"
+      returns = undefined
+      @each ->
+        instance = $.data(this, "plugin_" + pluginName)
+        returns = instance[options].apply(instance, Array::slice.call(args, 1))  if instance instanceof Plugin and typeof instance[options] is "function"
+        $.data this, "plugin_" + pluginName, null  if options is "destroy"
+
+      (if returns isnt `undefined` then returns else this)
+
+# =====================================================================
+
+$ ->
+
+  $('div.simple_form_markdown_editor').simple_form_markdown_editor_buttons()
+
+  # make sure the plugin is correctly rebound to new elements
+  $('body').on 'dom_update', (e) ->
+    $('div.simple_form_markdown_editor').simple_form_markdown_editor_buttons()

data/lib/assets/javascripts/simple_form_markdown_editor/simple_form_markdown_editor_help.js.coffee

@@ -0,0 +1,100 @@
+# https://github.com/jquery-boilerplate/jquery-boilerplate/
+do ($ = jQuery, window, document) ->
+
+  pluginName = 'simple_form_markdown_editor_help'
+  defaults =
+    debug: false
+
+  # ---------------------------------------------------------------------
+
+  class Plugin
+    constructor: (@element, options) ->
+      @settings = $.extend {}, defaults, options
+
+      @$element = $(@element)
+
+      @_defaults = defaults
+      @_name = pluginName
+
+      @init()
+
+    init: ->
+      console.log 'init' if @settings.debug
+
+      @set_section_li @get_section_lis().first()
+
+      @get_section_lis().on 'click', (e) =>
+        $li = $(e.currentTarget)
+        @set_section_li($li)
+
+      @get_sub_section_lis().on 'click', (e) =>
+        $li = $(e.currentTarget)
+        @set_sub_section_li($li)
+
+    # ---------------------------------------------------------------------
+
+    get_help_div: -> @$element.find('div.help')
+
+    get_sections_ul: -> @get_help_div().find('ul.sections')
+    get_section_lis: -> @get_sections_ul().children('li')
+    get_sub_section_ul: (section) -> @get_sub_sections_uls().filter(".#{section}")
+    get_sub_sections_uls: -> @get_help_div().find('ul.sub_sections')
+    get_sub_section_lis: -> @get_sub_sections_uls().children('li.sub_section')
+
+    get_help_text_divs: -> @get_help_div().find('div.help_text')
+
+    set_section_li: ($li) ->
+      $li.siblings('li').removeClass('active')
+      $li.addClass('active')
+      section = $li.data('toggle')
+      $sub_section_ul = @get_sub_section_ul(section)
+      @set_sub_section_ul($sub_section_ul)
+
+    set_sub_section_ul: ($ul) ->
+      $ul.siblings('ul').removeClass('active')
+      $ul.addClass('active')
+      $li = $ul.children('li:first')
+      @set_sub_section_li($li)
+
+    set_sub_section_li: ($li) ->
+      $li.siblings('li').removeClass('active')
+      $li.addClass('active')
+      $help_text_div = @get_help_text_divs().filter(".#{$li.data('toggle')}")
+      @set_help_text_div($help_text_div)
+
+    set_help_text_div: ($div) ->
+      $div.siblings('div').removeClass('active')
+      $div.addClass('active')
+
+  # ---------------------------------------------------------------------
+
+  # A really lightweight plugin wrapper around the constructor,
+  # preventing against multiple instantiations and allowing any
+  # public function (ie. a function whose name doesn't start
+  # with an underscore) to be called via the jQuery plugin,
+  # e.g. $(element).defaultPluginName('functionName', arg1, arg2)
+
+  $.fn[pluginName] = (options) ->
+    args = arguments
+    if options is `undefined` or typeof options is "object"
+      @each ->
+        $.data this, "plugin_" + pluginName, new Plugin(this, options)  unless $.data(this, "plugin_" + pluginName)
+
+    else if typeof options is "string" and options[0] isnt "_" and options isnt "init"
+      returns = undefined
+      @each ->
+        instance = $.data(this, "plugin_" + pluginName)
+        returns = instance[options].apply(instance, Array::slice.call(args, 1))  if instance instanceof Plugin and typeof instance[options] is "function"
+        $.data this, "plugin_" + pluginName, null  if options is "destroy"
+
+      (if returns isnt `undefined` then returns else this)
+
+# =====================================================================
+
+$ ->
+
+  $('div.simple_form_markdown_editor').simple_form_markdown_editor_help()
+
+  # make sure the plugin is correctly rebound to new elements
+  $('body').on 'dom_update', (e) ->
+    $('div.simple_form_markdown_editor').simple_form_markdown_editor_help()

data/lib/assets/javascripts/simple_form_markdown_editor/simple_form_markdown_editor_tabs.js.coffee

@@ -0,0 +1,84 @@
+# https://github.com/jquery-boilerplate/jquery-boilerplate/
+do ($ = jQuery, window, document) ->
+
+  pluginName = 'simple_form_markdown_editor_tabs'
+  defaults =
+    debug: false
+
+  # ---------------------------------------------------------------------
+
+  class Plugin
+    constructor: (@element, options) ->
+      @settings = $.extend {}, defaults, options
+
+      @$element = $(@element)
+
+      @_defaults = defaults
+      @_name = pluginName
+
+      @init()
+
+    init: ->
+      console.log 'init' if @settings.debug
+
+      @get_edit_tab().addClass('active')
+
+      @get_tab_lis().on 'click', (e) =>
+        @get_tab_lis().removeClass('active')
+        $(e.currentTarget).addClass('active')
+        @$element.attr('data-show', $(e.currentTarget).data('command'))
+
+      @get_preview_tab().on 'click', (e) =>
+        $.ajax(
+          context: @element
+          type: 'POST'
+          url: @$element.attr('data-preview-url')
+          data: text: @get_textarea().val()
+          success: (html) =>
+            @get_preview_div().html(html) or "<p>#{@get_nothing_to_preview_text()}</p>"
+        )
+
+    # ---------------------------------------------------------------------
+
+    get_textarea: -> @get_editor_div().find('textarea')
+    get_preview_div: -> @$element.find('div.preview')
+    get_editor_div: -> @$element.find('div.editor')
+    get_header: -> @$element.find('div.header:first')
+    get_tabs_ul: -> @get_header().find('ul.tabs')
+    get_tab_lis: -> @get_tabs_ul().children('li')
+    get_preview_tab: -> @get_tab_lis().filter('.preview')
+    get_edit_tab: -> @get_tab_lis().filter('.edit')
+    get_nothing_to_preview_text: -> @get_preview_div().data('nothing-to-preview-text') or "Nothing to preview."
+
+  # ---------------------------------------------------------------------
+
+  # A really lightweight plugin wrapper around the constructor,
+  # preventing against multiple instantiations and allowing any
+  # public function (ie. a function whose name doesn't start
+  # with an underscore) to be called via the jQuery plugin,
+  # e.g. $(element).defaultPluginName('functionName', arg1, arg2)
+
+  $.fn[pluginName] = (options) ->
+    args = arguments
+    if options is `undefined` or typeof options is "object"
+      @each ->
+        $.data this, "plugin_" + pluginName, new Plugin(this, options)  unless $.data(this, "plugin_" + pluginName)
+
+    else if typeof options is "string" and options[0] isnt "_" and options isnt "init"
+      returns = undefined
+      @each ->
+        instance = $.data(this, "plugin_" + pluginName)
+        returns = instance[options].apply(instance, Array::slice.call(args, 1))  if instance instanceof Plugin and typeof instance[options] is "function"
+        $.data this, "plugin_" + pluginName, null  if options is "destroy"
+
+      (if returns isnt `undefined` then returns else this)
+
+# =====================================================================
+
+$ ->
+
+  $('div.simple_form_markdown_editor').simple_form_markdown_editor_tabs()
+
+  # make sure the plugin is correctly rebound to new elements
+  $('body').on 'dom_update', (e) ->
+    $('div.simple_form_markdown_editor').simple_form_markdown_editor_tabs()

data/lib/assets/javascripts/simple_form_markdown_editor.js

@@ -0,0 +1,3 @@
+//= require simple_form_markdown_editor/simple_form_markdown_editor_tabs
+//= require simple_form_markdown_editor/simple_form_markdown_editor_buttons
+//= require simple_form_markdown_editor/simple_form_markdown_editor_help