From 3bb299504374303d7b6b564681f1407d27f7b28e Mon Sep 17 00:00:00 2001 From: Sebastian Korotkiewicz Date: Tue, 7 Jul 2020 20:36:16 +0200 Subject: [PATCH] markdown toolbar for textarea --- public/comments/comments.css | 41 +++++++++++++- public/comments/comments.js | 105 ++++++++++++++++++++++++++++++----- vercel.json | 13 +---- 3 files changed, 134 insertions(+), 25 deletions(-) diff --git a/public/comments/comments.css b/public/comments/comments.css index 5fcd43a..b1da765 100644 --- a/public/comments/comments.css +++ b/public/comments/comments.css @@ -331,4 +331,43 @@ font-size: 14px; white-space: normal; padding: 1px 5px; -} \ No newline at end of file +} + + + +#kucos-root #markdown-editor #toolbar { + overflow: hidden; + margin-top: 20px; + margin-bottom: -20px; + width: 100%; +} +#kucos-root #markdown-editor #toolbar button { + border: 1px solid transparent; + background-color: #f6f6f6; + border-radius: 5px; + color: #555555; + font-family: sans-serif; + font-size: 0.8rem; + cursor: pointer; + padding: 0.2rem; + min-width: 30px; +} +#kucos-root #markdown-editor #toolbar button:hover, +#kucos-root #markdown-editor #toolbar button.active { + border: 1px solid #c5c5c5; + color: rgb(100, 100, 100); + background-color: #f0f0f0; + border-radius: 5px; + outline: 0px; +} +#kucos-root #markdown-editor #toolbar button:focus { + outline: none; +} +#kucos-root #markdown-editor #input-output #input-area:focus, +#kucos-root #markdown-editor #input-output #input-area:active { + outline: 0px; +} + +#input-area { + width: 100% +} diff --git a/public/comments/comments.js b/public/comments/comments.js index e6613d8..99e0e49 100644 --- a/public/comments/comments.js +++ b/public/comments/comments.js @@ -7,6 +7,7 @@ class Comments { bindEvents = () => { this.on(document.getElementById("submitComment"), 'click', this.postComment); this.on(document.getElementById("commentsArea"), 'click', this.commentsArea); + this.on(document.getElementById("toolbar"), 'click', this.toolbar); }; on = (element, event, func) => { @@ -253,17 +254,30 @@ class Comments { } let formArea = ` -
- -
- - - - - ${input} -
-
`; - +
+
+ + + + + + + +
+
+
+ +
+ + + + + ${input} +
+
+
+
`; + return formArea; }; @@ -278,9 +292,9 @@ class Comments { if (event.target.nodeName === 'A' || event.target.nodeName === 'BUTTON' || event.target.nodeName === 'LABEL') { let parts = event.target.id.split("-"); - let type = parts[0]; - let id = parts[parts.length-1]; - let eid = event.target.id.split("reply-")[1]; + let type = parts[0]; + let id = parts[1]; + let toolbar = parts[2]; let prevChild = document.getElementById(`childlist-${id}`); if (type == 'reply' || type == 'edit') { @@ -325,12 +339,75 @@ class Comments { this.vote(id, type); } else if(type == 'checker') { document.getElementById("checker-" + id).checked = true; + } else if( toolbar == "t" && id ) { + this.toolbar(null, type, "comment-area-"+id) } } }; + toolbar = (event=null, button, area) => { + + if (event) { + let parts = event.target.id.split("-"); + button = parts[0]; + var textarea = document.getElementById( 'comment-area' ); + } else { + var textarea = document.getElementById( area ); + } + + if (button == "bold") { + insertText( textarea, '****', 'bold', 2, 6 ) + + } else if (button == "italic") { + insertText( textarea, '__', 'italic', 1, 7 ) + + } else if (button == "quote") { + insertText( textarea, '\n>', ' quote\n', 3, 8 ) + + } else if (button == "link") { + insertText( textarea, '[](http://...)', 'url text', 1, 9 ) + + } else if (button == "code") { + insertText( textarea, '``', 'code', 1, 5 ) + + } else if (button == "spoiler") { + insertText( textarea, '\n!', ' spoiler\n', 3, 10 ) + + } else if (button == "delete") { + insertText( textarea, '~~~~', 'delete text', 2, 13 ) + + } + + function insertText( textarea, syntax, placeholder = 'demo', selectionStart = 0, selectionEnd = 0 ) { + // Current Selection + const currentSelectionStart = textarea.selectionStart; + const currentSelectionEnd = textarea.selectionEnd; + const currentText = textarea.value; + + if( currentSelectionStart === currentSelectionEnd ) { + const textWithSyntax = textarea.value = currentText.substring( 0, currentSelectionStart ) + syntax + currentText.substring( currentSelectionEnd ); + textarea.value = textWithSyntax.substring( 0, currentSelectionStart + selectionStart ) + placeholder + textWithSyntax.substring( currentSelectionStart + selectionStart ) + + textarea.focus(); + textarea.selectionStart = currentSelectionStart + selectionStart; + textarea.selectionEnd = currentSelectionEnd + selectionEnd; + } else { + const selectedText = currentText.substring( currentSelectionStart, currentSelectionEnd ); + const withoutSelection = currentText.substring( 0, currentSelectionStart ) + currentText.substring( currentSelectionEnd ); + const textWithSyntax = withoutSelection.substring( 0, currentSelectionStart ) + syntax + withoutSelection.substring( currentSelectionStart ); + + // Surround selected text + textarea.value = textWithSyntax.substring( 0, currentSelectionStart + selectionStart ) + selectedText + textWithSyntax.substring( currentSelectionStart + selectionStart ); + + textarea.focus(); + textarea.selectionEnd = currentSelectionEnd + selectionStart + selectedText.length; + } + } + + }; + request = async (body=null, method, param) => { let kucosServerUrl = "http://localhost:3000"; diff --git a/vercel.json b/vercel.json index 28a829b..3813da0 100644 --- a/vercel.json +++ b/vercel.json @@ -1,13 +1,6 @@ { "name": "kucos", "version": 2, - "builds": [ - { "src": "/public/min/**", "use": "@now/static" }, - { "src": "/index.js", "use": "@now/node-server" } - ], - "routes": [ - { "src": "/min/(.*)", "dest": "/public/min/$1" }, - { "src": "/(.*)", "dest": "/index.js" } - ] -} - + "builds": [{ "src": "index.js", "use": "@vercel/node" }], + "routes": [{ "src": "/(.*)", "dest": "/index.js" }] +} \ No newline at end of file