mirror of
https://codeberg.org/forgejo/forgejo
synced 2025-10-19 00:40:51 +02:00
d0a6f93f9e
When you edit a comment and the comment already has a markdown editor, then the code will click on the 'Write' tab, in case you canceled editting the comment when you were at the 'Preview' tab. In forgejo/forgejo#2681 I added `href="#"` to the tab items, this causes that when the 'Write' tab is being clicked by the code the page is jumped the beginning of the page. Instead of being clever and trying to make this item interactive via another way or via javascript avoid this jumping, we do better and make this element a button. This item is not a link, it's a button that will perform a action. This entirely avoids the issue of jumping and it's still interactive. Resolves forgejo/forgejo#9542 Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9645 Reviewed-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Gusted <postmaster@gusted.xyz> Co-committed-by: Gusted <postmaster@gusted.xyz>
118 lines
7.4 KiB
Go HTML Template
118 lines
7.4 KiB
Go HTML Template
{{/*
|
|
Template Attributes:
|
|
* ContainerId: id attribute for the container element
|
|
* ContainerClasses: additional classes for the container element
|
|
* MarkdownPreviewUrl: preview url for the preview tab
|
|
* MarkdownPreviewContext: preview context for the preview tab
|
|
* TextareaName: name attribute for the textarea
|
|
* TextareaContent: content for the textarea
|
|
* TextareaPlaceholder: placeholder attribute for the textarea
|
|
* TextareaAriaLabel: aria-label attribute for the textarea
|
|
* DropzoneParentContainer: container for file upload (leave it empty if no upload)
|
|
* DisableAutosize: whether to disable automatic height resizing
|
|
* EasyMDE: whether to display button for switching to legacy editor
|
|
*/}}
|
|
<div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}" data-tab-hint="{{ctx.Locale.TrString "editor.textarea.tab_hint"}}" data-shift-tab-hint="{{ctx.Locale.TrString "editor.textarea.shift_tab_hint"}}">
|
|
|
|
<markdown-toolbar>
|
|
{{if .MarkdownPreviewUrl}}
|
|
<div class="switch">
|
|
<button type="button" class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</button>
|
|
<button type="button" class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</button>
|
|
</div>
|
|
{{end}}
|
|
<div class="markdown-toolbar-group">
|
|
<md-header class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.heading.tooltip"}}">{{svg "octicon-heading"}}</md-header>
|
|
<md-bold class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.bold.tooltip"}}" data-md-ctrl-shortcut="b">{{svg "octicon-bold"}}</md-bold>
|
|
<md-italic class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.italic.tooltip"}}" data-md-ctrl-shortcut="i">{{svg "octicon-italic"}}</md-italic>
|
|
</div>
|
|
<div class="markdown-toolbar-group">
|
|
<md-quote class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.quote.tooltip"}}">{{svg "octicon-quote"}}</md-quote>
|
|
<md-code class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.code.tooltip"}}">{{svg "octicon-code"}}</md-code>
|
|
<button class="markdown-toolbar-button show-modal" data-md-button data-md-action="new-link" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.link.tooltip"}}">{{svg "octicon-link"}}</button>
|
|
</div>
|
|
<div class="markdown-toolbar-group">
|
|
<md-unordered-list class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.list.unordered.tooltip"}}">{{svg "octicon-list-unordered"}}</md-unordered-list>
|
|
<md-ordered-list class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.list.ordered.tooltip"}}">{{svg "octicon-list-ordered"}}</md-ordered-list>
|
|
<md-task-list class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.list.task.tooltip"}}">{{svg "octicon-tasklist"}}</md-task-list>
|
|
<button type="button" class="markdown-toolbar-button" data-md-button data-md-action="unindent" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.unindent.tooltip"}}">{{svg "octicon-arrow-left"}}</button>
|
|
<button type="button" class="markdown-toolbar-button" data-md-button data-md-action="indent" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.indent.tooltip"}}">{{svg "octicon-arrow-right"}}</button>
|
|
</div>
|
|
<div class="markdown-toolbar-group">
|
|
<button type="button" class="markdown-toolbar-button show-modal" data-md-button data-md-action="new-table" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.new_table.tooltip"}}">{{svg "octicon-table"}}</button>
|
|
<md-mention class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.mention.tooltip"}}">{{svg "octicon-mention"}}</md-mention>
|
|
<md-ref class="markdown-toolbar-button" data-tooltip-content="{{ctx.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" data-md-button role="switch" data-enable-text="{{ctx.Locale.Tr "editor.buttons.enable_monospace_font"}}" data-disable-text="{{ctx.Locale.Tr "editor.buttons.disable_monospace_font"}}">{{svg "octicon-typography"}}</button>
|
|
{{if .EasyMDE}}
|
|
<button class="markdown-toolbar-button markdown-switch-easymde" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
|
|
{{end}}
|
|
</div>
|
|
</markdown-toolbar>
|
|
<div class="ui tab active" data-tab-panel="markdown-writer">
|
|
<text-expander keys=": @" suffix="">
|
|
<textarea class="markdown-text-editor js-quick-submit"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea>
|
|
</text-expander>
|
|
<script>
|
|
if (localStorage?.getItem('markdown-editor-monospace') === 'true') {
|
|
document.querySelector('.markdown-text-editor').classList.add('tw-font-mono');
|
|
}
|
|
</script>
|
|
</div>
|
|
<div class="ui tab markup" data-tab-panel="markdown-previewer">
|
|
{{ctx.Locale.Tr "loading"}}
|
|
</div>
|
|
|
|
<div class="ui small modal tw-w-fit" data-modal-name="new-markdown-table">
|
|
<div class="header">{{ctx.Locale.Tr "editor.table_modal.header"}}</div>
|
|
|
|
<div class="ui form content" data-selector-name="form">
|
|
<input type="hidden" name="table-header" value="{{ctx.Locale.Tr "editor.table_modal.placeholder.header"}}" disabled>
|
|
<input type="hidden" name="table-content" value="{{ctx.Locale.Tr "editor.table_modal.placeholder.content"}}" disabled>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td><label>{{ctx.Locale.Tr "editor.table_modal.label.rows"}}</label></td>
|
|
<td><input type="number" name="table-rows" class="js-enable" min="1" value="2" disabled required></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label>{{ctx.Locale.Tr "editor.table_modal.label.columns"}}</label></td>
|
|
<td><input type="number" name="table-columns" class="js-enable" min="1" value="2" disabled required></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="text right actions">
|
|
<button class="ui cancel button" data-selector-name="cancel-button">{{ctx.Locale.Tr "cancel"}}</button>
|
|
<button class="ui primary button" data-selector-name="ok-button">{{ctx.Locale.Tr "ok"}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui small modal" data-modal-name="new-markdown-link">
|
|
<div class="header">{{ctx.Locale.Tr "editor.link_modal.header"}}</div>
|
|
|
|
<fieldset class="content">
|
|
<div class="ui form" data-selector-name="form">
|
|
<label>
|
|
{{ctx.Locale.Tr "editor.link_modal.url"}}
|
|
<input name="link-url" class="js-enable" disabled required dir="auto" autocomplete="off">
|
|
</label>
|
|
<label>
|
|
{{ctx.Locale.Tr "editor.link_modal.description"}}
|
|
<input name="link-description" class="js-enable" disabled required dir="auto" autocomplete="off">
|
|
</label>
|
|
|
|
<div class="help">
|
|
{{ctx.Locale.Tr "editor.link_modal.paste_reminder"}}
|
|
</div>
|
|
|
|
<div class="text right actions">
|
|
<button class="ui cancel button" data-selector-name="cancel-button">{{ctx.Locale.Tr "cancel"}}</button>
|
|
<button class="ui primary button" data-selector-name="ok-button">{{ctx.Locale.Tr "ok"}}</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|