|
|
@ -1,8 +1,8 @@
|
|
|
|
import '@github/markdown-toolbar-element';
|
|
|
|
import '@github/markdown-toolbar-element';
|
|
|
|
|
|
|
|
import $ from 'jquery';
|
|
|
|
import {attachTribute} from '../tribute.js';
|
|
|
|
import {attachTribute} from '../tribute.js';
|
|
|
|
import {hideElem, showElem} from '../../utils/dom.js';
|
|
|
|
import {hideElem, showElem, autosize} from '../../utils/dom.js';
|
|
|
|
import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
|
|
|
|
import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
|
|
|
|
import $ from 'jquery';
|
|
|
|
|
|
|
|
import {initMarkupContent} from '../../markup/content.js';
|
|
|
|
import {initMarkupContent} from '../../markup/content.js';
|
|
|
|
import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
|
|
|
|
import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
|
|
|
|
import {attachRefIssueContextPopup} from '../contextpopup.js';
|
|
|
|
import {attachRefIssueContextPopup} from '../contextpopup.js';
|
|
|
@ -39,31 +39,55 @@ class ComboMarkdownEditor {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async init() {
|
|
|
|
async init() {
|
|
|
|
|
|
|
|
this.prepareEasyMDEToolbarActions();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.setupTab();
|
|
|
|
|
|
|
|
this.setupDropzone();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.setupTextarea();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await attachTribute(this.textarea, {mentions: true, emoji: true});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (this.userPreferredEditor === 'easymde') {
|
|
|
|
|
|
|
|
await this.switchToEasyMDE();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
applyEditorHeights(el, heights) {
|
|
|
|
|
|
|
|
if (!heights) return;
|
|
|
|
|
|
|
|
if (heights.minHeight) el.style.minHeight = heights.minHeight;
|
|
|
|
|
|
|
|
if (heights.height) el.style.height = heights.height;
|
|
|
|
|
|
|
|
if (heights.maxHeight) el.style.maxHeight = heights.maxHeight;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setupTextarea() {
|
|
|
|
this.textarea = this.container.querySelector('.markdown-text-editor');
|
|
|
|
this.textarea = this.container.querySelector('.markdown-text-editor');
|
|
|
|
this.textarea._giteaComboMarkdownEditor = this;
|
|
|
|
this.textarea._giteaComboMarkdownEditor = this;
|
|
|
|
this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter)}`;
|
|
|
|
this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`;
|
|
|
|
this.textarea.addEventListener('input', (e) => {this.options?.onContentChanged?.(this, e)});
|
|
|
|
this.textarea.addEventListener('input', (e) => this.options?.onContentChanged?.(this, e));
|
|
|
|
|
|
|
|
this.applyEditorHeights(this.textarea, this.options.editorHeights);
|
|
|
|
|
|
|
|
this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130});
|
|
|
|
|
|
|
|
|
|
|
|
this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
|
|
|
|
this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
|
|
|
|
this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
|
|
|
|
this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
|
|
|
|
|
|
|
|
|
|
|
|
elementIdCounter++;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.switchToEasyMDEButton = this.container.querySelector('.markdown-switch-easymde');
|
|
|
|
this.switchToEasyMDEButton = this.container.querySelector('.markdown-switch-easymde');
|
|
|
|
this.switchToEasyMDEButton?.addEventListener('click', async (e) => {
|
|
|
|
this.switchToEasyMDEButton?.addEventListener('click', async (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
this.userPreferredEditor = 'easymde';
|
|
|
|
await this.switchToEasyMDE();
|
|
|
|
await this.switchToEasyMDE();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
await attachTribute(this.textarea, {mentions: true, emoji: true});
|
|
|
|
if (this.dropzone) {
|
|
|
|
|
|
|
|
initTextareaImagePaste(this.textarea, this.dropzone);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setupDropzone() {
|
|
|
|
const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
|
|
|
|
const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
|
|
|
|
if (dropzoneParentContainer) {
|
|
|
|
if (dropzoneParentContainer) {
|
|
|
|
this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone');
|
|
|
|
this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone');
|
|
|
|
initTextareaImagePaste(this.textarea, this.dropzone);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.setupTab();
|
|
|
|
|
|
|
|
this.prepareEasyMDEToolbarActions();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
setupTab() {
|
|
|
|
setupTab() {
|
|
|
@ -134,7 +158,10 @@ class ComboMarkdownEditor {
|
|
|
|
title: 'Add Checkbox (checked)',
|
|
|
|
title: 'Add Checkbox (checked)',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
'gitea-switch-to-textarea': {
|
|
|
|
'gitea-switch-to-textarea': {
|
|
|
|
action: this.switchToTextarea.bind(this),
|
|
|
|
action: () => {
|
|
|
|
|
|
|
|
this.userPreferredEditor = 'textarea';
|
|
|
|
|
|
|
|
this.switchToTextarea();
|
|
|
|
|
|
|
|
},
|
|
|
|
className: 'fa fa-file',
|
|
|
|
className: 'fa fa-file',
|
|
|
|
title: 'Revert to simple textarea',
|
|
|
|
title: 'Revert to simple textarea',
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -169,7 +196,7 @@ class ComboMarkdownEditor {
|
|
|
|
return processed;
|
|
|
|
return processed;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async switchToTextarea() {
|
|
|
|
switchToTextarea() {
|
|
|
|
showElem(this.textareaMarkdownToolbar);
|
|
|
|
showElem(this.textareaMarkdownToolbar);
|
|
|
|
if (this.easyMDE) {
|
|
|
|
if (this.easyMDE) {
|
|
|
|
this.easyMDE.toTextArea();
|
|
|
|
this.easyMDE.toTextArea();
|
|
|
@ -218,6 +245,7 @@ class ComboMarkdownEditor {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll'), this.options.editorHeights);
|
|
|
|
await attachTribute(this.easyMDE.codemirror.getInputField(), {mentions: true, emoji: true});
|
|
|
|
await attachTribute(this.easyMDE.codemirror.getInputField(), {mentions: true, emoji: true});
|
|
|
|
initEasyMDEImagePaste(this.easyMDE, this.dropzone);
|
|
|
|
initEasyMDEImagePaste(this.easyMDE, this.dropzone);
|
|
|
|
hideElem(this.textareaMarkdownToolbar);
|
|
|
|
hideElem(this.textareaMarkdownToolbar);
|
|
|
@ -236,6 +264,7 @@ class ComboMarkdownEditor {
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.textarea.value = v;
|
|
|
|
this.textarea.value = v;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.textareaAutosize.resizeToFit();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
focus() {
|
|
|
|
focus() {
|
|
|
@ -254,6 +283,13 @@ class ComboMarkdownEditor {
|
|
|
|
this.easyMDE.codemirror.setCursor(this.easyMDE.codemirror.lineCount(), 0);
|
|
|
|
this.easyMDE.codemirror.setCursor(this.easyMDE.codemirror.lineCount(), 0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
get userPreferredEditor() {
|
|
|
|
|
|
|
|
return window.localStorage.getItem(`markdown-editor-${this.options.useScene ?? 'default'}`);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
set userPreferredEditor(s) {
|
|
|
|
|
|
|
|
window.localStorage.setItem(`markdown-editor-${this.options.useScene ?? 'default'}`, s);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export function getComboMarkdownEditor(el) {
|
|
|
|
export function getComboMarkdownEditor(el) {
|
|
|
|