Add rich text supportv0.5.0

2 files changed, 103 insertions, 2 deletions

diff --git a/src/application/views/form_addpost.php b/src/application/views/form_addpost.php
index 4cddc05..9e617d9 100644
--- a/src/application/views/form_addpost.php
+++ b/src/application/views/form_addpost.php
@@ -18,7 +18,29 @@ if (($_formError = RequestUtils::getAndClearFormError("addpost")) !== null) {
 <input type="hidden" name="form_id" value="addpost">
 <div class="form-group">
     <label for="i_message"><?= __("Message:") ?></label>
-    <textarea class="form-control" id="i_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:499px"></textarea>
+    <div class="panel panel-default">
+        <div class="panel-heading" style="padding:4px">
+            <div class="btn-toolbar" role="toolbar">
+                <div class="btn-group" role="group">
+                    <button data-area="#i_message" title="<?= __("Bold") ?>" data-editor-command="bold" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-bold"></i></button>
+                    <button data-area="#i_message" title="<?= __("Italic") ?>" data-editor-command="italic" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-italic"></i></button>
+                    <button data-area="#i_message" title="<?= __("Underlined") ?>" data-editor-command="underline" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-underline"></i></button>
+                    <button data-area="#i_message" title="<?= __("Strikethrough") ?>" data-editor-command="strikethrough" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-strikethrough"></i></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button data-area="#i_message" title="<?= __("Superscript") ?>" data-editor-command="sup" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-superscript"></i></button>
+                    <button data-area="#i_message" title="<?= __("Subscript") ?>" data-editor-command="sub" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-subscript"></i></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button data-area="#i_message" title="<?= __("Quote") ?>" data-editor-command="quote" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-quote-left"></i></button>
+                    <button data-area="#i_message" title="<?= __("Spoiler") ?>" data-editor-command="spoiler" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-eye"></i></button>
+                </div>
+            </div>
+        </div>
+        <div class="panel-body" style="padding:0">
+            <textarea class="form-control" id="i_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:499px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:-1px;width:calc(100% + 2px)"></textarea>
+        </div>
+    </div>
 </div>
 <div class="form-group">
     <label for="i_files"><?= __("Attachments: <small>(max. %max_attachment_count% files, max. %max_attachment_size% MiB each)</small>", [
@@ -29,3 +51,60 @@ if (($_formError = RequestUtils::getAndClearFormError("addpost")) !== null) {
 </div>
 <button type="submit" class="btn btn-success"><?= __("Post reply") ?> <span class="fa fa-send" aria-hidden="true"></span></button>
 </form>
+
+<script type="text/javascript">
+    $(function() {
+        function insertAroundSelection(textarea, before, after) {
+            var start = textarea.selectionStart;
+            var end = textarea.selectionEnd;
+            var text = textarea.value;
+            var pre = text.substring(0, start);
+            var inner = text.substring(start, end);
+            var post = text.substring(end);
+            start += before.length;
+            end += before.length;
+            text = pre + before + inner + after + post;
+            textarea.value = text;
+            textarea.focus();
+            textarea.selectionStart = start;
+            textarea.selectionEnd = end;
+        }
+
+        function getTextarea(btn) {
+            return $($(btn).attr("data-area"))[0];
+        }
+
+        var commands = {
+            bold: function(textarea) {
+                insertAroundSelection(textarea, "[b]", "[/b]");
+            },
+            italic: function(textarea) {
+                insertAroundSelection(textarea, "[i]", "[/i]");
+            },
+            underline: function(textarea) {
+                insertAroundSelection(textarea, "[u]", "[/u]");
+            },
+            strikethrough: function(textarea) {
+                insertAroundSelection(textarea, "[s]", "[/s]");
+            },
+            sup: function(textarea) {
+                insertAroundSelection(textarea, "[^]", "[/^]");
+            },
+            sub: function(textarea) {
+                insertAroundSelection(textarea, "[_]", "[/_]");
+            },
+            quote: function(textarea) {
+                insertAroundSelection(textarea, "> ", "");
+            },
+            spoiler: function(textarea) {
+                insertAroundSelection(textarea, "[spoiler]", "[/spoiler]");
+            }
+        }
+
+        $("button[data-editor-command]").attr("data-toggle", "tooltip").attr("data-placement", "bottom").click(function() {
+            var command = $(this).attr("data-editor-command");
+            var textarea = getTextarea(this);
+            commands[command](textarea);
+        }).tooltip();
+    });
+</script>
diff --git a/src/application/views/view_topic_start.php b/src/application/views/view_topic_start.php
index d23d0f4..7f62986 100644
--- a/src/application/views/view_topic_start.php
+++ b/src/application/views/view_topic_start.php
@@ -21,7 +21,29 @@ $canDelete = ($GLOBALS["currentUser"]?->id === $topicAuthor->id && $topicAuthor-
                 </div>
                 <div class="modal-body">
                     <label class="sr-only" for="i_edit_message"><?= __("Message:") ?></label>
-                    <textarea class="form-control" name="message" id="i_edit_message" rows="12" style="resize: vertical; max-height: 500px"></textarea>
+                    <div class="panel panel-default">
+                        <div class="panel-heading" style="padding:4px">
+                            <div class="btn-toolbar" role="toolbar">
+                                <div class="btn-group" role="group">
+                                    <button data-area="#i_edit_message" title="<?= __("Bold") ?>" data-editor-command="bold" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-bold"></i></button>
+                                    <button data-area="#i_edit_message" title="<?= __("Italic") ?>" data-editor-command="italic" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-italic"></i></button>
+                                    <button data-area="#i_edit_message" title="<?= __("Underlined") ?>" data-editor-command="underline" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-underline"></i></button>
+                                    <button data-area="#i_edit_message" title="<?= __("Strikethrough") ?>" data-editor-command="strikethrough" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-strikethrough"></i></button>
+                                </div>
+                                <div class="btn-group" role="group">
+                                    <button data-area="#i_edit_message" title="<?= __("Superscript") ?>" data-editor-command="sup" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-superscript"></i></button>
+                                    <button data-area="#i_edit_message" title="<?= __("Subscript") ?>" data-editor-command="sub" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-subscript"></i></button>
+                                </div>
+                                <div class="btn-group" role="group">
+                                    <button data-area="#i_edit_message" title="<?= __("Quote") ?>" data-editor-command="quote" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-quote-left"></i></button>
+                                    <button data-area="#i_edit_message" title="<?= __("Spoiler") ?>" data-editor-command="spoiler" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-eye"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="panel-body" style="padding:0">
+                            <textarea class="form-control" id="i_edit_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:500px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:-1px;width:calc(100% + 2px)"></textarea>
+                        </div>
+                    </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="fa fa-remove" aria-hidden="true"></span> <?= __("Cancel") ?></button>