Make tasklist checkboxes clickable (#15791)
Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Lauris BH <lauris@nix.lv>release/v1.15
KN4CK3R
GitHub
parent
b4d10598c9
commit
6021fbfe7a
|
|
@ -384,18 +384,19 @@ func (r *HTMLRenderer) renderTaskCheckBoxListItem(w util.BufWriter, source []byt
|
|||
} else {
|
||||
_, _ = w.WriteString("<li>")
|
||||
}
|
||||
end := ">"
|
||||
if r.XHTML {
|
||||
end = " />"
|
||||
_, _ = w.WriteString(`<input type="checkbox" disabled=""`)
|
||||
segments := node.FirstChild().Lines()
|
||||
if segments.Len() > 0 {
|
||||
segment := segments.At(0)
|
||||
_, _ = w.WriteString(fmt.Sprintf(` data-source-position="%d"`, segment.Start))
|
||||
}
|
||||
var err error
|
||||
if n.IsChecked {
|
||||
_, err = w.WriteString(`<input type="checkbox" disabled="" checked=""` + end)
|
||||
} else {
|
||||
_, err = w.WriteString(`<input type="checkbox" disabled=""` + end)
|
||||
_, _ = w.WriteString(` checked=""`)
|
||||
}
|
||||
if err != nil {
|
||||
return ast.WalkStop, err
|
||||
if r.XHTML {
|
||||
_, _ = w.WriteString(` />`)
|
||||
} else {
|
||||
_ = w.WriteByte('>')
|
||||
}
|
||||
fc := n.FirstChild()
|
||||
if fc != nil {
|
||||
|
|
|
|||
|
|
@ -166,9 +166,9 @@ func testAnswers(baseURLContent, baseURLImages string) []string {
|
|||
<p>(from <a href="https://www.markdownguide.org/extended-syntax/" rel="nofollow">https://www.markdownguide.org/extended-syntax/</a>)</p>
|
||||
<h3 id="user-content-checkboxes">Checkboxes</h3>
|
||||
<ul>
|
||||
<li class="task-list-item"><input type="checkbox" disabled=""/>unchecked</li>
|
||||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""/>checked</li>
|
||||
<li class="task-list-item"><input type="checkbox" disabled=""/>still unchecked</li>
|
||||
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="434"/>unchecked</li>
|
||||
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="450" checked=""/>checked</li>
|
||||
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="464"/>still unchecked</li>
|
||||
</ul>
|
||||
<h3 id="user-content-definition-list">Definition list</h3>
|
||||
<dl>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ func ReplaceSanitizer() {
|
|||
|
||||
// Checkboxes
|
||||
sanitizer.policy.AllowAttrs("type").Matching(regexp.MustCompile(`^checkbox$`)).OnElements("input")
|
||||
sanitizer.policy.AllowAttrs("checked", "disabled").OnElements("input")
|
||||
sanitizer.policy.AllowAttrs("checked", "disabled", "data-source-position").OnElements("input")
|
||||
|
||||
// Custom URL-Schemes
|
||||
if len(setting.Markdown.CustomURLSchemes) > 0 {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ui attached segment comment-body">
|
||||
<div class="render-content markup">
|
||||
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent|Str2html}}
|
||||
{{else}}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ui attached segment comment-body">
|
||||
<div class="render-content markup">
|
||||
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission $.IsIssuePoster}}data-can-edit="true"{{end}}>
|
||||
{{if .Issue.RenderedContent}}
|
||||
{{.Issue.RenderedContent|Str2html}}
|
||||
{{else}}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ui attached segment comment-body">
|
||||
<div class="render-content markup">
|
||||
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent|Str2html}}
|
||||
{{else}}
|
||||
|
|
@ -552,7 +552,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="text comment-content">
|
||||
<div class="render-content markup">
|
||||
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent|Str2html}}
|
||||
{{else}}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ import {createCodeEditor, createMonaco} from './features/codeeditor.js';
|
|||
import {initMarkupAnchors} from './markup/anchors.js';
|
||||
import {initNotificationsTable, initNotificationCount} from './features/notification.js';
|
||||
import {initStopwatch} from './features/stopwatch.js';
|
||||
import {renderMarkupContent} from './markup/content.js';
|
||||
import {showLineButton} from './code/linebutton.js';
|
||||
import {initMarkupContent, initCommentContent} from './markup/content.js';
|
||||
import {stripTags, mqBinarySearch} from './utils.js';
|
||||
import {svg, svgs} from './svg.js';
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ function initCommentPreviewTab($form) {
|
|||
}, (data) => {
|
||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
$previewPanel.html(data);
|
||||
renderMarkupContent();
|
||||
initMarkupContent();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -82,7 +82,7 @@ function initEditPreviewTab($form) {
|
|||
}, (data) => {
|
||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
$previewPanel.html(data);
|
||||
renderMarkupContent();
|
||||
initMarkupContent();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1108,7 +1108,8 @@ async function initRepository() {
|
|||
dz.emit('submit');
|
||||
dz.emit('reload');
|
||||
}
|
||||
renderMarkupContent();
|
||||
initMarkupContent();
|
||||
initCommentContent();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
|
|
@ -1481,7 +1482,7 @@ function initWikiForm() {
|
|||
wiki: true
|
||||
}, (data) => {
|
||||
preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
|
||||
renderMarkupContent();
|
||||
initMarkupContent();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -2732,6 +2733,7 @@ $(document).ready(async () => {
|
|||
searchRepositories();
|
||||
|
||||
initMarkupAnchors();
|
||||
initCommentContent();
|
||||
initCommentForm();
|
||||
initInstall();
|
||||
initArchiveLinks();
|
||||
|
|
@ -2789,7 +2791,7 @@ $(document).ready(async () => {
|
|||
initServiceWorker(),
|
||||
initNotificationCount(),
|
||||
initStopwatch(),
|
||||
renderMarkupContent(),
|
||||
initMarkupContent(),
|
||||
initGithook(),
|
||||
initImageDiff(),
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
import {renderMermaid} from './mermaid.js';
|
||||
import {initMarkupTasklist} from './tasklist.js';
|
||||
|
||||
export async function renderMarkupContent() {
|
||||
// code that runs for all markup content
|
||||
export async function initMarkupContent() {
|
||||
await renderMermaid(document.querySelectorAll('code.language-mermaid'));
|
||||
}
|
||||
|
||||
// code that only runs for comments
|
||||
export function initCommentContent() {
|
||||
initMarkupTasklist();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* Attaches `input` handlers to markdown rendered tasklist checkboxes in comments.
|
||||
*
|
||||
* When a checkbox value changes, the corresponding [ ] or [x] in the markdown string
|
||||
* is set accordingly and sent to the server. On success it updates the raw-content on
|
||||
* error it resets the checkbox to its original value.
|
||||
*/
|
||||
|
||||
const preventListener = (e) => e.preventDefault();
|
||||
|
||||
export function initMarkupTasklist() {
|
||||
for (const el of document.querySelectorAll(`.markup[data-can-edit=true]`) || []) {
|
||||
const container = el.parentNode;
|
||||
const checkboxes = el.querySelectorAll(`.task-list-item input[type=checkbox]`);
|
||||
|
||||
for (const checkbox of checkboxes) {
|
||||
if (checkbox.dataset.editable) return;
|
||||
checkbox.dataset.editable = 'true';
|
||||
checkbox.addEventListener('input', async () => {
|
||||
const checkboxCharacter = checkbox.checked ? 'x' : ' ';
|
||||
const position = parseInt(checkbox.dataset.sourcePosition) + 1;
|
||||
|
||||
const rawContent = container.querySelector('.raw-content');
|
||||
const oldContent = rawContent.textContent;
|
||||
const newContent = oldContent.substring(0, position) + checkboxCharacter + oldContent.substring(position + 1);
|
||||
if (newContent === oldContent) return;
|
||||
|
||||
// Prevent further inputs until the request is done. This does not use the
|
||||
// `disabled` attribute because it causes the border to flash on click.
|
||||
for (const checkbox of checkboxes) {
|
||||
checkbox.addEventListener('click', preventListener);
|
||||
}
|
||||
|
||||
try {
|
||||
const editContentZone = container.querySelector('.edit-content-zone');
|
||||
const {updateUrl, context} = editContentZone.dataset;
|
||||
|
||||
await $.post(updateUrl, {
|
||||
_csrf: window.config.csrf,
|
||||
content: newContent,
|
||||
context,
|
||||
});
|
||||
|
||||
rawContent.textContent = newContent;
|
||||
} catch (err) {
|
||||
checkbox.checked = !checkbox.checked;
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
// Enable input on checkboxes again
|
||||
for (const checkbox of checkboxes) {
|
||||
checkbox.removeEventListener('click', preventListener);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Enable the checkboxes as they are initially disabled by the markdown renderer
|
||||
for (const checkbox of checkboxes) {
|
||||
checkbox.disabled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue