jipiboily / monologue-markdown

A small and simple efficient extension to Monologue that replace the default WYSIWYG editor with a Markdown editor.
http://jipiboily.com/2013/monologue-0-3-0-released-and-monologue-markdown
MIT License
4 stars 18 forks source link

Override breaks javascript load order #5

Open International opened 11 years ago

International commented 11 years ago

Using the latest version of monologue-markdown does not load the markdown editor. The error is:

ReferenceError: $ is not defined

After an investigation, I found the following being generated in the view:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Monologue</title>
  <script src="/assets/monologue-markdown/epiceditor/epiceditor.min.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue-markdown/epiceditor_load.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue-markdown/application.js?body=1" type="text/javascript"></script>
<link href="/assets/monologue-markdown/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<link href="/assets/monologue/admin/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/monologue/bootstrap/bootstrap.min.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/monologue/bootstrap/bootstrap-responsive.min.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/monologue/bootstrap/bootstrap-datepicker.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/bootstrap/bootstrap.min.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/bootstrap/bootstrap-datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/bootstrap/bootstrap-datepicker-fr.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce/preinit.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce/tiny_mce_jquery_src.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce/jquery.tinymce.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce-jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/admin/tinymce-config.js?body=1" type="text/javascript"></script>
<script src="/assets/monologue/admin/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="js/19TXyvHR6caydG48Mlvc/mRC/q11DP8IcpwR2YeQ=" name="csrf-token" />

Due to some parsing errors ( see https://github.com/spree/deface/issues/84 and https://github.com/spree/deface/pull/105 ), deface considers this to be it's DOM:

<!DOCTYPE html> <html> <head> <title>Monologue</title> <code erb-loud> stylesheet_link_tag &quot;monologue/admin/application&quot; </code> <code erb-loud> javascript_include_tag &quot;monologue/admin/application&quot; </code> <code erb-loud> csrf_meta_tags </code> </head> <body> <code erb-silent> if current_user </code> <code erb-loud> render &quot;layouts/monologue/admin/nav_bar&quot; </code> <code erb-silent> end </code> <div class="container"> <code erb-silent> flash.each do |name, msg| </code> <code erb-loud> content_tag :div, msg, :id =&gt; &quot;flash_#{name}&quot;, :class =&gt; (name == :notice ? &quot;alert alert-info&quot; : &quot;alert alert-error&quot;) </code> <code erb-silent> end </code>
<code erb-loud> yield </code> </div> </body> </html>

With this internal representation:

=> 0;34#(Document:0x67a9332 {
name = "document",
children = [
0;34#(DTD:0x601f86e { name = "html" }),
0;34#(Element:0x601f59e {
name = "html",
children = [
0;34#(Text "\n"),
0;34#(Element:0x601ed88 {
name = "head",
children = [
0;34#(Text "\n "),
0;34#(Element:0x6023798 {
name = "title",
children = [ 0;34#(Text "Monologue")]
}),
0;34#(Text "\n ")]
}),
0;34#(Element:0x6022d84 {
name = "body",
children = [
0;34#(Element:0x6022a00 {
name = "code",
attributes = [
0;34#(Attr:0x602288e { name = "erb-loud", value = "" })],
children = [
0;34#(Text " stylesheet_link_tag \"monologue/admin/application\" ")]
}),
0;34#(Text "\n "),
0;34#(Element:0x602b574 {
name = "code",
attributes = [
0;34#(Attr:0x602b42a { name = "erb-loud", value = "" })],
children = [
0;34#(Text " javascript_include_tag \"monologue/admin/application\" ")]
}),
0;34#(Text "\n "),
0;34#(Element:0x602a7a0 {
name = "code",
attributes = [
0;34#(Attr:0x602a390 { name = "erb-loud", value = "" })],
children = [ 0;34#(Text " csrf_meta_tags ")]
}),
0;34#(Text "\n\n \n "),
0;34#(Element:0x6029724 {
name = "code",
attributes = [
0;34#(Attr:0x67fadb8 { name = "erb-silent", value = "" })],
children = [ 0;34#(Text " if current_user ")]
}),
0;34#(Text "\n "),
0;34#(Element:0x67fa44e {
name = "code",
attributes = [
0;34#(Attr:0x67fa304 { name = "erb-loud", value = "" })],
children = [
0;34#(Text " render \"layouts/monologue/admin/nav_bar\" ")]

By bumping the version of deface to 1.0.0.rc4 the editor appears, and preview works, and the JS error disappears. However, after creating a post, the markdown isn't preserved. I will continue looking into that, and update once I've found the issue.

jipiboily commented 11 years ago

Related to #4.

monologue-markdown adds a field that is called something like is_markdown. Make sure it is set to the right value, it might be as simple as that. If you have an open source repository that has everything setup and helps to reproduce that issue, let me know.

International commented 11 years ago

Could you tell me the commit hashes for both monologue and monologue-markdown where both projects are working correctly? Perhaps you could have a look on your blog's Gemfile.lock ? I'd like to use this as the basis of my diff/patch, and figure out what went wrong from there.

jipiboily commented 11 years ago

monologue-markdown -> b1bad45b6e93c83cadbe200ad0fdadf736bd5cd9 (in code-higlighting branch, bummer, I just realized I might not have told you this) monologue -> 0.2.0 (from Rubygems)

jipiboily commented 11 years ago

Thanks for your time on this @International, I really appreciate it!

International commented 11 years ago

@jipiboily using the version you specified does not perform any syntax highlighting. I was however able to get some colouring by doing the following modification in the monologue-markdown gem ( based on b1bad45 ):

Deface::Override.new(:virtual_path => "layouts/monologue/application",
                     :name => "insert_coderay_assets_in_layout",
                     :insert_bottom => "head",
                     :partial => "monologue-markdown/overrides/assets")

where the assets partial has the following:

<%= stylesheet_link_tag "monologue-markdown/code-highlighting" %>

But I seem to be getting into the same problem with leading spaces. I may be doing something extremely moronic, but I can't see to figure out what that is. No matter what I do, I keep getting some leading spaces, which get syntax highlighted as some kind of errors. A sample code that could reproduce the leading spaces problem is this, taken from http://datatables.net/plug-ins/sorting


jQuery.extend( jQuery.fn.dataTableExt.oSort, {
 "date-eu-pre": function ( date ) {
   var date = date.replace(" ", "");

   if (date.indexOf('.') > 0) {
     /*date a, format dd.mn.(yyyy) ; (year is optional)*/
     var eu_date = date.split('.');
   } else {
     /*date a, format dd/mn/(yyyy) ; (year is optional)*/
     var eu_date = date.split('/');
   }

   /*year (optional)*/
   if (eu_date[2]) {
     var year = eu_date[2];
   } else {
     var year = 0;
   }

   /*month*/
   var month = eu_date[1];
   if (month.length == 1) {
     month = 0+month;
   }

   /*day*/
   var day = eu_date[0];
   if (day.length == 1) {
     day = 0+day;
   }

   return (year + month + day) * 1;
  },

  "date-eu-asc": function ( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },

  "date-eu-desc": function ( a, b ) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});

Could you give any hints as to why this is?

jipiboily commented 11 years ago

I can't get the first issue reproduced.

For the second one, I might just be not still be awaken enough, but I really don't understand the problem with dates and monologue-markdown :S

jipiboily commented 11 years ago

FYI, Monologue 0.3.0 is about to be released (https://github.com/jipiboily/monologue/tree/0-3-stable) and works with monologue-markdown's master...:)

International commented 11 years ago

Mmmm ... are you sure? If I use the following: 0-3-stable and monologue-markdown master ( 5cc4f ), I receive a migration error:

==  AddIsMarkownToPostsRevision: migrating ====================================
-- add_column(:monologue_posts_revisions, :is_markdown, :boolean)
rake aborted!
An error has occurred, this and all later migrations canceled:

PG::Error: ERROR:  relation "monologue_posts_revisions" does not exist

20130916182947_create_monologue_posts_revisions.monologue.rb

If I remove 20130916184101_merge_markdown_revisions_into_posts.monologue_markdown.rb, and modify the other migration to this:

class AddIsMarkownToPostsRevision < ActiveRecord::Migration
  def up
    add_column :monologue_posts, :is_markdown, :boolean
    ::Monologue::Post.update_all(:is_markdown => false)
  end

  def down
    remove_column :monologue_posts, :is_markdown
  end
end

then I can get them to pass.