mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-09-10 08:51:27 +02:00
Add SimpleMDE and Fix Image Paste for Issue/Comment Editor (#9197)
* update #9132 and #8834 - add SimpleMDE for issue and fix image paste for comment editor * attache tribute to simplemde * update #9197 force simplemde file input event when backspace press
This commit is contained in:
parent
61db834904
commit
121977c36f
|
@ -673,6 +673,7 @@ func ViewIssue(ctx *context.Context) {
|
|||
ctx.Data["RequireHighlightJS"] = true
|
||||
ctx.Data["RequireDropzone"] = true
|
||||
ctx.Data["RequireTribute"] = true
|
||||
ctx.Data["RequireSimpleMDE"] = true
|
||||
renderAttachmentSettings(ctx)
|
||||
|
||||
if err = issue.LoadAttributes(); err != nil {
|
||||
|
|
|
@ -14,6 +14,7 @@ let csrf;
|
|||
let suburl;
|
||||
let previewFileModes;
|
||||
let simpleMDEditor;
|
||||
const commentMDEditors = {};
|
||||
let codeMirrorEditor;
|
||||
|
||||
// Disable Dropzone auto-discover because it's manually initialized
|
||||
|
@ -304,11 +305,27 @@ function initImagePaste(target) {
|
|||
});
|
||||
}
|
||||
|
||||
function initSimpleMDEImagePaste(simplemde, files) {
|
||||
simplemde.codemirror.on('paste', (_, event) => {
|
||||
retrieveImageFromClipboardAsBlob(event, (img) => {
|
||||
const name = img.name.substr(0, img.name.lastIndexOf('.'));
|
||||
uploadFile(img, (res) => {
|
||||
const data = JSON.parse(res);
|
||||
const pos = simplemde.codemirror.getCursor();
|
||||
simplemde.codemirror.replaceRange(`![${name}](${suburl}/attachments/${data.uuid})`, pos);
|
||||
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
|
||||
files.append(input);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initCommentForm() {
|
||||
if ($('.comment.form').length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCommentSimpleMDE($('.comment.form textarea'));
|
||||
initBranchSelector();
|
||||
initCommentPreviewTab($('.comment.form'));
|
||||
initImagePaste($('.comment.form textarea'));
|
||||
|
@ -836,6 +853,7 @@ function initRepository() {
|
|||
const $renderContent = $segment.find('.render-content');
|
||||
const $rawContent = $segment.find('.raw-content');
|
||||
let $textarea;
|
||||
let $simplemde;
|
||||
|
||||
// Setup new form
|
||||
if ($editContentZone.html().length === 0) {
|
||||
|
@ -920,8 +938,10 @@ function initRepository() {
|
|||
$tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview'));
|
||||
$editContentForm.find('.write.segment').attr('data-tab', $editContentZone.data('write'));
|
||||
$editContentForm.find('.preview.segment').attr('data-tab', $editContentZone.data('preview'));
|
||||
|
||||
$simplemde = setCommentSimpleMDE($textarea);
|
||||
commentMDEditors[$editContentZone.data('write')] = $simplemde;
|
||||
initCommentPreviewTab($editContentForm);
|
||||
initSimpleMDEImagePaste($simplemde, $files);
|
||||
|
||||
$editContentZone.find('.cancel.button').click(() => {
|
||||
$renderContent.show();
|
||||
|
@ -968,6 +988,7 @@ function initRepository() {
|
|||
});
|
||||
} else {
|
||||
$textarea = $segment.find('textarea');
|
||||
$simplemde = commentMDEditors[$editContentZone.data('write')];
|
||||
}
|
||||
|
||||
// Show write/preview tab and copy raw content as needed
|
||||
|
@ -975,8 +996,10 @@ function initRepository() {
|
|||
$renderContent.hide();
|
||||
if ($textarea.val().length === 0) {
|
||||
$textarea.val($rawContent.text());
|
||||
$simplemde.value($rawContent.text());
|
||||
}
|
||||
$textarea.focus();
|
||||
$simplemde.codemirror.focus();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
@ -1442,6 +1465,40 @@ function setSimpleMDE($editArea) {
|
|||
return true;
|
||||
}
|
||||
|
||||
function setCommentSimpleMDE($editArea) {
|
||||
const simplemde = new SimpleMDE({
|
||||
autoDownloadFontAwesome: false,
|
||||
element: $editArea[0],
|
||||
forceSync: true,
|
||||
renderingConfig: {
|
||||
singleLineBreaks: false
|
||||
},
|
||||
indentWithTabs: false,
|
||||
tabSize: 4,
|
||||
spellChecker: false,
|
||||
toolbar: ['bold', 'italic', 'strikethrough', '|',
|
||||
'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
|
||||
'code', 'quote', '|',
|
||||
'unordered-list', 'ordered-list', '|',
|
||||
'link', 'image', 'table', 'horizontal-rule', '|',
|
||||
'clean-block']
|
||||
});
|
||||
simplemde.codemirror.setOption('extraKeys', {
|
||||
Enter: () => {
|
||||
if (!(issuesTribute.isActive || emojiTribute.isActive)) {
|
||||
return CodeMirror.Pass;
|
||||
}
|
||||
},
|
||||
Backspace: (cm) => {
|
||||
cm.getInputField().trigger('input');
|
||||
cm.execCommand('delCharBefore');
|
||||
}
|
||||
});
|
||||
issuesTribute.attach(simplemde.codemirror.getInputField());
|
||||
emojiTribute.attach(simplemde.codemirror.getInputField());
|
||||
return simplemde;
|
||||
}
|
||||
|
||||
function setCodeMirror($editArea) {
|
||||
if (simpleMDEditor) {
|
||||
simpleMDEditor.toTextArea();
|
||||
|
|
Loading…
Reference in a new issue