Javascript: SimpleMDE does not refresh when used with Bootstrap Tabs

[spodlecki]

The set up

disclosure: writing this setup by hand, but you'll get the picture

class Book
  has_many :pages
  accepts_nested_attributes_for :pages
end

# == Schema Information
#
# Table name: books
#
#  id                         :integer          not null, primary key
#  title                      :string

class Page
  belongs_to :book
end

# == Schema Information
#
# Table name: books
#
#  id                         :integer          not null, primary key
#  book_id               :integer
#  text                      :text

RailsAdmin.config do |config|
  config.model 'Book' do
    edit do
      field :page do
        nested_field true
      end
    end
  end

  config.model 'Page' do
    hide
    edit do
        field :text, :simplemde do

        end
    end
  end
end

What's happening

When you cycle through the tabs, pre-existing data won't display until you actually click into the MDE. After a bit of investigation, seems like its been an issue with CodeMirror / SimpleMDE ... for ever.

Issues found,
sparksuite/simplemde-markdown-editor#443
sparksuite/simplemde-markdown-editor#596

Work around / Patch

What you need to do, is basically refresh CodeMirror. Here's my javascript snippet I've made as a custom integration.

$(document).on('rails_admin.dom_ready', function(e, content) {
  var $editors, goSimpleMDEs, options;
  content = content ? content : $('form');
  if (content.length) {
    goSimpleMDEs = function() {
      return content.find('[data-richtext=simplemde2]').not('.simplemded').each(function(index, domEle) {
        var $ele = $(this);
        var options = $ele.data('options');
        var instance_config = options.instance_config;
        var editor = new window.SimpleMDE($.extend(true, {
          element: document.getElementById(this.id),
          autosave: {
            uniqueId: this.id
          }
        }, instance_config));
        $ele.addClass('simplemded').data({ editor: editor });
      });
    };

    $editors = content.find('[data-richtext=simplemde2]').not('.simplemded');
    if ($editors.length) {
      if (!window.SimpleMDE) {
        options = $editors.first().data('options');
        $('head').append('<link href="' + options['css_location'] + '" rel="stylesheet" media="all" type="text\/css">');
        $.getScript(options['js_location'], function(script, textStatus, jqXHR) {
          return goSimpleMDEs();
        });
      } else {
        goSimpleMDEs();
      }
    }
  }
});

$(document).ready(function() {
  var onTab = function(event) {
    var id = event.currentTarget.getAttribute('href');
    var $container = $(id);

    $container.find('.simplemded').each(function(index, ele) {
      $(ele).data('editor').codemirror.refresh();
    });
  };

  $('body').on('shown.bs.tab', 'a[data-toggle="tab"]', onTab);
});

app/views/rails_admin/main/_form_simple_mde.html.haml

:ruby
  js_data = {
    js_location: field.js_location,
    css_location: field.css_location,
    instance_config: field.instance_config
  }

= form.text_area field.method_name, field.html_attributes.reverse_merge(data: { richtext: 'simplemde2', options: js_data.to_json }).reverse_merge({ value: field.form_value })