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"}}
+
+
{{.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();