1
- import $ from 'jquery' ;
2
1
import { initMarkupContent } from '../markup/content.js' ;
3
2
import { validateTextareaNonEmpty , initComboMarkdownEditor } from './comp/ComboMarkdownEditor.js' ;
4
3
import { fomanticMobileScreen } from '../modules/fomantic.js' ;
5
-
6
- const { csrfToken} = window . config ;
4
+ import { POST } from '../modules/fetch.js' ;
7
5
8
6
async function initRepoWikiFormEditor ( ) {
9
- const $ editArea = $ ( '.repository.wiki .combo-markdown-editor textarea' ) ;
10
- if ( ! $ editArea. length ) return ;
7
+ const editArea = document . querySelector ( '.repository.wiki .combo-markdown-editor textarea' ) ;
8
+ if ( ! editArea ) return ;
11
9
12
- const $ form = $ ( '.repository.wiki.new .ui.form' ) ;
13
- const $ editorContainer = $ form. find ( '.combo-markdown-editor' ) ;
10
+ const form = document . querySelector ( '.repository.wiki.new .ui.form' ) ;
11
+ const editorContainer = form . querySelector ( '.combo-markdown-editor' ) ;
14
12
let editor ;
15
13
16
14
let renderRequesting = false ;
17
15
let lastContent ;
18
- const renderEasyMDEPreview = function ( ) {
16
+ const renderEasyMDEPreview = async function ( ) {
19
17
if ( renderRequesting ) return ;
20
18
21
- const $ previewFull = $ editorContainer. find ( '.EasyMDEContainer .editor-preview-active' ) ;
22
- const $ previewSide = $ editorContainer. find ( '.EasyMDEContainer .editor-preview-active-side' ) ;
23
- const $ previewTarget = $ previewSide. length ? $previewSide : $ previewFull;
24
- const newContent = $ editArea. val ( ) ;
25
- if ( editor && $ previewTarget. length && lastContent !== newContent ) {
19
+ const previewFull = editorContainer . querySelector ( '.EasyMDEContainer .editor-preview-active' ) ;
20
+ const previewSide = editorContainer . querySelector ( '.EasyMDEContainer .editor-preview-active-side' ) ;
21
+ const previewTarget = previewSide || previewFull ;
22
+ const newContent = editArea . value ;
23
+ if ( editor && previewTarget && lastContent !== newContent ) {
26
24
renderRequesting = true ;
27
- $ . post ( editor . previewUrl , {
28
- _csrf : csrfToken ,
29
- mode : editor . previewMode ,
30
- context : editor . previewContext ,
31
- text : newContent ,
32
- wiki : editor . previewWiki ,
33
- } ) . done ( ( data ) => {
25
+ const formData = new FormData ( ) ;
26
+ formData . append ( 'mode' , editor . previewMode ) ;
27
+ formData . append ( 'context' , editor . previewContext ) ;
28
+ formData . append ( 'text' , newContent ) ;
29
+ formData . append ( 'wiki' , editor . previewWiki ) ;
30
+ try {
31
+ const response = await POST ( editor . previewUrl , { data : formData } ) ;
32
+ const data = await response . text ( ) ;
34
33
lastContent = newContent ;
35
- $ previewTarget. html ( `<div class="markup ui segment">${ data } </div>` ) ;
34
+ previewTarget . innerHTML = `<div class="markup ui segment">${ data } </div>` ;
36
35
initMarkupContent ( ) ;
37
- } ) . always ( ( ) => {
36
+ } catch ( error ) {
37
+ console . error ( 'Error rendering preview:' , error ) ;
38
+ } finally {
38
39
renderRequesting = false ;
39
40
setTimeout ( renderEasyMDEPreview , 1000 ) ;
40
- } ) ;
41
+ }
41
42
} else {
42
43
setTimeout ( renderEasyMDEPreview , 1000 ) ;
43
44
}
44
45
} ;
45
46
renderEasyMDEPreview ( ) ;
46
47
47
- editor = await initComboMarkdownEditor ( $ editorContainer, {
48
+ editor = await initComboMarkdownEditor ( editorContainer , {
48
49
useScene : 'wiki' ,
49
50
// EasyMDE has some problems of height definition, it has inline style height 300px by default, so we also use inline styles to override it.
50
51
// And another benefit is that we only need to write the style once for both editors.
@@ -64,9 +65,10 @@ async function initRepoWikiFormEditor() {
64
65
} ,
65
66
} ) ;
66
67
67
- $form . on ( 'submit' , ( ) => {
68
- if ( ! validateTextareaNonEmpty ( $editArea ) ) {
69
- return false ;
68
+ form . addEventListener ( 'submit' , ( e ) => {
69
+ if ( ! validateTextareaNonEmpty ( editArea ) ) {
70
+ e . preventDefault ( ) ;
71
+ e . stopPropagation ( ) ;
70
72
}
71
73
} ) ;
72
74
}
0 commit comments