simple_form_markdown_editor 0.0.10 → 1.0.0

data/lib/assets/javascripts/simple_form_markdown_editor/__preview.coffee.erb

@@ -0,0 +1,42 @@
+# https://github.com/jquery-boilerplate/jquery-boilerplate/
+do ($ = jQuery, window, document) ->
+  pluginName = 'simple_form_markdown_editor__preview'
+  defaults =
+    debug: false
+
+  class Plugin
+    constructor: (@element, options) ->
+      @settings = $.extend {}, defaults, options
+
+      @$element = $(@element)
+
+      @_defaults = defaults
+      @_name = pluginName
+
+      @init()
+
+    init: ->
+      @$element.on 'show_preview', (e) =>
+        e.stopPropagation()
+        content = e.html or "<p>" + @get_nothing_to_preview_text() + "</p>"
+        @$element.html(content)
+
+    get_nothing_to_preview_text: ->
+      @$element.data('nothing-to-preview-text') or 'Nothing to preview.'
+
+  # ---------------------------------------------------------------------
+
+  $.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)

data/lib/assets/javascripts/simple_form_markdown_editor/__tabs.coffee.erb

@@ -0,0 +1,59 @@
+# https://github.com/jquery-boilerplate/jquery-boilerplate/
+do ($ = jQuery, window, document) ->
+  pluginName = 'simple_form_markdown_editor__tabs'
+  defaults =
+    debug: false
+    is_active_class: '<%= SimpleFormMarkdownEditor.dom_class(:tab, :is_active) %>'
+
+  class Plugin
+    constructor: (@element, options) ->
+      @settings = $.extend {}, defaults, options
+
+      @$element = $(@element)
+
+      @_defaults = defaults
+      @_name = pluginName
+
+      @init()
+
+    init: ->
+      @set_active_tab(@get_edit_tab())
+
+      @$element.on 'click', @get_tabs().selector, (e) =>
+        $tab = $(e.currentTarget)
+        @set_active_tab($tab)
+
+      @$element.on 'click', @get_edit_tab().selector, (e) =>
+        @$element.trigger('show_editor')
+
+      @$element.on 'click', @get_preview_tab().selector, (e) =>
+        @$element.trigger('show_preview')
+
+    # ---------------------------------------------------------------------
+
+    get_edit_tab: -> @$element.find('.<%= SimpleFormMarkdownEditor.dom_class(:tab, :edit) %>')
+    get_preview_tab: -> @$element.find('.<%= SimpleFormMarkdownEditor.dom_class(:tab, :preview) %>')
+    get_tabs: -> @$element.find('.<%= SimpleFormMarkdownEditor.dom_class(:tab) %>')
+
+    # ---------------------------------------------------------------------
+
+    set_active_tab: ($tab) ->
+      @get_tabs().removeClass(@settings.is_active_class)
+      $tab.addClass(@settings.is_active_class)
+
+  # ---------------------------------------------------------------------
+
+  $.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)

data/lib/assets/javascripts/simple_form_markdown_editor/simple_form_markdown_editor.coffee.erb

@@ -0,0 +1,98 @@
+#= require simple_form_markdown_editor/__buttons
+#= require simple_form_markdown_editor/__editor
+#= require simple_form_markdown_editor/__help
+#= require simple_form_markdown_editor/__preview
+#= require simple_form_markdown_editor/__tabs
+
+do ($ = jQuery, window, document) ->
+  pluginName = 'simple_form_markdown_editor'
+  defaults =
+    debug: false
+    definitions: JSON.parse('<%= SimpleFormMarkdownEditor::MarkdownEditorInput.configuration.button_definitions.to_json %>')
+    is_editor_class: '<%= SimpleFormMarkdownEditor.dom_class(:is_editor) %>'
+    is_help_class: '<%= SimpleFormMarkdownEditor.dom_class(:is_help) %>'
+
+  class Plugin
+    constructor: (@element, options) ->
+      @settings = $.extend {}, defaults, options
+
+      @$element = $(@element)
+
+      @_defaults = defaults
+      @_name = pluginName
+
+      @init()
+
+    init: ->
+      @get_buttons().simple_form_markdown_editor__buttons()
+      @get_editor().simple_form_markdown_editor__editor()
+      @get_help().simple_form_markdown_editor__help()
+      @get_preview().simple_form_markdown_editor__preview()
+      @get_tabs().simple_form_markdown_editor__tabs()
+
+      @$element.on 'show_editor', (e) =>
+        e.stopPropagation()
+        @$element.addClass(@settings.is_editor_class)
+
+      @$element.on 'show_preview', (e) =>
+        e.stopPropagation()
+        @$element.removeClass(@settings.is_editor_class)
+
+      @$element.on 'show_preview', (e) =>
+        e.stopPropagation()
+        options = @get_options()
+        val = @get_editor().simple_form_markdown_editor__editor('get_val')
+        $.ajax
+          type: 'POST'
+          url: @get_preview_path()
+          data:
+            _method: 'PUT'
+            text: val
+            options: options
+          success: (html) =>
+            @get_preview().trigger(type: 'show_preview', html: html)
+
+      @$element.on 'toggle_help', (e) =>
+        e.stopPropagation()
+        @$element.toggleClass(@settings.is_help_class)
+
+      @$element.on 'execute_command', (e) =>
+        e.stopPropagation()
+        command = e.command
+        definition = @settings.definitions[command]
+        @get_editor().trigger
+          type: 'execute_command_definition'
+          command: command
+          definition: definition
+
+    # ---------------------------------------------------------------------
+
+    get_buttons: -> @$element.find('.<%= SimpleFormMarkdownEditor.dom_class(:buttons) %>')
+    get_editor: -> @$element.find('.<%= SimpleFormMarkdownEditor.dom_class(:editor) %>')
+    get_help: -> @$element.find('.<%= SimpleFormMarkdownEditor.dom_class(:help) %>')
+    get_preview: -> @$element.find('.<%= SimpleFormMarkdownEditor.dom_class(:preview) %>')
+    get_tabs: -> @$element.find('.<%= SimpleFormMarkdownEditor.dom_class(:tabs) %>')
+
+    get_options: -> @$element.data('options')
+    get_preview_path: -> @$element.data('preview-path')
+
+  # ---------------------------------------------------------------------
+
+  $.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)
+
+# =====================================================================
+
+$ -> $('.<%= SimpleFormMarkdownEditor.dom_class %>').simple_form_markdown_editor()

data/lib/assets/stylesheets/simple_form_markdown_editor.css

@@ -1,3 +1,3 @@
 /*
- *= require simple_form_markdown_editor/simple_form_markdown_editor
- */
+*= require_tree .
+*/

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

@@ -0,0 +1,5 @@
+@mixin reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/buttons/__button.scss.erb

@@ -0,0 +1,4 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:button) %> {
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/buttons/__button_group.scss.erb

@@ -0,0 +1,5 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:button_group) %> {
+  display: inline-block;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/buttons/__button_wrapper.scss.erb

@@ -0,0 +1,5 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:button_wrapper) %> {
+  display: inline-block;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/buttons/__buttons.scss.erb

@@ -0,0 +1,9 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:buttons) %> {
+  .<%= SimpleFormMarkdownEditor.dom_class(:button_group) %> {
+    &:not(:last-child) {
+      margin-right: 1em;
+    }
+  }
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/editor/__editor.scss.erb

@@ -0,0 +1,4 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:editor) %> {
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/header/__header.scss.erb

@@ -0,0 +1,4 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:header) %> {
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help.scss.erb

@@ -0,0 +1,12 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help) %> {
+}
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sections) %>,
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sub_sections) %>,
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :texts) %> {
+  display: inline-block;
+  vertical-align: top;
+  width: (100%/3);
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help__section.scss.erb

@@ -0,0 +1,3 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :section) %> {}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help__sections.scss.erb

@@ -0,0 +1,5 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sections) %> {
+  @include reset-list;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help__sub_section.scss.erb

@@ -0,0 +1,9 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sub_section) %> {
+  display: none;
+}
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sub_section, :is_active) %> {
+  display: block;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help__sub_section__item.scss.erb

@@ -0,0 +1,7 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sub_section, :item) %> {
+}
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sub_section, :item, :is_active) %> {
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help__sub_section__items.scss.erb

@@ -0,0 +1,5 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sub_section, :items) %> {
+  @include reset-list;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help__sub_sections.scss.erb

@@ -0,0 +1,5 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :sub_sections) %> {
+  @include reset-list;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help__text.scss.erb

@@ -0,0 +1,9 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :text) %> {
+  display: none;
+}
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :text, :is_active) %> {
+  display: block;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/help/__help__texts.scss.erb

@@ -0,0 +1,5 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:help, :texts) %> {
+  @include reset-list;
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/preview/__preview.scss.erb

@@ -0,0 +1,4 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:preview) %> {
+}

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

@@ -0,0 +1,23 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class %> {
+  // is_editor
+  &.<%= SimpleFormMarkdownEditor.dom_class(:is_editor) %> {
+    .<%= SimpleFormMarkdownEditor.dom_class(:editor) %> { display: block; }
+    .<%= SimpleFormMarkdownEditor.dom_class(:preview) %> { display: none; }
+  }
+
+  &:not(.<%= SimpleFormMarkdownEditor.dom_class(:is_editor) %>) {
+    .<%= SimpleFormMarkdownEditor.dom_class(:editor) %> { display: none; }
+    .<%= SimpleFormMarkdownEditor.dom_class(:preview) %> { display: block; }
+  }
+
+  // is_help
+  &.<%= SimpleFormMarkdownEditor.dom_class(:is_help) %> {
+    .<%= SimpleFormMarkdownEditor.dom_class(:help) %> { display: block; }
+  }
+
+  &:not(.<%= SimpleFormMarkdownEditor.dom_class(:is_help) %>) {
+    .<%= SimpleFormMarkdownEditor.dom_class(:help) %> { display: none; }
+  }
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/tabs/__tab.scss.erb

@@ -0,0 +1,8 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:tab) %> {
+  display: inline-block;
+}
+
+.<%= SimpleFormMarkdownEditor.dom_class(:tab, :is_active) %> {
+}

data/lib/assets/stylesheets/simple_form_markdown_editor/tabs/__tabs.scss.erb

@@ -0,0 +1,9 @@
+@import 'simple_form_markdown_editor/partials';
+
+.<%= SimpleFormMarkdownEditor.dom_class(:tabs) %> {
+  .<%= SimpleFormMarkdownEditor.dom_class(:tab) %> {
+    &:not(:last-child) {
+      margin-right: 1em;
+    }
+  }
+}

data/lib/simple_form_markdown_editor.rb

@@ -8,7 +8,17 @@ require 'simple_form_markdown_editor/version'
 
 require 'i18n'
 
-# ---------------------------------------------------------------------
+module SimpleFormMarkdownEditor
+  def self.dom_class(*args)
+    prefix, alts = args.partition { |i| !i.is_a?(Array) }
+    prefix = ['simple_form_markdown_editor'] + prefix
+    return prefix.compact.join('__') if alts.empty?
+    alts.flatten.map do |item|
+      prefix += [item]
+      prefix.compact.join('__')
+    end
+  end
+end
 
 module SimpleForm
   class FormBuilder
@@ -16,6 +26,4 @@ module SimpleForm
   end
 end
 
-# ---------------------------------------------------------------------
-
 I18n.load_path += Dir.glob(File.join(File.dirname(__FILE__), 'config', 'locales', '*.yml'))

data/lib/simple_form_markdown_editor/markdown_editor_input.rb

@@ -20,9 +20,11 @@ module SimpleFormMarkdownEditor
 
     def input(wrapper_options)
       attrs = merge_wrapper_options(input_html_options, wrapper_options)
+      attrs[:class] = [SimpleFormMarkdownEditor.dom_class, SimpleFormMarkdownEditor.dom_class(:is_editor)]
+      attrs[:class] << SimpleFormMarkdownEditor.dom_class(:is_help) if help_visible?
       attrs[:data] ||= {}
       attrs[:data][:preview_path] = preview_path
-      attrs[:data][:options] = { render_class: render_class.to_s, render_options: render_options, extensions: extensions }
+      attrs[:data][:options] = { render_class: render_class, render_options: render_options, extensions: extensions }
 
       template.content_tag :div, attrs do
         template.concat header
@@ -50,12 +52,8 @@ module SimpleFormMarkdownEditor
       options.fetch(:extensions, MarkdownEditorInput.configuration.extensions)
     end
 
-    def input_html_classes
-      super.push('simple_form_markdown_editor')
-    end
-
     def header
-      template.content_tag :div, class: 'header' do
+      template.content_tag :div, class: SimpleFormMarkdownEditor.dom_class(:header) do
         tabs + buttons
       end.html_safe
     end
@@ -63,10 +61,8 @@ module SimpleFormMarkdownEditor
     # ---------------------------------------------------------------------
 
     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
+      template.content_tag :div, class: SimpleFormMarkdownEditor.dom_class(:tabs) do
+        tab_list.map { |t| tab(t) }.flatten.join.html_safe
       end
     end
 
@@ -75,44 +71,32 @@ module SimpleFormMarkdownEditor
     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
-        )
+      template.content_tag :div, class: SimpleFormMarkdownEditor.dom_class([:tab, name]) do
+        template.content_tag(:span, I18n.t(name, scope: 'simple_form_markdown_editor.tabs'))
       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
+      template.content_tag :div, class: SimpleFormMarkdownEditor.dom_class(:buttons) 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
+      template.content_tag :div, class: SimpleFormMarkdownEditor.dom_class(:button_group), data: { buttons: g.join(' ') } do
+        g.map { |b| button(b) }.flatten.join.html_safe
       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 :div, class: SimpleFormMarkdownEditor.dom_class(:button_wrapper) do
         template.content_tag(
           :button,
-          I18n.t(b.to_sym, scope: 'simple_form_markdown_editor.buttons'),
-          class: b,
+          I18n.t(b, scope: 'simple_form_markdown_editor.buttons'),
+          class: SimpleFormMarkdownEditor.dom_class(:button),
           name: '',
           role: '',
           state: '',
@@ -129,7 +113,7 @@ module SimpleFormMarkdownEditor
     # ---------------------------------------------------------------------
 
     def editor
-      template.content_tag :div, class: %w(editor) do
+      template.content_tag :div, class: SimpleFormMarkdownEditor.dom_class(:editor) do
         @builder.text_area(attribute_name, input_html_options).html_safe
       end
     end
@@ -138,7 +122,7 @@ module SimpleFormMarkdownEditor
       template.content_tag(
         :div,
         I18n.t(:loading, scope: 'simple_form_markdown_editor'),
-        class: %w(preview),
+        class: SimpleFormMarkdownEditor.dom_class(:preview),
         data: { nothing_to_preview_text: I18n.t(:nothing_to_preview, scope: 'simple_form_markdown_editor') }
       )
     end
@@ -147,49 +131,53 @@ module SimpleFormMarkdownEditor
 
     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
+      template.content_tag :div, class: SimpleFormMarkdownEditor.dom_class(:help) do
+        help_sections + help_sub_sections + help_texts
       end
     end
 
     def help_sections
-      template.content_tag :ul, class: %w(sections) do
+      template.content_tag :ul, class: SimpleFormMarkdownEditor.dom_class(:help, :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
+      template.content_tag :li, class: SimpleFormMarkdownEditor.dom_class(:help, :section), data: { section: section } do
+        template.content_tag :a, content[:title], class: section, href: '#'
       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 { |sec, con| help_sub_section(sec, con) }.flatten.join.html_safe
-        end
-      end.flatten.join.html_safe
+      template.content_tag :ul, class: SimpleFormMarkdownEditor.dom_class(:help, :sub_sections) do
+        i18n_help.map do |section, content|
+          template.content_tag :li, class: SimpleFormMarkdownEditor.dom_class(:help, :sub_section), data: { section: section } do
+            template.content_tag :ul, class: SimpleFormMarkdownEditor.dom_class(:help, :sub_section, :items) do
+              content[:elements].map { |sec, con| help_sub_section_item(sec, con) }.flatten.join.html_safe
+            end
+          end
+        end.flatten.join.html_safe
+      end
     end
 
-    def help_sub_section(section, content)
+    def help_sub_section_item(sub_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
+      template.content_tag :li, class: SimpleFormMarkdownEditor.dom_class(:help, :sub_section, :item), data: { sub_section: sub_section } do
+        template.content_tag :a, content[:title], href: '#'
       end.html_safe
     end
 
     def help_texts
-      i18n_help.map do |section, content|
-        content[:elements].map do |el, con|
-          template.content_tag :div, class: ['help_text', el.to_s], data: { section: section.to_s, sub_section: el.to_s } do
-            Renderer.call(con[:text], render_class: render_class, render_options: render_options, extensions: extensions)
+      template.content_tag :ul, class: SimpleFormMarkdownEditor.dom_class(:help, :texts) do
+        i18n_help.map do |section, content|
+          content[:elements].map do |el, con|
+            template.content_tag :li, class: SimpleFormMarkdownEditor.dom_class(:help, :text), data: { section: section, sub_section: el } do
+              Renderer.call(con[:text], render_class: render_class, render_options: render_options, extensions: extensions)
+            end
           end
-        end
-      end.flatten.join.html_safe
+        end.flatten.join.html_safe
+      end
     end
 
     # ---------------------------------------------------------------------