New Mezzanine Markdown editor with media library integration

[Ahmad Khayyat]

I am pleased to announce that a new Markdown editor for Mezzanine is available at:

https://bitbucket.org/akhayyat/mezzanine-pagedown

First, many thanks to the mezzanine-mdown and django-pagedown projects.

This project does mainly three things:

- Provides a rich text editor for mezzanine, based on Mezzanine-mdown.
- Uses the PageDown Markdown editor and viewer, based on django-pagdown.
- Integrates the editor's 'insert image' button with Mezzanine's media library via a jquery-ui dialog, which is this project's contribution.

It also styles the editor and previewer to match Grappelli's admin theme.

Screenshots:
- The editor: http://imgur.com/hpyXt
- The media library browser: http://imgur.com/xdXhO

I should point out that it requires a fresh checkout of filebrowser_safe, specifically one that includes commit 35fe7e3
Otherwise, it's ready to use. Just follow the instructions in the README.

[Stephen McDonald]

Great stuff Ahmad, thanks for your work on this.

I've added mezzanine-pagedown to the list of third-party apps in the readme, and I've just merged the filebrowser-safe changes in - at the latest, I'll do an official release with the next Mezzanine release.

--
Stephen McDonald
http://jupo.org

[Ahmad Khayyat]

On Fri, Nov 16, 2012 at 9:41 PM, Stephen McDonald <st...@jupo.org> wrote:

 

I've added mezzanine-pagedown to the list of third-party apps in the readme,

Great! Thanks.

One note though.. I'm not sure Pagedown is considered a WYSIWYG editor. It's a markdown editor, so perhaps a WYSIWYM? No biggie though.

 

and I've just merged the filebrowser-safe changes in - at the latest, I'll do an official release with the next Mezzanine release.

Oh great. Perhaps some documentation is needed to explain how an app can launch the filebrowser for file selection? Where should such documentation go? The documentation text is already in the pull request.

Also, ideally, other editors/widgets should use this browser instead of the current if-else special handling for each calling widget in filebrowser-safe. From a user's point-of-view, the visible difference is that the filebrowser pop-up window is replaced by an in-window jquery-ui dialog. From a developer's point-of-view, it's a single, generic API instead of doing different things for different calling widgets.

[Stephen McDonald]

On Sat, Nov 17, 2012 at 4:05 PM, Ahmad Khayyat <akha...@gmail.com> wrote:

On Fri, Nov 16, 2012 at 9:41 PM, Stephen McDonald <st...@jupo.org> wrote:

 

I've added mezzanine-pagedown to the list of third-party apps in the readme,

Great! Thanks.

One note though.. I'm not sure Pagedown is considered a WYSIWYG editor. It's a markdown editor, so perhaps a WYSIWYM? No biggie though.

 

and I've just merged the filebrowser-safe changes in - at the latest, I'll do an official release with the next Mezzanine release.

Oh great. Perhaps some documentation is needed to explain how an app can launch the filebrowser for file selection? Where should such documentation go? The documentation text is already in the pull request.

There's a section for the editor under "admin customisation", a sub-section under the WYSIWYG section would be perfect:

https://github.com/stephenmcd/mezzanine/blob/master/docs/admin-customization.rst#wysiwyg-editor

 

Also, ideally, other editors/widgets should use this browser instead of the current if-else special handling for each calling widget in filebrowser-safe. From a user's point-of-view, the visible difference is that the filebrowser pop-up window is replaced by an in-window jquery-ui dialog. From a developer's point-of-view, it's a single, generic API instead of doing different things for different calling widgets.

Agreed :-) 

[Eduardo Rivas]

Hello, I just installed mezzanine-markdown and its awesome! However, I believe I'm experiencing some bug with codehilite. When I right my code blocks in the admin interface (using four-space indentation), the preview renders just fine (not highlighted, of course, but in mono font and dark background). However, when I save the field and visit the site, the code is highlighted, but it appears in a single line. Examining the rendered HTML reveals that all the <span> tags generated by pygments follow each other without spaces or line breaks.

For example, my markdown is as follows:

    #!python

    from fake import lies

    if somestuff:

        do_stuff

And the result in the site is a single line:

fromfakeimportliesifsomestuff:do_stuff

Any ideas?

[Ahmad Khayyat]

On Wed, Nov 28, 2012 at 6:27 PM, Eduardo Rivas <jeriva...@gmail.com> wrote:

Hello, I just installed mezzanine-markdown and its awesome!

Did you mean mezzanine-pagedown? If yes, then.. Thanks! If not, then please ignore the rest of this message ;)

 

However, I believe I'm experiencing some bug with codehilite.

I admit that codehilite integration received absolutely no testing. I shamelessly reused that code from mezzanine-mdown. That said, I don't see how codehilite could cause problems, being merely color-related CSS.

 

[...] However, when I save the field and visit the site, the code is highlighted, but it appears in a single line. Examining the rendered HTML reveals that all the <span> tags generated by pygments follow each other without spaces or line breaks.

For example, my markdown is as follows:

    #!python

    from fake import lies

    if somestuff:

        do_stuff

And the result in the site is a single line:

fromfakeimportliesifsomestuff:do_stuff

Any ideas?

I could not reproduce what you are getting. I do get spaces and newlines. In fact, here is the actual generated code from your snippet:

<table class="codehilitetable"><tbody><tr><td class="linenos"><div class="linenodiv"><pre>1

2

3

4</pre></div></td><td class="code"><div class="codehilite"><pre><span class="kn">from</span> <span class="nn">fake</span> <span class="kn">import</span> <span class="n">lies</span>

<span class="k">if</span> <span class="n">somestuff</span><span class="p">:</span>

    <span class="n">do_stuff</span>

</pre></div>

</td></tr></tbody></table>

-----------------

Do you have the same problem without codehilite?

i.e. RICHTEXT_FILTER = 'mezzanine_pagedown.filters.plain'

[Eduardo Rivas]

The plain filter gets it right (I switched to triple colons to avoid line numbers for now). HTML source:

<pre><code>:::python

from fake import lies

if somestuff:

    do_stuff

</code></pre>

But when I use the codehilite filter, I get this HTML source:

<div class="codehilite"><pre><span class="kn">from</span><span class="nn">fake</span><span class="kn">import</span><span class="n">lies</span><span class="k">if</span><span class="n">somestuff</span><span class="p">:</span><span class="n">do_stuff</span></pre></div>

The template tag I'm using is {{ blog_post.content|richtext_filter|safe }}

I removed the "safe" filter, and of course, that escaped pagedown's output, but in this case I can see the spaces are preserved. Page content:

<pre><span class="kn">from</span> <span class="nn">fake</span> <span class="kn">import</span> <span class="n">lies</span> <span class="k">if</span> <span class="n">somestuff</span><span class="p">:</span> <span class="n">do_stuff</span> </pre>

So, is the safe filter conflicting with pagedown? What version of Python, Django and Mezzanine are you testing with? I have 2.7, 1.4.2 and latest master from github respectively.

[Ahmad Khayyat]

On Thu, Nov 29, 2012 at 11:20 AM, Eduardo Rivas <jeriva...@gmail.com> wrote:

The template tag I'm using is {{ blog_post.content|richtext_filter|safe }}

I removed the "safe" filter, and of course, that escaped pagedown's output, but in this case I can see the spaces are preserved. 

So, is the safe filter conflicting with pagedown?

I'm using a similar tag with no such issues, so it's not "safe" that's causing the problem:

{{ page.get_content_model.content|richtext_filter|safe }}

 

What version of Python, Django and Mezzanine are you testing with? I have 2.7, 1.4.2 and latest master from github respectively.

Python: 2.7.3rc2

Django: 1.4.2

Markdown: 2.2.1

Mezzanine, Grappelli-safe, Filebrowser-safe: I'm using slightly modified versions with fewer jquery/jquery-ui versions fighting about. They are in the pull-request queue, although I'm not sure if they will be accepted. I don't think this is relevant to your problem, not in an obvious way anyway, but feel free to try them at:

https://bitbucket.org/akhayyat/mezzanine

https://bitbucket.org/akhayyat/grappelli-safe

https://bitbucket.org/akhayyat/filebrowser-safe

Try running:

markdown(content, ['codehilite',])

manually on your input markdown string (which is all mezzanine_pagedown.filters.codehilite does) outside of django and in django's shell and see where exactly in the chain does the problem manifest.

[Ahmad Khayyat]

On Thursday, November 29, 2012 11:45:45 AM UTC-5, Ahmad Khayyat wrote:

 

Mezzanine, Grappelli-safe, Filebrowser-safe: I'm using slightly modified versions with fewer jquery/jquery-ui versions fighting about. They are in the pull-request queue, although I'm not sure if they will be accepted. I don't think this is relevant to your problem, not in an obvious way anyway, but feel free to try them at:

https://bitbucket.org/akhayyat/mezzanine

https://bitbucket.org/akhayyat/grappelli-safe

https://bitbucket.org/akhayyat/filebrowser-safe

All merged in now. So a simple update/pull/fetch/... will do.

Thanks steve for merging despite your discomfort!

[Eduardo Rivas]

I'm very confused right now. I pulled in the latest changes, and the results are the same (no surprise there). However, I have now created a new Mezzanine project, installed mezzanine_pagedown and everything works ok. Also, the ouput from the shell is the correct one in every case. There is something sistematically removing whitespace between <span> tags in the <pre> block when I use the safe filter.

The good news is that mezzanine_pagedown is working as expected. I now have to figure out if there is some script or style messing with the page or something. Any ideas? Can a CSS style or JS script do something like this?

[Ahmad Khayyat]

On Fri, Nov 30, 2012 at 6:24 PM, Eduardo Rivas <jeriva...@gmail.com> wrote:

 

The good news is that mezzanine_pagedown is working as expected.

Great!
 

I now have to figure out if there is some script or style messing with the page or something. Any ideas? Can a CSS style or JS script do something like this?

CSS would not modify the HTML code, only changes how it's rendered/presented.
JS: definitely. A script can rewrite the entire page.

[Eduardo Rivas]

I can't believe I didn't notice this one, but it was the {% spaceless %} tag in my base.html template causing the issue. Got rid of it and everything is ok now.