Skip to content

Add monospace toggle button to textarea #24034

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 13, 2023
Merged

Add monospace toggle button to textarea #24034

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
39590dc
Add monospace toggle button to textarea
silverwind Apr 10, 2023
325275e
Update web_src/js/features/comp/ComboMarkdownEditor.js
silverwind Apr 10, 2023
bb936e4
remove unneeded rules
silverwind Apr 12, 2023
1f8a445
reduce inline script, remove global variable
silverwind Apr 12, 2023
5cacac7
rename localStorage key to markdown-editor-monospace
silverwind Apr 13, 2023
04e05a6
Merge branch 'main' into monospace
silverwind Apr 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions options/locale/locale_en-US.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions templates/shared/combomarkdowneditor.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,18 @@ Template Attributes:
<md-ref class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.ref.tooltip"}}">{{svg "octicon-cross-reference"}}</md-ref>
</div>
<div class="markdown-toolbar-group">
<button class="markdown-toolbar-button markdown-switch-monospace" role="switch" data-enable-text="{{.locale.Tr "editor.buttons.enable_monospace_font"}}" data-disable-text="{{.locale.Tr "editor.buttons.disable_monospace_font"}}">{{svg "octicon-typography"}}</button>
<button class="markdown-toolbar-button markdown-switch-easymde" data-tooltip-content="{{.locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
</div>
</markdown-toolbar>
<text-expander keys=": @">
<textarea class="markdown-text-editor js-quick-submit"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}>{{.TextareaContent}}</textarea>
</text-expander>
<script>
if (localStorage?.getItem('editor-monospace') === 'true') {
document.querySelector('.markdown-text-editor').classList.add('gt-mono');
}
</script>
</div>
<div class="ui tab markup" data-tab-panel="markdown-previewer">
{{.locale.Tr "loading"}}
Expand Down
1 change: 1 addition & 0 deletions web_src/css/editor-markdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
user-select: none;
padding: 5px;
cursor: pointer;
color: var(--color-text);
}

.combo-markdown-editor .markdown-toolbar-button:hover {
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/helpers.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down
21 changes: 19 additions & 2 deletions web_src/js/features/comp/ComboMarkdownEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('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('editor-monospace') !== 'true';
localStorage.setItem('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();
Expand Down