From 469dc4459bb7f56cf8a6daa9c234164c0889bdda Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 13 Apr 2023 21:05:06 +0200 Subject: [PATCH] Add monospace toggle button to textarea (#24034) - Add new button to textarea to switch font. State is persisted in localStorage. - Change markdown-switch-easymde button from `` to ` +
{{.locale.Tr "loading"}} diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css index 46ced17cd..7d6c36635 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 834a507b6..dcec79fcf 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 a7d69af7b..3eb8bf707 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();