Add markdown helper buttons

static/script.js

@@ -73,3 +73,49 @@ if (previewButton) {
     );
   });
 }
+
+document.querySelectorAll('[data-editor-helper]').forEach((helperBtn) => {
+  helperBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+
+    const textarea = document.querySelector('[name=body]');
+    const currentValue = textarea.value;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+
+    const leftChunk = currentValue.substring(0, start);
+    const rightChunk = currentValue.substring(end, textarea.value.length);
+
+    let insertion = '';
+    let startOffset = 0;
+    let endOffset = 0;
+    switch (e.target.dataset.editorHelper) {
+      case 'bold':
+        insertion = '****';
+        startOffset = 2;
+        endOffset = 2;
+        break;
+      case 'italic':
+        insertion = '__';
+        startOffset = 1;
+        endOffset = 1;
+        break;
+      case 'link':
+        insertion = '[text](url)';
+        startOffset = 1;
+        endOffset = 5;
+        break;
+      case 'code':
+        insertion = '```js\n```'
+        startOffset = 3;
+        endOffset = 5;
+    }
+
+    textarea.value = leftChunk + insertion + rightChunk;
+
+    textarea.focus();
+    textarea.selectionStart = start + startOffset;
+    textarea.selectionEnd = end + endOffset;
+  })
+});

static/style.css

@@ -171,6 +171,7 @@ a:hover {
 .post__body pre {
   background: var(--off-white);
   border: 1px solid var(--dark-accent);
+  margin: 1em 0;
   overflow: scroll;
   padding: 0.5em;
 }
@@ -211,6 +212,14 @@ a:hover {
   margin: 1em 0;
 }
 
+.editor-helpers {
+  margin-bottom: 0.5em;
+}
+
+.editor-helpers .btn {
+  font-size: 14px;
+}
+
 @media (max-width: 500px) {
   .form__button {
     width: 100%;

templates/components.html

@@ -49,6 +49,12 @@
     </div>
     <div class="form__field">
       <label for="body" class="form__label">Body</label>
+      <div class="editor-helpers">
+        <button class="btn" data-editor-helper="bold">bold</button>
+        <button class="btn" data-editor-helper="italic">italic</button>
+        <button class="btn" data-editor-helper="link">link</button>
+        <button class="btn" data-editor-helper="code">code</button>
+      </div>
       <textarea
         class="form__textarea"
         name="body"