git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Remove jQuery from repo wiki creation page (#29271)

Browse source 
- Switched to plain JavaScript
- Tested the wiki creation form functionality and it works as before

# Demo using JavaScript without jQuery

![action](2dfc95fd-40cc-4ffb-9ae6-50f798fddd67)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit ade1110e8b7d94dc142a259854e2b73845eab8b9)
This commit is contained in:
Yarden Shoham 2024-02-20 12:37:37 +02:00 • committed by Earl Warren
parent eefc4bf6f0
commit 0d61f3decc
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
4 changed files with 51 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

56
web_src/js/features/repo-wiki.js
View file

@ -1,50 +1,51 @@
import $ from 'jquery';
import {initMarkupContent} from '../markup/content.js';
import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
import {fomanticMobileScreen} from '../modules/fomantic.js';
const {csrfToken} = window.config;
import {POST} from '../modules/fetch.js';
async function initRepoWikiFormEditor() {
const $editArea = $('.repository.wiki .combo-markdown-editor textarea');
if (!$editArea.length) return;
const editArea = document.querySelector('.repository.wiki .combo-markdown-editor textarea');
if (!editArea) return;
const $form = $('.repository.wiki.new .ui.form');
const $editorContainer = $form.find('.combo-markdown-editor');
const form = document.querySelector('.repository.wiki.new .ui.form');
const editorContainer = form.querySelector('.combo-markdown-editor');
let editor;
let renderRequesting = false;
let lastContent;
const renderEasyMDEPreview = function () {
const renderEasyMDEPreview = async function () {
if (renderRequesting) return;
const $previewFull = $editorContainer.find('.EasyMDEContainer .editor-preview-active');
const $previewSide = $editorContainer.find('.EasyMDEContainer .editor-preview-active-side');
const $previewTarget = $previewSide.length ? $previewSide : $previewFull;
const newContent = $editArea.val();
if (editor && $previewTarget.length && lastContent !== newContent) {
const previewFull = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active');
const previewSide = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active-side');
const previewTarget = previewSide || previewFull;
const newContent = editArea.value;
if (editor && previewTarget && lastContent !== newContent) {
renderRequesting = true;
$.post(editor.previewUrl, {
_csrf: csrfToken,
mode: editor.previewMode,
context: editor.previewContext,
text: newContent,
wiki: editor.previewWiki,
}).done((data) => {
const formData = new FormData();
formData.append('mode', editor.previewMode);
formData.append('context', editor.previewContext);
formData.append('text', newContent);
formData.append('wiki', editor.previewWiki);
try {
const response = await POST(editor.previewUrl, {data: formData});
const data = await response.text();
lastContent = newContent;
$previewTarget.html(`<div class="markup ui segment">${data}</div>`);
previewTarget.innerHTML = `<div class="markup ui segment">${data}</div>`;
initMarkupContent();
}).always(() => {
} catch (error) {
console.error('Error rendering preview:', error);
} finally {
renderRequesting = false;
setTimeout(renderEasyMDEPreview, 1000);
});
}
} else {
setTimeout(renderEasyMDEPreview, 1000);
}
};
renderEasyMDEPreview();
editor = await initComboMarkdownEditor($editorContainer, {
editor = await initComboMarkdownEditor(editorContainer, {
useScene: 'wiki',
// EasyMDE has some problems of height definition, it has inline style height 300px by default, so we also use inline styles to override it.
// And another benefit is that we only need to write the style once for both editors.
@ -64,9 +65,10 @@ async function initRepoWikiFormEditor() {
},
});
$form.on('submit', () => {
if (!validateTextareaNonEmpty($editArea)) {
return false;
form.addEventListener('submit', (e) => {
if (!validateTextareaNonEmpty(editArea)) {
e.preventDefault();
e.stopPropagation();
}
});
}