1+ /**
2+ * CodeMirror Media Insertion functionality.
3+ *
4+ * Handles media library integration for CodeMirror editor instances.
5+ *
6+ * @since 1.0.0
7+ */
18jQuery ( document ) . ready ( function ( $ ) {
2- function insertString ( editor , str ) {
39
10+ /**
11+ * Insert string into CodeMirror editor.
12+ *
13+ * @since 1.0.0
14+ *
15+ * @param {Object } editor CodeMirror instance.
16+ * @param {string } str String to insert.
17+ */
18+ function insertString ( editor , str ) {
419 var selection = editor . getSelection ( ) ;
520
621 if ( selection . length > 0 ) {
722 editor . replaceSelection ( str ) ;
823 } else {
9-
1024 var doc = editor . getDoc ( ) ;
1125 var cursor = doc . getCursor ( ) ;
12-
1326 var pos = {
1427 line : cursor . line ,
1528 ch : cursor . ch
16- }
29+ } ;
1730
1831 doc . replaceRange ( str , pos ) ;
19-
2032 }
21-
2233 }
2334
24- // Media selector.
25- $ ( '.insert-codemirror-media' ) . on ( 'click' , function ( event ) {
26- event . preventDefault ( ) ;
35+ /**
36+ * Generate attachment HTML via AJAX.
37+ *
38+ * @since 1.0.0
39+ *
40+ * @param {Object } props Display properties.
41+ * @param {Object } attachment Attachment object.
42+ * @return {Promise } jQuery AJAX promise.
43+ */
44+ function attachmentHtml ( props , attachment ) {
45+ var caption = attachment . caption ;
46+ var options ;
47+ var html ;
48+
49+ // Clear caption if disabled globally.
50+ if ( ! wp . media . view . settings . captions ) {
51+ delete attachment . caption ;
52+ }
2753
28- var self = $ ( this ) ;
29- var editor = $ ( '#wp-content-editor-container .CodeMirror' ) [ 0 ] . CodeMirror ;
54+ props = wp . media . string . props ( props , attachment ) ;
3055
31- function attachmentHtml ( props , attachment ) {
32- var caption = attachment . caption ,
33- options , html ;
56+ options = {
57+ id : attachment . id ,
58+ post_content : attachment . description ,
59+ post_excerpt : caption
60+ } ;
3461
35- // If captions are disabled, clear the caption.
36- if ( ! wp . media . view . settings . captions ) {
37- delete attachment . caption ;
38- }
62+ if ( props . linkUrl ) {
63+ options . url = props . linkUrl ;
64+ }
3965
40- props = wp . media . string . props ( props , attachment ) ;
66+ if ( 'image' === attachment . type ) {
67+ html = wp . media . string . image ( props ) ;
4168
42- options = {
43- id : attachment . id ,
44- post_content : attachment . description ,
45- post_excerpt : caption
46- } ;
47-
48- if ( props . linkUrl ) {
49- options . url = props . linkUrl ;
50- }
69+ _ . each ( {
70+ align : 'align' ,
71+ size : 'image-size' ,
72+ alt : 'image_alt'
73+ } , function ( option , prop ) {
74+ if ( props [ prop ] ) {
75+ options [ option ] = props [ prop ] ;
76+ }
77+ } ) ;
78+ } else if ( 'video' === attachment . type ) {
79+ html = wp . media . string . video ( props , attachment ) ;
80+ } else if ( 'audio' === attachment . type ) {
81+ html = wp . media . string . audio ( props , attachment ) ;
82+ } else {
83+ html = wp . media . string . link ( props ) ;
84+ options . post_title = props . title ;
85+ }
5186
52- if ( 'image' === attachment . type ) {
53- html = wp . media . string . image ( props ) ;
54-
55- _ . each ( {
56- align : 'align' ,
57- size : 'image-size' ,
58- alt : 'image_alt'
59- } , function ( option , prop ) {
60- if ( props [ prop ] ) {
61- options [ option ] = props [ prop ] ;
62- }
63- } ) ;
64- } else if ( 'video' === attachment . type ) {
65- html = wp . media . string . video ( props , attachment ) ;
66- } else if ( 'audio' === attachment . type ) {
67- html = wp . media . string . audio ( props , attachment ) ;
68- } else {
69- html = wp . media . string . link ( props ) ;
70- options . post_title = props . title ;
87+ return $ . ajax ( {
88+ type : 'POST' ,
89+ dataType : 'json' ,
90+ url : ajaxurl ,
91+ data : {
92+ action : 'send-attachment-to-editor' ,
93+ nonce : wp . media . view . settings . nonce . sendToEditor ,
94+ attachment : options ,
95+ html : html ,
96+ post_id : wp . media . view . settings . post . id
7197 }
98+ } ) ;
99+ }
72100
73- return $ . ajax ( {
74- type : 'POST' ,
75- dataType : 'json' ,
76- url : ajaxurl ,
77- data : {
78- action : 'send-attachment-to-editor' ,
79- nonce : wp . media . view . settings . nonce . sendToEditor ,
80- attachment : options ,
81- html : html ,
82- post_id : wp . media . view . settings . post . id
83- } ,
84- success : function ( response ) {
85- //mediaHtml = response.data;
86- }
101+ /**
102+ * Process media selection and insert into editor.
103+ *
104+ * @since 1.0.0
105+ *
106+ * @param {Object } editor CodeMirror instance.
107+ * @param {Object } fileFrame Media frame instance.
108+ */
109+ function processMediaSelection ( editor , fileFrame ) {
110+ var selection = fileFrame . state ( ) . get ( 'selection' ) ;
111+ var promises = [ ] ;
112+
113+ selection . each ( function ( attachment ) {
114+ var props = fileFrame . state ( ) . display ( attachment ) . toJSON ( ) ;
115+ var promise = attachmentHtml ( props , attachment . toJSON ( ) ) . done ( function ( response ) {
116+ insertString ( editor , response . data ) ;
87117 } ) ;
88- }
89118
90- // Create the media frame.
91- var file_frame = wp . media . frames . file_frame = wp . media ( {
92- frame : 'post' ,
93- state : 'insert' ,
94- multiple : true
119+ promises . push ( promise ) ;
95120 } ) ;
96121
97- file_frame . on ( 'insert' , function ( ) {
98- var selection = file_frame . state ( ) . get ( 'selection' ) ;
122+ $ . when . apply ( $ , promises ) . always ( function ( ) {
123+ fileFrame . close ( ) ;
124+ } ) ;
125+ }
99126
100- selection . map ( function ( attachment ) {
127+ /**
128+ * Handle media insertion button clicks.
129+ *
130+ * @since 1.0.0
131+ */
132+ $ ( '.insert-codemirror-media' ) . on ( 'click' , function ( event ) {
133+ event . preventDefault ( ) ;
134+ event . stopImmediatePropagation ( ) ;
135+ event . stopPropagation ( ) ;
136+ $ ( this ) . removeClass ( 'add_media' ) ;
101137
102- var props = file_frame . state ( ) . display ( attachment ) . toJSON ( ) ;
138+ var editor = $ ( '#wp-content-editor-container .CodeMirror' ) [ 0 ] . CodeMirror ;
139+ var fileFrame ;
103140
104- $ . when ( attachmentHtml ( props , attachment . toJSON ( ) ) ) . done ( function ( response ) {
105- mediaHtml = response . data ;
106- insertString ( editor , mediaHtml ) ;
107- } ) ;
108- } ) ;
141+ fileFrame = wp . media . frames . file_frame = wp . media ( {
142+ frame : 'post' ,
143+ state : 'insert' ,
144+ multiple : false
145+ } ) ;
109146
147+ // Remove old handlers and add insert handler only.
148+ fileFrame . off ( 'insert' ) . on ( 'insert' , function ( ) {
149+ processMediaSelection ( editor , fileFrame ) ;
110150 } ) ;
111151
112- // Finally, open the modal
113- file_frame . open ( ) ;
152+ fileFrame . open ( ) ;
114153 } ) ;
115- } ) ;
154+
155+ } ) ;
0 commit comments