diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index d467204eedd..f71ea824e97 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -133,6 +133,8 @@ buttons.list.task.tooltip = Add a list of tasks
buttons.mention.tooltip = Mention a user or team
buttons.ref.tooltip = Reference an issue or pull request
buttons.switch_to_legacy.tooltip = Use the legacy editor instead
+buttons.enable_monospace_font = Enable monospace font
+buttons.disable_monospace_font = Disable monospace font
[filter]
string.asc = A - Z
diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl
index 30b0de2a49c..ace9d908150 100644
--- a/templates/shared/combomarkdowneditor.tmpl
+++ b/templates/shared/combomarkdowneditor.tmpl
@@ -40,12 +40,18 @@ Template Attributes:
{{svg "octicon-cross-reference"}}
+ {{svg "octicon-typography"}}
{{svg "octicon-arrow-switch"}}
+
{{.locale.Tr "loading"}}
diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css
index 46ced17cdc9..7d6c36635db 100644
--- a/web_src/css/editor-markdown.css
+++ b/web_src/css/editor-markdown.css
@@ -24,6 +24,7 @@
user-select: none;
padding: 5px;
cursor: pointer;
+ color: var(--color-text);
}
.combo-markdown-editor .markdown-toolbar-button:hover {
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 834a507b687..dcec79fcf6f 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -29,7 +29,7 @@
.gt-mono {
font-family: var(--fonts-monospace) !important;
- font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */
+ font-size: .95em !important; /* compensate for monospace fonts being usually slightly larger */
}
.gt-bold { font-weight: 600 !important; }
diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js
index a7d69af7b4e..3eb8bf7076b 100644
--- a/web_src/js/features/comp/ComboMarkdownEditor.js
+++ b/web_src/js/features/comp/ComboMarkdownEditor.js
@@ -73,8 +73,25 @@ class ComboMarkdownEditor {
// upstream bug: The role code is never executed in base MarkdownButtonElement https://github.com/github/markdown-toolbar-element/issues/70
el.setAttribute('role', 'button');
}
- this.switchToEasyMDEButton = this.container.querySelector('.markdown-switch-easymde');
- this.switchToEasyMDEButton?.addEventListener('click', async (e) => {
+
+ const monospaceButton = this.container.querySelector('.markdown-switch-monospace');
+ const monospaceEnabled = localStorage?.getItem('markdown-editor-monospace') === 'true';
+ const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text');
+ monospaceButton.setAttribute('data-tooltip-content', monospaceText);
+ monospaceButton.setAttribute('aria-checked', String(monospaceEnabled));
+
+ monospaceButton?.addEventListener('click', (e) => {
+ e.preventDefault();
+ const enabled = localStorage?.getItem('markdown-editor-monospace') !== 'true';
+ localStorage.setItem('markdown-editor-monospace', String(enabled));
+ this.textarea.classList.toggle('gt-mono', enabled);
+ const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text');
+ monospaceButton.setAttribute('data-tooltip-content', text);
+ monospaceButton.setAttribute('aria-checked', String(enabled));
+ });
+
+ const easymdeButton = this.container.querySelector('.markdown-switch-easymde');
+ easymdeButton?.addEventListener('click', async (e) => {
e.preventDefault();
this.userPreferredEditor = 'easymde';
await this.switchToEasyMDE();