Javascript/CSS doesn't load?

[sedubois]

Thanks a lot for making this plugin. I've given it a quick try by adding the gem to my gemfile and putting about: Field::SimpleMarkdown in my resource's ATTRIBUTE_TYPES. However the Javascript/CSS doesn't seem to load: when loading the edit view, the textarea doesn't display any markdown buttons and the text is plain.

NB: Looking at the page source, the textarea's parent div has class="field-unit__field simple_markdown" which I guess is a good sign. I am using Rails 6.0.2.1, administrate 0.12.0, administrate-field-simple_markdown 0.2.1.

What should I do to ensure the Javascript/CSS get loaded?

I guess that it should be possible to instead use Rails' ActionText feature but I haven't gotten to that yet and wanted to try this in the interim.

[michelegera]

Hey @sedubois, thanks for the feedback!

I just scaffolded a project with the same dependencies as the ones you listed, and everything is working fine for me.

Please make sure that you are including both Administrate’s and the plugin assets in your app/assets/config/manifest.js file, like this:

//= link administrate/application.css
//= link administrate/application.js
//= link administrate-field-simple_markdown/application.css
//= link administrate-field-simple_markdown/application.js

Let me know if this fixes it for you.

[sedubois]

Thanks @michelegera, aren't these files supposed to be autoloaded by the Administrate::Field::SimpleMarkdown::Engine declaration?

      class Engine < ::Rails::Engine
        Administrate::Engine.add_javascript 'administrate-field-simple_markdown/application'
        Administrate::Engine.add_stylesheet 'administrate-field-simple_markdown/application'
      end

Also I don't yet have app/assets/config/manifest.js because I'm still running on sprockets 3.7.2.

And anyway I checked the source code and simplemde.min.js and simplemde.min.css are correctly referenced.

But I found what the issue is, it's because my model is namespaced (Course::Translation coming from Globalize) and SimpleMarkdown is looking for a textarea with ID course/translation_about instead of course_translation_about.

Here was the generated code:

  $(function() {
    new SimpleMDE({
      element: document.getElementById('course/translation_about')
    });
  });

By changing f.object.class.name.underscore to f.object.class.name.parameterize.underscore in views/fields/simple_markdown/_form.html.erb, the issue seems fixed (Course::Translation.name.parameterize.underscore --> "course_translation").

[michelegera]

Aren't these files supposed to be autoloaded by the Administrate::Field::SimpleMarkdown::Engine declaration?

      class Engine < ::Rails::Engine
        Administrate::Engine.add_javascript 'administrate-field-simple_markdown/application'
        Administrate::Engine.add_stylesheet 'administrate-field-simple_markdown/application'
      end

You’re correct, for some reason the skeleton application I was testing this on required those two lines as well.

But I found what the issue is, it's because my model is namespaced (Course::Translation coming from Globalize) and SimpleMarkdown is looking for a textarea with ID course/translation_about instead of course_translation_about. By changing f.object.class.name.underscore to f.object.class.name.parameterize.underscore in views/fields/simple_markdown/_form.html.erb, the issue seems fixed (Course::Translation.name.parameterize.underscore --> "course_translation").

Ah, good catch! Makes sense, and thanks for opening a PR. I’ll check it out in a minute and release a new version of the gem with your fix.