|
1 /* global tinymce */ |
|
2 tinymce.PluginManager.add( 'wpeditimage', function( editor ) { |
|
3 var toolbar, serializer, |
|
4 each = tinymce.each, |
|
5 iOS = tinymce.Env.iOS; |
|
6 |
|
7 function isPlaceholder( node ) { |
|
8 return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) ); |
|
9 } |
|
10 |
|
11 editor.addButton( 'wp_img_remove', { |
|
12 tooltip: 'Remove', |
|
13 icon: 'dashicon dashicons-no', |
|
14 onclick: function() { |
|
15 removeImage( editor.selection.getNode() ); |
|
16 } |
|
17 } ); |
|
18 |
|
19 editor.addButton( 'wp_img_edit', { |
|
20 tooltip: 'Edit ', // trailing space is needed, used for context |
|
21 icon: 'dashicon dashicons-edit', |
|
22 onclick: function() { |
|
23 editImage( editor.selection.getNode() ); |
|
24 } |
|
25 } ); |
|
26 |
|
27 each( { |
|
28 alignleft: 'Align left', |
|
29 aligncenter: 'Align center', |
|
30 alignright: 'Align right', |
|
31 alignnone: 'No alignment' |
|
32 }, function( tooltip, name ) { |
|
33 var direction = name.slice( 5 ); |
|
34 |
|
35 editor.addButton( 'wp_img_' + name, { |
|
36 tooltip: tooltip, |
|
37 icon: 'dashicon dashicons-align-' + direction, |
|
38 cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ), |
|
39 onPostRender: function() { |
|
40 var self = this; |
|
41 |
|
42 editor.on( 'NodeChange', function( event ) { |
|
43 var node; |
|
44 |
|
45 // Don't bother. |
|
46 if ( event.element.nodeName !== 'IMG' ) { |
|
47 return; |
|
48 } |
|
49 |
|
50 node = editor.dom.getParent( event.element, '.wp-caption' ) || event.element; |
|
51 |
|
52 if ( 'alignnone' === name ) { |
|
53 self.active( ! /\balign(left|center|right)\b/.test( node.className ) ); |
|
54 } else { |
|
55 self.active( editor.dom.hasClass( node, name ) ); |
|
56 } |
|
57 } ); |
|
58 } |
|
59 } ); |
|
60 } ); |
|
61 |
|
62 editor.once( 'preinit', function() { |
|
63 toolbar = editor.wp._createToolbar( [ |
|
64 'wp_img_alignleft', |
|
65 'wp_img_aligncenter', |
|
66 'wp_img_alignright', |
|
67 'wp_img_alignnone', |
|
68 'wp_img_edit', |
|
69 'wp_img_remove' |
|
70 ] ); |
|
71 } ); |
|
72 |
|
73 editor.on( 'wptoolbar', function( event ) { |
|
74 if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) { |
|
75 event.toolbar = toolbar; |
|
76 } |
|
77 } ); |
|
78 |
|
79 // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click. |
|
80 // Select them again. |
|
81 if ( iOS ) { |
|
82 editor.on( 'click', function( event ) { |
|
83 if ( event.target.nodeName === 'IMG' ) { |
|
84 var node = event.target; |
|
85 |
|
86 window.setTimeout( function() { |
|
87 editor.selection.select( node ); |
|
88 editor.nodeChanged(); |
|
89 }, 200 ); |
|
90 } else { |
|
91 toolbar.hide(); |
|
92 } |
|
93 } ); |
|
94 } |
|
95 |
|
96 function parseShortcode( content ) { |
|
97 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) { |
|
98 var id, align, classes, caption, img, width, |
|
99 trim = tinymce.trim; |
|
100 |
|
101 id = b.match( /id=['"]([^'"]*)['"] ?/ ); |
|
102 if ( id ) { |
|
103 b = b.replace( id[0], '' ); |
|
104 } |
|
105 |
|
106 align = b.match( /align=['"]([^'"]*)['"] ?/ ); |
|
107 if ( align ) { |
|
108 b = b.replace( align[0], '' ); |
|
109 } |
|
110 |
|
111 classes = b.match( /class=['"]([^'"]*)['"] ?/ ); |
|
112 if ( classes ) { |
|
113 b = b.replace( classes[0], '' ); |
|
114 } |
|
115 |
|
116 width = b.match( /width=['"]([0-9]*)['"] ?/ ); |
|
117 if ( width ) { |
|
118 b = b.replace( width[0], '' ); |
|
119 } |
|
120 |
|
121 c = trim( c ); |
|
122 img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i ); |
|
123 |
|
124 if ( img && img[2] ) { |
|
125 caption = trim( img[2] ); |
|
126 img = trim( img[1] ); |
|
127 } else { |
|
128 // old captions shortcode style |
|
129 caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' ); |
|
130 img = c; |
|
131 } |
|
132 |
|
133 id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g, '' ) : ''; |
|
134 align = ( align && align[1] ) ? align[1] : 'alignnone'; |
|
135 classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g, '' ) : ''; |
|
136 |
|
137 if ( ! width && img ) { |
|
138 width = img.match( /width=['"]([0-9]*)['"]/ ); |
|
139 } |
|
140 |
|
141 if ( width && width[1] ) { |
|
142 width = width[1]; |
|
143 } |
|
144 |
|
145 if ( ! width || ! caption ) { |
|
146 return c; |
|
147 } |
|
148 |
|
149 width = parseInt( width, 10 ); |
|
150 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { |
|
151 width += 10; |
|
152 } |
|
153 |
|
154 return '<div class="mceTemp"><dl id="' + id + '" class="wp-caption ' + align + classes + '" style="width: ' + width + 'px">' + |
|
155 '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl></div>'; |
|
156 }); |
|
157 } |
|
158 |
|
159 function getShortcode( content ) { |
|
160 return content.replace( /<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function( a, b ) { |
|
161 var out = ''; |
|
162 |
|
163 if ( b.indexOf('<img ') === -1 ) { |
|
164 // Broken caption. The user managed to drag the image out? |
|
165 // Try to return the caption text as a paragraph. |
|
166 out = b.match( /<dd [^>]+>([\s\S]+?)<\/dd>/i ); |
|
167 |
|
168 if ( out && out[1] ) { |
|
169 return '<p>' + out[1] + '</p>'; |
|
170 } |
|
171 |
|
172 return ''; |
|
173 } |
|
174 |
|
175 out = b.replace( /\s*<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) { |
|
176 var id, classes, align, width; |
|
177 |
|
178 width = c.match( /width="([0-9]*)"/ ); |
|
179 width = ( width && width[1] ) ? width[1] : ''; |
|
180 |
|
181 classes = b.match( /class="([^"]*)"/ ); |
|
182 classes = ( classes && classes[1] ) ? classes[1] : ''; |
|
183 align = classes.match( /align[a-z]+/i ) || 'alignnone'; |
|
184 |
|
185 if ( ! width || ! caption ) { |
|
186 if ( 'alignnone' !== align[0] ) { |
|
187 c = c.replace( /><img/, ' class="' + align[0] + '"><img' ); |
|
188 } |
|
189 return c; |
|
190 } |
|
191 |
|
192 id = b.match( /id="([^"]*)"/ ); |
|
193 id = ( id && id[1] ) ? id[1] : ''; |
|
194 |
|
195 classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' ); |
|
196 |
|
197 if ( classes ) { |
|
198 classes = ' class="' + classes + '"'; |
|
199 } |
|
200 |
|
201 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) { |
|
202 // no line breaks inside HTML tags |
|
203 return a.replace( /[\r\n\t]+/, ' ' ); |
|
204 }); |
|
205 |
|
206 // convert remaining line breaks to <br> |
|
207 caption = caption.replace( /\s*\n\s*/g, '<br />' ); |
|
208 |
|
209 return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]'; |
|
210 }); |
|
211 |
|
212 if ( out.indexOf('[caption') === -1 ) { |
|
213 // the caption html seems broken, try to find the image that may be wrapped in a link |
|
214 // and may be followed by <p> with the caption text. |
|
215 out = b.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' ); |
|
216 } |
|
217 |
|
218 return out; |
|
219 }); |
|
220 } |
|
221 |
|
222 function extractImageData( imageNode ) { |
|
223 var classes, extraClasses, metadata, captionBlock, caption, link, width, height, |
|
224 captionClassName = [], |
|
225 dom = editor.dom, |
|
226 isIntRegExp = /^\d+$/; |
|
227 |
|
228 // default attributes |
|
229 metadata = { |
|
230 attachment_id: false, |
|
231 size: 'custom', |
|
232 caption: '', |
|
233 align: 'none', |
|
234 extraClasses: '', |
|
235 link: false, |
|
236 linkUrl: '', |
|
237 linkClassName: '', |
|
238 linkTargetBlank: false, |
|
239 linkRel: '', |
|
240 title: '' |
|
241 }; |
|
242 |
|
243 metadata.url = dom.getAttrib( imageNode, 'src' ); |
|
244 metadata.alt = dom.getAttrib( imageNode, 'alt' ); |
|
245 metadata.title = dom.getAttrib( imageNode, 'title' ); |
|
246 |
|
247 width = dom.getAttrib( imageNode, 'width' ); |
|
248 height = dom.getAttrib( imageNode, 'height' ); |
|
249 |
|
250 if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) { |
|
251 width = imageNode.naturalWidth || imageNode.width; |
|
252 } |
|
253 |
|
254 if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) { |
|
255 height = imageNode.naturalHeight || imageNode.height; |
|
256 } |
|
257 |
|
258 metadata.customWidth = metadata.width = width; |
|
259 metadata.customHeight = metadata.height = height; |
|
260 |
|
261 classes = tinymce.explode( imageNode.className, ' ' ); |
|
262 extraClasses = []; |
|
263 |
|
264 tinymce.each( classes, function( name ) { |
|
265 |
|
266 if ( /^wp-image/.test( name ) ) { |
|
267 metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 ); |
|
268 } else if ( /^align/.test( name ) ) { |
|
269 metadata.align = name.replace( 'align', '' ); |
|
270 } else if ( /^size/.test( name ) ) { |
|
271 metadata.size = name.replace( 'size-', '' ); |
|
272 } else { |
|
273 extraClasses.push( name ); |
|
274 } |
|
275 |
|
276 } ); |
|
277 |
|
278 metadata.extraClasses = extraClasses.join( ' ' ); |
|
279 |
|
280 // Extract caption |
|
281 captionBlock = dom.getParents( imageNode, '.wp-caption' ); |
|
282 |
|
283 if ( captionBlock.length ) { |
|
284 captionBlock = captionBlock[0]; |
|
285 |
|
286 classes = captionBlock.className.split( ' ' ); |
|
287 tinymce.each( classes, function( name ) { |
|
288 if ( /^align/.test( name ) ) { |
|
289 metadata.align = name.replace( 'align', '' ); |
|
290 } else if ( name && name !== 'wp-caption' ) { |
|
291 captionClassName.push( name ); |
|
292 } |
|
293 } ); |
|
294 |
|
295 metadata.captionClassName = captionClassName.join( ' ' ); |
|
296 |
|
297 caption = dom.select( 'dd.wp-caption-dd', captionBlock ); |
|
298 if ( caption.length ) { |
|
299 caption = caption[0]; |
|
300 |
|
301 metadata.caption = editor.serializer.serialize( caption ) |
|
302 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' ); |
|
303 } |
|
304 } |
|
305 |
|
306 // Extract linkTo |
|
307 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) { |
|
308 link = imageNode.parentNode; |
|
309 metadata.linkUrl = dom.getAttrib( link, 'href' ); |
|
310 metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false; |
|
311 metadata.linkRel = dom.getAttrib( link, 'rel' ); |
|
312 metadata.linkClassName = link.className; |
|
313 } |
|
314 |
|
315 return metadata; |
|
316 } |
|
317 |
|
318 function hasTextContent( node ) { |
|
319 return node && !! ( node.textContent || node.innerText ); |
|
320 } |
|
321 |
|
322 // Verify HTML in captions |
|
323 function verifyHTML( caption ) { |
|
324 if ( ! caption || ( caption.indexOf( '<' ) === -1 && caption.indexOf( '>' ) === -1 ) ) { |
|
325 return caption; |
|
326 } |
|
327 |
|
328 if ( ! serializer ) { |
|
329 serializer = new tinymce.html.Serializer( {}, editor.schema ); |
|
330 } |
|
331 |
|
332 return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) ); |
|
333 } |
|
334 |
|
335 function updateImage( imageNode, imageData ) { |
|
336 var classes, className, node, html, parent, wrap, linkNode, |
|
337 captionNode, dd, dl, id, attrs, linkAttrs, width, height, align, |
|
338 dom = editor.dom; |
|
339 |
|
340 classes = tinymce.explode( imageData.extraClasses, ' ' ); |
|
341 |
|
342 if ( ! classes ) { |
|
343 classes = []; |
|
344 } |
|
345 |
|
346 if ( ! imageData.caption ) { |
|
347 classes.push( 'align' + imageData.align ); |
|
348 } |
|
349 |
|
350 if ( imageData.attachment_id ) { |
|
351 classes.push( 'wp-image-' + imageData.attachment_id ); |
|
352 if ( imageData.size && imageData.size !== 'custom' ) { |
|
353 classes.push( 'size-' + imageData.size ); |
|
354 } |
|
355 } |
|
356 |
|
357 width = imageData.width; |
|
358 height = imageData.height; |
|
359 |
|
360 if ( imageData.size === 'custom' ) { |
|
361 width = imageData.customWidth; |
|
362 height = imageData.customHeight; |
|
363 } |
|
364 |
|
365 attrs = { |
|
366 src: imageData.url, |
|
367 width: width || null, |
|
368 height: height || null, |
|
369 alt: imageData.alt, |
|
370 title: imageData.title || null, |
|
371 'class': classes.join( ' ' ) || null |
|
372 }; |
|
373 |
|
374 dom.setAttribs( imageNode, attrs ); |
|
375 |
|
376 linkAttrs = { |
|
377 href: imageData.linkUrl, |
|
378 rel: imageData.linkRel || null, |
|
379 target: imageData.linkTargetBlank ? '_blank': null, |
|
380 'class': imageData.linkClassName || null |
|
381 }; |
|
382 |
|
383 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) { |
|
384 // Update or remove an existing link wrapped around the image |
|
385 if ( imageData.linkUrl ) { |
|
386 dom.setAttribs( imageNode.parentNode, linkAttrs ); |
|
387 } else { |
|
388 dom.remove( imageNode.parentNode, true ); |
|
389 } |
|
390 } else if ( imageData.linkUrl ) { |
|
391 if ( linkNode = dom.getParent( imageNode, 'a' ) ) { |
|
392 // The image is inside a link together with other nodes, |
|
393 // or is nested in another node, move it out |
|
394 dom.insertAfter( imageNode, linkNode ); |
|
395 } |
|
396 |
|
397 // Add link wrapped around the image |
|
398 linkNode = dom.create( 'a', linkAttrs ); |
|
399 imageNode.parentNode.insertBefore( linkNode, imageNode ); |
|
400 linkNode.appendChild( imageNode ); |
|
401 } |
|
402 |
|
403 captionNode = editor.dom.getParent( imageNode, '.mceTemp' ); |
|
404 |
|
405 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) { |
|
406 node = imageNode.parentNode; |
|
407 } else { |
|
408 node = imageNode; |
|
409 } |
|
410 |
|
411 if ( imageData.caption ) { |
|
412 imageData.caption = verifyHTML( imageData.caption ); |
|
413 |
|
414 id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null; |
|
415 align = 'align' + ( imageData.align || 'none' ); |
|
416 className = 'wp-caption ' + align; |
|
417 |
|
418 if ( imageData.captionClassName ) { |
|
419 className += ' ' + imageData.captionClassName.replace( /[<>&]+/g, '' ); |
|
420 } |
|
421 |
|
422 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { |
|
423 width = parseInt( width, 10 ); |
|
424 width += 10; |
|
425 } |
|
426 |
|
427 if ( captionNode ) { |
|
428 dl = dom.select( 'dl.wp-caption', captionNode ); |
|
429 |
|
430 if ( dl.length ) { |
|
431 dom.setAttribs( dl, { |
|
432 id: id, |
|
433 'class': className, |
|
434 style: 'width: ' + width + 'px' |
|
435 } ); |
|
436 } |
|
437 |
|
438 dd = dom.select( '.wp-caption-dd', captionNode ); |
|
439 |
|
440 if ( dd.length ) { |
|
441 dom.setHTML( dd[0], imageData.caption ); |
|
442 } |
|
443 |
|
444 } else { |
|
445 id = id ? 'id="'+ id +'" ' : ''; |
|
446 |
|
447 // should create a new function for generating the caption markup |
|
448 html = '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' + |
|
449 '<dt class="wp-caption-dt"></dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>'; |
|
450 |
|
451 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html ); |
|
452 |
|
453 if ( parent = dom.getParent( node, 'p' ) ) { |
|
454 parent.parentNode.insertBefore( wrap, parent ); |
|
455 } else { |
|
456 node.parentNode.insertBefore( wrap, node ); |
|
457 } |
|
458 |
|
459 editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node ); |
|
460 |
|
461 if ( parent && dom.isEmpty( parent ) ) { |
|
462 dom.remove( parent ); |
|
463 } |
|
464 } |
|
465 } else if ( captionNode ) { |
|
466 // Remove the caption wrapper and place the image in new paragraph |
|
467 parent = dom.create( 'p' ); |
|
468 captionNode.parentNode.insertBefore( parent, captionNode ); |
|
469 parent.appendChild( node ); |
|
470 dom.remove( captionNode ); |
|
471 } |
|
472 |
|
473 if ( wp.media.events ) { |
|
474 wp.media.events.trigger( 'editor:image-update', { |
|
475 editor: editor, |
|
476 metadata: imageData, |
|
477 image: imageNode |
|
478 } ); |
|
479 } |
|
480 |
|
481 editor.nodeChanged(); |
|
482 } |
|
483 |
|
484 function editImage( img ) { |
|
485 var frame, callback, metadata; |
|
486 |
|
487 if ( typeof wp === 'undefined' || ! wp.media ) { |
|
488 editor.execCommand( 'mceImage' ); |
|
489 return; |
|
490 } |
|
491 |
|
492 metadata = extractImageData( img ); |
|
493 |
|
494 // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal |
|
495 wp.media.events.trigger( 'editor:image-edit', { |
|
496 editor: editor, |
|
497 metadata: metadata, |
|
498 image: img |
|
499 } ); |
|
500 |
|
501 frame = wp.media({ |
|
502 frame: 'image', |
|
503 state: 'image-details', |
|
504 metadata: metadata |
|
505 } ); |
|
506 |
|
507 wp.media.events.trigger( 'editor:frame-create', { frame: frame } ); |
|
508 |
|
509 callback = function( imageData ) { |
|
510 editor.focus(); |
|
511 editor.undoManager.transact( function() { |
|
512 updateImage( img, imageData ); |
|
513 } ); |
|
514 frame.detach(); |
|
515 }; |
|
516 |
|
517 frame.state('image-details').on( 'update', callback ); |
|
518 frame.state('replace-image').on( 'replace', callback ); |
|
519 frame.on( 'close', function() { |
|
520 editor.focus(); |
|
521 frame.detach(); |
|
522 }); |
|
523 |
|
524 frame.open(); |
|
525 } |
|
526 |
|
527 function removeImage( node ) { |
|
528 var wrap; |
|
529 |
|
530 if ( node.nodeName === 'DIV' && editor.dom.hasClass( node, 'mceTemp' ) ) { |
|
531 wrap = node; |
|
532 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) { |
|
533 wrap = editor.dom.getParent( node, 'div.mceTemp' ); |
|
534 } |
|
535 |
|
536 if ( wrap ) { |
|
537 if ( wrap.nextSibling ) { |
|
538 editor.selection.select( wrap.nextSibling ); |
|
539 } else if ( wrap.previousSibling ) { |
|
540 editor.selection.select( wrap.previousSibling ); |
|
541 } else { |
|
542 editor.selection.select( wrap.parentNode ); |
|
543 } |
|
544 |
|
545 editor.selection.collapse( true ); |
|
546 editor.dom.remove( wrap ); |
|
547 } else { |
|
548 editor.dom.remove( node ); |
|
549 } |
|
550 |
|
551 editor.nodeChanged(); |
|
552 editor.undoManager.add(); |
|
553 } |
|
554 |
|
555 editor.on( 'init', function() { |
|
556 var dom = editor.dom, |
|
557 captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions'; |
|
558 |
|
559 dom.addClass( editor.getBody(), captionClass ); |
|
560 |
|
561 // Add caption field to the default image dialog |
|
562 editor.on( 'wpLoadImageForm', function( event ) { |
|
563 if ( editor.getParam( 'wpeditimage_disable_captions' ) ) { |
|
564 return; |
|
565 } |
|
566 |
|
567 var captionField = { |
|
568 type: 'textbox', |
|
569 flex: 1, |
|
570 name: 'caption', |
|
571 minHeight: 60, |
|
572 multiline: true, |
|
573 scroll: true, |
|
574 label: 'Image caption' |
|
575 }; |
|
576 |
|
577 event.data.splice( event.data.length - 1, 0, captionField ); |
|
578 }); |
|
579 |
|
580 // Fix caption parent width for images added from URL |
|
581 editor.on( 'wpNewImageRefresh', function( event ) { |
|
582 var parent, captionWidth; |
|
583 |
|
584 if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) { |
|
585 if ( ! parent.style.width ) { |
|
586 captionWidth = parseInt( event.node.clientWidth, 10 ) + 10; |
|
587 captionWidth = captionWidth ? captionWidth + 'px' : '50%'; |
|
588 dom.setStyle( parent, 'width', captionWidth ); |
|
589 } |
|
590 } |
|
591 }); |
|
592 |
|
593 editor.on( 'wpImageFormSubmit', function( event ) { |
|
594 var data = event.imgData.data, |
|
595 imgNode = event.imgData.node, |
|
596 caption = event.imgData.caption, |
|
597 captionId = '', |
|
598 captionAlign = '', |
|
599 captionWidth = '', |
|
600 wrap, parent, node, html, imgId; |
|
601 |
|
602 // Temp image id so we can find the node later |
|
603 data.id = '__wp-temp-img-id'; |
|
604 // Cancel the original callback |
|
605 event.imgData.cancel = true; |
|
606 |
|
607 if ( ! data.style ) { |
|
608 data.style = null; |
|
609 } |
|
610 |
|
611 if ( ! data.src ) { |
|
612 // Delete the image and the caption |
|
613 if ( imgNode ) { |
|
614 if ( wrap = dom.getParent( imgNode, 'div.mceTemp' ) ) { |
|
615 dom.remove( wrap ); |
|
616 } else if ( imgNode.parentNode.nodeName === 'A' ) { |
|
617 dom.remove( imgNode.parentNode ); |
|
618 } else { |
|
619 dom.remove( imgNode ); |
|
620 } |
|
621 |
|
622 editor.nodeChanged(); |
|
623 } |
|
624 return; |
|
625 } |
|
626 |
|
627 if ( caption ) { |
|
628 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<\/?[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) { |
|
629 // No line breaks inside HTML tags |
|
630 return a.replace( /[\r\n\t]+/, ' ' ); |
|
631 }); |
|
632 |
|
633 // Convert remaining line breaks to <br> |
|
634 caption = caption.replace( /(<br[^>]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '<br />' ); |
|
635 caption = verifyHTML( caption ); |
|
636 } |
|
637 |
|
638 if ( ! imgNode ) { |
|
639 // New image inserted |
|
640 html = dom.createHTML( 'img', data ); |
|
641 |
|
642 if ( caption ) { |
|
643 node = editor.selection.getNode(); |
|
644 |
|
645 if ( data.width ) { |
|
646 captionWidth = parseInt( data.width, 10 ); |
|
647 |
|
648 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { |
|
649 captionWidth += 10; |
|
650 } |
|
651 |
|
652 captionWidth = ' style="width: ' + captionWidth + 'px"'; |
|
653 } |
|
654 |
|
655 html = '<dl class="wp-caption alignnone"' + captionWidth + '>' + |
|
656 '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>'; |
|
657 |
|
658 if ( node.nodeName === 'P' ) { |
|
659 parent = node; |
|
660 } else { |
|
661 parent = dom.getParent( node, 'p' ); |
|
662 } |
|
663 |
|
664 if ( parent && parent.nodeName === 'P' ) { |
|
665 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html ); |
|
666 parent.parentNode.insertBefore( wrap, parent ); |
|
667 editor.selection.select( wrap ); |
|
668 editor.nodeChanged(); |
|
669 |
|
670 if ( dom.isEmpty( parent ) ) { |
|
671 dom.remove( parent ); |
|
672 } |
|
673 } else { |
|
674 editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' ); |
|
675 } |
|
676 } else { |
|
677 editor.selection.setContent( html ); |
|
678 } |
|
679 } else { |
|
680 // Edit existing image |
|
681 |
|
682 // Store the original image id if any |
|
683 imgId = imgNode.id || null; |
|
684 // Update the image node |
|
685 dom.setAttribs( imgNode, data ); |
|
686 wrap = dom.getParent( imgNode, 'dl.wp-caption' ); |
|
687 |
|
688 if ( caption ) { |
|
689 if ( wrap ) { |
|
690 if ( parent = dom.select( 'dd.wp-caption-dd', wrap )[0] ) { |
|
691 parent.innerHTML = caption; |
|
692 } |
|
693 } else { |
|
694 if ( imgNode.className ) { |
|
695 captionId = imgNode.className.match( /wp-image-([0-9]+)/ ); |
|
696 captionAlign = imgNode.className.match( /align(left|right|center|none)/ ); |
|
697 } |
|
698 |
|
699 if ( captionAlign ) { |
|
700 captionAlign = captionAlign[0]; |
|
701 imgNode.className = imgNode.className.replace( /align(left|right|center|none)/g, '' ); |
|
702 } else { |
|
703 captionAlign = 'alignnone'; |
|
704 } |
|
705 |
|
706 captionAlign = ' class="wp-caption ' + captionAlign + '"'; |
|
707 |
|
708 if ( captionId ) { |
|
709 captionId = ' id="attachment_' + captionId[1] + '"'; |
|
710 } |
|
711 |
|
712 captionWidth = data.width || imgNode.clientWidth; |
|
713 |
|
714 if ( captionWidth ) { |
|
715 captionWidth = parseInt( captionWidth, 10 ); |
|
716 |
|
717 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { |
|
718 captionWidth += 10; |
|
719 } |
|
720 |
|
721 captionWidth = ' style="width: '+ captionWidth +'px"'; |
|
722 } |
|
723 |
|
724 if ( imgNode.parentNode && imgNode.parentNode.nodeName === 'A' ) { |
|
725 node = imgNode.parentNode; |
|
726 } else { |
|
727 node = imgNode; |
|
728 } |
|
729 |
|
730 html = '<dl ' + captionId + captionAlign + captionWidth + '>' + |
|
731 '<dt class="wp-caption-dt"></dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>'; |
|
732 |
|
733 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html ); |
|
734 |
|
735 if ( parent = dom.getParent( node, 'p' ) ) { |
|
736 parent.parentNode.insertBefore( wrap, parent ); |
|
737 } else { |
|
738 node.parentNode.insertBefore( wrap, node ); |
|
739 } |
|
740 |
|
741 editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node ); |
|
742 |
|
743 if ( parent && dom.isEmpty( parent ) ) { |
|
744 dom.remove( parent ); |
|
745 } |
|
746 } |
|
747 } else { |
|
748 if ( wrap ) { |
|
749 // Remove the caption wrapper and place the image in new paragraph |
|
750 if ( imgNode.parentNode.nodeName === 'A' ) { |
|
751 html = dom.getOuterHTML( imgNode.parentNode ); |
|
752 } else { |
|
753 html = dom.getOuterHTML( imgNode ); |
|
754 } |
|
755 |
|
756 parent = dom.create( 'p', {}, html ); |
|
757 dom.insertAfter( parent, wrap.parentNode ); |
|
758 editor.selection.select( parent ); |
|
759 editor.nodeChanged(); |
|
760 dom.remove( wrap.parentNode ); |
|
761 } |
|
762 } |
|
763 } |
|
764 |
|
765 imgNode = dom.get('__wp-temp-img-id'); |
|
766 dom.setAttrib( imgNode, 'id', imgId ); |
|
767 event.imgData.node = imgNode; |
|
768 }); |
|
769 |
|
770 editor.on( 'wpLoadImageData', function( event ) { |
|
771 var parent, |
|
772 data = event.imgData.data, |
|
773 imgNode = event.imgData.node; |
|
774 |
|
775 if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) { |
|
776 parent = dom.select( 'dd.wp-caption-dd', parent )[0]; |
|
777 |
|
778 if ( parent ) { |
|
779 data.caption = editor.serializer.serialize( parent ) |
|
780 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' ); |
|
781 } |
|
782 } |
|
783 }); |
|
784 |
|
785 dom.bind( editor.getDoc(), 'dragstart', function( event ) { |
|
786 var node = editor.selection.getNode(); |
|
787 |
|
788 // Prevent dragging images out of the caption elements |
|
789 if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) { |
|
790 event.preventDefault(); |
|
791 } |
|
792 }); |
|
793 |
|
794 // Prevent IE11 from making dl.wp-caption resizable |
|
795 if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) { |
|
796 // The 'mscontrolselect' event is supported only in IE11+ |
|
797 dom.bind( editor.getBody(), 'mscontrolselect', function( event ) { |
|
798 if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) { |
|
799 // Hide the thick border with resize handles around dl.wp-caption |
|
800 editor.getBody().focus(); // :( |
|
801 } else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) { |
|
802 // Trigger the thick border with resize handles... |
|
803 // This will make the caption text editable. |
|
804 event.target.focus(); |
|
805 } |
|
806 }); |
|
807 } |
|
808 }); |
|
809 |
|
810 editor.on( 'ObjectResized', function( event ) { |
|
811 var node = event.target; |
|
812 |
|
813 if ( node.nodeName === 'IMG' ) { |
|
814 editor.undoManager.transact( function() { |
|
815 var parent, width, |
|
816 dom = editor.dom; |
|
817 |
|
818 node.className = node.className.replace( /\bsize-[^ ]+/, '' ); |
|
819 |
|
820 if ( parent = dom.getParent( node, '.wp-caption' ) ) { |
|
821 width = event.width || dom.getAttrib( node, 'width' ); |
|
822 |
|
823 if ( width ) { |
|
824 width = parseInt( width, 10 ); |
|
825 |
|
826 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { |
|
827 width += 10; |
|
828 } |
|
829 |
|
830 dom.setStyle( parent, 'width', width + 'px' ); |
|
831 } |
|
832 } |
|
833 }); |
|
834 } |
|
835 }); |
|
836 |
|
837 editor.on( 'BeforeExecCommand', function( event ) { |
|
838 var node, p, DL, align, replacement, |
|
839 cmd = event.command, |
|
840 dom = editor.dom; |
|
841 |
|
842 if ( cmd === 'mceInsertContent' ) { |
|
843 // When inserting content, if the caret is inside a caption create new paragraph under |
|
844 // and move the caret there |
|
845 if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) { |
|
846 p = dom.create( 'p' ); |
|
847 dom.insertAfter( p, node ); |
|
848 editor.selection.setCursorLocation( p, 0 ); |
|
849 editor.nodeChanged(); |
|
850 } |
|
851 } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) { |
|
852 node = editor.selection.getNode(); |
|
853 align = 'align' + cmd.slice( 7 ).toLowerCase(); |
|
854 DL = editor.dom.getParent( node, '.wp-caption' ); |
|
855 |
|
856 if ( node.nodeName !== 'IMG' && ! DL ) { |
|
857 return; |
|
858 } |
|
859 |
|
860 node = DL || node; |
|
861 |
|
862 if ( editor.dom.hasClass( node, align ) ) { |
|
863 replacement = ' alignnone'; |
|
864 } else { |
|
865 replacement = ' ' + align; |
|
866 } |
|
867 |
|
868 node.className = node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement; |
|
869 |
|
870 editor.nodeChanged(); |
|
871 event.preventDefault(); |
|
872 |
|
873 if ( toolbar ) { |
|
874 toolbar.reposition(); |
|
875 } |
|
876 |
|
877 editor.fire( 'ExecCommand', { |
|
878 command: cmd, |
|
879 ui: event.ui, |
|
880 value: event.value |
|
881 } ); |
|
882 } |
|
883 }); |
|
884 |
|
885 editor.on( 'keydown', function( event ) { |
|
886 var node, wrap, P, spacer, |
|
887 selection = editor.selection, |
|
888 keyCode = event.keyCode, |
|
889 dom = editor.dom, |
|
890 VK = tinymce.util.VK; |
|
891 |
|
892 if ( keyCode === VK.ENTER ) { |
|
893 // When pressing Enter inside a caption move the caret to a new parapraph under it |
|
894 node = selection.getNode(); |
|
895 wrap = dom.getParent( node, 'div.mceTemp' ); |
|
896 |
|
897 if ( wrap ) { |
|
898 dom.events.cancel( event ); // Doesn't cancel all :( |
|
899 |
|
900 // Remove any extra dt and dd cleated on pressing Enter... |
|
901 tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) { |
|
902 if ( dom.isEmpty( element ) ) { |
|
903 dom.remove( element ); |
|
904 } |
|
905 }); |
|
906 |
|
907 spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />'; |
|
908 P = dom.create( 'p', null, spacer ); |
|
909 |
|
910 if ( node.nodeName === 'DD' ) { |
|
911 dom.insertAfter( P, wrap ); |
|
912 } else { |
|
913 wrap.parentNode.insertBefore( P, wrap ); |
|
914 } |
|
915 |
|
916 editor.nodeChanged(); |
|
917 selection.setCursorLocation( P, 0 ); |
|
918 } |
|
919 } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) { |
|
920 node = selection.getNode(); |
|
921 |
|
922 if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) { |
|
923 wrap = node; |
|
924 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) { |
|
925 wrap = dom.getParent( node, 'div.mceTemp' ); |
|
926 } |
|
927 |
|
928 if ( wrap ) { |
|
929 dom.events.cancel( event ); |
|
930 removeImage( node ); |
|
931 return false; |
|
932 } |
|
933 } |
|
934 }); |
|
935 |
|
936 // After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS. |
|
937 // This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places. |
|
938 // Collapse the selection to remove the resize handles. |
|
939 if ( tinymce.Env.gecko ) { |
|
940 editor.on( 'undo redo', function() { |
|
941 if ( editor.selection.getNode().nodeName === 'IMG' ) { |
|
942 editor.selection.collapse(); |
|
943 } |
|
944 }); |
|
945 } |
|
946 |
|
947 editor.wpSetImgCaption = function( content ) { |
|
948 return parseShortcode( content ); |
|
949 }; |
|
950 |
|
951 editor.wpGetImgCaption = function( content ) { |
|
952 return getShortcode( content ); |
|
953 }; |
|
954 |
|
955 editor.on( 'BeforeSetContent', function( event ) { |
|
956 if ( event.format !== 'raw' ) { |
|
957 event.content = editor.wpSetImgCaption( event.content ); |
|
958 } |
|
959 }); |
|
960 |
|
961 editor.on( 'PostProcess', function( event ) { |
|
962 if ( event.get ) { |
|
963 event.content = editor.wpGetImgCaption( event.content ); |
|
964 } |
|
965 }); |
|
966 |
|
967 // Add to editor.wp |
|
968 editor.wp = editor.wp || {}; |
|
969 editor.wp.isPlaceholder = isPlaceholder; |
|
970 |
|
971 // Back-compat. |
|
972 return { |
|
973 _do_shcode: parseShortcode, |
|
974 _get_shcode: getShortcode |
|
975 }; |
|
976 }); |