diff --git a/docs/content/page/index.en-us.md b/docs/content/page/index.en-us.md
index 98d61576f3d10..583413123959b 100644
--- a/docs/content/page/index.en-us.md
+++ b/docs/content/page/index.en-us.md
@@ -276,7 +276,6 @@ Windows, on architectures like amd64, i386, ARM, PowerPC, and others.
   * [DropzoneJS](http://www.dropzonejs.com/)
   * [Highlight](https://highlightjs.org/)
   * [Clipboard](https://zenorocha.github.io/clipboard.js/)
-  * [CodeMirror](https://codemirror.net/)
   * [jQuery MiniColors](https://github.com/claviska/jquery-minicolors)
 * Database drivers:
   * [github.com/go-sql-driver/mysql](https://github.com/go-sql-driver/mysql)
diff --git a/docs/content/page/index.fr-fr.md b/docs/content/page/index.fr-fr.md
index 17e22e8b593cd..fcabc87bc8dc1 100755
--- a/docs/content/page/index.fr-fr.md
+++ b/docs/content/page/index.fr-fr.md
@@ -263,7 +263,6 @@ Le but de ce projet est de fournir de la manière la plus simple, la plus rapide
   * [DropzoneJS](http://www.dropzonejs.com/)
   * [Highlight](https://highlightjs.org/)
   * [Clipboard](https://zenorocha.github.io/clipboard.js/)
-  * [CodeMirror](https://codemirror.net/)
   * [jQuery MiniColors](https://github.com/claviska/jquery-minicolors)
 * Connecteurs de base de données :
   * [github.com/go-sql-driver/mysql](https://github.com/go-sql-driver/mysql)
diff --git a/docs/content/page/index.zh-cn.md b/docs/content/page/index.zh-cn.md
index cb6a1da793fc4..7b93564dfa736 100644
--- a/docs/content/page/index.zh-cn.md
+++ b/docs/content/page/index.zh-cn.md
@@ -56,7 +56,6 @@ Gitea的首要目标是创建一个极易安装，运行非常快速，安装和
   * [DropzoneJS](http://www.dropzonejs.com/)
   * [Highlight](https://highlightjs.org/)
   * [Clipboard](https://zenorocha.github.io/clipboard.js/)
-  * [CodeMirror](https://codemirror.net/)
   * [jQuery MiniColors](https://github.com/claviska/jquery-minicolors)
 * 数据库驱动：
   * [github.com/go-sql-driver/mysql](https://github.com/go-sql-driver/mysql)
diff --git a/docs/content/page/index.zh-tw.md b/docs/content/page/index.zh-tw.md
index 488dac16ad578..d096de1894a83 100644
--- a/docs/content/page/index.zh-tw.md
+++ b/docs/content/page/index.zh-tw.md
@@ -275,7 +275,6 @@ Gitea 是從 [Gogs](http://gogs.io) Fork 出來的，請閱讀部落格文章 [G
   - [DropzoneJS](http://www.dropzonejs.com/)
   - [Highlight](https://highlightjs.org/)
   - [Clipboard](https://zenorocha.github.io/clipboard.js/)
-  - [CodeMirror](https://codemirror.net/)
   - [jQuery MiniColors](https://github.com/claviska/jquery-minicolors)
 - 資料庫驅動程式：
   - [github.com/go-sql-driver/mysql](https://github.com/go-sql-driver/mysql)
diff --git a/package-lock.json b/package-lock.json
index 3777c6b72d4fd..d17e3a31b79a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -574,6 +574,11 @@
         }
       }
     },
+    "@github/markdown-toolbar-element": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-1.5.1.tgz",
+      "integrity": "sha512-cb4CHCgTfIfZrxde9DWJH3pBLZC8YSA2xdNg9Eix0DQbaGIvKPGEQ4se0VUyK773GHeIsNgJDocS+VtYmR6xmQ=="
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2426,19 +2431,6 @@
         "q": "^1.1.2"
       }
     },
-    "codemirror": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.60.0.tgz",
-      "integrity": "sha512-AEL7LhFOlxPlCL8IdTcJDblJm8yrAGib7I+DErJPdZd4l6imx8IMgKK3RblVgBQqz3TZJR4oknQ03bz+uNjBYA=="
-    },
-    "codemirror-spell-checker": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
-      "integrity": "sha1-HGYPkIlIPMtRE7m6nKGcP0mTNx4=",
-      "requires": {
-        "typo-js": "*"
-      }
-    },
     "collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -3394,16 +3386,6 @@
       "resolved": "https://registry.npmjs.org/dropzone/-/dropzone-5.9.2.tgz",
       "integrity": "sha512-5t2z51DzIsWDbTpwcJIvUlwxBbvcwdCApz0yb9ecKJwG155Xm92KMEZmHW1B0MzoXOKvFwdd0nPu5cpeVcvPHQ=="
     },
-    "easymde": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.14.0.tgz",
-      "integrity": "sha512-yQh3EF1amknaxDhXE1L28kwknREU8S19o01ki0t6Q8ThECCipXTOM3E/LL32Ia5D3AsCBRbC1/fT5tpLniVGuw==",
-      "requires": {
-        "codemirror": "^5.59.2",
-        "codemirror-spell-checker": "1.1.2",
-        "marked": "^2.0.0"
-      }
-    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -7668,11 +7650,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "marked": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.1.tgz",
-      "integrity": "sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw=="
-    },
     "mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -11796,11 +11773,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "typo-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.0.tgz",
-      "integrity": "sha512-dELuLBVa2jvWdU/CHTKi2L/POYaRupv942k+vRsFXsM17acXesQGAiGCio82RW7fvcr7bkuD/Zj8XpUh6aPC2A=="
-    },
     "uglify-js": {
       "version": "3.13.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.3.tgz",
diff --git a/package.json b/package.json
index 430e98c0799b8..99cd4edaa67e2 100644
--- a/package.json
+++ b/package.json
@@ -7,14 +7,13 @@
   },
   "dependencies": {
     "@claviska/jquery-minicolors": "2.3.5",
+    "@github/markdown-toolbar-element": "1.5.1",
     "@primer/octicons": "12.1.0",
     "add-asset-webpack-plugin": "2.0.1",
     "clipboard": "2.0.8",
-    "codemirror": "5.60.0",
     "css-loader": "5.2.0",
     "css-minimizer-webpack-plugin": "1.3.0",
     "dropzone": "5.9.2",
-    "easymde": "2.14.0",
     "esbuild-loader": "2.11.0",
     "escape-goat": "3.0.0",
     "fast-glob": "3.2.5",
diff --git a/routers/repo/commit.go b/routers/repo/commit.go
index c4719526376f7..d26990e0cf16a 100644
--- a/routers/repo/commit.go
+++ b/routers/repo/commit.go
@@ -261,7 +261,6 @@ func FileHistory(ctx *context.Context) {
 func Diff(ctx *context.Context) {
 	ctx.Data["PageIsDiff"] = true
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["RequireTribute"] = true
 
 	userName := ctx.Repo.Owner.Name
diff --git a/routers/repo/compare.go b/routers/repo/compare.go
index 7046f3ecdb601..3184dd4236a80 100644
--- a/routers/repo/compare.go
+++ b/routers/repo/compare.go
@@ -653,7 +653,6 @@ func CompareDiff(ctx *context.Context) {
 	ctx.Data["IsRepoToolbarCommits"] = true
 	ctx.Data["IsDiffCompare"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	setTemplateIfExists(ctx, pullRequestTemplateKey, nil, pullRequestTemplateCandidates)
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
diff --git a/routers/repo/editor.go b/routers/repo/editor.go
index 2cc5c1e7f2fa1..33ae5778d47ac 100644
--- a/routers/repo/editor.go
+++ b/routers/repo/editor.go
@@ -67,7 +67,6 @@ func editFile(ctx *context.Context, isNewFile bool) {
 	ctx.Data["PageIsEdit"] = true
 	ctx.Data["IsNewFile"] = isNewFile
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	canCommit := renderCommitRights(ctx)
 
 	treePath := cleanUploadFileName(ctx.Repo.TreePath)
@@ -189,7 +188,6 @@ func editFilePost(ctx *context.Context, form forms.EditRepoFileForm, isNewFile b
 	ctx.Data["PageHasPosted"] = true
 	ctx.Data["IsNewFile"] = isNewFile
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["TreePath"] = form.TreePath
 	ctx.Data["TreeNames"] = treeNames
 	ctx.Data["TreePaths"] = treePaths
@@ -533,7 +531,6 @@ func DeleteFilePost(ctx *context.Context) {
 func UploadFile(ctx *context.Context) {
 	ctx.Data["PageIsUpload"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	upload.AddUploadContext(ctx, "repo")
 	canCommit := renderCommitRights(ctx)
 	treePath := cleanUploadFileName(ctx.Repo.TreePath)
@@ -569,7 +566,6 @@ func UploadFilePost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.UploadRepoFileForm)
 	ctx.Data["PageIsUpload"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	upload.AddUploadContext(ctx, "repo")
 	canCommit := renderCommitRights(ctx)
 
diff --git a/routers/repo/issue.go b/routers/repo/issue.go
index da3772ef5a693..373220ba99aea 100644
--- a/routers/repo/issue.go
+++ b/routers/repo/issue.go
@@ -772,7 +772,6 @@ func NewIssue(ctx *context.Context) {
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["RequireTribute"] = true
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	title := ctx.Query("title")
@@ -937,7 +936,6 @@ func NewIssuePost(ctx *context.Context) {
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["ReadOnly"] = false
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
@@ -1107,7 +1105,6 @@ func ViewIssue(ctx *context.Context) {
 
 	ctx.Data["RequireHighlightJS"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["IsProjectsEnabled"] = ctx.Repo.CanRead(models.UnitTypeProjects)
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "comment")
diff --git a/routers/repo/pull.go b/routers/repo/pull.go
index 32d11a285b785..d611a8d718680 100644
--- a/routers/repo/pull.go
+++ b/routers/repo/pull.go
@@ -674,7 +674,6 @@ func ViewPullFiles(ctx *context.Context) {
 	setCompareContext(ctx, baseCommit, commit, headTarget)
 
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["RequireTribute"] = true
 	if ctx.Data["Assignees"], err = ctx.Repo.Repository.GetAssignees(); err != nil {
 		ctx.ServerError("GetAssignees", err)
diff --git a/routers/repo/release.go b/routers/repo/release.go
index 2ebb69b6ab083..2695afbb06316 100644
--- a/routers/repo/release.go
+++ b/routers/repo/release.go
@@ -212,7 +212,6 @@ func LatestRelease(ctx *context.Context) {
 func NewRelease(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["PageIsReleaseList"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["RequireTribute"] = true
 	ctx.Data["tag_target"] = ctx.Repo.Repository.DefaultBranch
 	if tagName := ctx.Query("tag"); len(tagName) > 0 {
@@ -246,7 +245,6 @@ func NewReleasePost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewReleaseForm)
 	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["PageIsReleaseList"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["RequireTribute"] = true
 
 	if ctx.HasError() {
@@ -349,7 +347,6 @@ func EditRelease(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["PageIsReleaseList"] = true
 	ctx.Data["PageIsEditRelease"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["RequireTribute"] = true
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "release")
@@ -388,7 +385,6 @@ func EditReleasePost(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["PageIsReleaseList"] = true
 	ctx.Data["PageIsEditRelease"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 	ctx.Data["RequireTribute"] = true
 
 	tagName := ctx.Params("*")
diff --git a/routers/repo/wiki.go b/routers/repo/wiki.go
index 290e2e8bb294a..e32c98931327d 100644
--- a/routers/repo/wiki.go
+++ b/routers/repo/wiki.go
@@ -548,7 +548,6 @@ func WikiRaw(ctx *context.Context) {
 func NewWiki(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
 	ctx.Data["PageIsWiki"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 
 	if !ctx.Repo.Repository.HasWiki() {
 		ctx.Data["title"] = "Home"
@@ -562,7 +561,6 @@ func NewWikiPost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewWikiForm)
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
 	ctx.Data["PageIsWiki"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 
 	if ctx.HasError() {
 		ctx.HTML(http.StatusOK, tplWikiNew)
@@ -600,7 +598,6 @@ func NewWikiPost(ctx *context.Context) {
 func EditWiki(ctx *context.Context) {
 	ctx.Data["PageIsWiki"] = true
 	ctx.Data["PageIsWikiEdit"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 
 	if !ctx.Repo.Repository.HasWiki() {
 		ctx.Redirect(ctx.Repo.RepoLink + "/wiki")
@@ -620,7 +617,6 @@ func EditWikiPost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewWikiForm)
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
 	ctx.Data["PageIsWiki"] = true
-	ctx.Data["RequireSimpleMDE"] = true
 
 	if ctx.HasError() {
 		ctx.HTML(http.StatusOK, tplWikiNew)
diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index bc45315ef9d87..8a75f3d7494ec 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -11,14 +11,6 @@
 	{{template "custom/body_outer_post" .}}
 
 	{{template "base/footer_content" .}}
-{{if .RequireSimpleMDE}}
-	<script src="{{StaticUrlPrefix}}/js/easymde.js?v={{MD5 AppVer}}"></script>
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js"></script>
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js"></script>
-	<script>
-		CodeMirror.modeURL = '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/%N/%N.js';
-	</script>
-{{end}}
 
 <!-- Third-party libraries -->
 {{if .RequireU2F}}
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index d8d24c61eac32..a1c1fe369fc19 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -33,9 +33,6 @@
 			StaticUrlPrefix: '{{StaticUrlPrefix}}',
 			UseServiceWorker: {{UseServiceWorker}},
 			csrf: '{{.CsrfToken}}',
-			HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
-			SimpleMDE: {{if .RequireSimpleMDE}}true{{else}}false{{end}},
-			Tribute: {{if .RequireTribute}}true{{else}}false{{end}},
 			NotificationSettings: {
 				MinTimeout: {{NotificationSettings.MinTimeout}},
 				TimeoutStep:  {{NotificationSettings.TimeoutStep}},
@@ -64,9 +61,6 @@
 	</script>
 	<link rel="icon" href="{{StaticUrlPrefix}}/img/logo.svg" type="image/svg+xml">
 	<link rel="alternate icon" href="{{StaticUrlPrefix}}/img/favicon.png" type="image/png">
-{{if .RequireSimpleMDE}}
-	<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/easymde.css?v={{MD5 AppVer}}">
-{{end}}
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
 	<noscript>
 		<style>
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index 3efde70f50885..c1dff09e1715c 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -34,14 +34,16 @@
 					<a class="item" data-tab="preview" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL | EscapePound}}" data-preview-file-modes="{{.PreviewableFileModes}}" data-markdown-mode="gfm">{{svg "octicon-eye"}} {{.i18n.Tr "preview"}}</a>
 					<a class="item" data-tab="diff" data-url="{{.RepoLink}}/_preview/{{.BranchName | EscapePound}}/{{.TreePath | EscapePound}}" data-context="{{.BranchLink}}">{{svg "octicon-diff"}} {{.i18n.Tr "repo.editor.preview_changes"}}</a>
 					{{end}}
+					{{template "shared/markdowntoolbar" .}}
 				</div>
 				<div class="ui bottom attached active tab segment" data-tab="write">
-					<textarea id="edit_area" name="content" class="hide" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
+					<textarea class="edit_area" name="content" class="hide"
+					  data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
 						data-url="{{.Repository.APIURL}}/markdown"
 						data-context="{{.RepoLink}}"
 						data-markdown-file-exts="{{.MarkdownFileExts}}"
-						data-line-wrap-extensions="{{.LineWrapExtensions}}">
-{{.FileContent}}</textarea>
+						data-line-wrap-extensions="{{.LineWrapExtensions}}"
+					>{{.FileContent}}</textarea>
 					<div class="editor-loading is-loading"></div>
 				</div>
 				<div class="ui bottom attached tab segment markdown" data-tab="preview">
diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl
index ab874bdd13697..83baf85e72a6c 100644
--- a/templates/repo/issue/comment_tab.tmpl
+++ b/templates/repo/issue/comment_tab.tmpl
@@ -1,12 +1,15 @@
-<div class="ui top tabular menu" data-write="write" data-preview="preview">
+<div class="ui top tabular menu df" data-write="write" data-preview="preview">
 	<a class="active item" data-tab="write">{{.i18n.Tr "write"}}</a>
 	<a class="item" data-tab="preview" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}">{{.i18n.Tr "preview"}}</a>
+	{{template "shared/markdowntoolbar" .}}
 </div>
 <div class="field">
 	<div class="ui bottom active tab" data-tab="write">
-		<textarea id="content" class="edit_area js-quick-submit" name="content" tabindex="4" data-id="issue-{{.RepoName}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.Repo.RepoLink}}">
-			{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
-		</textarea>
+		<textarea class="edit_area" name="content" tabindex="4"
+			data-id="issue-{{.RepoName}}"
+			data-url="{{.Repository.APIURL}}/markdown"
+			data-context="{{.Repo.RepoLink}}"
+		>{{if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end}}</textarea>
 	</div>
 	<div class="ui bottom tab markdown" data-tab="preview">
 		{{.i18n.Tr "loading"}}
diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl
index 6de6ef9a201a8..289ae1cfb5fa4 100644
--- a/templates/repo/wiki/new.tmpl
+++ b/templates/repo/wiki/new.tmpl
@@ -19,10 +19,15 @@
 			<div class="ui top attached tabular menu previewtabs" data-write="write" data-preview="preview">
 				<a class="active item" data-tab="write">{{.i18n.Tr "write"}}</a>
 				<a class="item" data-tab="preview" data-url="{{$.Repository.APIURL}}/markdown" data-context="{{$.RepoLink}}">{{$.i18n.Tr "preview"}}</a>
+				{{template "shared/markdowntoolbar" .}}
 			</div>
 			<div class="field content" data-loading="{{.i18n.Tr "loading"}}">
 				<div class="ui bottom active tab" data-tab="write">
-					<textarea class="js-quick-submit" id="edit_area" name="content" data-id="wiki-{{.title}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}" required>{{if .PageIsWikiEdit}}{{.content}}{{else}}{{.i18n.Tr "repo.wiki.welcome"}}{{end}}</textarea>
+					<textarea class="edit_area" name="content" required
+						data-id="wiki-{{.title}}"
+						data-url="{{.Repository.APIURL}}/markdown"
+						data-context="{{.RepoLink}}" required
+					>{{if .PageIsWikiEdit}}{{.content}}{{else}}{{.i18n.Tr "repo.wiki.welcome"}}{{end}}</textarea>
 				</div>
 			</div>
 			<div class="field">
diff --git a/templates/shared/markdowntoolbar.tmpl b/templates/shared/markdowntoolbar.tmpl
new file mode 100644
index 0000000000000..d9077f708229a
--- /dev/null
+++ b/templates/shared/markdowntoolbar.tmpl
@@ -0,0 +1,21 @@
+<markdown-toolbar class="markdown-toolbar">
+	<div class="markdown-toolbar-buttons">
+		<md-header class="markdown-toolbar-button">{{svg "octicon-heading"}}</md-header>
+		<md-bold class="markdown-toolbar-button">{{svg "octicon-bold"}}</md-bold>
+		<md-italic class="markdown-toolbar-button">{{svg "octicon-italic"}}</md-italic>
+	</div>
+	<div class="markdown-toolbar-buttons">
+		<md-quote class="markdown-toolbar-button">{{svg "octicon-quote"}}</md-quote>
+		<md-code class="markdown-toolbar-button">{{svg "octicon-code"}}</md-code>
+		<md-link class="markdown-toolbar-button">{{svg "octicon-link"}}</md-link>
+	</div>
+	<div class="markdown-toolbar-buttons">
+		<md-unordered-list class="markdown-toolbar-button">{{svg "octicon-list-unordered"}}</md-unordered-list>
+		<md-ordered-list class="markdown-toolbar-button">{{svg "octicon-list-ordered"}}</md-ordered-list>
+		<md-task-list class="markdown-toolbar-button">{{svg "octicon-tasklist"}}</md-task-list>
+	</div>
+	<div class="markdown-toolbar-buttons" class="p-2">
+		<md-mention class="markdown-toolbar-button">{{svg "octicon-mention"}}</md-mention>
+		<md-ref class="markdown-toolbar-button">{{svg "octicon-cross-reference"}}</md-ref>
+	</div>
+</markdown-toolbar>
diff --git a/web_src/js/easymde.js b/web_src/js/easymde.js
deleted file mode 100644
index 39ead02c13aae..0000000000000
--- a/web_src/js/easymde.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import EasyMDE from 'easymde';
-
-import CodeMirror from 'codemirror/lib/codemirror.js';
-
-window.EasyMDE = EasyMDE;
-window.SimpleMDE = EasyMDE;
-window.CodeMirror = CodeMirror;
-
diff --git a/web_src/js/features/markdowneditor.js b/web_src/js/features/markdowneditor.js
new file mode 100644
index 0000000000000..147a030e43e2d
--- /dev/null
+++ b/web_src/js/features/markdowneditor.js
@@ -0,0 +1,97 @@
+import '@github/markdown-toolbar-element';
+import {random} from '../utils.js';
+import attachTribute from './tribute.js';
+
+const {AppSubUrl, csrf} = window.config;
+
+async function uploadFile(file) {
+  const formData = new FormData();
+  formData.append('file', file, file.name);
+
+  const res = await fetch($('#dropzone').data('upload-url'), {
+    method: 'POST',
+    headers: {'X-Csrf-Token': csrf},
+    body: formData,
+  });
+  return await res.json();
+}
+
+function insertAtCursor(el, value) {
+  if (el.selectionStart || el.selectionStart === 0) {
+    const startPos = el.selectionStart;
+    const endPos = el.selectionEnd;
+    el.value = el.value.substring(0, startPos) + value + el.value.substring(endPos, el.value.length);
+    el.selectionStart = startPos + value.length;
+    el.selectionEnd = startPos + value.length;
+  } else {
+    el.value += value;
+  }
+}
+
+function replaceAndKeepCursor(el, oldval, newval) {
+  if (el.selectionStart || el.selectionStart === 0) {
+    const startPos = el.selectionStart;
+    const endPos = el.selectionEnd;
+    el.value = el.value.replace(oldval, newval);
+    el.selectionStart = startPos + newval.length - oldval.length;
+    el.selectionEnd = endPos + newval.length - oldval.length;
+  } else {
+    el.value = el.value.replace(oldval, newval);
+  }
+}
+
+function getPastedImages(e) {
+  if (!e.clipboardData) return [];
+
+  const files = [];
+  for (const item of e.clipboardData.items || []) {
+    if (!item.type || !item.type.startsWith('image/')) continue;
+    files.push(item.getAsFile());
+  }
+
+  if (files.length) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  return files;
+}
+
+function initImagePaste(el) {
+  const files = el.closest('form')?.querySelector('.files');
+  if (!files) return;
+
+  el.addEventListener('paste', async (e) => {
+    for (const img of getPastedImages(e)) {
+      const name = img.name.substr(0, img.name.lastIndexOf('.'));
+      insertAtCursor(this, `![${name}]()`);
+      const data = await uploadFile(img);
+      replaceAndKeepCursor(this, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
+      const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
+      $('.files').append(input);
+    }
+  });
+}
+
+function initCtrlEnterSubmit(el) {
+  el.addEventListener('keydown', (e) => {
+    if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.keyCode === 13 || e.keyCode === 10)) {
+      $(el).closest('form').trigger('submit');
+    }
+  });
+}
+
+export async function createMarkdownEditor(textarea) {
+  if (!textarea) return;
+
+  const id = `markdown-editor-${random()}`;
+  textarea.id = id;
+
+  initImagePaste(textarea);
+  initCtrlEnterSubmit(textarea);
+  attachTribute(textarea, {mentions: true, emoji: true});
+
+  const toolbar = textarea.closest('form')?.querySelector('markdown-toolbar');
+  if (toolbar) {
+    toolbar.setAttribute('for', id);
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 1716df9e7fa64..b0b15e4f005f4 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -13,7 +13,6 @@ import initProject from './features/projects.js';
 import initServiceWorker from './features/serviceworker.js';
 import initMarkdownAnchors from './markdown/anchors.js';
 import renderMarkdownContent from './markdown/content.js';
-import attachTribute from './features/tribute.js';
 import createColorPicker from './features/colorpicker.js';
 import createDropzone from './features/dropzone.js';
 import initTableSort from './features/tablesort.js';
@@ -22,13 +21,13 @@ import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {initStopwatch} from './features/stopwatch.js';
 import {createCodeEditor, createMonaco} from './features/codeeditor.js';
+import {createMarkdownEditor} from './features/markdowneditor.js';
 import {svg, svgs} from './svg.js';
 import {stripTags, mqBinarySearch} from './utils.js';
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
 let previewFileModes;
-const commentMDEditors = {};
 
 // Silence fomantic's error logging when tabs are used without a target content element
 $.fn.tab.settings.silent = true;
@@ -286,101 +285,20 @@ function initReactionSelector(parent) {
   });
 }
 
-function insertAtCursor(field, value) {
-  if (field.selectionStart || field.selectionStart === 0) {
-    const startPos = field.selectionStart;
-    const endPos = field.selectionEnd;
-    field.value = field.value.substring(0, startPos) + value + field.value.substring(endPos, field.value.length);
-    field.selectionStart = startPos + value.length;
-    field.selectionEnd = startPos + value.length;
-  } else {
-    field.value += value;
-  }
-}
-
-function replaceAndKeepCursor(field, oldval, newval) {
-  if (field.selectionStart || field.selectionStart === 0) {
-    const startPos = field.selectionStart;
-    const endPos = field.selectionEnd;
-    field.value = field.value.replace(oldval, newval);
-    field.selectionStart = startPos + newval.length - oldval.length;
-    field.selectionEnd = endPos + newval.length - oldval.length;
-  } else {
-    field.value = field.value.replace(oldval, newval);
-  }
-}
-
-function getPastedImages(e) {
-  if (!e.clipboardData) return [];
-
-  const files = [];
-  for (const item of e.clipboardData.items || []) {
-    if (!item.type || !item.type.startsWith('image/')) continue;
-    files.push(item.getAsFile());
-  }
-
-  if (files.length) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  return files;
-}
-
-async function uploadFile(file) {
-  const formData = new FormData();
-  formData.append('file', file, file.name);
-
-  const res = await fetch($('#dropzone').data('upload-url'), {
-    method: 'POST',
-    headers: {'X-Csrf-Token': csrf},
-    body: formData,
-  });
-  return await res.json();
-}
-
 function reload() {
   window.location.reload();
 }
 
-function initImagePaste(target) {
-  target.each(function () {
-    this.addEventListener('paste', async (e) => {
-      for (const img of getPastedImages(e)) {
-        const name = img.name.substr(0, img.name.lastIndexOf('.'));
-        insertAtCursor(this, `![${name}]()`);
-        const data = await uploadFile(img);
-        replaceAndKeepCursor(this, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
-        const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
-        $('.files').append(input);
-      }
-    }, false);
-  });
-}
-
-function initSimpleMDEImagePaste(simplemde, files) {
-  simplemde.codemirror.on('paste', async (_, e) => {
-    for (const img of getPastedImages(e)) {
-      const name = img.name.substr(0, img.name.lastIndexOf('.'));
-      const data = await uploadFile(img);
-      const pos = simplemde.codemirror.getCursor();
-      simplemde.codemirror.replaceRange(`![${name}](${AppSubUrl}/attachments/${data.uuid})`, pos);
-      const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
-      files.append(input);
-    }
-  });
-}
-
-let autoSimpleMDE;
-
 function initCommentForm() {
   if ($('.comment.form').length === 0) {
     return;
   }
 
-  autoSimpleMDE = setCommentSimpleMDE($('.comment.form textarea:not(.review-textarea)'));
+  const $textarea = $('.comment.form textarea:not(.review-textarea)');
+  createMarkdownEditor($textarea[0]);
+
   initBranchSelector();
   initCommentPreviewTab($('.comment.form'));
-  initImagePaste($('.comment.form textarea'));
 
   // Listsubmit
   function initListSubmits(selector, outerSelector) {
@@ -916,29 +834,30 @@ async function initRepository() {
     });
 
     // Quote reply
-    $(document).on('click', '.quote-reply', function (event) {
+    $(document).on('click', '.quote-reply', function (e) {
+      e.preventDefault();
+
       $(this).closest('.dropdown').find('.menu').toggle('visible');
       const target = $(this).data('target');
       const quote = $(`#comment-${target}`).text().replace(/\n/g, '\n> ');
       const content = `> ${quote}\n\n`;
-      let $simplemde = autoSimpleMDE;
+
+      let textarea;
       if ($(this).hasClass('quote-reply-diff')) {
         const $parent = $(this).closest('.comment-code-cloud');
         $parent.find('button.comment-form-reply').trigger('click');
-        $simplemde = $parent.find('[name="content"]').data('simplemde');
+        textarea = $parent.find('[name="content"]')[0];
+      } else {
+        textarea = document.querySelector('.edit_area');
       }
-      if ($simplemde !== null) {
-        if ($simplemde.value() !== '') {
-          $simplemde.value(`${$simplemde.value()}\n\n${content}`);
-        } else {
-          $simplemde.value(`${content}`);
-        }
+
+      if (textarea.value !== '') {
+        textarea.value += `\n\n${content}`;
+      } else {
+        textarea.value(content);
       }
-      requestAnimationFrame(() => {
-        $simplemde.codemirror.focus();
-        $simplemde.codemirror.setCursor($simplemde.codemirror.lineCount(), 0);
-      });
-      event.preventDefault();
+
+      textarea.focus();
     });
 
     // Reference issue
@@ -970,13 +889,11 @@ async function initRepository() {
       const $renderContent = $segment.find('.render-content');
       const $rawContent = $segment.find('.raw-content');
       let $textarea;
-      let $simplemde;
 
       // Setup new form
       if ($editContentZone.html().length === 0) {
         $editContentZone.html($('#edit-content-form').html());
         $textarea = $editContentZone.find('textarea');
-        attachTribute($textarea.get(), {mentions: true, emoji: true});
 
         let dz;
         const $dropzone = $editContentZone.find('.dropzone');
@@ -1059,10 +976,9 @@ async function initRepository() {
         $tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview'));
         $editContentForm.find('.write').attr('data-tab', $editContentZone.data('write'));
         $editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview'));
-        $simplemde = setCommentSimpleMDE($textarea);
-        commentMDEditors[$editContentZone.data('write')] = $simplemde;
+
+        createMarkdownEditor($textarea[0]);
         initCommentPreviewTab($editContentForm);
-        initSimpleMDEImagePaste($simplemde, $files);
 
         $editContentZone.find('.cancel.button').on('click', () => {
           $renderContent.show();
@@ -1111,7 +1027,6 @@ async function initRepository() {
         });
       } else {
         $textarea = $segment.find('textarea');
-        $simplemde = commentMDEditors[$editContentZone.data('write')];
       }
 
       // Show write/preview tab and copy raw content as needed
@@ -1119,11 +1034,9 @@ async function initRepository() {
       $renderContent.hide();
       if ($textarea.val().length === 0) {
         $textarea.val($rawContent.text());
-        $simplemde.value($rawContent.text());
       }
       requestAnimationFrame(() => {
         $textarea.focus();
-        $simplemde.codemirror.focus();
       });
       event.preventDefault();
     });
@@ -1250,7 +1163,6 @@ async function initRepository() {
     $repoComparePull.find('button.show-form').on('click', function (e) {
       e.preventDefault();
       $repoComparePull.find('.pullrequest-form').show();
-      autoSimpleMDE.codemirror.refresh();
       $(this).parent().hide();
     });
   }
@@ -1337,16 +1249,7 @@ function initPullRequestReview() {
     const form = $(this).parent().find('.comment-form');
     form.removeClass('hide');
     const $textarea = form.find('textarea');
-    let $simplemde;
-    if ($textarea.data('simplemde')) {
-      $simplemde = $textarea.data('simplemde');
-    } else {
-      attachTribute($textarea.get(), {mentions: true, emoji: true});
-      $simplemde = setCommentSimpleMDE($textarea);
-      $textarea.data('simplemde', $simplemde);
-    }
     $textarea.focus();
-    $simplemde.codemirror.focus();
     assingMenuAttributes(form.find('.menu'));
   });
   // The following part is only for diff views
@@ -1403,10 +1306,8 @@ function initPullRequestReview() {
       td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
       td.find("input[name='path']").val(path);
       const $textarea = commentCloud.find('textarea');
-      attachTribute($textarea.get(), {mentions: true, emoji: true});
-      const $simplemde = setCommentSimpleMDE($textarea);
+      createMarkdownEditor($textarea[0]);
       $textarea.focus();
-      $simplemde.codemirror.focus();
     }
   });
 }
@@ -1450,173 +1351,8 @@ function initTeamSettings() {
 }
 
 function initWikiForm() {
-  const $editArea = $('.repository.wiki textarea#edit_area');
-  let sideBySideChanges = 0;
-  let sideBySideTimeout = null;
-  let hasSimpleMDE = true;
-  if ($editArea.length > 0) {
-    const simplemde = new SimpleMDE({
-      autoDownloadFontAwesome: false,
-      element: $editArea[0],
-      forceSync: true,
-      previewRender(plainText, preview) { // Async method
-        // FIXME: still send render request when return back to edit mode
-        const render = function () {
-          sideBySideChanges = 0;
-          if (sideBySideTimeout !== null) {
-            clearTimeout(sideBySideTimeout);
-            sideBySideTimeout = null;
-          }
-          $.post($editArea.data('url'), {
-            _csrf: csrf,
-            mode: 'gfm',
-            context: $editArea.data('context'),
-            text: plainText,
-            wiki: true
-          }, (data) => {
-            preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
-            renderMarkdownContent();
-          });
-        };
-
-        setTimeout(() => {
-          if (!simplemde.isSideBySideActive()) {
-            render();
-          } else {
-            // delay preview by keystroke counting
-            sideBySideChanges++;
-            if (sideBySideChanges > 10) {
-              render();
-            }
-            // or delay preview by timeout
-            if (sideBySideTimeout !== null) {
-              clearTimeout(sideBySideTimeout);
-              sideBySideTimeout = null;
-            }
-            sideBySideTimeout = setTimeout(render, 600);
-          }
-        }, 0);
-        if (!simplemde.isSideBySideActive()) {
-          return 'Loading...';
-        }
-        return preview.innerHTML;
-      },
-      renderingConfig: {
-        singleLineBreaks: false
-      },
-      indentWithTabs: false,
-      tabSize: 4,
-      spellChecker: false,
-      toolbar: ['bold', 'italic', 'strikethrough', '|',
-        'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
-        {
-          name: 'code-inline',
-          action(e) {
-            const cm = e.codemirror;
-            const selection = cm.getSelection();
-            cm.replaceSelection(`\`${selection}\``);
-            if (!selection) {
-              const cursorPos = cm.getCursor();
-              cm.setCursor(cursorPos.line, cursorPos.ch - 1);
-            }
-            cm.focus();
-          },
-          className: 'fa fa-angle-right',
-          title: 'Add Inline Code',
-        }, 'code', 'quote', '|', {
-          name: 'checkbox-empty',
-          action(e) {
-            const cm = e.codemirror;
-            cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
-            cm.focus();
-          },
-          className: 'fa fa-square-o',
-          title: 'Add Checkbox (empty)',
-        },
-        {
-          name: 'checkbox-checked',
-          action(e) {
-            const cm = e.codemirror;
-            cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
-            cm.focus();
-          },
-          className: 'fa fa-check-square-o',
-          title: 'Add Checkbox (checked)',
-        }, '|',
-        'unordered-list', 'ordered-list', '|',
-        'link', 'image', 'table', 'horizontal-rule', '|',
-        'clean-block', 'preview', 'fullscreen', 'side-by-side', '|',
-        {
-          name: 'revert-to-textarea',
-          action(e) {
-            e.toTextArea();
-            hasSimpleMDE = false;
-            const $form = $('.repository.wiki.new .ui.form');
-            const $root = $form.find('.field.content');
-            const loading = $root.data('loading');
-            $root.append(`<div class="ui bottom tab markdown" data-tab="preview">${loading}</div>`);
-            initCommentPreviewTab($form);
-          },
-          className: 'fa fa-file',
-          title: 'Revert to simple textarea',
-        },
-      ]
-    });
-    $(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
-
-    setTimeout(() => {
-      const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]');
-      const $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]');
-      const $toolbar = $('.editor-toolbar');
-      const $bPreview = $('.editor-toolbar button.preview');
-      const $bSideBySide = $('.editor-toolbar a.fa-columns');
-      $bEdit.on('click', (e) => {
-        if (!hasSimpleMDE) {
-          return false;
-        }
-        e.stopImmediatePropagation();
-        if ($toolbar.hasClass('disabled-for-preview')) {
-          $bPreview.trigger('click');
-        }
-
-        return false;
-      });
-      $bPrev.on('click', (e) => {
-        if (!hasSimpleMDE) {
-          return false;
-        }
-        e.stopImmediatePropagation();
-        if (!$toolbar.hasClass('disabled-for-preview')) {
-          $bPreview.trigger('click');
-        }
-        return false;
-      });
-      $bPreview.on('click', () => {
-        setTimeout(() => {
-          if ($toolbar.hasClass('disabled-for-preview')) {
-            if ($bEdit.hasClass('active')) {
-              $bEdit.removeClass('active');
-            }
-            if (!$bPrev.hasClass('active')) {
-              $bPrev.addClass('active');
-            }
-          } else {
-            if (!$bEdit.hasClass('active')) {
-              $bEdit.addClass('active');
-            }
-            if ($bPrev.hasClass('active')) {
-              $bPrev.removeClass('active');
-            }
-          }
-        }, 0);
-
-        return false;
-      });
-      $bSideBySide.on('click', () => {
-        sideBySideChanges = 10;
-      });
-    }, 0);
-  }
+  const $editArea = $('.repository.wiki textarea.edit_area');
+  createMarkdownEditor($editArea[0]);
 }
 
 // Adding function to get the cursor position in a text field to jQuery object.
@@ -1635,71 +1371,6 @@ $.fn.getCursorPosition = function () {
   return pos;
 };
 
-function setCommentSimpleMDE($editArea) {
-  const simplemde = new SimpleMDE({
-    autoDownloadFontAwesome: false,
-    element: $editArea[0],
-    forceSync: true,
-    renderingConfig: {
-      singleLineBreaks: false
-    },
-    indentWithTabs: false,
-    tabSize: 4,
-    spellChecker: false,
-    toolbar: ['bold', 'italic', 'strikethrough', '|',
-      'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
-      'code', 'quote', '|', {
-        name: 'checkbox-empty',
-        action(e) {
-          const cm = e.codemirror;
-          cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
-          cm.focus();
-        },
-        className: 'fa fa-square-o',
-        title: 'Add Checkbox (empty)',
-      },
-      {
-        name: 'checkbox-checked',
-        action(e) {
-          const cm = e.codemirror;
-          cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
-          cm.focus();
-        },
-        className: 'fa fa-check-square-o',
-        title: 'Add Checkbox (checked)',
-      }, '|',
-      'unordered-list', 'ordered-list', '|',
-      'link', 'image', 'table', 'horizontal-rule', '|',
-      'clean-block', '|',
-      {
-        name: 'revert-to-textarea',
-        action(e) {
-          e.toTextArea();
-        },
-        className: 'fa fa-file',
-        title: 'Revert to simple textarea',
-      },
-    ]
-  });
-  $(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
-  simplemde.codemirror.setOption('extraKeys', {
-    Enter: () => {
-      const tributeContainer = document.querySelector('.tribute-container');
-      if (!tributeContainer || tributeContainer.style.display === 'none') {
-        return CodeMirror.Pass;
-      }
-    },
-    Backspace: (cm) => {
-      if (cm.getInputField().trigger) {
-        cm.getInputField().trigger('input');
-      }
-      cm.execCommand('delCharBefore');
-    }
-  });
-  attachTribute(simplemde.codemirror.getInputField(), {mentions: true, emoji: true});
-  return simplemde;
-}
-
 async function initEditor() {
   $('.js-quick-pull-choice-option').on('change', function () {
     if ($(this).val() === 'commit-to-new-branch') {
@@ -1754,7 +1425,7 @@ async function initEditor() {
     $('#tree_path').val(parts.join('/'));
   }).trigger('keyup');
 
-  const $editArea = $('.repository.editor textarea#edit_area');
+  const $editArea = $('.repository.editor textarea.edit_area');
   if (!$editArea.length) return;
 
   await createCodeEditor($editArea[0], $editFilename[0], previewFileModes);
@@ -1801,11 +1472,8 @@ function initReleaseEditor() {
   }
 
   const $textarea = $editor.find('textarea');
-  attachTribute($textarea.get(), {mentions: false, emoji: true});
-  const $files = $editor.parent().find('.files');
-  const $simplemde = setCommentSimpleMDE($textarea);
+  createMarkdownEditor($textarea[0]);
   initCommentPreviewTab($editor);
-  initSimpleMDEImagePaste($simplemde, $files);
 }
 
 function initOrganization() {
@@ -2786,7 +2454,6 @@ $(document).ready(async () => {
   initCodeView();
   initVueApp();
   initTeamSettings();
-  initCtrlEnterSubmit();
   initNavbarContentToggle();
   initTopicbar();
   initU2FAuth();
@@ -2821,7 +2488,6 @@ $(document).ready(async () => {
 
   // parallel init of async loaded features
   await Promise.all([
-    attachTribute(document.querySelectorAll('#content, .emoji-input')),
     initGitGraph(),
     initClipboard(),
     initHeatmap(),
@@ -3368,14 +3034,6 @@ function initVueComponents() {
   });
 }
 
-function initCtrlEnterSubmit() {
-  $('.js-quick-submit').on('keydown', function (e) {
-    if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.keyCode === 13 || e.keyCode === 10)) {
-      $(this).closest('form').trigger('submit');
-    }
-  });
-}
-
 function initVueApp() {
   const el = document.getElementById('app');
   if (!el) {
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index bc84745066d0d..8e3012c1d5c15 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -41,3 +41,13 @@ export function mqBinarySearch(feature, minValue, maxValue, step, unit) {
   }
   return mqBinarySearch(feature, minValue, mid - step, step, unit); // feature is < mid
 }
+
+const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+
+export function random(length = 7) {
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js
index 0176f8ec53180..b4623d9e5f6be 100644
--- a/web_src/js/utils.test.js
+++ b/web_src/js/utils.test.js
@@ -1,5 +1,5 @@
 import {
-  basename, extname, isObject, uniq, stripTags,
+  basename, extname, isObject, uniq, stripTags, random,
 } from './utils.js';
 
 test('basename', () => {
@@ -27,3 +27,8 @@ test('uniq', () => {
 test('stripTags', () => {
   expect(stripTags('<a>test</a>')).toEqual('test');
 });
+
+test('random', () => {
+  expect(random().length).toEqual(7);
+  expect(random(10).length).toEqual(10);
+});
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index cb1cd18e3d662..46a50bc5988cb 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -187,14 +187,12 @@ table {
   background: transparent;
 }
 
-::selection,
-.CodeMirror-selected {
+::selection {
   background: var(--color-primary-light-1) !important;
   color: var(--color-white) !important;
 }
 
 ::placeholder,
-.CodeMirror-placeholder,
 .ui.dropdown:not(.button) > .default.text,
 .ui.default.dropdown:not(.button) > .text {
   color: var(--color-placeholder-text) !important;
@@ -236,10 +234,6 @@ a.muted:hover,
   border-color: var(--color-primary);
 }
 
-.CodeMirror-focused {
-  border-color: var(--color-primary) !important;
-}
-
 /* currently used for search bar dropdowns in repo search and explore code */
 .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
   min-width: 10em;
@@ -1844,15 +1838,6 @@ table th[data-sortt-desc] {
   text-overflow: ellipsis;
 }
 
-.dropdown:not(.selection) > .menu.review-box > * {
-  @media (max-height: 700px) {
-    .CodeMirror,
-    .CodeMirror-scroll {
-      min-height: 100px;
-    }
-  }
-}
-
 .ui.dropdown .menu .item {
   border-radius: 0;
 }
diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
index 156430af0e8a3..78635283549a2 100644
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
@@ -1,64 +1,7 @@
-.EasyMDEContainer .CodeMirror {
-  color: var(--color-input-text);
-  background-color: var(--color-input-background);
-  border-color: var(--color-secondary);
-  font: 14px var(--fonts-monospace);
-
-  .CodeMirror-cursor {
-    border-left: 1px solid var(--color-input-text);
-  }
-
-  &.cm-s-default {
-    border-radius: 3px;
-    padding: 0 !important;
-  }
-
-  .cm-comment {
-    background: inherit !important;
-  }
-}
-
 .repository.file.editor .tab[data-tab="write"] {
   padding: 0 !important;
 }
 
-.repository.file.editor .tab[data-tab="write"] .editor-toolbar {
-  border: 0 !important;
-}
-
-.repository.file.editor .tab[data-tab="write"] .CodeMirror {
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 0;
-}
-
-.editor-toolbar {
-  opacity: 1 !important;
-  border-color: var(--color-secondary);
-}
-
-.editor-toolbar button {
-  border: none !important;
-  color: var(--color-text-light);
-}
-
-.editor-toolbar button:not(:hover) {
-  background-color: transparent !important;
-}
-
-.editor-toolbar i.separator {
-  border-left: none;
-  border-right-color: var(--color-secondary);
-}
-
-.editor-toolbar button:hover {
-  background: var(--color-hover);
-}
-
-.editor-toolbar button.active {
-  background: var(--color-active);
-}
-
 .editor-loading {
   padding: 1rem;
   text-align: center;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 6042a7594899e..7b16888d71e0b 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1956,26 +1956,12 @@
     }
 
     &.new {
-      .CodeMirror {
-        .CodeMirror-code {
-          font-family: var(--fonts-monospace);
-
-          .cm-comment {
-            background: inherit;
-          }
-        }
-      }
-
       .editor-preview {
         background-color: white;
       }
 
       .ui.attached.tabular.menu.previewtabs {
         margin-bottom: 15px;
-
-        & + .field .editor-toolbar:not(.fullscreen) a.fa-eye {
-          display: none;
-        }
       }
     }
 
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index f6f5df20a21e2..d6fdae3ec3c7e 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -146,31 +146,6 @@ a.blob-excerpt:hover {
     > .ui.segment {
       width: 94vw;
     }
-    .editor-toolbar {
-      overflow-x: auto;
-    }
-  }
-
-  #review-box .CodeMirror-scroll {
-    max-width: calc(100vw - 70px);
-  }
-}
-
-@media @mediaMd {
-  #review-box .CodeMirror-scroll {
-    max-width: 700px;
-  }
-}
-
-@media @mediaLg {
-  #review-box .CodeMirror-scroll {
-    max-width: 800px;
-  }
-}
-
-@media @mediaXl {
-  #review-box .CodeMirror-scroll {
-    max-width: 900px;
   }
 }
 
diff --git a/web_src/less/features/markdowneditor.less b/web_src/less/features/markdowneditor.less
new file mode 100644
index 0000000000000..18f7df5d381c1
--- /dev/null
+++ b/web_src/less/features/markdowneditor.less
@@ -0,0 +1,22 @@
+.markdown-toolbar {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  color: var(--color-text-light);
+}
+
+.markdown-toolbar-buttons {
+  display: flex;
+  margin-left: 1rem;
+}
+
+.markdown-toolbar-button {
+  padding: .4rem;
+}
+
+.markdown-toolbar-button:hover {
+  color: var(--color-primary);
+  cursor: pointer;
+}
diff --git a/web_src/less/index.less b/web_src/less/index.less
index f1ac49a5136b9..ba542fa0d5473 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -8,6 +8,7 @@
 @import "./features/heatmap.less";
 @import "./features/imagediff.less";
 @import "./features/codeeditor.less";
+@import "./features/markdowneditor.less";
 @import "./markdown/mermaid.less";
 
 @import "./chroma/base.less";
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index cd381973c5786..1632c16637446 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -288,8 +288,7 @@ a.ui.basic.green.label:hover {
   background-color: #393d4a !important;
 }
 
-.repository.file.editor.edit,
-.repository.wiki.new .CodeMirror {
+.repository.file.editor.edit {
   .editor-preview,
   .editor-preview-side,
   & + .editor-preview-side {
@@ -584,99 +583,6 @@ td.blob-excerpt {
   border-right-color: var(--color-secondary) !important;
 }
 
-/* code mirror dark theme */
-
-.CodeMirror {
-  &.cm-s-default,
-  &.cm-s-paper {
-    .cm-property {
-      color: #a0cc75;
-    }
-
-    .cm-header {
-      color: #9daccc;
-    }
-
-    .cm-quote {
-      color: #009900;
-    }
-
-    .cm-keyword {
-      color: #cc8a61;
-    }
-
-    .cm-atom {
-      color: #ef5e77;
-    }
-
-    .cm-number {
-      color: #ff5656;
-    }
-
-    .cm-def {
-      color: #e4e4e4;
-    }
-
-    .cm-variable-2 {
-      color: #00bdbf;
-    }
-
-    .cm-variable-3 {
-      color: #008855;
-    }
-
-    .cm-comment {
-      color: #8e9ab3;
-    }
-
-    .cm-string {
-      color: #a77272;
-    }
-
-    .cm-string-2 {
-      color: #ff5500;
-    }
-
-    .cm-meta,
-    .cm-qualifier {
-      color: #ffb176;
-    }
-
-    .cm-builtin {
-      color: #b7c951;
-    }
-
-    .cm-bracket {
-      color: #999977;
-    }
-
-    .cm-tag {
-      color: #f1d273;
-    }
-
-    .cm-attribute {
-      color: #bfcc70;
-    }
-
-    .cm-hr {
-      color: #999999;
-    }
-
-    .cm-url {
-      color: #c5cfd0;
-    }
-
-    .cm-link {
-      color: #d8c792;
-    }
-
-    .cm-error {
-      /* color: #ff6e00; */
-      color: #dbdbeb;
-    }
-  }
-}
-
 footer .container .links > * {
   border-left-color: #888;
 }
diff --git a/webpack.config.js b/webpack.config.js
index 53d5538250497..26a45d31f5304 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -58,10 +58,6 @@ export default {
     'eventsource.sharedworker': [
       resolve(__dirname, 'web_src/js/features/eventsource.sharedworker.js'),
     ],
-    'easymde': [
-      resolve(__dirname, 'web_src/js/easymde.js'),
-      resolve(__dirname, 'node_modules/easymde/dist/easymde.min.css'),
-    ],
     ...themes,
   },
   devtool: false,