diff --git a/jest.config.js b/jest.config.js
index c4e8f1c..f26d332 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,6 @@
 process.env.VUE_CLI_BABEL_TARGET_NODE = true;
 process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
-process.env.VUE_APP_CLIENT_ID = "testing_client_id"
+process.env.VUE_APP_CLIENT_ID = 'testing_client_id';
 module.exports = {
   collectCoverage: false,
   collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**', '!**/dist/**'],
@@ -19,6 +19,7 @@ module.exports = {
     '/node_modules/',
   ],
   moduleNameMapper: {
+    '^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
     '^@/(.*)$': '<rootDir>/src/$1',
   },
   snapshotSerializers: [
diff --git a/package-lock.json b/package-lock.json
index a9a42f3..f265d65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1955,6 +1955,23 @@
         }
       }
     },
+    "@toast-ui/editor": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-2.5.1.tgz",
+      "integrity": "sha512-LVNo/YaNItUemEaRFvFAVn7w/0U7yxEheMdn6GEGxqo727rRZD1MH7OTDVq6NeQ+P93VwFpa0i9GGRBhNNEbPQ==",
+      "requires": {
+        "@types/codemirror": "0.0.71",
+        "codemirror": "^5.48.4"
+      }
+    },
+    "@toast-ui/vue-editor": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@toast-ui/vue-editor/-/vue-editor-2.5.1.tgz",
+      "integrity": "sha512-vD0FowDrlMPfR4m1Sd91YthkMLul4lTdiwl1QcDYX+JhIzxXMuQhFABezny/TvKJLxkCkHGpt7XsTjXvMUa04w==",
+      "requires": {
+        "@toast-ui/editor": "^2.5.1"
+      }
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -2012,6 +2029,14 @@
         "@types/node": "*"
       }
     },
+    "@types/codemirror": {
+      "version": "0.0.71",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.71.tgz",
+      "integrity": "sha512-b2oEEnno1LIGKMR7uBEsr40al1UijF1HEpRn0+Yf1xOLl24iQgB7DBpZVMM7y54G5wCNoclDrRO65E6KHPNO2w==",
+      "requires": {
+        "@types/tern": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -2037,6 +2062,11 @@
         "@types/node": "*"
       }
     },
+    "@types/estree": {
+      "version": "0.0.46",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
+      "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg=="
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -2323,6 +2353,14 @@
       "integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==",
       "dev": true
     },
+    "@types/tern": {
+      "version": "0.23.3",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.3.tgz",
+      "integrity": "sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==",
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.9.1",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.1.tgz",
@@ -3521,6 +3559,13 @@
           "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
           "dev": true
         },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true,
+          "optional": true
+        },
         "fast-deep-equal": {
           "version": "3.1.3",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3576,6 +3621,28 @@
             "supports-color": "^7.0.0"
           }
         },
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3756,6 +3823,31 @@
             "punycode": "^2.1.1"
           }
         },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.1.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+              "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            }
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -6644,6 +6736,11 @@
         "q": "^1.1.2"
       }
     },
+    "codemirror": {
+      "version": "5.59.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.59.2.tgz",
+      "integrity": "sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -8116,9 +8213,9 @@
       }
     },
     "dompurify": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.12.tgz",
-      "integrity": "sha512-Fl8KseK1imyhErHypFPA8qpq9gPzlsJ/EukA6yk9o0gX23p1TzC+rh9LqNg1qvErRTc0UNMYlKxEGSfSh43NDg=="
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.6.tgz",
+      "integrity": "sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ=="
     },
     "domutils": {
       "version": "1.7.0",
@@ -9701,8 +9798,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-      "dev": true
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -11023,9 +11119,9 @@
       "dev": true
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
     "inquirer": {
@@ -13835,7 +13931,8 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -18221,104 +18318,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.1.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.1.tgz",
-      "integrity": "sha512-wz/+HFg/3SBayHWAlZXARcnDTl3VOChrfW9YnxvAweiuyKX/7IGx1ad/4yJHmwhgWlOVYMAbTiI7GV8G33PfGQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "emojis-list": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",
diff --git a/package.json b/package.json
index fbb9f7d..b8e1395 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,16 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@toast-ui/editor": "^2.5.1",
+    "@toast-ui/vue-editor": "^2.5.1",
     "axios": "^0.21.1",
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.15.0",
     "chart.js": "^2.8.0",
     "citation-js": "^0.5.0-alpha.9",
+    "codemirror": "^5.59.2",
     "d3": "^5.9.2",
-    "dompurify": "^2.0.12",
+    "dompurify": "^2.2.6",
     "flush-promises": "^1.0.2",
     "jquery": "^3.4.1",
     "marked": "^1.1.1",
diff --git a/src/components/editor/AddReferences.vue b/src/components/editor/AddReferences.vue
index e6a2c31..4b44d11 100644
--- a/src/components/editor/AddReferences.vue
+++ b/src/components/editor/AddReferences.vue
@@ -15,13 +15,13 @@
           :fields="fields"
           responsive="sm"
         >
-          <template #cell(citation)="data">
+          <template #cell(citation_html)="data">
             <span v-html="data.value"></span>
           </template>
           <template #cell(insert)="data">
             <b-icon-plus
               class="pointer"
-              @click="plusClickHandler(items[data.index].DOI)"
+              @click="plusClickHandler(items[data.index].inTextCitation,items[data.index].DOI)"
             />
           </template>
         </b-table>
@@ -42,21 +42,18 @@
               class="search-button"
               size="sm"
               text="Button"
-              :disabled="
-                !doiValid ||
-                createReferenceFlags.loading
-              "
+              :disabled="!doiValid || createReferenceFlags.loading"
               @click="
                 resetFlags();
-                loader(getReferenceInfo, [referenceDoiToCreate])
+                loader(getReferenceInfo, [referenceDoiToCreate]);
               "
               >Create New</b-button
             >
           </b-input-group-append>
         </b-input-group>
         <b-form-invalid-feedback :state="doiValid">
-        The DOI must be this format: 10.XXX/XXXXX
-      </b-form-invalid-feedback>
+          The DOI must be this format: 10.XXX/XXXXX
+        </b-form-invalid-feedback>
         <b-alert
           v-model="createReferenceFlags.notFound"
           dismissible
@@ -78,7 +75,7 @@
         <div v-if="createReferenceFlags.alreadyExists">
           <h5>This reference already exists:</h5>
           <span v-html="citationHTML"></span>
-          <b-button @click="plusClickHandler(referenceDoiToCreate)"
+          <b-button @click="plusClickHandler(inTextCitation, referenceDoiToCreate)"
             >Insert</b-button
           >
         </div>
@@ -103,7 +100,7 @@
             reloading the page.
           </b-alert>
         </div>
-        <b-spinner v-show="createReferenceFlags.loading"/>
+        <b-spinner v-show="createReferenceFlags.loading" />
       </b-card>
     </div>
   </div>
@@ -123,7 +120,7 @@ export default {
   },
   data() {
     return {
-      fields: ['citation', { key: 'insert', label: '' }],
+      fields: [{key: 'citation_html', label:'Citation'}, { key: 'insert', label: '' }],
       items: [],
       createReferenceFlags: {
         alreadyExists: false,
@@ -173,7 +170,7 @@ export default {
       referenceObject.origin_url = this.referenceResponseObject.request.responseURL;
       try {
         await this.createReference(referenceObject);
-        this.plusClickHandler(doi);
+        this.plusClickHandler(this.inTextCitation, doi);
       } catch (e) {
         console.log(e);
         this.createReferenceFlags.creationError = true;
@@ -183,7 +180,9 @@ export default {
       let response = {};
       try {
         response = await this.getSplashReference(doi);
-        this.citationHTML = new Citation(response.data).format('bibliography', CITE_FORMAT);
+        const citation = new Citation(response.data);
+        this.inTextCitation = citation.format('citation');
+        this.citationHTML = citation.format('bibliography', CITE_FORMAT);
         this.createReferenceFlags.alreadyExists = true;
         return;
       } catch (e) {
@@ -195,7 +194,9 @@ export default {
       }
       try {
         response = await this.getDOIFromService(doi);
-        this.citationHTML = new Citation(response.data).format('bibliography', CITE_FORMAT);
+        const citation = new Citation(response.data);
+        this.inTextCitation = citation.format('citation');
+        this.citationHTML = citation.format('bibliography', CITE_FORMAT);
         this.referenceResponseObject = response;
         this.createReferenceFlags.found = true;
       } catch (e) {
@@ -208,13 +209,17 @@ export default {
       }
     },
     updateItems(references) {
-      this.items = references.map((elem) => ({
-        citation: new Citation(elem).format('bibliography', CITE_FORMAT),
-        DOI: elem.DOI,
-      }));
+      this.items = references.map((elem) => {
+        const citation = new Citation(elem);
+        return {
+          inTextCitation: citation.format('citation'),
+          citation_html: citation.format('bibliography', CITE_FORMAT),
+          DOI: elem.DOI,
+        };
+      });
     },
-    plusClickHandler(doi) {
-      this.$emit('clickedRef', doi);
+    plusClickHandler(inTextCitation, doi) {
+      this.$emit('clickedRef', inTextCitation, doi);
     },
   },
   components: {
diff --git a/src/components/editor/EditContent.vue b/src/components/editor/EditContent.vue
index 5b0bd4e..145ebe1 100644
--- a/src/components/editor/EditContent.vue
+++ b/src/components/editor/EditContent.vue
@@ -60,10 +60,10 @@
                 >
               </p>
               <!--This parses the markdown and displays it-->
-              <div
+              <viewer
                 class="user-text"
                 v-if="markdown"
-                v-html="parseText(section[textKey])"
+                :initialValue="section[textKey]"
               />
               <div v-else>{{ section[textKey] }}</div>
             </div>
@@ -76,22 +76,31 @@
                 :readonly="saving"
               />
               <span class="text-muted">{{ valueInputName }}:</span>
+              <editor
+                v-if="markdown"
+                :initialValue="edited_data[textKey]"
+                :options="editorOptions"
+                :ref="`input${index}`"
+                initialEditType="wysiwyg"
+                @change="onContentChange"
+                @focus="focused = true"
+                @blur="focused = false"
+              />
               <b-form-textarea
                 v-model="edited_data[textKey]"
                 max-rows="100"
                 :readonly="saving"
-                :ref="`input${index}`"
-                @focus="focused = true"
-                @blur="focused = false"
+                v-if="!markdown"
               />
+
               <b-button-toolbar>
                 <!--The save button is disabled when the boxes are empty, are not changed, or if the app is in the process of saving-->
                 <b-button
                   variant="primary"
                   @click="emitEdit(index, section)"
                   :disabled="
-                    edited_data[titleKey] === '' ||
                     edited_data[textKey] === '' ||
+                    edited_data[titleKey] === '' ||
                     (edited_data[titleKey] === section[titleKey] &&
                       edited_data[textKey] === section[textKey]) ||
                     saving
@@ -131,7 +140,7 @@
                 <b-modal v-model="insert_reference" ok-only>
                   <add-references
                     :references="items"
-                    @clickedRef="insertReference(arguments[0])"
+                    @clickedRef="insertReference(arguments[0], arguments[1])"
                   />
                 </b-modal>
 
@@ -204,8 +213,19 @@ import AddReferences from '@/components/editor/AddReferences.vue';
 import { BIconPlusCircleFill } from 'bootstrap-vue';
 import Citation from 'citation-js';
 
+import 'codemirror/lib/codemirror.css';
+import '@toast-ui/editor/dist/toastui-editor.css';
+// import '@toast-ui/editor/dist/toastui-editor-viewer.css';
+import { Editor, Viewer } from '@toast-ui/vue-editor';
+
 const CITE_FORMAT = { format: 'html', template: 'apa', lang: 'en-US' };
 export default {
+  components: {
+    'b-icon-plus-circle-fill': BIconPlusCircleFill,
+    'add-references': AddReferences,
+    Editor,
+    Viewer,
+  },
   props: {
     sectionsArray: Array,
     markdown: {
@@ -251,6 +271,31 @@ export default {
   },
   data() {
     return {
+      editorOptions: {
+        usageStatistics: false,
+        // This array contains all default items in toolbar except for images
+        toolbarItems: [
+          'heading',
+          'bold',
+          'italic',
+          'strike',
+          'divider',
+          'hr',
+          'quote',
+          'divider',
+          'ul',
+          'ol',
+          'task',
+          'indent',
+          'outdent',
+          'divider',
+          'table',
+          'link',
+          'divider',
+          'code',
+          'codeblock',
+        ],
+      },
       sections: [],
       currently_edited_index: undefined,
       edited_data: {
@@ -374,6 +419,11 @@ export default {
     this.buildReferences();
   },
   methods: {
+    onContentChange() {
+      this.edited_data[this.textKey] = this.$refs[`input${this.currently_edited_index}`][0].invoke(
+        'getMarkdown',
+      );
+    },
     async getDOIFromService(doi) {
       const response = await this.$doi_service.get(`/${doi}`);
       return response;
@@ -402,18 +452,16 @@ export default {
       // if the data was succesfully saved then the code will execute as normal.
       // if not then this function will throw an error
       // Partly inspired by how this programmer awaits a settimeout https://stackoverflow.com/a/51939030/8903570
-      return new Promise((resolve, reject) =>
-        this.$emit('dataToParent', {
-          data,
-          callback: (success) => {
-            if (success) {
-              resolve();
-            } else {
-              reject();
-            }
-          },
-        }),
-      );
+      return new Promise((resolve, reject) => this.$emit('dataToParent', {
+        data,
+        callback: (success) => {
+          if (success) {
+            resolve();
+          } else {
+            reject();
+          }
+        },
+      }));
     },
     async emitEdit(indexChanged, originalSection) {
       try {
@@ -431,29 +479,11 @@ export default {
       }
     },
 
-    // adapted from https://forum.vuejs.org/t/vuejs-vuetify-add-some-text-to-focus-position-on-textarea/33279/4
-    async insertReference(doi) {
-      console.log(doi);
-      const referenceLink = `[[reference]](#${doi})`;
-      const textArea = this.$refs[`input${this.currently_edited_index}`][0];
-      console.log(textArea);
-      textArea.focus();
-      const startPos = textArea.selectionStart;
-      // get cursor's position:
-      let cursorPos = startPos;
-      const tmpStr = textArea.value;
 
-      // insert:
-      this.edited_data[this.textKey] = `${tmpStr.substring(
-        0,
-        startPos,
-      )}${referenceLink}${tmpStr.substring(startPos, tmpStr.length)}`;
-
-      // move cursor:
-      await this.$nextTick();
-      cursorPos += referenceLink.length;
-      textArea.selectionStart = cursorPos;
-      textArea.selectionEnd = cursorPos;
+    async insertReference(text, doi) {
+      console.log(doi);
+      const editor = this.$refs[`input${this.currently_edited_index}`][0];
+      editor.invoke('exec', 'AddLink', { linkText: text, url: `#${doi}` });
       this.insert_reference = false;
     },
     addSection(index) {
@@ -489,8 +519,8 @@ export default {
     },
     extractReferences(text) {
       const doiRefs = [];
-      // The regex here matches this pattern: [[reference]](#url goes here)
-      const matches = [...text.matchAll(/\[\[reference\]\]\(#([^\s].*?)\)/g)];
+      // The regex here matches this pattern: [(citation goes here)](#url goes here)
+      const matches = [...text.matchAll(/\[\([^\s].*\)\]\(#([^\s].*?)\)/g)];
       matches.forEach((match) => {
         const doiRef = match[1];
         if (!this.isDoiFormat(doiRef)) {
@@ -570,7 +600,7 @@ export default {
         this.sections.splice(index, 1);
       }
     },
-    parseText(htmlText) {
+    /* parseText(htmlText) {
       const { referencesCount } = this;
       const renderer = {
         link(href, title, text) {
@@ -587,11 +617,7 @@ export default {
         },
       };
       return utils.parseMarkDown(htmlText, renderer);
-    },
-  },
-  components: {
-    'b-icon-plus-circle-fill': BIconPlusCircleFill,
-    'add-references': AddReferences,
+    }, */
   },
 };
 </script>
diff --git a/tests/unit/components/editor/EditContent.spec.js b/tests/unit/components/editor/EditContent.spec.js
index 982ff04..6f15e82 100644
--- a/tests/unit/components/editor/EditContent.spec.js
+++ b/tests/unit/components/editor/EditContent.spec.js
@@ -122,7 +122,7 @@ describe('EditContent component', () => {
     await wrapper.vm.$nextTick();
     const dangerMD = wrapper.findAll('.user-text').at(0);
     // Test to ensure that it is stripped of the script tag
-    expect(dangerMD.html()).toBe('<div class="user-text">\n  <p>DANGEROUS MARKDOWN</p>\n</div>');
+    expect(dangerMD.html()).toBe('<div class="user-text">\n  <div class="tui-editor-contents">\n    <p>DANGEROUS MARKDOWN</p>\n  </div>\n</div>');
   });
 
   /* it('emits correctly when save is pressed', async () => {