From ff149d2b8b0b9d950f24b97f67ee6313c197955f Mon Sep 17 00:00:00 2001
From: Alex Holovin <alex@holov.in>
Date: Wed, 15 Mar 2023 16:42:18 +0100
Subject: [PATCH 1/3] Comment attachment (pc+mobile/light+dark themes
 supported)

---
 frontend/html/comments/edit.html              |  9 +-
 frontend/html/comments/forms/battle.html      | 10 +-
 frontend/html/comments/forms/comment.html     | 13 ++-
 frontend/html/comments/forms/reply.html       |  9 +-
 frontend/static/css/base.css                  |  8 +-
 frontend/static/css/components/comments.css   | 98 +++++++++++++++++++
 frontend/static/css/components/select.css     |  2 +-
 frontend/static/css/layout.css                |  2 +-
 frontend/static/css/theme.css                 | 15 ++-
 .../js/codemirror-4.inline-attachment.js      | 18 ++--
 .../js/components/CommentMarkdownEditor.vue   | 97 ++++++++++++++++--
 frontend/static/js/inline-attachment.js       | 19 ++++
 12 files changed, 261 insertions(+), 39 deletions(-)

diff --git a/frontend/html/comments/edit.html b/frontend/html/comments/edit.html
index 1c6f28c5f..8a565f1a0 100644
--- a/frontend/html/comments/edit.html
+++ b/frontend/html/comments/edit.html
@@ -9,14 +9,17 @@
                     <div class="avatar"><img src="{% if form.instance.author.avatar %}{{ form.instance.author.get_avatar }}{% else %}{{ me.get_avatar }}{% endif %}" alt="Аватар" /></div>
                 </div>
                 <div class="comment-form-body">
-                    <comment-markdown-editor post-slug="{{ post.slug }}">
+                    <comment-markdown-editor
+                        post-slug="{{ post.slug }}"
+                        submit-label="Сохранить"
+                    >
                         {{ form.text }}
                     </comment-markdown-editor>
                     {% if form.text.errors %}<span class="form-errors">{{ form.full_name.errors }}</span>{% endif %}
                 </div>
-                <div class="comment-form-footer">
+                <noscript class="comment-form-footer" inline-template>
                     <button type="submit" class="button">Сохранить</button>
-                </div>
+                </noscript>
             </div>
         </form>
     </div>
diff --git a/frontend/html/comments/forms/battle.html b/frontend/html/comments/forms/battle.html
index d7f6e84e3..56ec3cf39 100644
--- a/frontend/html/comments/forms/battle.html
+++ b/frontend/html/comments/forms/battle.html
@@ -13,16 +13,20 @@
                 </select>
             </div>
             <div class="comment-form-body-title">{{ form.title }}</div>
-            <comment-markdown-editor class="comment-form-body-text" post-slug="{{ post.slug }}">
+            <comment-markdown-editor
+                class="comment-form-body-text"
+                post-slug="{{ post.slug }}"
+                submit-label="Отправить"
+            >
                 {{ form.text }}
             </comment-markdown-editor>
             {% if form.text.errors %}<span class="form-errors">{{ form.full_name.errors }}</span>{% endif %}
         </div>
-        <div class="comment-form-footer">
+        <noscript class="comment-form-footer" inline-template>
             <div class="comment-form-subscribe">
                 {{ form.subscribe_to_post }} {{ form.subscribe_to_post.label_tag }}
             </div>
             <button type="submit" class="button comment-form-button">Отправить</button>
-        </div>
+        </noscript>
     </div>
 </form>
diff --git a/frontend/html/comments/forms/comment.html b/frontend/html/comments/forms/comment.html
index 75a8e7b23..49e72fc24 100644
--- a/frontend/html/comments/forms/comment.html
+++ b/frontend/html/comments/forms/comment.html
@@ -5,16 +5,23 @@
             <div class="avatar"><img src="{{ me.get_avatar }}" alt="Аватар {{ me.full_name }}" loading="lazy" /></div>
         </div>
         <div class="comment-form-body">
-            <comment-markdown-editor class="comment-form-body-text" post-slug="{{ post.slug }}">
+
+            <comment-markdown-editor
+                class="comment-form-body-text"
+                submit-label="Отправить"
+                subscribe-value="{{ form.subscribe_to_post.value|default_if_none:'' }}"
+                subscribe-label="{{ form.subscribe_to_post.label }}"
+                subscribe-form-name="{{ form.subscribe_to_post.name }}"
+            >
                 {{ form.text }}
             </comment-markdown-editor>
             {% if form.text.errors %}<span class="form-errors">{{ form.full_name.errors }}</span>{% endif %}
         </div>
-        <div class="comment-form-footer">
+        <noscript class="comment-form-footer" inline-template>
             <div class="comment-form-subscribe">
                 {{ form.subscribe_to_post }} {{ form.subscribe_to_post.label_tag }}
             </div>
             <button type="submit" class="button comment-form-button">Отправить</button>
-        </div>
+        </noscript>
     </div>
 </form>
diff --git a/frontend/html/comments/forms/reply.html b/frontend/html/comments/forms/reply.html
index c79894982..5d2e6f90d 100644
--- a/frontend/html/comments/forms/reply.html
+++ b/frontend/html/comments/forms/reply.html
@@ -6,7 +6,10 @@
         </div>
 
         <div class="reply-form-body">
-            <comment-markdown-editor post-slug="{{ post.slug }}">
+            <comment-markdown-editor
+                post-slug="{{ post.slug }}"
+                submit-label="Отправить"
+            >
                 {{ reply_form.text }}
             </comment-markdown-editor>
             {% if reply_form.text.errors %}<span class="form-errors">{{ reply_form.full_name.errors }}</span>{% endif %}
@@ -14,8 +17,8 @@
 
         <input type="hidden" name="reply_to_id" value="{{ comment.id }}">
 
-        <div class="reply-form-button">
+        <noscript class="reply-form-button" inline-template>
             <button type="submit" class="button button-small">Отправить</button>
-        </div>
+        </noscript>
     </div>
 </form>
diff --git a/frontend/static/css/base.css b/frontend/static/css/base.css
index 660a09c5f..1e5c76483 100644
--- a/frontend/static/css/base.css
+++ b/frontend/static/css/base.css
@@ -150,7 +150,7 @@
     cursor: pointer;
 }
 
-.button {
+.button, .comment-markdown-editor .submit {
     display: inline-block;
     padding: 15px 18px;
     box-sizing: border-box;
@@ -169,18 +169,18 @@
         border-radius: 50%;
     }
 
-    .button:hover {
+    .button:hover, .comment-markdown-editor .submit:hover {
         color: var(--button-hover-color);
         background-color: var(--button-hover-bg-color);
         border: var(--button-hover-border);
     }
 
-    .button:disabled {
+    .button:disabled, .comment-markdown-editor .submit:disabled {
         background-color: var(--button-disabled-bg-color);
         border-color: var(--button-disabled-bg-color);
     }
 
-    .button:disabled:hover {
+    .button:disabled:hover, .comment-markdown-editor .submit:disabled:hover {
         color: var(--button-color);
         background-color: var(--button-disabled-bg-color);
         border-color: var(--button-disabled-bg-color);
diff --git a/frontend/static/css/components/comments.css b/frontend/static/css/components/comments.css
index e7a24774f..0539581ca 100644
--- a/frontend/static/css/components/comments.css
+++ b/frontend/static/css/components/comments.css
@@ -628,6 +628,104 @@
     position: relative;
 }
 
+    .comment-markdown-editor .EasyMDEContainer {
+        display: flex;
+        flex-direction: column-reverse;
+        border-radius: 4px;
+        border: 1px solid var(--input-border-color);
+        overflow: hidden;
+        box-shadow: var(--input-shadow);
+        resize: vertical;
+    }
+
+    .comment-markdown-editor .EasyMDEContainer .CodeMirror {
+        flex-grow: 1;
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+        resize: none;
+    }
+
+    .comment-markdown-editor .editor-toolbar {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap-reverse;
+        z-index: 1;
+        gap: 10px 10px;
+        padding: 20px 15px 15px;
+        background: var(--input-bg-color);
+        box-shadow: none;
+        border-radius: 0;
+    }
+
+    .comment-markdown-editor .editor-toolbar button:hover {
+        transform: none;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tsubmit {
+        margin-left: auto;
+        height: auto;
+        width: auto;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tbutton {
+        border: none;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tbutton {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--input-toolbar-button-bg);
+        border-radius: calc(var(--button-border-radius)/2);
+        color: var(--input-toolbar-button-color);
+        border: 1px solid transparent;
+        height: 36px;
+        width: 36px;
+        padding: 0 12px;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tbutton:hover {
+        color: var(--button-hover-color);
+        background-color: var(--button-hover-bg-color);
+        border: var(--button-hover-border);
+        border-width: 1px;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tcheckbox {
+        white-space: nowrap;
+        width: auto;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tcheckbox::before {
+        display: inline-block;
+        font-family: "Font Awesome 5 Free";
+        font-weight: normal;
+        content: "\f0c8";
+        margin-right: 4px;
+        color: var(--input-toolbar-button-color);
+        line-height: 1;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tcheckbox.checked::before {
+        content: "\f14a";
+    }
+
+    @media only screen and (max-width : 767px) {
+        .comment-markdown-editor .editor-toolbar .tcheckbox {
+            align-items: flex-end;
+            justify-content: flex-start;
+            order: 1;
+            width: 100%;
+            padding: 0;
+            background: transparent;
+        }
+
+        .comment-markdown-editor .editor-toolbar .tcheckbox:hover {
+            border-color: transparent;
+        }
+    }
+
 .mention-autocomplete-hint {
     position: absolute;
     min-width: 100px;
diff --git a/frontend/static/css/components/select.css b/frontend/static/css/components/select.css
index 1cc7f338f..dbb04f340 100644
--- a/frontend/static/css/components/select.css
+++ b/frontend/static/css/components/select.css
@@ -16,7 +16,7 @@
     --vs-input-margin: 4px 2px;
 
     /* Copied from theme.css */
-    --vs-dropdown-box-shadow: 0 4px 8px -2px rgba(9,30,66,.25),0 0 0 1px rgba(9,30,66,.08);
+    --vs-dropdown-box-shadow: var(--input-shadow);
 }
 
 
diff --git a/frontend/static/css/layout.css b/frontend/static/css/layout.css
index 313aaa4ae..360f6ea7c 100644
--- a/frontend/static/css/layout.css
+++ b/frontend/static/css/layout.css
@@ -331,7 +331,7 @@
 
 .reply-form {
     display: grid;
-    grid-template-columns: 40px auto 110px;
+    grid-template-columns: 40px auto 40px;
     justify-content: stretch;
 }
 
diff --git a/frontend/static/css/theme.css b/frontend/static/css/theme.css
index a2497f196..f29d8e79f 100644
--- a/frontend/static/css/theme.css
+++ b/frontend/static/css/theme.css
@@ -13,6 +13,8 @@
     --button-hover-border: solid 2px #333;
 
     --badge-color: rgba(255, 196, 85, 0.91);
+
+    --input-shadow: 0 4px 8px -2px rgba(9,30,66,.25),0 0 0 1px rgba(9,30,66,.08);
 }
 
 html, html[theme="light"] {
@@ -47,7 +49,8 @@ html, html[theme="light"] {
     --input-bg-color: #fff;
     --input-border-color: #ddd;
     --input-toolbar-bg: #fff;
-    --input-toolbar-button-color: #000;
+    --input-toolbar-button-bg: #F5F5F5;
+    --input-toolbar-button-color: #333;
     --input-link: #7f8c8d;
     --input-selection-color: #d7d4f0;
 }
@@ -84,7 +87,8 @@ html[theme="dark"] {
     --input-bg-color: #373c48;
     --input-border-color: #333;
     --input-toolbar-bg: #252a35;
-    --input-toolbar-button-color: #fff;
+    --input-toolbar-button-bg: #252a35;
+    --input-toolbar-button-color: #DDD;
     --input-link: #b3b6ff;
     --input-selection-color: #978fd8;
 }
@@ -116,6 +120,9 @@ html[theme="dark"] {
     }
 }
 
+select, input, textarea {
+  font-size: 16px;
+}
 body {
     font-family: var(--sans-font);
     font-size: 15px;
@@ -193,7 +200,7 @@ select,
 {
     -webkit-appearance: none;
     border: none;
-    box-shadow: 0 4px 8px -2px rgba(9,30,66,.25),0 0 0 1px rgba(9,30,66,.08);
+    box-shadow: var(--input-shadow);
     outline: none;
     padding: 8px 15px;
     resize: vertical;
@@ -212,7 +219,7 @@ select,
 
         .editor-toolbar {
             border: none;
-            box-shadow: 0 4px 8px -2px rgba(9,30,66,.25), 0 0 0 1px rgba(9,30,66,.08);
+            box-shadow: var(--input-shadow);
             background: var(--input-toolbar-bg);
         }
 
diff --git a/frontend/static/js/codemirror-4.inline-attachment.js b/frontend/static/js/codemirror-4.inline-attachment.js
index f4aed60e9..0cedc386c 100644
--- a/frontend/static/js/codemirror-4.inline-attachment.js
+++ b/frontend/static/js/codemirror-4.inline-attachment.js
@@ -8,7 +8,7 @@
 (function () {
     "use strict";
 
-    var codeMirrorEditor = function (instance) {
+    const codeMirrorEditor = function (instance) {
         if (!instance.getWrapperElement) {
             throw "Invalid CodeMirror object given";
         }
@@ -59,27 +59,27 @@
         });
     };
 
-    var codeMirrorEditor4 = function (instance) {
+    const codeMirrorEditor4 = function(instance) {
         codeMirrorEditor.call(this, instance);
     };
 
-    codeMirrorEditor4.attach = function (codeMirror, options) {
+    codeMirrorEditor4.attach = function (codeMirror, options, fileInputEl) {
         options = options || {};
 
-        var editor = new codeMirrorEditor(codeMirror),
-            inlineattach = new inlineAttachment(options, editor),
-            el = codeMirror.getWrapperElement();
+        const editor = new codeMirrorEditor(codeMirror);
+        const inlineAttach = new inlineAttachment(options, editor);
+        const el = codeMirror.getWrapperElement();
 
         el.addEventListener(
             "paste",
             function (e) {
-                inlineattach.onPaste(e);
+                inlineAttach.onPaste(e);
             },
             false
         );
 
         codeMirror.on("drop", function (data, e) {
-            if (inlineattach.onDrop(e)) {
+            if (inlineAttach.onDrop(e)) {
                 e.stopPropagation();
                 e.preventDefault();
                 return true;
@@ -87,6 +87,8 @@
                 return false;
             }
         });
+
+        fileInputEl && fileInputEl.addEventListener("change", (e) => inlineAttach.onFileInputChange(e));
     };
 
     inlineAttachment.editors.codemirror4 = codeMirrorEditor4;
diff --git a/frontend/static/js/components/CommentMarkdownEditor.vue b/frontend/static/js/components/CommentMarkdownEditor.vue
index 871b67221..868b367ba 100644
--- a/frontend/static/js/components/CommentMarkdownEditor.vue
+++ b/frontend/static/js/components/CommentMarkdownEditor.vue
@@ -1,6 +1,27 @@
 <template>
     <div class="comment-markdown-editor">
         <slot></slot>
+
+        <div v-show="false">
+            <input
+                ref="input"
+                type="file"
+                multiple accept="image/*"
+            />
+
+            <input
+                v-if="subscribeFormName"
+                :name="subscribeFormName"
+                type="checkbox"
+                :checked="subscribeFormValue"
+            />
+
+            <button
+                ref="submit"
+                type="submit"
+            />
+        </div>
+
         <div
             class="mention-autocomplete-hint"
             v-show="users.length > 0"
@@ -23,21 +44,74 @@
 
 <script>
 import { isMobile, throttle } from "../common/utils";
-import { createMarkdownEditor, handleFormSubmissionShortcuts, imageUploadOptions } from "../common/markdown-editor";
+import { createMarkdownEditor, imageUploadOptions } from "../common/markdown-editor";
 
 export default {
+    props: {
+        submitLabel: {
+            type: String,
+            required: true,
+        },
+        subscribeValue: {
+            type: Boolean,
+            required: false,
+        },
+        subscribeLabel: {
+            type: String,
+            required: false,
+        },
+        subscribeFormName: {
+            type: String,
+            required: false,
+        }
+    },
     mounted() {
-        if (isMobile()) {
-            return;
+        const $markdownElementDiv = this.$el.children[0];
+        const toolbar = [
+                {
+                    name: 'attach',
+                    action: () => {
+                        this.$refs.input.click();
+                    },
+                    className: 'tbutton fas fa-image',
+                    title: "Прикрепить..."
+                },
+                {
+                    name: 'submit',
+                    action: () => {
+                        this.$refs.submit.click();
+                    },
+                    className: 'tsubmit',
+                },
+            ];
+
+        if (this.subscribeFormName) {
+            // Add subscribe button next to attach
+            toolbar.splice(1, 0,
+                {
+                    name: 'subscribe',
+                    action: (editor) => {
+                        this.toggleSubscribe(editor);
+                    },
+                    className: 'tbutton tcheckbox',
+                },
+            );
         }
 
-        const $markdownElementDiv = this.$el.children[0];
-        this.editor = createMarkdownEditor($markdownElementDiv, {
-            toolbar: false,
-        });
+        this.editor = createMarkdownEditor($markdownElementDiv, { toolbar });
+        this.editor.toolbarElements.submit.innerHTML = this.submitLabel;
+        if (this.subscribeFormName) {
+            this.editor.toolbarElements.subscribe.innerHTML = this.subscribeLabel;
 
-        this.editor.element.form.addEventListener("keydown", handleFormSubmissionShortcuts);
-        inlineAttachment.editors.codemirror4.attach(this.editor.codemirror, imageUploadOptions);
+            if (this.subscribeFormValue) {
+                this.editor.toolbarElements.subscribe.classList.toggle('checked');
+            }
+        }
+
+        inlineAttachment.editors.codemirror4.attach(this.editor.codemirror, imageUploadOptions, this.$refs.input);
+        if (isMobile()) {
+            return;
+        }
 
         this.editor.codemirror.on("change", this.handleAutocompleteHintTrigger);
         this.editor.codemirror.on("change", this.handleSuggest);
@@ -64,9 +138,14 @@ export default {
                 samples: {},
                 users: {},
             },
+            subscribeFormValue: !!this.subscribeValue
         };
     },
     methods: {
+        toggleSubscribe() {
+            this.subscribeFormValue = !this.subscribeFormValue;
+            this.editor.toolbarElements.subscribe.classList.toggle('checked');
+        },
         handleKeydown(event) {
             if (
                 event.code !== "ArrowDown" &&
diff --git a/frontend/static/js/inline-attachment.js b/frontend/static/js/inline-attachment.js
index 6e0b00856..32f8acbc9 100644
--- a/frontend/static/js/inline-attachment.js
+++ b/frontend/static/js/inline-attachment.js
@@ -393,5 +393,24 @@
         return result;
     };
 
+    /**
+     * Called when input[type="file"] onChange event occurs
+     * @param  {Event} e
+     * @return {Boolean} if the event was handled
+     */
+    inlineAttachment.prototype.onFileInputChange = function(e) {
+        var result = false;
+        for (var i = 0; i < e.target.files.length; i++) {
+            var file = e.target.files[i];
+            if (this.isFileAllowed(file)) {
+                result = true;
+                this.onFileInserted(file);
+                this.uploadFile(file);
+            }
+        }
+
+        return result;
+    };
+
     window.inlineAttachment = inlineAttachment;
 })(document, window);

From 3b42592c4df26f88fa55efe7679651dee2c21154 Mon Sep 17 00:00:00 2001
From: Alex Holovin <alex@holov.in>
Date: Wed, 15 Mar 2023 17:06:34 +0100
Subject: [PATCH 2/3] Fix margin between comment form and rules (only for vue
 component comment)

---
 frontend/static/css/layout.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/static/css/layout.css b/frontend/static/css/layout.css
index 360f6ea7c..28dedf0df 100644
--- a/frontend/static/css/layout.css
+++ b/frontend/static/css/layout.css
@@ -272,7 +272,7 @@
 .comment-form {
     display: grid;
     grid-template-columns: min-content minmax(auto, 1fr);
-    grid-template-rows: auto 60px;
+    grid-template-rows: auto;
     justify-content: stretch;
 }
 
@@ -302,6 +302,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        margin-top: 12px;
     }
 
     .comment-form-body {

From ca100f4414dc30e66bbf2df079f9f4ce7602a96d Mon Sep 17 00:00:00 2001
From: Alex Holovin <alex@holov.in>
Date: Wed, 15 Mar 2023 18:03:56 +0100
Subject: [PATCH 3/3] Fix clickable area animation

---
 frontend/static/css/components/comments.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/static/css/components/comments.css b/frontend/static/css/components/comments.css
index 0539581ca..545258b3f 100644
--- a/frontend/static/css/components/comments.css
+++ b/frontend/static/css/components/comments.css
@@ -717,7 +717,8 @@
             justify-content: flex-start;
             order: 1;
             width: 100%;
-            padding: 0;
+            padding: 6px;
+            margin: 0 -6px;
             background: transparent;
         }