Zen Mode for posting.

static/cranefly/css/cranefly.css

@@ -613,7 +613,7 @@ button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-
 .modal-footer .btn+.btn{margin-left:5px;margin-bottom:0}
 .modal-footer .btn-group .btn+.btn{margin-left:-1px}
 .modal-footer .btn-block+.btn-block{margin-left:0}
-.tooltip{position:absolute;z-index:1030;display:block;visibility:visible;font-size:11px;line-height:1.4;opacity:0;filter:alpha(opacity=0)}.tooltip.in{opacity:.8;filter:alpha(opacity=80)}
+.tooltip{position:absolute;z-index:1039;display:block;visibility:visible;font-size:11px;line-height:1.4;opacity:0;filter:alpha(opacity=0)}.tooltip.in{opacity:.8;filter:alpha(opacity=80)}
 .tooltip.top{margin-top:-3px;padding:5px 0}
 .tooltip.right{margin-left:3px;padding:0 5px}
 .tooltip.bottom{margin-top:3px;padding:5px 0}
@@ -813,11 +813,16 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{color:#333;text-decoration:n
 .pagination ul{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.pagination ul li{float:left;margin:0;margin-right:4.666666666666667px;padding:0}.pagination ul li a:link,.pagination ul li a:visited{background-color:#fff;border:1px solid #f0f0f0;border-radius:3px;padding:3px 7px;color:#999}.pagination ul li a:link i,.pagination ul li a:visited i{display:inline-block;width:12px;text-align:center}
 .pagination ul li a:active,.pagination ul li a:hover{border:1px solid #999;color:#555}
 .editor{background-color:#fff;border:1px solid #e6e6e6;border-radius:3px}.editor .editor-error{padding:10.5px;padding-bottom:0;margin-bottom:-10.5px}.editor .editor-error .help-block{color:#cf402e;font-weight:bold}
-.editor .editor-input{padding:10.5px}.editor .editor-input>div{margin-right:2px}.editor .editor-input>div textarea{border:none;box-shadow:none;margin:-10.5px;padding:10.5px;width:100%;font-family:Monaco,Menlo,Consolas,"Courier New",monospace}
+.editor .editor-input{padding:10.5px}.editor .editor-input>div{margin-right:22px;position:relative}.editor .editor-input>div textarea{border:none;box-shadow:none;margin:-10.5px;padding:10.5px;padding-right:32px;width:100%;font-family:Monaco,Menlo,Consolas,"Courier New",monospace}
+.editor .editor-input>div .editor-zen-on{display:none;position:absolute;top:-4px;right:-26px;padding-left:8px}.editor .editor-input>div .editor-zen-on a{border-radius:4px;display:block;opacity:.5;filter:alpha(opacity=50);padding:2px 0;padding-bottom:3px;width:29px;color:#333;font-size:24px;text-align:center}.editor .editor-input>div .editor-zen-on a:hover,.editor .editor-input>div .editor-zen-on a:active{box-shadow:0 0 3px #999;text-decoration:none}
 .editor .editor-actions{border-top:1px solid #e6e6e6;overflow:auto;padding:10.5px}.editor .editor-actions>.btn{margin-left:14px}
-.editor .editor-actions .editor-tools{margin:0;margin-right:10.5px}.editor .editor-actions .editor-tools li{float:left;margin-right:10.5px}.editor .editor-actions .editor-tools li .btn{padding-left:7px;padding-right:7px;width:14px;text-align:center}
+.editor .editor-actions .editor-tools{margin:0;margin-right:10.5px}.editor .editor-actions .editor-tools li{float:left;margin-right:10.5px}.editor .editor-actions .editor-tools li .btn{display:block;padding-left:0;padding-right:0;width:28px;text-align:center}.editor .editor-actions .editor-tools li .btn i{margin:0}
 .editor .editor-actions .editor-help{line-height:30.5px}
 .form-container .editor{border-color:#ccc}.form-container .editor .editor-actions{border-top-color:#ccc}
+.zen-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0}.zen-overlay>div{background:#fff;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1035}.zen-overlay>div .container{height:100%;position:relative}.zen-overlay>div .container textarea{border:none;border-radius:0;box-shadow:none;display:block;margin:0 auto;margin-top:2%;padding:0 17.5px;width:90%;height:91%;color:#333;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:28px;line-height:40px}
+.zen-overlay>div .container .overlay-options{background-color:#222;border-radius:6px;position:absolute;top:4%;right:7.5px}.zen-overlay>div .container .overlay-options ul{margin:0;padding:4px;list-style:none}.zen-overlay>div .container .overlay-options ul li{margin:4px;padding:0}.zen-overlay>div .container .overlay-options ul li a{border-radius:3px;display:block;padding:6px 0;width:32px;color:#999;font-size:17.5px;text-align:center}.zen-overlay>div .container .overlay-options ul li a:hover{color:#fff;text-decoration:none}
+.zen-overlay>div .container .overlay-options ul li a:active{background-color:#eee;color:#333}
+.zen-overlay>div .container .overlay-options ul li hr{border-color:#333;border-bottom:none;margin:0}
 .error-page{text-align:center}.error-page .error-color{color:#cf402e}
 .error-page .error-ban-reason{border:1px solid #cf402e;border-radius:3px;background-color:#fbeeed;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, #fdf6f5 5px, #fdf6f5 10px);-webkit-box-shadow:0 0 0 3px #e38b80;-moz-box-shadow:0 0 0 3px #e38b80;box-shadow:0 0 0 3px #e38b80;padding:11px 19px;text-align:left}.error-page .error-ban-reason :last-child{margin-bottom:0;padding-bottom:0}
 .error-page .error-ban-expires{color:#cf402e;font-weight:bold}

static/cranefly/css/cranefly/editor.less

@@ -21,17 +21,46 @@
     padding: @editorPadding;
 
     &>div {
-      margin-right: 2px;
+      margin-right: 22px;
+      position: relative;
 
       textarea {
         border: none;
         box-shadow: none;
         margin: @editorPadding * -1;
         padding: @editorPadding;
+        padding-right: 32px;
         width: 100%;
 
         font-family: @monoFontFamily;
       }
+
+      .editor-zen-on {
+        display: none;
+        position: absolute;
+        top: -4px;
+        right: -26px;
+        padding-left: 8px;
+
+        a {
+          border-radius: 4px;
+          display: block;
+          .opacity(50);
+          padding: 2px 0px;
+          padding-bottom: 3px;
+          width: 29px;
+
+          color: @textColor;
+          font-size: 24px;
+          text-align: center;
+
+          &:hover, &:active {
+            box-shadow: 0px 0px 3px @grayLight;
+
+            text-decoration: none;
+          }
+        }
+      }
     }
   }
 
@@ -53,17 +82,22 @@
         margin-right: @editorPadding;
 
         .btn {
-          padding-left: 7px;
-          padding-right: 7px;
-        	width: 14px;
+          display: block;
+          padding-left: 0px;
+          padding-right: 0px;
+          width: 28px;
 
-        	text-align: center;
+          text-align: center;
+
+          i {
+            margin: 0px;
+          }
         }
       }
     }
 
     .editor-help {
-    	line-height: @baseLineHeight + @editorPadding;
+      line-height: @baseLineHeight + @editorPadding;
     }
   }
 }
@@ -76,4 +110,92 @@
       border-top-color: darken(@editorBackground, 20%);
     }
   }
+}
+
+.zen-overlay {
+  display: none;
+  position: fixed;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+
+  &>div {
+    background: @white;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    z-index: @zindexZenWriting;
+
+    .container {
+      height: 100%;
+      position: relative;
+
+      textarea {
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        display: block;
+        margin: 0 auto;
+        margin-top: 2%;
+        padding: 0px @fontSizeLarge;
+        width: 90%;
+        height: 91%;
+
+        color: @textColor;
+        font-family: @monoFontFamily;
+        font-size: @baseFontSize * 2;
+        line-height: @baseLineHeight * 2;
+      }
+
+      .overlay-options {
+        background-color: @grayDarker;
+        border-radius: 6px;
+        position: absolute;
+        top: 4%;
+        right: @fontSizeLarge - 10px;
+
+        ul {
+          margin: 0px;
+          padding: 4px;
+          list-style: none;
+
+          li {
+            margin: 4px;
+            padding: 0px;
+
+            a {
+              border-radius: 3px;
+              display: block;
+              padding: 6px 0px;
+              width: 32px;
+
+              color: @grayLight;
+              font-size: @fontSizeLarge;
+              text-align: center;
+
+              &:hover {
+                color: @white;
+                text-decoration: none;
+              }
+
+              &:active {
+                background-color: @grayLighter;
+
+                color: @textColor;
+              }
+            }
+
+            hr {
+              border-color: @grayDark;
+              border-bottom: none;
+              margin: 0px;
+            }
+          }
+        }
+      }
+    }
+  }
 }

static/cranefly/css/variables.less

@@ -187,9 +187,9 @@
 // Try to avoid customizing these :)
 @zindexDropdown:          1000;
 @zindexPopover:           1010;
-@zindexTooltip:           1030;
 @zindexFixedNavbar:       1030;
 @zindexZenWriting:        1035;
+@zindexTooltip:           1039;
 @zindexModalBackdrop:     1040;
 @zindexModal:             1050;
 @zindexLoader:            1060;

static/cranefly/js/editor.js

@@ -1,5 +1,5 @@
 // Basic editor functions
-function storeCaret(ftext) {    
+function storeCaret(ftext) {
   if (ftext.createTextRange) {
     ftext.caretPos = document.selection.createRange().duplicate();
   }
@@ -86,87 +86,115 @@ function extractor(query) {
 
 // Small and nice editor functionality
 $(function() {
+  function textarea(ev) {
+    return $(ev).parents('.editor-editable').find('textarea');
+  }
+
+  function textareaId(ev) {
+    return textarea(ev).attr('id');
+  }
+
   $('.editor-tools').fadeIn(600);
-  $('.editor').each(function() {
-    // Get textarea stuff
-    var textarea = $(this).find('textarea');
-    var textarea_id = $(textarea).attr('id');
-    
+  $('.editor-zen-on').css('display', 'block');
+  $('.editor-editable').each(function() {
     // Do we have emojis?
     if (ed_emojis.length > 1) {
-      textarea.atwho({
+      $(this).find('textarea').atwho({
         at: ":",
         tpl: ed_emoji_tpl,
         data: ed_emojis_list
       });
     }
+  });
+
+  // Handle buttons
+  $('.editor-zen-on a').click(function() {
+    var overlay = $('.zen-overlay');
+    var overlay_textarea = overlay.find('textarea');
+    overlay_textarea.val(textarea(this).val());
+    overlay_textarea.data('org', '#' + textareaId(this));
+    overlay_textarea.data('pos', $('body').scrollTop());
+    overlay.show();
+    $('#wrap').hide();
+    return false;
+  });
+
+  $('.editor-bold').click(function() {
+    makeWrap(textareaId(this), '**', '**');
+    return false;
+  });
+
+  $('.editor-emphasis').click(function() {
+    makeWrap(textareaId(this), '*', '*');
+    return false;
+  });
+
+  $('.editor-link').click(function() {
+    var selection = $.trim(getSelectionText(textareaId(this)));
+    if (is_url(selection)) {
+      var link_url = $.trim(prompt(ed_lang_enter_link_url, selection));
+      selection = false;
+    } else {
+      var link_url = $.trim(prompt(ed_lang_enter_link_url));
+    }
 
-    // Handle buttons
-    $('.editor-bold').click(function() {
-      makeWrap(textarea_id, '**', '**');
-      return false;
-    });
-    
-    $('.editor-emphasis').click(function() {
-      makeWrap(textarea_id, '*', '*');
-      return false;
-    });
-    
-    $('.editor-link').click(function() {
-      var selection = $.trim(getSelectionText(textarea_id));
-      if (is_url(selection)) {
-        var link_url = $.trim(prompt(ed_lang_enter_link_url, selection));
-        selection = false;
+    if (is_url(link_url)) {
+      if (selection) {
+        var link_label = $.trim(prompt(ed_lang_enter_link_label, selection));
       } else {
-        var link_url = $.trim(prompt(ed_lang_enter_link_url));
+        var link_label = $.trim(prompt(ed_lang_enter_link_label));
       }
 
-      if (is_url(link_url)) {
-        if (selection) {
-          var link_label = $.trim(prompt(ed_lang_enter_link_label, selection));
-        } else {
-          var link_label = $.trim(prompt(ed_lang_enter_link_label));
-        }
-
-        if (link_label.length > 0) {
-          makeReplace(textarea_id, '[' + link_label + '](' + link_url + ')');
-        } else {
-          makeReplace(textarea_id, '<' + link_url + '>');
-        }
+      if (link_label.length > 0) {
+        makeReplace(textareaId(this), '[' + link_label + '](' + link_url + ')');
+      } else {
+        makeReplace(textareaId(this), '<' + link_url + '>');
       }
+    }
+
+    return false;
+  });
 
-      return false;
-    });
-    
-    $('.editor-image').click(function() {
-      var selection = $.trim(getSelectionText(textarea_id));
-      if (is_url(selection)) {
-        var image_url = $.trim(prompt(ed_lang_enter_image_url, selection));
-        selection = false;
+  $('.editor-image').click(function() {
+    var selection = $.trim(getSelectionText(textareaId(this)));
+    if (is_url(selection)) {
+      var image_url = $.trim(prompt(ed_lang_enter_image_url, selection));
+      selection = false;
+    } else {
+      var image_url = $.trim(prompt(ed_lang_enter_image_url));
+    }
+
+    if (is_url(image_url)) {
+      if (selection) {
+        var image_label = $.trim(prompt(ed_lang_enter_image_label, selection));
       } else {
-        var image_url = $.trim(prompt(ed_lang_enter_image_url));
+        var image_label = $.trim(prompt(ed_lang_enter_image_label));
       }
 
-      if (is_url(image_url)) {
-        if (selection) {
-          var image_label = $.trim(prompt(ed_lang_enter_image_label, selection));
-        } else {
-          var image_label = $.trim(prompt(ed_lang_enter_image_label));
-        }
-
-        if (image_label.length > 0) {
-          makeReplace(textarea_id, '![' + image_label + '](' + image_url + ')');
-        } else {
-          makeReplace(textarea_id, '!(' + image_url + ')');
-        }
+      if (image_label.length > 0) {
+        makeReplace(textareaId(this), '![' + image_label + '](' + image_url + ')');
+      } else {
+        makeReplace(textareaId(this), '!(' + image_url + ')');
       }
+    }
+
+    return false;
+  });
+
+  $('.editor-hr').click(function() {
+    makeReplace(textareaId(this), '\r\n\r\n- - - - -\r\n\r\n');
+    return false;
+  });
+
+  $('.editor-zen-off a').click(function() {
+    var overlay = $('.zen-overlay');
+    var overlay_textarea = overlay.find('textarea');
+    var scrooltop = overlay.find('textarea').data('pos');
 
-      return false;
-    });
-    
-    $('.editor-hr').click(function() {
-      makeReplace(textarea_id, '\r\n\r\n- - - - -\r\n\r\n');
-      return false;
-    });
+    $(overlay.find('textarea').data('org')).val(overlay.find('textarea').val());
+    $('#wrap').show();
+    $('html, body').scrollTop(scrooltop);
+    overlay.hide();
+    return false;
   });
 });

templates/cranefly/editor.html

@@ -1,5 +1,5 @@
-{% macro editor(field, submit_button, placeholder=None, rows=4, hide_links=False, hide_images=False, hide_hr=False, extra=None) %}
-<div class="editor">
+{% macro editor(field, submit_button, placeholder=None, rows=4, hide_links=False, hide_images=False, hide_hr=False, zen=False, extra=None) %}
+<div class="editor editor-editable">
   {% if field.errors %}
   <div class="editor-error">
     {% for error in field.errors %}
@@ -11,15 +11,20 @@
   <div class="editor-input">
     <div>
       <textarea name="{{ context.name }}" id="id_{{ context.name }}" rows="{{ rows }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}>{% if 'value' in context %}{{ context.value }}{% endif %}</textarea>
+      {% if zen %}
+      <div class="editor-zen-on tooltip-left" title="{% trans %}Click to enter Zen mode{% endtrans %}">
+        <a href="#"><i class="icon-expand-alt"></i></a>
+      </div>
+      {% endif %}
     </div>
   </div>
   <div class="editor-actions">
     <ul class="editor-tools unstyled pull-left">
       <li><a href="#" class="tooltip-top btn editor-bold" title="{% trans %}Bold{% endtrans %}"><i class="icon-bold"></i></a></li>
       <li><a href="#" class="tooltip-top btn editor-emphasis" title="{% trans %}Emphasis{% endtrans %}"><i class="icon-italic"></i></a></li>
-      {% if not hide_links %}<li class="divider"><a href="#" class="tooltip-top btn editor-link" title="{% trans %}Insert Link{% endtrans %}"><i class="icon-share-alt"></i></a></li>{% endif %}
-      {% if not hide_images %}<li{% if hide_links %} class="divider"{% endif %}><a href="#" class="tooltip-top btn editor-image" title="{% trans %}Insert Image{% endtrans %}"><i class="icon-picture"></i></a></li>{% endif %}
-      {% if not hide_hr %}<li class="divider"><a href="#" class="tooltip-top btn editor-hr" title="{% trans %}Insert Horizontal Line{% endtrans %}"><i class="icon-minus"></i></a></li>{% endif %}
+      {% if not hide_links %}<li><a href="#" class="tooltip-top btn editor-link" title="{% trans %}Insert Link{% endtrans %}"><i class="icon-share-alt"></i></a></li>{% endif %}
+      {% if not hide_images %}<li><a href="#" class="tooltip-top btn editor-image" title="{% trans %}Insert Image{% endtrans %}"><i class="icon-picture"></i></a></li>{% endif %}
+      {% if not hide_hr %}<li><a href="#" class="tooltip-top btn editor-hr" title="{% trans %}Insert Horizontal Line{% endtrans %}"><i class="icon-minus"></i></a></li>{% endif %}
     </ul>
     <a href="{{ url('help_md') }}" class="editor-help" target="_blank">{% trans %}Formatting Help{% endtrans %}</a>
     <button name="save" type="submit" class="btn btn-primary pull-right">{{ submit_button }}</button>
@@ -28,6 +33,28 @@
 </div>
 {% endmacro %}
 
+{% macro zen() %}
+<div class="zen-overlay editor-editable">
+  <div>
+    <div class="container">
+      <textarea id="overlay-textarea" name="overlay-textarea" placeholder="{% trans %}Message Body{% endtrans %}"></textarea>
+      <div class="overlay-options">
+        <ul>
+          <li><a href="#" class="tooltip-left editor-bold" title="{% trans %}Bold{% endtrans %}"><i class="icon-bold"></i></a></li>
+          <li><a href="#" class="tooltip-left editor-emphasis" title="{% trans %}Emphasis{% endtrans %}"><i class="icon-italic"></i></a></li>
+          <li><a href="#" class="tooltip-left editor-link" title="{% trans %}Insert Link{% endtrans %}"><i class="icon-share-alt"></i></a></li>
+          <li><a href="#" class="tooltip-left editor-image" title="{% trans %}Insert Image{% endtrans %}"><i class="icon-picture"></i></a></li>
+          <li><a href="#" class="tooltip-left editor-hr" title="{% trans %}Insert Horizontal Line{% endtrans %}"><i class="icon-minus"></i></a></li>
+          <li><a href="{{ url('help_md') }}" class="tooltip-left" title="{% trans %}Formatting Helpt{% endtrans %}" target="_blank"><i class="icon-info"></i></a></li>
+          <li><hr></li>
+          <li class="editor-zen-off tooltip-left" title="{% trans %}Leave Zen mode{% endtrans %}"><a href="#"><i class="icon-off"></i></a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
 {% macro js() %}
   <script type="text/javascript">
     $(function () {

templates/cranefly/private_threads/posting.html

@@ -68,7 +68,7 @@
             <hr>
             <h4>{% trans %}Message Body{% endtrans %}</h4>
             {% endif %}
-            {{ editor.editor(form.post, get_button(), rows=8, extra=get_extra()) }}
+            {{ editor.editor(form.post, get_button(), rows=8, zen=True, extra=get_extra()) }}
             {% if 'edit_reason' in form.fields or (action == 'new_reply' and 'invite_users' in form.fields) %}
             <hr>
             {% if action == 'new_reply' and 'invite_users' in form.fields %}
@@ -96,7 +96,9 @@
 <link href="{{ STATIC_URL }}cranefly/highlight/styles/monokai.css" rel="stylesheet">
 {% endblock %}
 
-{% block javascripts %}{{ super() }}
+{% block javascripts %}
+  {{ editor.zen() }}
+  {{ super() }}
   <script src="{{ STATIC_URL }}cranefly/highlight/highlight.pack.js"></script>
   <script type="text/javascript">
     hljs.tabReplace = '    ';

templates/cranefly/private_threads/thread.html

@@ -404,7 +404,7 @@
           <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
           <input type="hidden" name="quick_reply" value="1">
           <img src="{{ user.get_avatar(100) }}" alt="{% trans %}Your Avatar{% endtrans %}" class="user-avatar">
-          {{ editor.editor(quick_reply.post, _('Post Reply'), extra=editor_extra()) }}
+          {{ editor.editor(quick_reply.post, _('Post Reply'), zen=True, extra=editor_extra()) }}
         </form>
       </div>
       {% endif %}
@@ -457,7 +457,9 @@
 <link href="{{ STATIC_URL }}cranefly/highlight/styles/monokai.css" rel="stylesheet">
 {% endblock %}
 
-{% block javascripts -%}{{ super() }}
+{% block javascripts -%}
+  {{ editor.zen() }}
+  {{ super() }}
   <script src="{{ STATIC_URL }}cranefly/highlight/highlight.pack.js"></script>
   <script type="text/javascript">
     var l_post_reported = "{{ _('Reported!') }}";

templates/cranefly/reports/posting.html

@@ -64,7 +64,7 @@
             <hr>
             <h4>{% trans %}Message Body{% endtrans %}</h4>
             {% endif %}
-            {{ editor.editor(form.post, get_button(), rows=8, extra=get_extra()) }}
+            {{ editor.editor(form.post, get_button(), rows=8, zen=True, extra=get_extra()) }}
             {% if intersect(form.fields, ('edit_reason', 'thread_weight')) %}
             <hr>
             {% if 'edit_reason' in form.fields %}
@@ -98,7 +98,9 @@
 <link href="{{ STATIC_URL }}cranefly/highlight/styles/monokai.css" rel="stylesheet">
 {% endblock %}
 
-{% block javascripts %}{{ super() }}
+{% block javascripts %}
+  {{ editor.zen() }}
+  {{ super() }}
   <script src="{{ STATIC_URL }}cranefly/highlight/highlight.pack.js"></script>
   <script type="text/javascript">
     hljs.tabReplace = '    ';

templates/cranefly/reports/thread.html

@@ -351,7 +351,7 @@
       <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
       <input type="hidden" name="quick_reply" value="1">
       <img src="{{ user.get_avatar(100) }}" alt="{% trans %}Your Avatar{% endtrans %}" class="user-avatar">
-      {{ editor.editor(quick_reply.post, _('Post Comment'), extra=editor_extra()) }}
+      {{ editor.editor(quick_reply.post, _('Post Comment'), zen=True, extra=editor_extra()) }}
     </form>
   </div>
 
@@ -362,7 +362,9 @@
 <link href="{{ STATIC_URL }}cranefly/highlight/styles/monokai.css" rel="stylesheet">
 {% endblock %}
 
-{% block javascripts -%}{{ super() }}
+{% block javascripts -%}
+  {{ editor.zen() }}
+  {{ super() }}
   <script src="{{ STATIC_URL }}cranefly/highlight/highlight.pack.js"></script>
   <script type="text/javascript">
     hljs.tabReplace = '    ';

templates/cranefly/threads/posting.html

@@ -64,7 +64,7 @@
             <hr>
             <h4>{% trans %}Message Body{% endtrans %}</h4>
             {% endif %}
-            {{ editor.editor(form.post, get_button(), rows=8, extra=get_extra()) }}
+            {{ editor.editor(form.post, get_button(), rows=8, zen=True, extra=get_extra()) }}
             {% if intersect(form.fields, ('edit_reason', 'thread_weight', 'close_thread')) %}
             <hr>
             {% if 'edit_reason' in form.fields %}
@@ -110,7 +110,9 @@
 <link href="{{ STATIC_URL }}cranefly/highlight/styles/monokai.css" rel="stylesheet">
 {% endblock %}
 
-{% block javascripts %}{{ super() }}
+{% block javascripts %}
+  {{ editor.zen() }}
+  {{ super() }}
   <script src="{{ STATIC_URL }}cranefly/highlight/highlight.pack.js"></script>
   <script type="text/javascript">
     hljs.tabReplace = '    ';

templates/cranefly/threads/thread.html

@@ -422,7 +422,7 @@
       <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
       <input type="hidden" name="quick_reply" value="1">
       <img src="{{ user.get_avatar(100) }}" alt="{% trans %}Your Avatar{% endtrans %}" class="user-avatar">
-      {{ editor.editor(quick_reply.post, _('Post Reply'), extra=editor_extra()) }}
+      {{ editor.editor(quick_reply.post, _('Post Reply'), zen=True, extra=editor_extra()) }}
     </form>
   </div>
   {% endif %}
@@ -434,7 +434,9 @@
 <link href="{{ STATIC_URL }}cranefly/highlight/styles/monokai.css" rel="stylesheet">
 {% endblock %}
 
-{% block javascripts -%}{{ super() }}
+{% block javascripts -%}
+  {{ editor.zen() }}
+  {{ super() }}
   <script src="{{ STATIC_URL }}cranefly/highlight/highlight.pack.js"></script>
   <script type="text/javascript">
     var l_post_reported = "{{ _('Reported!') }}";