11import attachTribute from '../tribute.js' ;
22
3+ const { appSubUrl} = window . config ;
4+
5+ function loadScript ( url ) {
6+ return new Promise ( ( resolve , reject ) => {
7+ const script = document . createElement ( 'script' ) ;
8+ script . async = true ;
9+ script . addEventListener ( 'load' , ( ) => {
10+ resolve ( ) ;
11+ } ) ;
12+ script . addEventListener ( 'error' , ( e ) => {
13+ reject ( e . error ) ;
14+ } ) ;
15+ document . body . appendChild ( script ) ;
16+ script . src = url ;
17+ } ) ;
18+ }
19+
20+ export async function importEasyMDE ( ) {
21+ // for CodeMirror: the plugins should be loaded dynamically
22+ // https://github.com/codemirror/CodeMirror/issues/5484
23+ // https://github.com/codemirror/CodeMirror/issues/4838
24+
25+ const [ { default : EasyMDE } , { default : CodeMirror } ] = await Promise . all ( [
26+ import ( /* webpackChunkName: "easymde" */ 'easymde' ) ,
27+ import ( /* webpackChunkName: "codemirror" */ 'codemirror' ) ,
28+ import ( /* webpackChunkName: "easymde" */ 'easymde/dist/easymde.min.css' ) ,
29+ ] ) ;
30+
31+ // CodeMirror plugins must be loaded by a "Plain browser env"
32+ window . CodeMirror = CodeMirror ;
33+ await Promise . all ( [
34+ loadScript ( `${ appSubUrl } ) ,
35+ loadScript ( `${ appSubUrl } ) ,
36+ ] ) ;
37+
38+ // the loadmode.js/meta.js would set the modeURL/modeInfo properties, so we check it to make sure our loading works
39+ if ( ! CodeMirror . modeURL || ! CodeMirror . modeInfo ) {
40+ throw new Error ( 'failed to load plugins for CodeMirror' ) ;
41+ }
42+
43+ CodeMirror . modeURL = `${ appSubUrl } ;
44+ return EasyMDE ;
45+ }
46+
347/**
448 * create an EasyMDE editor for comment
549 * @param textarea jQuery or HTMLElement
650 * @returns {null|EasyMDE }
751 */
8- export function createCommentEasyMDE ( textarea ) {
52+ export async function createCommentEasyMDE ( textarea ) {
953 if ( textarea instanceof jQuery ) {
1054 textarea = textarea [ 0 ] ;
1155 }
1256 if ( ! textarea ) {
1357 return null ;
1458 }
1559
16- const easyMDE = new window . EasyMDE ( {
60+ const EasyMDE = await importEasyMDE ( ) ;
61+ const easyMDE = new EasyMDE ( {
1762 autoDownloadFontAwesome : false ,
1863 element : textarea ,
1964 forceSync : true ,
2065 renderingConfig : {
21- singleLineBreaks : false
66+ singleLineBreaks : false ,
2267 } ,
2368 indentWithTabs : false ,
2469 tabSize : 4 ,
@@ -56,7 +101,7 @@ export function createCommentEasyMDE(textarea) {
56101 className : 'fa fa-file' ,
57102 title : 'Revert to simple textarea' ,
58103 } ,
59- ]
104+ ] ,
60105 } ) ;
61106 const inputField = easyMDE . codemirror . getInputField ( ) ;
62107 inputField . classList . add ( 'js-quick-submit' ) ;
@@ -72,13 +117,12 @@ export function createCommentEasyMDE(textarea) {
72117 cm . getInputField ( ) . trigger ( 'input' ) ;
73118 }
74119 cm . execCommand ( 'delCharBefore' ) ;
75- }
120+ } ,
76121 } ) ;
77122 attachTribute ( inputField , { mentions : true , emoji : true } ) ;
78123
79- // TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement
80- inputField . _data_easyMDE = easyMDE ;
81- textarea . _data_easyMDE = easyMDE ;
124+ setAttachedEasyMDE ( inputField , easyMDE ) ;
125+ setAttachedEasyMDE ( textarea , easyMDE ) ;
82126 return easyMDE ;
83127}
84128
@@ -96,3 +140,14 @@ export function getAttachedEasyMDE(el) {
96140 }
97141 return el . _data_easyMDE ;
98142}
143+
144+ function setAttachedEasyMDE ( el , easyMDE ) {
145+ if ( el instanceof jQuery ) {
146+ el = el [ 0 ] ;
147+ }
148+ if ( ! el ) {
149+ return ;
150+ }
151+ // TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement
152+ el . _data_easyMDE = easyMDE ;
153+ }
0 commit comments