forked from Shiloh/githaven
9f6bc7c6f4
The completion popup now behaves now much more as expected than before for the raw textarea: - You can press <kbd>Tab</kbd> or <kbd>Enter</kbd> once the completion popup is open to accept the selected item - The menu does not close automatically when moving the cursor - When you delete text, previously correct suggestions are shown again - If you delete all text until the opening char (`@` or `:`) after applying a suggestion, the popup reappears again - Menu UI has been improved <img width="278" alt="Screenshot 2023-04-07 at 19 43 42" src="https://user-images.githubusercontent.com/115237/230653601-d6517b9f-0988-445e-aa57-5ebfaf5039f3.png">
50 lines
2.6 KiB
Handlebars
50 lines
2.6 KiB
Handlebars
{{/*
|
|
Template Attributes:
|
|
* locale
|
|
* ContainerId / ContainerClasses : for the container element
|
|
* MarkdownPreviewUrl / MarkdownPreviewContext: for the preview tab
|
|
* TextareaName / TextareaContent / TextareaPlaceholder: for the main textarea
|
|
* DropzoneParentContainer: for file upload (leave it empty if no upload)
|
|
*/}}
|
|
<div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
|
|
{{if .MarkdownPreviewUrl}}
|
|
<div class="ui top tabular menu">
|
|
<a class="active item" data-tab-for="markdown-writer">{{.locale.Tr "write"}}</a>
|
|
<a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{.locale.Tr "preview"}}</a>
|
|
</div>
|
|
{{end}}
|
|
<div class="ui tab active" data-tab-panel="markdown-writer">
|
|
<markdown-toolbar class="gt-df">
|
|
<div class="markdown-toolbar-group">
|
|
<md-header class="markdown-toolbar-button">{{svg "octicon-heading"}}</md-header>
|
|
<md-bold class="markdown-toolbar-button">{{svg "octicon-bold"}}</md-bold>
|
|
<md-italic class="markdown-toolbar-button">{{svg "octicon-italic"}}</md-italic>
|
|
</div>
|
|
<div class="markdown-toolbar-group">
|
|
<md-quote class="markdown-toolbar-button">{{svg "octicon-quote"}}</md-quote>
|
|
<md-code class="markdown-toolbar-button">{{svg "octicon-code"}}</md-code>
|
|
<md-link class="markdown-toolbar-button">{{svg "octicon-link"}}</md-link>
|
|
</div>
|
|
<div class="markdown-toolbar-group">
|
|
<md-unordered-list class="markdown-toolbar-button">{{svg "octicon-list-unordered"}}</md-unordered-list>
|
|
<md-ordered-list class="markdown-toolbar-button">{{svg "octicon-list-ordered"}}</md-ordered-list>
|
|
<md-task-list class="markdown-toolbar-button">{{svg "octicon-tasklist"}}</md-task-list>
|
|
</div>
|
|
<div class="markdown-toolbar-group">
|
|
<md-mention class="markdown-toolbar-button">{{svg "octicon-mention"}}</md-mention>
|
|
<md-ref class="markdown-toolbar-button">{{svg "octicon-cross-reference"}}</md-ref>
|
|
</div>
|
|
<div class="markdown-toolbar-group gt-f1"></div>
|
|
<div class="markdown-toolbar-group">
|
|
<span class="markdown-toolbar-button markdown-switch-easymde">{{svg "octicon-arrow-switch"}}</span>
|
|
</div>
|
|
</markdown-toolbar>
|
|
<text-expander keys=": @">
|
|
<textarea class="markdown-text-editor js-quick-submit" name="{{.TextareaName}}" placeholder="{{.TextareaPlaceholder}}">{{.TextareaContent}}</textarea>
|
|
</text-expander>
|
|
</div>
|
|
<div class="ui tab markup" data-tab-panel="markdown-previewer">
|
|
{{.locale.Tr "loading"}}
|
|
</div>
|
|
</div>
|