simple_form_markdown_editor 0.0.1

data/lib/assets/stylesheets/simple_form_markdown_editor/simple_form_markdown_editor.css.scss

@@ -0,0 +1,275 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@mixin default-font {
+  font-family: helvetica, arial, sans-serif;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: normal;
+  font-style: normal;
+  letter-spacing: 0;
+  color: $black;
+}
+
+$grey-light: rgb(240, 240, 240);
+$grey: rgb(220, 220, 220);
+$grey-dark: rgb(180, 180, 180);
+$white: rgb(255, 255, 255);
+$black: rgb(10, 10, 10);
+
+// ====================================================================
+
+div.simple_form_markdown_editor {
+
+  label {
+    display: block;
+    margin-bottom: 7px;
+  }
+
+  // --------------------------------------------------------------------
+
+  &[data-show="preview"] {
+
+    div.buttons,
+    div.help,
+    div.editor {
+      display: none;
+    }
+
+    div.preview {
+      display: block;
+    }
+  }
+
+  div.preview {
+    display: none;
+  }
+
+  div.editor {
+    textarea {
+      @include default-font;
+      border: 1px solid $grey;
+      border-radius: 2px;
+      width: 100%;
+      min-height: 176px;
+      margin: 0;
+      box-sizing: border-box;
+      padding: 7px;
+      box-shadow: inset 0 1px 2px $grey-light;
+      resize: vertical;
+    }
+  }
+
+  // --------------------------------------------------------------------
+
+  div.header {
+    div.editor_tabs {
+      background-color: $grey-light;
+      border: 1px solid $grey;
+      border-radius: 2px 2px 0 0;
+      margin-bottom: 16px;
+
+      ul.tabs {
+        @include reset-list;
+        padding: 8px 8px 0 8px;
+        margin-bottom: -1px;
+
+        li.tab {
+          display: inline-block;
+          &.active {
+            span {
+              background-color: white;
+              border-color: $grey;
+              color: $black;
+            }
+          }
+          span {
+            @include default-font;
+            color: $grey-dark;
+            display: inline-block;
+            border-top: 1px solid transparent;
+            border-left: 1px solid transparent;
+            border-right: 1px solid transparent;
+            border-radius: 2px 2px 0 0;
+            padding: 8px 14px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+
+    div.buttons {
+      ul.button_groups {
+        @include clearfix;
+        @include reset-list;
+        margin-bottom: 16px;
+
+        li.button_group {
+          color: red;
+          float: left;
+          margin-right: 8px;
+
+          &[data-buttons*='help'] {
+            float: right;
+            margin: 0;
+          }
+
+          ul.buttons {
+            @include clearfix;
+            @include reset-list;
+
+            li.button {
+              float: left;
+
+              &:first-child {
+                button {
+                  border-radius: 2px 0 0 2px;
+                }
+              }
+
+              &:last-child {
+                button {
+                  border-radius: 0 2px 2px 0;
+                  border-right: 1px solid $grey;
+                }
+              }
+
+              &:first-child:last-child {
+                button {
+                  border-radius: 2px;
+                  border-right: 1px solid $grey;
+                }
+              }
+
+              button {
+                @include default-font;
+                display: inline-block;
+                background-color: white;
+                margin: 0;
+                padding: 0;
+
+                border: 0;
+                border-left: 1px solid $grey;
+                border-top: 1px solid $grey;
+                border-bottom: 1px solid $grey-dark;
+
+                padding: 4px 6px;
+                cursor: pointer;
+
+                &:active,
+                &.active {
+                  border-color: $grey;
+                  border-top-color: $grey-dark;
+                  background-color: $grey-light;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  div.help {
+    @include clearfix;
+    @include default-font;
+    transition: height .2s ease-in-out;
+    overflow: hidden;
+    height: 0;
+    box-sizing: border-box;
+
+    &[data-visible="true"] {
+      height: 210px;
+      margin-bottom: 16px;
+    }
+
+    div.help_wrapper {
+      height: 210px;
+      border: 1px solid $grey;
+      box-sizing: border-box;
+      > ul {
+        @include reset-list;
+        float: left;
+        width: 200px;
+        height: 100%;
+        border-right: 1px solid;
+        background-color: $grey-light;
+
+        > li {
+          padding: 8px 16px;
+          border-bottom: 1px solid $grey;
+          color: $grey-dark;
+          cursor: pointer;
+
+          &:hover {
+            color: $black;
+          }
+        }
+      }
+
+      ul.sections {
+        border-right-color: $grey-dark;
+        overflow-y: auto;
+        li.section {
+          &.active {
+            color: $black;
+            border-bottom: 1px solid $grey-dark;
+            background-color: $white;
+          }
+        }
+      }
+
+      ul.sub_sections {
+        border-right-color: $grey;
+        display: none;
+        overflow-y: auto;
+        &.active {
+          display: block;
+        }
+        li.sub_section {
+          background-color: $white;
+          &.active {
+            color: $black;
+          }
+        }
+      }
+
+      div.help_text {
+        padding: 8px 16px;
+        height: 100%;
+        box-sizing: border-box;
+        overflow-y: auto;
+        display: none;
+
+        p {
+          margin-top: 0;
+        }
+
+        code {
+          padding: 2px 3px;
+          font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+          font-size: 13px;
+          background-color: $grey-light;
+          border-radius: 2px;
+          white-space: nowrap
+        }
+
+        &.active {
+          display: block;
+        }
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/simple_form_markdown_editor.css

@@ -0,0 +1,3 @@
+/*
+ *= require simple_form_markdown_editor/simple_form_markdown_editor
+ */

data/lib/config/locales/simple_form_markdown_editor.en.yml

@@ -0,0 +1,96 @@
+en:
+  simple_form_markdown_editor:
+    tabs:
+      edit: Edit
+      preview: Preview
+    buttons:
+      ol: ol
+      ul: ul
+      h1: h1
+      h2: h2
+      h3: h3
+      h4: h4
+      h5: h5
+      h6: h6
+      blockquote: quote
+      hr: hr
+      code: code
+      strong: bold
+      em: italic
+      a: link
+      img: image
+      help: help
+    help:
+      block_elements:
+        title: Block Elements
+        elements:
+          paragraphs:
+            title: Paragraphs & Breaks
+            text: |+
+              To create a paragraph, simply create a block of text that is not separated by one or more blank lines. Blocks of text separated by one or more blank lines will be parsed as paragraphs.
+
+              If you want to create a line break, end a line with two or more spaces, then hit Return/Enter.
+          headers:
+            title: Headers
+            text: |+
+              Simply prefix your header text with the number of # characters to specify heading depth. For example: `# Header 1`, `## Header 2` and `### Header 3` will be progressively smaller headers. You may end your headers with any number of hashes.
+          blockquotes:
+            title: Blockquotes
+            text: |+
+              Markdown creates blockquotes email-style by prefixing each line with the `>`. This looks best if you decide to hard-wrap text and prefix each line with a `>` character, but Markdown supports just putting `>` before your paragraph.
+          lists:
+            title: Lists
+            text: |+
+              Markdown supports both ordered and unordered lists. To create an ordered list, simply prefix each line with a number (any number will do — this is why the editor only uses one number.) To create an unordered list, you can prefix each line with `*`, `+` or `-`.
+
+              List items can contain multiple paragraphs, however each paragraph must be indented by at least 4 spaces or a tab.
+          code_blocks:
+            title: Code Blocks
+            text: |+
+              Markdown wraps code blocks in pre-formatted tags to preserve indentation in your code blocks. To create a code block, indent the entire block by at least 4 spaces or one tab. Markdown will strip the extra indentation you’ve added to the code block.
+          horizontal_rules:
+            title: Horizontal Rules
+            text: |+
+              Horizontal rules are created by placing three or more hyphens, asterisks or underscores on a line by themselves. Spaces are allowed between the hyphens, asterisks or underscores.
+      span_elements:
+        title: Span Elements
+        elements:
+          links:
+            title: Links
+            text: |+
+              Markdown has two types of links: inline and reference. For both types of links, the text you want to display to the user is placed in square brackets. For example, if you want your link to display the text “GitHub”, you write `[GitHub]`.
+
+              To create an inline link, create a set of parentheses immediately after the brackets and write your URL within the parentheses. (e.g., `[GitHub](https://github.com/)`). Relative paths are allowed in inline links.
+
+              To create a reference link, use two sets of square brackets. `[[my internal link|internal-ref]]` will link to the internal reference internal-ref.
+          emphasis:
+            title: Emphasis
+            text: |+
+              Asterisks (`*`) and underscores (`_`) are treated as emphasis and are wrapped with an `<em>` tag, which usually displays as italics in most browsers. Double asterisks (`**`) or double underscores (`__`) are treated as bold using the `<strong>` tag. 
+
+              To create italic or bold text, simply wrap your words in single/double asterisks/underscores. For example, `**My double emphasis text**` becomes **My double emphasis text**, and `*My single emphasis text*` becomes *My single emphasis text*.
+          code:
+            title: Code
+            text: |+
+              To create inline spans of code, simply wrap the code in backticks (`` ` ``). Markdown will turn `` `myFunction` `` into `myFunction`.
+          images:
+            title: Images
+            text: |+
+              Markdown image syntax looks a lot like the syntax for links; it is essentially the same syntax preceded by an exclamation point (`!`).
+
+              For example, if you want to link to an image at https://github.com/unicorn.png with the alternate text My Unicorn, you would write `![My Unicorn](https://github.com/unicorn.png)`.
+      miscellaneous:
+        title: Miscellaneous
+        elements:
+          automatic_links:
+            title: Automatic Links
+            text: |+
+              If you want to create a link that displays the actual URL, markdown allows you to quickly wrap the URL in `<` and `>` to do so.
+
+              For example, the link https://github.com/ is easily produced by writing `<https://github.com/>`.
+          escaping:
+            title: Escaping
+            text: |+
+              If you want to use a special Markdown character in your document (such as displaying literal asterisks), you can escape the character with the backslash (`\`). Markdown will ignore the character directly after a backslash.
+    loading: Loading preview …
+    nothing_to_preview: Nothing to preview.

data/lib/simple_form_markdown_editor/configuration.rb

@@ -0,0 +1,26 @@
+module SimpleFormMarkdownEditor
+  class Configuration
+
+    attr_accessor :buttons
+    attr_accessor :extensions
+    attr_accessor :help
+    attr_accessor :render_options
+
+    def initialize
+      @buttons = [%w(h1 h2 h3), %w(a img), %w(strong em code), %w(ul ol blockquote hr), %w(help)]
+      @help = {
+        enabled: true,
+        visible: false
+      }
+      @extensions = {
+        footnotes: true,
+        highlight: true,
+        space_after_headers: true,
+        strikethrough: true,
+        superscript: true
+      }
+      @render_options = {}
+    end
+
+  end
+end

data/lib/simple_form_markdown_editor/engine.rb

@@ -0,0 +1,4 @@
+module SimpleFormMarkdownEditor
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/simple_form_markdown_editor/renderer.rb

@@ -0,0 +1,50 @@
+require 'redcarpet'
+
+module SimpleFormMarkdownEditor
+  class Renderer
+
+    def self.call(*args)
+      new(*args).call
+    end
+
+    # =====================================================================
+
+    attr_reader :str
+
+    def initialize str
+      @str = str
+    end
+
+    def call
+      markdown_renderer.render(@str).html_safe
+    end
+
+    private # =============================================================
+
+    def markdown_renderer
+      Redcarpet::Markdown.new(
+        Redcarpet::Render::HTML.new(self.class.configuration.render_options),
+        self.class.configuration.extensions
+      )
+    end
+
+    # ---------------------------------------------------------------------
+
+    class << self
+      attr_accessor :configuration
+
+      def configure
+        @configuration ||= Configuration.new
+        yield @configuration
+      end
+
+      def configuration
+        @configuration ||= Configuration.new
+      end
+    end
+
+  end
+
+  # ---------------------------------------------------------------------
+
+end

data/lib/simple_form_markdown_editor/simple_form_markdown_editor.rb

@@ -0,0 +1,183 @@
+require 'simple_form'
+require 'i18n'
+
+module SimpleFormMarkdownEditor
+  class MarkdownEditorInput < SimpleForm::Inputs::Base
+
+    class << self
+      attr_accessor :configuration
+
+      def configure
+        @configuration ||= Configuration.new
+        yield @configuration
+      end
+
+      def configuration
+        @configuration ||= Configuration.new
+      end
+    end
+
+    # =====================================================================
+
+    def input wrapper_options
+      template.content_tag :div, merge_wrapper_options(input_html_options, wrapper_options) do
+        header + help + editor + preview
+      end
+    end
+
+    private # =============================================================
+
+    def input_html_options
+      super.merge!(data: { preview_url: SimpleFormMarkdownEditor::Engine.routes.url_helpers.preview_path })
+    end
+
+    def input_html_classes
+      super.push('simple_form_markdown_editor')
+    end
+
+    def header
+      template.content_tag :div, class: 'header' do
+        tabs + buttons
+      end.html_safe
+    end
+
+    # ---------------------------------------------------------------------
+
+    def tabs
+      template.content_tag :div, class: 'editor_tabs' do
+        template.content_tag :ul, class: 'tabs' do
+          tab_list.map{ |t| tab(t) }.flatten.join.html_safe
+        end
+      end
+    end
+
+    def tab_list
+      %w(edit preview)
+    end
+
+    def tab name
+      template.content_tag :li, class: ['tab', name.to_s.underscore.downcase], data: { command: name.to_s } do
+        template.content_tag :span, I18n.t(name.to_sym, scope: 'simple_form_markdown_editor.tabs'), class: name.to_s.underscore.downcase
+      end
+    end
+
+    # ---------------------------------------------------------------------
+
+    def buttons
+      template.content_tag :div, class: 'buttons' do
+        button_groups
+      end
+    end
+
+    def button_groups
+      template.content_tag :ul, class: 'button_groups' do
+        button_list.map{ |group| button_group(group) }.flatten.join.html_safe
+      end
+    end
+
+    def button_group g
+      template.content_tag :li, class: 'button_group', data: { buttons: g.join(' ') } do
+        template.content_tag :ul, class: 'buttons' do
+          g.map{ |b| button(b) }.flatten.join.html_safe
+        end
+      end
+    end
+
+    def button b
+      return if b == 'help' && !help_enabled?
+      template.content_tag :li, class: ['button', b], data: { toggle: b } do
+        template.content_tag :button, I18n.t(b.to_sym, scope: 'simple_form_markdown_editor.buttons'), class: b, value: b, role: '', state: '', name: '', type: 'button'
+      end
+    end
+
+    def button_list
+      options[:buttons].presence || SimpleFormMarkdownEditor::MarkdownEditorInput.configuration.buttons
+    end
+
+    # ---------------------------------------------------------------------
+
+    def editor
+      template.content_tag :div, class: %w(editor) do
+        @builder.text_area(attribute_name, input_html_options).html_safe
+      end
+    end
+
+    def preview
+      template.content_tag :div, I18n.t(:loading, scope: 'simple_form_markdown_editor'), class: %w(preview), data: { :'nothing-to-preview-text' => I18n.t(:nothing_to_preview, scope: 'simple_form_markdown_editor') }
+    end
+
+    # ---------------------------------------------------------------------
+
+    def help
+      return unless help_enabled?
+      template.content_tag :div, class: %w(help), data: { visible: help_visible? } do
+        template.content_tag :div, class: %w(help_wrapper) do
+          help_sections + help_sub_sections + help_texts
+        end
+      end
+    end
+
+    def help_sections
+      template.content_tag :ul, class: %w(sections) do
+        i18n_help.map{ |section, content| help_section(section, content) }.flatten.join.html_safe
+      end
+    end
+
+    def help_section section, content
+      return unless content[:title]
+      template.content_tag :li, class: ['section', section.to_s], data: { toggle: section.to_s } do
+        template.content_tag :span, content[:title].to_s, class: section.to_s
+      end.html_safe
+    end
+
+    def help_sub_sections
+      i18n_help.map do |section, content|
+        template.content_tag :ul, class: ['sub_sections', section.to_s] do
+          content[:elements].map{ |section, content| help_sub_section(section, content) }.flatten.join.html_safe
+        end
+      end.flatten.join.html_safe
+    end
+
+    def help_sub_section section, content
+      return unless content[:title]
+      template.content_tag :li, class: ['sub_section', section.to_s], data: { toggle: section.to_s } do
+        template.content_tag :span, content[:title].to_s, class: section.to_s
+      end.html_safe
+    end
+
+    def help_texts
+      i18n_help.map do |section, content|
+        content[:elements].map do |element, content|
+          template.content_tag :div, class: ['help_text', element.to_s], data: { section: section.to_s, sub_section: element.to_s } do
+            SimpleFormMarkdownEditor::Renderer.call(content[:text])
+          end
+        end
+      end.flatten.join.html_safe
+    end
+
+    # ---------------------------------------------------------------------
+
+    def i18n_help
+      I18n.t(:help, scope: 'simple_form_markdown_editor')
+    end
+
+    def help_enabled?
+      enabled_in_options = options.fetch(:help, {}).fetch(:enabled, nil)
+      enabled_in_config = SimpleFormMarkdownEditor::MarkdownEditorInput.configuration.help.fetch(:enabled, false)
+
+      return enabled_in_config if enabled_in_options.nil?
+
+      enabled_in_options
+    end
+
+    def help_visible?
+      visible_in_options = options.fetch(:help, {}).fetch(:visible, nil)
+      visible_in_config = SimpleFormMarkdownEditor::MarkdownEditorInput.configuration.help.fetch(:visible, false)
+
+      return visible_in_config if visible_in_options.nil?
+
+      visible_in_options
+    end
+
+  end
+end

data/lib/simple_form_markdown_editor/version.rb

@@ -0,0 +1,3 @@
+module SimpleFormMarkdownEditor
+  VERSION = "0.0.1"
+end

data/lib/simple_form_markdown_editor.rb

@@ -0,0 +1,21 @@
+require "simple_form"
+
+require "simple_form_markdown_editor/configuration"
+require "simple_form_markdown_editor/engine"
+require "simple_form_markdown_editor/renderer"
+require "simple_form_markdown_editor/simple_form_markdown_editor"
+require "simple_form_markdown_editor/version"
+
+require "i18n"
+
+# ---------------------------------------------------------------------
+
+module SimpleForm
+  class FormBuilder
+    map_type :markdown_editor, to: SimpleFormMarkdownEditor::MarkdownEditorInput
+  end
+end
+
+# ---------------------------------------------------------------------
+
+I18n.load_path += Dir.glob(File.join( File.dirname(__FILE__), 'config', 'locales', '*.yml' ))

data/simple_form_markdown_editor.gemspec

@@ -0,0 +1,30 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'simple_form_markdown_editor/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "simple_form_markdown_editor"
+  spec.version       = SimpleFormMarkdownEditor::VERSION
+  spec.authors       = ["Tomáš Celizna", "Asger Behncke Jacobsen"]
+  spec.email         = ["tomas.celizna@gmail.com", "asger@8kilo.com"]
+  spec.summary       = %q{Simple Markdown editor (inspired by GitHub editor).}
+  spec.description   = %q{Simple Markdown editor (inspired by GitHub editor).}
+  spec.homepage      = "https://github.com/tomasc/simple_form_markdown_editor"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "rails", ">= 4.2"
+  spec.add_dependency "simple_form", ">= 3.0.2"
+  spec.add_dependency "redcarpet"
+  spec.add_dependency "autoprefixer-rails"
+
+  spec.add_dependency "responders", "~> 2.0"
+
+  spec.add_development_dependency "bundler", "~> 1.6"
+  spec.add_development_dependency "rake"
+end