Replace bootstrap-markdown with EasyMDE

flaskbb/templates/forum/new_post.html

@@ -34,23 +34,15 @@
 
                     <div class="form-group">
                         <div class="col-md-12 col-sm-12 col-xs-12">
+                            {{ run_hook("flaskbb_tpl_form_new_post_before", form=form) }}
 
-                            <div class="editor-box">
+                            {{ form.content(class="flaskbb-editor", style="display: none") }}
 
-                                {{ run_hook("flaskbb_tpl_form_new_post_before", form=form) }}
+                            {{ render_boolean_field(form.track_topic) }}
 
-                                <div class="editor">
-                                    {{ render_quickreply(form.content, div_class="new-message", rows=7, cols=75, placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'false', 'class': 'flaskbb-editor'}) }}
-                                </div>
+                            {{ run_hook("flaskbb_tpl_form_new_post_after", form=form) }}
 
-                                {{ render_boolean_field(form.track_topic) }}
-
-                                {{ run_hook("flaskbb_tpl_form_new_post_after", form=form) }}
-
-                                <div class="editor-submit">
-                                    {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
-                                </div>
-                            </div>
+                            {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
                         </div>
                     </div>
                 </div>

flaskbb/templates/forum/new_topic.html

@@ -34,22 +34,15 @@
 
                     <div class="form-group">
                         <div class="col-md-12 col-sm-12 col-xs-12">
-                            <div class="editor-box">
+                            {{ run_hook("flaskbb_tpl_form_new_topic_before", form=form) }}
 
-                                {{ run_hook("flaskbb_tpl_form_new_topic_before", form=form) }}
+                            {{ form.content(class="flaskbb-editor", style="display: none") }}
 
-                                <div class="editor">
-                                    {{ render_quickreply(form.content, div_class="new-message", rows=7, cols=75, placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'false', 'class': 'flaskbb-editor'}) }}
-                                </div>
+                            {{ render_boolean_field(form.track_topic) }}
 
-                                {{ render_boolean_field(form.track_topic) }}
+                            {{ run_hook("flaskbb_tpl_form_new_topic_after", form=form) }}
 
-                                {{ run_hook("flaskbb_tpl_form_new_topic_after", form=form) }}
-
-                                <div class="editor-submit">
-                                    {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
-                                </div>
-                            </div>
+                            {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
                         </div>
                     </div>
                 </div>

flaskbb/templates/forum/topic.html

@@ -220,20 +220,14 @@
     </div> <!-- end topic-panel -->
 
     {% include theme('forum/topic_controls.html') %}
-    {% from theme("macros.html") import render_field, render_quickreply, render_submit_field %}
+    {% from theme("macros.html") import render_field, render_submit_field %}
     {% if form %}
     <form class="form" action="#" method="post">
         {{ form.hidden_tag() }}
         <div class="row">
             <div class="col-md-offset-2 col-sm-offset-3 col-md-10 col-sm-9 col-xs-12">
-                <div class="editor-box">
-                    <div class="editor quickreply">
-                            {{ render_quickreply(form.content, div_class="new-message", rows=7, cols=75, placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'false', 'class': 'flaskbb-editor'}) }}
-                    </div>
-                    <div class="editor-submit">
-                        {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
-                    </div>
-                </div>
+                {{ form.content(class='flaskbb-editor', style="display:none") }}
+                {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
             </div>
         </div>
     </form>

flaskbb/templates/management/category_form.html

@@ -35,7 +35,7 @@
                     <div class="col-md-12 col-sm-12 col-xs-12">
                         {{ form.hidden_tag() }}
                         {{ render_field(form.title) }}
-                        {{ render_field(form.description, div_class="col-sm-10 editor", rows="4", placeholder="", **{'data-provide': 'markdown', 'class': 'flaskbb-editor'}) }}
+                        {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
 
                         {{ render_field(form.position) }}
                         {{ render_submit_field(form.submit, div_class="form-group col-sm-5") }}

flaskbb/templates/management/forum_form.html

@@ -35,7 +35,7 @@
                     <div class="col-md-12 col-sm-12 col-xs-12">
                         {{ form.hidden_tag() }}
                         {{ render_field(form.title) }}
-                        {{ render_field(form.description, div_class="col-sm-10 editor", rows="4", placeholder="", **{'data-provide': 'markdown', 'class': 'flaskbb-editor'}) }}
+                        {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
                         {{ render_field(form.category) }}
                         {{ render_field(form.position) }}
                         {{ render_field(form.external) }}

flaskbb/templates/management/group_form.html

@@ -35,7 +35,7 @@
                         {{ form.hidden_tag() }}
                         {{ render_field(form.name) }}
 
-                        {{ render_field(form.description, div_class="col-sm-10 editor", rows="4", placeholder="", **{'data-provide': 'markdown', 'class': 'flaskbb-editor'}) }}
+                        {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
                         {{ render_boolean_field(form.admin) }}
                         {{ render_boolean_field(form.super_mod) }}
 

flaskbb/templates/management/user_form.html

@@ -47,8 +47,8 @@
                     {{ horizontal_field(form.primary_group) }}
                     {{ horizontal_field(form.secondary_groups) }}
                     {{ horizontal_field(form.activated) }}
-                    {{ horizontal_field(form.signature, div_class="col-sm-8 editor", rows="5", placeholder="", **{'data-provide': 'markdown', 'class': 'flaskbb-editor'}) }}
-                    {{ horizontal_field(form.notes, div_class="col-sm-8 editor", rows="12", placeholder="", **{'data-provide': 'markdown', 'class': 'flaskbb-editor'}) }}
+                    {{ horizontal_field(form.signature, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
+                    {{ horizontal_field(form.notes, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
 
                     {{ horizontal_field(form.submit) }}
 

flaskbb/templates/user/change_user_details.html

@@ -16,8 +16,8 @@
             {{ horizontal_field(form.location) }}
             {{ horizontal_field(form.website) }}
             {{ horizontal_field(form.avatar) }}
-            {{ horizontal_field(form.signature, div_class="col-sm-8 editor", rows="5", placeholder="", **{'data-provide': 'markdown', 'class': 'flaskbb-editor'}) }}
-            {{ horizontal_field(form.notes, div_class="col-sm-8 editor", rows="12", placeholder="", **{'data-provide': 'markdown', 'class': 'flaskbb-editor'}) }}
+            {{ horizontal_field(form.signature, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
+            {{ horizontal_field(form.notes, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
             {{ run_hook('flaskbb_tpl_form_user_details_after', form=form) }}
             {{ horizontal_field(form.submit) }}
 

flaskbb/themes/aurora/package.json

@@ -24,11 +24,9 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "bootstrap-markdown": "^2.10.0",
     "bootstrap-sass": "^3.4.1",
-    "jquery": "^3.6.0",
-    "jquery-textcomplete": "^1.8.5",
-    "marked": "^2.1.3"
+    "easymde": "^2.15.0",
+    "jquery": "^3.6.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",

flaskbb/themes/aurora/src/app.js

@@ -1,17 +1,14 @@
-import "marked/lib/marked";
-import "jquery-textcomplete/dist/jquery.textcomplete.min";
 import "bootstrap-sass/assets/javascripts/bootstrap.min";
-import "bootstrap-markdown/js/bootstrap-markdown";
 
 import "./app/emoji.js";
 import "./app/editor.js";
 import "./app/flaskbb.js";
 //import "./app/confirm_modal.js";
 
+
 import "./scss/styles.scss";
 export { BulkActions, show_management_search } from "./app/flaskbb.js";
 
-
 // import all assets in ./assets
 function importAll(r) {
   return r.keys().map(r);

flaskbb/themes/aurora/src/app/editor.js

@@ -1,78 +1,17 @@
-import marked from "marked";
+import EasyMDE from "easymde";
 
-marked.setOptions({
-    gfm: true,
-    tables: true,
-    breaks: true,
-    pedantic: false,
-    sanitize: true,
-    smartLists: true,
-    smartypants: false
-});
+function loadEditor(element) {
+    const easyMDE = new EasyMDE({
+        autoDownloadFontAwesome: false,
+        element: element,
+        autoRefresh: true,
+        spellChecker: false,
+        sideBySideFullscreen: false,
+        status: false
+    });
+}
 
-$(".flaskbb-editor").markdown({
-    iconlibrary: "fa",
-    additionalButtons: [
-        [{
-            name: "groupHelp",
-            data: [{
-                name: "cmdHelp",
-                toggle: false, // this param only take effect if you load bootstrap.js
-                title: "Help",
-                icon: "fa fa-question",
-                btnClass: 'btn btn-success',
-                callback: function(e){
-                    $('#editor-help').modal('show')
-                }
-            }]
-        }]
-    ],
-    onPreview: function(e, replacementContainer) {
-        var urlprefix = typeof FORUM_URL_PREFIX !== typeof undefined ? FORUM_URL_PREFIX : "";
-
-        $.ajax({
-            type: 'POST',
-            data: e.getContent(),
-            dataType: "text",
-            contentType: "text/plain",
-            url: urlprefix + '/markdown',
-            beforeSend: function(xhr, settings) {
-                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
-                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
-                }
-            }
-        })
-        .done(function(msg) {
-            parse_emoji(msg);
-            var $html = $(replacementContainer);
-            $(msg).appendTo($html.empty());
-        })
-        .fail(function(error) {
-            console.error("Couldn't send text to markdown preview endpoint: " + error);
-        });
-    }
-});
-
-$('.flaskbb-editor').textcomplete([
-    { // emoji strategy
-        match: /\B:([\-+\w]*)$/,
-        search: function (term, callback) {
-            callback($.map(emojies, function (value) {
-                return value[0].indexOf(term) !== -1 ? {character: value[1], name: value[0]} : null;
-            }));
-        },
-        template: function (value) {
-            return parse_emoji(value.character) + ' ' + value.name;
-        },
-        replace: function (value) {
-            return value.character + ' ';
-        },
-        index: 1
-    },
-], {
-    onKeydown: function (e, commands) {
-        if (e.ctrlKey && e.keyCode === 74) { // CTRL-J
-            return commands.KEY_ENTER;
-        }
-    }
-});
+const editors = document.querySelectorAll(".flaskbb-editor");
+for(const e of editors) {
+    loadEditor(e);
+}

flaskbb/themes/aurora/src/scss/_aurora.scss

@@ -5,7 +5,6 @@
 @import "misc";
 @import "fixes";
 @import "navigation";
-@import "editor";
 @import "button";
 
 @import "category";

flaskbb/themes/aurora/src/scss/_editor.scss

@@ -1,53 +0,0 @@
-/* Markdown Editor */
-.editor-box .editor-submit .btn {
-    margin: 0.75em 0.25em 0 0;
-}
-
-.editor-box > .quickreply {
-    padding: 0;
-}
-
-.editor {
-    min-height: 0;
-
-    .editor-options {
-        margin-top: 0.5em;
-    }
-
-    .new-message {
-        background: #fff;
-        border: 0;
-        height: 12em;
-        outline: none;
-        width: 100%
-    }
-}
-
-.editor > .md-editor {
-    border-color: $border-color;
-
-    &.active {
-        border-color: $border-color;
-    }
-
-    & > .md-footer, & >.md-header {
-        background: $navigation-bg;
-    }
-
-    & >textarea {
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-size: 1em;
-        border-top: 1px solid $border-color;
-        border-bottom: none;
-        background: #fff;
-        padding: 0 0.25em;
-    }
-
-    & >.md-preview {
-        border-top: 1px solid $border-color;
-        border-right: 1px solid $border-color;
-        border-bottom: none;
-        padding: 0 0.25em;
-        background: #eee;
-    }
-}

flaskbb/themes/aurora/src/scss/_management.scss

@@ -5,6 +5,9 @@
     .search-form {
         display: none;
         padding: 15px;
+
+        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+
     }
 
     .management-head {

flaskbb/themes/aurora/src/scss/styles.scss

@@ -17,5 +17,5 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 // Import pygments style
 @import "pygments";
 
-// Import the Bootstrap-Markdown editor
-@import "~bootstrap-markdown/css/bootstrap-markdown.min";
+// Import the Easy Markdown Editor
+@import "easymde/dist/easymde.min";