aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/js/features/comp/ComboMarkdownEditor.ts
diff options
context:
space:
mode:
Diffstat (limited to 'web_src/js/features/comp/ComboMarkdownEditor.ts')
-rw-r--r--web_src/js/features/comp/ComboMarkdownEditor.ts332
1 files changed, 332 insertions, 0 deletions
diff --git a/web_src/js/features/comp/ComboMarkdownEditor.ts b/web_src/js/features/comp/ComboMarkdownEditor.ts
new file mode 100644
index 0000000000..69fe34269b
--- /dev/null
+++ b/web_src/js/features/comp/ComboMarkdownEditor.ts
@@ -0,0 +1,332 @@
+import '@github/markdown-toolbar-element';
+import '@github/text-expander-element';
+import $ from 'jquery';
+import {attachTribute} from '../tribute.ts';
+import {hideElem, showElem, autosize, isElemVisible} from '../../utils/dom.ts';
+import {initEasyMDEPaste, initTextareaUpload} from './EditorUpload.ts';
+import {handleGlobalEnterQuickSubmit} from './QuickSubmit.ts';
+import {renderPreviewPanelContent} from '../repo-editor.ts';
+import {easyMDEToolbarActions} from './EasyMDEToolbarActions.ts';
+import {initTextExpander} from './TextExpander.ts';
+import {showErrorToast} from '../../modules/toast.ts';
+import {POST} from '../../modules/fetch.ts';
+import {initTextareaMarkdown} from './EditorMarkdown.ts';
+import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.ts';
+
+let elementIdCounter = 0;
+
+/**
+ * validate if the given textarea is non-empty.
+ * @param {HTMLElement} textarea - The textarea element to be validated.
+ * @returns {boolean} returns true if validation succeeded.
+ */
+export function validateTextareaNonEmpty(textarea) {
+ // When using EasyMDE, the original edit area HTML element is hidden, breaking HTML5 input validation.
+ // The workaround (https://github.com/sparksuite/simplemde-markdown-editor/issues/324) doesn't work with contenteditable, so we just show an alert.
+ if (!textarea.value) {
+ if (isElemVisible(textarea)) {
+ textarea.required = true;
+ const form = textarea.closest('form');
+ form?.reportValidity();
+ } else {
+ // The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places.
+ showErrorToast('Require non-empty content');
+ }
+ return false;
+ }
+ return true;
+}
+
+class ComboMarkdownEditor {
+ constructor(container, options = {}) {
+ container._giteaComboMarkdownEditor = this;
+ this.options = options;
+ this.container = container;
+ }
+
+ async init() {
+ this.prepareEasyMDEToolbarActions();
+ this.setupContainer();
+ this.setupTab();
+ await this.setupDropzone(); // textarea depends on dropzone
+ this.setupTextarea();
+
+ await this.switchToUserPreference();
+ }
+
+ 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;
+ }
+
+ setupContainer() {
+ initTextExpander(this.container.querySelector('text-expander'));
+ this.container.addEventListener('ce-editor-content-changed', (e) => this.options?.onContentChanged?.(this, e));
+ }
+
+ setupTextarea() {
+ this.textarea = this.container.querySelector('.markdown-text-editor');
+ this.textarea._giteaComboMarkdownEditor = this;
+ this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`;
+ this.textarea.addEventListener('input', (e) => this.options?.onContentChanged?.(this, e));
+ this.applyEditorHeights(this.textarea, this.options.editorHeights);
+
+ if (this.textarea.getAttribute('data-disable-autosize') !== 'true') {
+ this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130});
+ }
+
+ this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
+ this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
+ for (const el of this.textareaMarkdownToolbar.querySelectorAll('.markdown-toolbar-button')) {
+ // upstream bug: The role code is never executed in base MarkdownButtonElement https://github.com/github/markdown-toolbar-element/issues/70
+ el.setAttribute('role', 'button');
+ // the editor usually is in a form, so the buttons should have "type=button", avoiding conflicting with the form's submit.
+ if (el.nodeName === 'BUTTON' && !el.getAttribute('type')) el.setAttribute('type', 'button');
+ }
+
+ const monospaceButton = this.container.querySelector('.markdown-switch-monospace');
+ const monospaceEnabled = localStorage?.getItem('markdown-editor-monospace') === 'true';
+ const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text');
+ monospaceButton.setAttribute('data-tooltip-content', monospaceText);
+ monospaceButton.setAttribute('aria-checked', String(monospaceEnabled));
+
+ monospaceButton?.addEventListener('click', (e) => {
+ e.preventDefault();
+ const enabled = localStorage?.getItem('markdown-editor-monospace') !== 'true';
+ localStorage.setItem('markdown-editor-monospace', String(enabled));
+ this.textarea.classList.toggle('tw-font-mono', enabled);
+ const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text');
+ monospaceButton.setAttribute('data-tooltip-content', text);
+ monospaceButton.setAttribute('aria-checked', String(enabled));
+ });
+
+ const easymdeButton = this.container.querySelector('.markdown-switch-easymde');
+ easymdeButton?.addEventListener('click', async (e) => {
+ e.preventDefault();
+ this.userPreferredEditor = 'easymde';
+ await this.switchToEasyMDE();
+ });
+
+ initTextareaMarkdown(this.textarea);
+ if (this.dropzone) {
+ initTextareaUpload(this.textarea, this.dropzone);
+ }
+ }
+
+ async setupDropzone() {
+ const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
+ if (dropzoneParentContainer) {
+ this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone');
+ if (this.dropzone) this.attachedDropzoneInst = await initDropzone(this.dropzone);
+ }
+ }
+
+ dropzoneGetFiles() {
+ if (!this.dropzone) return null;
+ return Array.from(this.dropzone.querySelectorAll('.files [name=files]'), (el) => el.value);
+ }
+
+ dropzoneReloadFiles() {
+ if (!this.dropzone) return;
+ this.attachedDropzoneInst.emit(DropzoneCustomEventReloadFiles);
+ }
+
+ dropzoneSubmitReload() {
+ if (!this.dropzone) return;
+ this.attachedDropzoneInst.emit('submit');
+ this.attachedDropzoneInst.emit(DropzoneCustomEventReloadFiles);
+ }
+
+ setupTab() {
+ const tabs = this.container.querySelectorAll('.tabular.menu > .item');
+
+ // Fomantic Tab requires the "data-tab" to be globally unique.
+ // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
+ this.tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer');
+ this.tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
+ this.tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
+ this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
+
+ const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
+ const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
+ panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
+ panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
+ elementIdCounter++;
+
+ this.tabEditor.addEventListener('click', () => {
+ requestAnimationFrame(() => {
+ this.focus();
+ });
+ });
+
+ $(tabs).tab();
+
+ this.previewUrl = this.tabPreviewer.getAttribute('data-preview-url');
+ this.previewContext = this.tabPreviewer.getAttribute('data-preview-context');
+ this.previewMode = this.options.previewMode ?? 'comment';
+ this.previewWiki = this.options.previewWiki ?? false;
+ this.tabPreviewer.addEventListener('click', async () => {
+ const formData = new FormData();
+ formData.append('mode', this.previewMode);
+ formData.append('context', this.previewContext);
+ formData.append('text', this.value());
+ formData.append('wiki', this.previewWiki);
+ const response = await POST(this.previewUrl, {data: formData});
+ const data = await response.text();
+ renderPreviewPanelContent($(panelPreviewer), data);
+ });
+ }
+
+ switchTabToEditor() {
+ this.tabEditor.click();
+ }
+
+ prepareEasyMDEToolbarActions() {
+ this.easyMDEToolbarDefault = [
+ 'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3',
+ 'heading-bigger', 'heading-smaller', '|', 'code', 'quote', '|', 'gitea-checkbox-empty',
+ 'gitea-checkbox-checked', '|', 'unordered-list', 'ordered-list', '|', 'link', 'image',
+ 'table', 'horizontal-rule', '|', 'gitea-switch-to-textarea',
+ ];
+ }
+
+ parseEasyMDEToolbar(EasyMDE, actions) {
+ this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(EasyMDE, this);
+ const processed = [];
+ for (const action of actions) {
+ const actionButton = this.easyMDEToolbarActions[action];
+ if (!actionButton) throw new Error(`Unknown EasyMDE toolbar action ${action}`);
+ processed.push(actionButton);
+ }
+ return processed;
+ }
+
+ async switchToUserPreference() {
+ if (this.userPreferredEditor === 'easymde') {
+ await this.switchToEasyMDE();
+ } else {
+ this.switchToTextarea();
+ }
+ }
+
+ switchToTextarea() {
+ if (!this.easyMDE) return;
+ showElem(this.textareaMarkdownToolbar);
+ if (this.easyMDE) {
+ this.easyMDE.toTextArea();
+ this.easyMDE = null;
+ }
+ }
+
+ async switchToEasyMDE() {
+ if (this.easyMDE) return;
+ // EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles.
+ const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde');
+ const easyMDEOpt = {
+ autoDownloadFontAwesome: false,
+ element: this.textarea,
+ forceSync: true,
+ renderingConfig: {singleLineBreaks: false},
+ indentWithTabs: false,
+ tabSize: 4,
+ spellChecker: false,
+ inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable
+ nativeSpellcheck: true,
+ ...this.options.easyMDEOptions,
+ };
+ easyMDEOpt.toolbar = this.parseEasyMDEToolbar(EasyMDE, easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault);
+
+ this.easyMDE = new EasyMDE(easyMDEOpt);
+ this.easyMDE.codemirror.on('change', (...args) => {this.options?.onContentChanged?.(this, ...args)});
+ this.easyMDE.codemirror.setOption('extraKeys', {
+ 'Cmd-Enter': (cm) => handleGlobalEnterQuickSubmit(cm.getTextArea()),
+ 'Ctrl-Enter': (cm) => handleGlobalEnterQuickSubmit(cm.getTextArea()),
+ Enter: (cm) => {
+ const tributeContainer = document.querySelector('.tribute-container');
+ if (!tributeContainer || tributeContainer.style.display === 'none') {
+ cm.execCommand('newlineAndIndent');
+ }
+ },
+ Up: (cm) => {
+ const tributeContainer = document.querySelector('.tribute-container');
+ if (!tributeContainer || tributeContainer.style.display === 'none') {
+ return cm.execCommand('goLineUp');
+ }
+ },
+ Down: (cm) => {
+ const tributeContainer = document.querySelector('.tribute-container');
+ if (!tributeContainer || tributeContainer.style.display === 'none') {
+ return cm.execCommand('goLineDown');
+ }
+ },
+ });
+ this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll'), this.options.editorHeights);
+ await attachTribute(this.easyMDE.codemirror.getInputField(), {mentions: true, emoji: true});
+ if (this.dropzone) {
+ initEasyMDEPaste(this.easyMDE, this.dropzone);
+ }
+ hideElem(this.textareaMarkdownToolbar);
+ }
+
+ value(v = undefined) {
+ if (v === undefined) {
+ if (this.easyMDE) {
+ return this.easyMDE.value();
+ }
+ return this.textarea.value;
+ }
+
+ if (this.easyMDE) {
+ this.easyMDE.value(v);
+ } else {
+ this.textarea.value = v;
+ }
+ this.textareaAutosize?.resizeToFit();
+ }
+
+ focus() {
+ if (this.easyMDE) {
+ this.easyMDE.codemirror.focus();
+ } else {
+ this.textarea.focus();
+ }
+ }
+
+ moveCursorToEnd() {
+ this.textarea.focus();
+ this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
+ if (this.easyMDE) {
+ this.easyMDE.codemirror.focus();
+ 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) {
+ if (el instanceof $) el = el[0];
+ return el?._giteaComboMarkdownEditor;
+}
+
+export async function initComboMarkdownEditor(container, options = {}) {
+ if (container instanceof $) {
+ if (container.length !== 1) {
+ throw new Error('initComboMarkdownEditor: container must be a single element');
+ }
+ container = container[0];
+ }
+ if (!container) {
+ throw new Error('initComboMarkdownEditor: container is null');
+ }
+ const editor = new ComboMarkdownEditor(container, options);
+ await editor.init();
+ return editor;
+}