plugin.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877
  1. /* global tinymce */
  2. tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
  3. var toolbar, serializer, touchOnImage, pasteInCaption,
  4. each = tinymce.each,
  5. trim = tinymce.trim,
  6. iOS = tinymce.Env.iOS;
  7. function isPlaceholder( node ) {
  8. return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) );
  9. }
  10. editor.addButton( 'wp_img_remove', {
  11. tooltip: 'Remove',
  12. icon: 'dashicon dashicons-no',
  13. onclick: function() {
  14. removeImage( editor.selection.getNode() );
  15. }
  16. } );
  17. editor.addButton( 'wp_img_edit', {
  18. tooltip: 'Edit|button', // '|button' is not displayed, only used for context
  19. icon: 'dashicon dashicons-edit',
  20. onclick: function() {
  21. editImage( editor.selection.getNode() );
  22. }
  23. } );
  24. each( {
  25. alignleft: 'Align left',
  26. aligncenter: 'Align center',
  27. alignright: 'Align right',
  28. alignnone: 'No alignment'
  29. }, function( tooltip, name ) {
  30. var direction = name.slice( 5 );
  31. editor.addButton( 'wp_img_' + name, {
  32. tooltip: tooltip,
  33. icon: 'dashicon dashicons-align-' + direction,
  34. cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ),
  35. onPostRender: function() {
  36. var self = this;
  37. editor.on( 'NodeChange', function( event ) {
  38. var node;
  39. // Don't bother.
  40. if ( event.element.nodeName !== 'IMG' ) {
  41. return;
  42. }
  43. node = editor.dom.getParent( event.element, '.wp-caption' ) || event.element;
  44. if ( 'alignnone' === name ) {
  45. self.active( ! /\balign(left|center|right)\b/.test( node.className ) );
  46. } else {
  47. self.active( editor.dom.hasClass( node, name ) );
  48. }
  49. } );
  50. }
  51. } );
  52. } );
  53. editor.once( 'preinit', function() {
  54. if ( editor.wp && editor.wp._createToolbar ) {
  55. toolbar = editor.wp._createToolbar( [
  56. 'wp_img_alignleft',
  57. 'wp_img_aligncenter',
  58. 'wp_img_alignright',
  59. 'wp_img_alignnone',
  60. 'wp_img_edit',
  61. 'wp_img_remove'
  62. ] );
  63. }
  64. } );
  65. editor.on( 'wptoolbar', function( event ) {
  66. if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) {
  67. event.toolbar = toolbar;
  68. }
  69. } );
  70. function isNonEditable( node ) {
  71. var parent = editor.$( node ).parents( '[contenteditable]' );
  72. return parent && parent.attr( 'contenteditable' ) === 'false';
  73. }
  74. // Safari on iOS fails to select images in contentEditoble mode on touch.
  75. // Select them again.
  76. if ( iOS ) {
  77. editor.on( 'init', function() {
  78. editor.on( 'touchstart', function( event ) {
  79. if ( event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {
  80. touchOnImage = true;
  81. }
  82. });
  83. editor.dom.bind( editor.getDoc(), 'touchmove', function() {
  84. touchOnImage = false;
  85. });
  86. editor.on( 'touchend', function( event ) {
  87. if ( touchOnImage && event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {
  88. var node = event.target;
  89. touchOnImage = false;
  90. window.setTimeout( function() {
  91. editor.selection.select( node );
  92. editor.nodeChanged();
  93. }, 100 );
  94. } else if ( toolbar ) {
  95. toolbar.hide();
  96. }
  97. });
  98. });
  99. }
  100. function parseShortcode( content ) {
  101. return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
  102. var id, align, classes, caption, img, width;
  103. id = b.match( /id=['"]([^'"]*)['"] ?/ );
  104. if ( id ) {
  105. b = b.replace( id[0], '' );
  106. }
  107. align = b.match( /align=['"]([^'"]*)['"] ?/ );
  108. if ( align ) {
  109. b = b.replace( align[0], '' );
  110. }
  111. classes = b.match( /class=['"]([^'"]*)['"] ?/ );
  112. if ( classes ) {
  113. b = b.replace( classes[0], '' );
  114. }
  115. width = b.match( /width=['"]([0-9]*)['"] ?/ );
  116. if ( width ) {
  117. b = b.replace( width[0], '' );
  118. }
  119. c = trim( c );
  120. img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );
  121. if ( img && img[2] ) {
  122. caption = trim( img[2] );
  123. img = trim( img[1] );
  124. } else {
  125. // old captions shortcode style
  126. caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
  127. img = c;
  128. }
  129. id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g, '' ) : '';
  130. align = ( align && align[1] ) ? align[1] : 'alignnone';
  131. classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g, '' ) : '';
  132. if ( ! width && img ) {
  133. width = img.match( /width=['"]([0-9]*)['"]/ );
  134. }
  135. if ( width && width[1] ) {
  136. width = width[1];
  137. }
  138. if ( ! width || ! caption ) {
  139. return c;
  140. }
  141. width = parseInt( width, 10 );
  142. if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
  143. width += 10;
  144. }
  145. return '<div class="mceTemp"><dl id="' + id + '" class="wp-caption ' + align + classes + '" style="width: ' + width + 'px">' +
  146. '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl></div>';
  147. });
  148. }
  149. function getShortcode( content ) {
  150. return content.replace( /(?:<div [^>]+mceTemp[^>]+>)?\s*(<dl [^>]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g, function( all, dl ) {
  151. var out = '';
  152. if ( dl.indexOf('<img ') === -1 || dl.indexOf('</p>') !== -1 ) {
  153. // Broken caption. The user managed to drag the image out or type in the wrapper div?
  154. // Remove the <dl>, <dd> and <dt> and return the remaining text.
  155. return dl.replace( /<d[ldt]( [^>]+)?>/g, '' ).replace( /<\/d[ldt]>/g, '' );
  156. }
  157. out = dl.replace( /\s*<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) {
  158. var id, classes, align, width;
  159. width = c.match( /width="([0-9]*)"/ );
  160. width = ( width && width[1] ) ? width[1] : '';
  161. classes = b.match( /class="([^"]*)"/ );
  162. classes = ( classes && classes[1] ) ? classes[1] : '';
  163. align = classes.match( /align[a-z]+/i ) || 'alignnone';
  164. if ( ! width || ! caption ) {
  165. if ( 'alignnone' !== align[0] ) {
  166. c = c.replace( /><img/, ' class="' + align[0] + '"><img' );
  167. }
  168. return c;
  169. }
  170. id = b.match( /id="([^"]*)"/ );
  171. id = ( id && id[1] ) ? id[1] : '';
  172. classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' );
  173. if ( classes ) {
  174. classes = ' class="' + classes + '"';
  175. }
  176. caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
  177. // no line breaks inside HTML tags
  178. return a.replace( /[\r\n\t]+/, ' ' );
  179. });
  180. // convert remaining line breaks to <br>
  181. caption = caption.replace( /\s*\n\s*/g, '<br />' );
  182. return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';
  183. });
  184. if ( out.indexOf('[caption') === -1 ) {
  185. // the caption html seems broken, try to find the image that may be wrapped in a link
  186. // and may be followed by <p> with the caption text.
  187. out = dl.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' );
  188. }
  189. return out;
  190. });
  191. }
  192. function extractImageData( imageNode ) {
  193. var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
  194. captionClassName = [],
  195. dom = editor.dom,
  196. isIntRegExp = /^\d+$/;
  197. // default attributes
  198. metadata = {
  199. attachment_id: false,
  200. size: 'custom',
  201. caption: '',
  202. align: 'none',
  203. extraClasses: '',
  204. link: false,
  205. linkUrl: '',
  206. linkClassName: '',
  207. linkTargetBlank: false,
  208. linkRel: '',
  209. title: ''
  210. };
  211. metadata.url = dom.getAttrib( imageNode, 'src' );
  212. metadata.alt = dom.getAttrib( imageNode, 'alt' );
  213. metadata.title = dom.getAttrib( imageNode, 'title' );
  214. width = dom.getAttrib( imageNode, 'width' );
  215. height = dom.getAttrib( imageNode, 'height' );
  216. if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
  217. width = imageNode.naturalWidth || imageNode.width;
  218. }
  219. if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
  220. height = imageNode.naturalHeight || imageNode.height;
  221. }
  222. metadata.customWidth = metadata.width = width;
  223. metadata.customHeight = metadata.height = height;
  224. classes = tinymce.explode( imageNode.className, ' ' );
  225. extraClasses = [];
  226. tinymce.each( classes, function( name ) {
  227. if ( /^wp-image/.test( name ) ) {
  228. metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
  229. } else if ( /^align/.test( name ) ) {
  230. metadata.align = name.replace( 'align', '' );
  231. } else if ( /^size/.test( name ) ) {
  232. metadata.size = name.replace( 'size-', '' );
  233. } else {
  234. extraClasses.push( name );
  235. }
  236. } );
  237. metadata.extraClasses = extraClasses.join( ' ' );
  238. // Extract caption
  239. captionBlock = dom.getParents( imageNode, '.wp-caption' );
  240. if ( captionBlock.length ) {
  241. captionBlock = captionBlock[0];
  242. classes = captionBlock.className.split( ' ' );
  243. tinymce.each( classes, function( name ) {
  244. if ( /^align/.test( name ) ) {
  245. metadata.align = name.replace( 'align', '' );
  246. } else if ( name && name !== 'wp-caption' ) {
  247. captionClassName.push( name );
  248. }
  249. } );
  250. metadata.captionClassName = captionClassName.join( ' ' );
  251. caption = dom.select( 'dd.wp-caption-dd', captionBlock );
  252. if ( caption.length ) {
  253. caption = caption[0];
  254. metadata.caption = editor.serializer.serialize( caption )
  255. .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
  256. }
  257. }
  258. // Extract linkTo
  259. if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
  260. link = imageNode.parentNode;
  261. metadata.linkUrl = dom.getAttrib( link, 'href' );
  262. metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
  263. metadata.linkRel = dom.getAttrib( link, 'rel' );
  264. metadata.linkClassName = link.className;
  265. }
  266. return metadata;
  267. }
  268. function hasTextContent( node ) {
  269. return node && !! ( node.textContent || node.innerText ).replace( /\ufeff/g, '' );
  270. }
  271. // Verify HTML in captions
  272. function verifyHTML( caption ) {
  273. if ( ! caption || ( caption.indexOf( '<' ) === -1 && caption.indexOf( '>' ) === -1 ) ) {
  274. return caption;
  275. }
  276. if ( ! serializer ) {
  277. serializer = new tinymce.html.Serializer( {}, editor.schema );
  278. }
  279. return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) );
  280. }
  281. function updateImage( imageNode, imageData ) {
  282. var classes, className, node, html, parent, wrap, linkNode,
  283. captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
  284. $imageNode, srcset, src,
  285. dom = editor.dom;
  286. classes = tinymce.explode( imageData.extraClasses, ' ' );
  287. if ( ! classes ) {
  288. classes = [];
  289. }
  290. if ( ! imageData.caption ) {
  291. classes.push( 'align' + imageData.align );
  292. }
  293. if ( imageData.attachment_id ) {
  294. classes.push( 'wp-image-' + imageData.attachment_id );
  295. if ( imageData.size && imageData.size !== 'custom' ) {
  296. classes.push( 'size-' + imageData.size );
  297. }
  298. }
  299. width = imageData.width;
  300. height = imageData.height;
  301. if ( imageData.size === 'custom' ) {
  302. width = imageData.customWidth;
  303. height = imageData.customHeight;
  304. }
  305. attrs = {
  306. src: imageData.url,
  307. width: width || null,
  308. height: height || null,
  309. title: imageData.title || null,
  310. 'class': classes.join( ' ' ) || null
  311. };
  312. dom.setAttribs( imageNode, attrs );
  313. // Preserve empty alt attributes.
  314. editor.$( imageNode ).attr( 'alt', imageData.alt || '' );
  315. linkAttrs = {
  316. href: imageData.linkUrl,
  317. rel: imageData.linkRel || null,
  318. target: imageData.linkTargetBlank ? '_blank': null,
  319. 'class': imageData.linkClassName || null
  320. };
  321. if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
  322. // Update or remove an existing link wrapped around the image
  323. if ( imageData.linkUrl ) {
  324. dom.setAttribs( imageNode.parentNode, linkAttrs );
  325. } else {
  326. dom.remove( imageNode.parentNode, true );
  327. }
  328. } else if ( imageData.linkUrl ) {
  329. if ( linkNode = dom.getParent( imageNode, 'a' ) ) {
  330. // The image is inside a link together with other nodes,
  331. // or is nested in another node, move it out
  332. dom.insertAfter( imageNode, linkNode );
  333. }
  334. // Add link wrapped around the image
  335. linkNode = dom.create( 'a', linkAttrs );
  336. imageNode.parentNode.insertBefore( linkNode, imageNode );
  337. linkNode.appendChild( imageNode );
  338. }
  339. captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
  340. if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
  341. node = imageNode.parentNode;
  342. } else {
  343. node = imageNode;
  344. }
  345. if ( imageData.caption ) {
  346. imageData.caption = verifyHTML( imageData.caption );
  347. id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
  348. align = 'align' + ( imageData.align || 'none' );
  349. className = 'wp-caption ' + align;
  350. if ( imageData.captionClassName ) {
  351. className += ' ' + imageData.captionClassName.replace( /[<>&]+/g, '' );
  352. }
  353. if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
  354. width = parseInt( width, 10 );
  355. width += 10;
  356. }
  357. if ( captionNode ) {
  358. dl = dom.select( 'dl.wp-caption', captionNode );
  359. if ( dl.length ) {
  360. dom.setAttribs( dl, {
  361. id: id,
  362. 'class': className,
  363. style: 'width: ' + width + 'px'
  364. } );
  365. }
  366. dd = dom.select( '.wp-caption-dd', captionNode );
  367. if ( dd.length ) {
  368. dom.setHTML( dd[0], imageData.caption );
  369. }
  370. } else {
  371. id = id ? 'id="'+ id +'" ' : '';
  372. // should create a new function for generating the caption markup
  373. html = '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
  374. '<dt class="wp-caption-dt"></dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
  375. wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
  376. if ( parent = dom.getParent( node, 'p' ) ) {
  377. parent.parentNode.insertBefore( wrap, parent );
  378. } else {
  379. node.parentNode.insertBefore( wrap, node );
  380. }
  381. editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node );
  382. if ( parent && dom.isEmpty( parent ) ) {
  383. dom.remove( parent );
  384. }
  385. }
  386. } else if ( captionNode ) {
  387. // Remove the caption wrapper and place the image in new paragraph
  388. parent = dom.create( 'p' );
  389. captionNode.parentNode.insertBefore( parent, captionNode );
  390. parent.appendChild( node );
  391. dom.remove( captionNode );
  392. }
  393. $imageNode = editor.$( imageNode );
  394. srcset = $imageNode.attr( 'srcset' );
  395. src = $imageNode.attr( 'src' );
  396. // Remove srcset and sizes if the image file was edited or the image was replaced.
  397. if ( srcset && src ) {
  398. src = src.replace( /[?#].*/, '' );
  399. if ( srcset.indexOf( src ) === -1 ) {
  400. $imageNode.attr( 'srcset', null ).attr( 'sizes', null );
  401. }
  402. }
  403. if ( wp.media.events ) {
  404. wp.media.events.trigger( 'editor:image-update', {
  405. editor: editor,
  406. metadata: imageData,
  407. image: imageNode
  408. } );
  409. }
  410. editor.nodeChanged();
  411. }
  412. function editImage( img ) {
  413. var frame, callback, metadata;
  414. if ( typeof wp === 'undefined' || ! wp.media ) {
  415. editor.execCommand( 'mceImage' );
  416. return;
  417. }
  418. metadata = extractImageData( img );
  419. // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
  420. wp.media.events.trigger( 'editor:image-edit', {
  421. editor: editor,
  422. metadata: metadata,
  423. image: img
  424. } );
  425. frame = wp.media({
  426. frame: 'image',
  427. state: 'image-details',
  428. metadata: metadata
  429. } );
  430. wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
  431. callback = function( imageData ) {
  432. editor.focus();
  433. editor.undoManager.transact( function() {
  434. updateImage( img, imageData );
  435. } );
  436. frame.detach();
  437. };
  438. frame.state('image-details').on( 'update', callback );
  439. frame.state('replace-image').on( 'replace', callback );
  440. frame.on( 'close', function() {
  441. editor.focus();
  442. frame.detach();
  443. });
  444. frame.open();
  445. }
  446. function removeImage( node ) {
  447. var wrap = editor.dom.getParent( node, 'div.mceTemp' );
  448. if ( ! wrap && node.nodeName === 'IMG' ) {
  449. wrap = editor.dom.getParent( node, 'a' );
  450. }
  451. if ( wrap ) {
  452. if ( wrap.nextSibling ) {
  453. editor.selection.select( wrap.nextSibling );
  454. } else if ( wrap.previousSibling ) {
  455. editor.selection.select( wrap.previousSibling );
  456. } else {
  457. editor.selection.select( wrap.parentNode );
  458. }
  459. editor.selection.collapse( true );
  460. editor.dom.remove( wrap );
  461. } else {
  462. editor.dom.remove( node );
  463. }
  464. editor.nodeChanged();
  465. editor.undoManager.add();
  466. }
  467. editor.on( 'init', function() {
  468. var dom = editor.dom,
  469. captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
  470. dom.addClass( editor.getBody(), captionClass );
  471. // Prevent IE11 from making dl.wp-caption resizable
  472. if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) {
  473. // The 'mscontrolselect' event is supported only in IE11+
  474. dom.bind( editor.getBody(), 'mscontrolselect', function( event ) {
  475. if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) {
  476. // Hide the thick border with resize handles around dl.wp-caption
  477. editor.getBody().focus(); // :(
  478. } else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) {
  479. // Trigger the thick border with resize handles...
  480. // This will make the caption text editable.
  481. event.target.focus();
  482. }
  483. });
  484. }
  485. });
  486. editor.on( 'ObjectResized', function( event ) {
  487. var node = event.target;
  488. if ( node.nodeName === 'IMG' ) {
  489. editor.undoManager.transact( function() {
  490. var parent, width,
  491. dom = editor.dom;
  492. node.className = node.className.replace( /\bsize-[^ ]+/, '' );
  493. if ( parent = dom.getParent( node, '.wp-caption' ) ) {
  494. width = event.width || dom.getAttrib( node, 'width' );
  495. if ( width ) {
  496. width = parseInt( width, 10 );
  497. if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
  498. width += 10;
  499. }
  500. dom.setStyle( parent, 'width', width + 'px' );
  501. }
  502. }
  503. });
  504. }
  505. });
  506. editor.on( 'pastePostProcess', function( event ) {
  507. // Pasting in a caption node.
  508. if ( editor.dom.getParent( editor.selection.getNode(), 'dd.wp-caption-dd' ) ) {
  509. // Remove "non-block" elements that should not be in captions.
  510. editor.$( 'img, audio, video, object, embed, iframe, script, style', event.node ).remove();
  511. editor.$( '*', event.node ).each( function( i, node ) {
  512. if ( editor.dom.isBlock( node ) ) {
  513. // Insert <br> where the blocks used to be. Makes it look better after pasting in the caption.
  514. if ( tinymce.trim( node.textContent || node.innerText ) ) {
  515. editor.dom.insertAfter( editor.dom.create( 'br' ), node );
  516. editor.dom.remove( node, true );
  517. } else {
  518. editor.dom.remove( node );
  519. }
  520. }
  521. });
  522. // Trim <br> tags.
  523. editor.$( 'br', event.node ).each( function( i, node ) {
  524. if ( ! node.nextSibling || node.nextSibling.nodeName === 'BR' ||
  525. ! node.previousSibling || node.previousSibling.nodeName === 'BR' ) {
  526. editor.dom.remove( node );
  527. }
  528. } );
  529. // Pasted HTML is cleaned up for inserting in the caption.
  530. pasteInCaption = true;
  531. }
  532. });
  533. editor.on( 'BeforeExecCommand', function( event ) {
  534. var node, p, DL, align, replacement, captionParent,
  535. cmd = event.command,
  536. dom = editor.dom;
  537. if ( cmd === 'mceInsertContent' || cmd === 'Indent' || cmd === 'Outdent' ) {
  538. node = editor.selection.getNode();
  539. captionParent = dom.getParent( node, 'div.mceTemp' );
  540. if ( captionParent ) {
  541. if ( cmd === 'mceInsertContent' ) {
  542. if ( pasteInCaption ) {
  543. pasteInCaption = false;
  544. // We are in the caption element, and in 'paste' context,
  545. // and the pasted HTML was cleaned up on 'pastePostProcess' above.
  546. // Let it be pasted in the caption.
  547. return;
  548. }
  549. // The paste is somewhere else in the caption DL element.
  550. // Prevent pasting in there as it will break the caption.
  551. // Make new paragraph under the caption DL and move the caret there.
  552. p = dom.create( 'p' );
  553. dom.insertAfter( p, captionParent );
  554. editor.selection.setCursorLocation( p, 0 );
  555. // If the image is selected and the user pastes "over" it,
  556. // replace both the image and the caption elements with the pasted content.
  557. // This matches the behavior when pasting over non-caption images.
  558. if ( node.nodeName === 'IMG' ) {
  559. editor.$( captionParent ).remove();
  560. }
  561. editor.nodeChanged();
  562. } else {
  563. // Clicking Indent or Outdent while an image with a caption is selected breaks the caption.
  564. // See #38313.
  565. event.preventDefault();
  566. event.stopImmediatePropagation();
  567. return false;
  568. }
  569. }
  570. } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
  571. node = editor.selection.getNode();
  572. align = 'align' + cmd.slice( 7 ).toLowerCase();
  573. DL = editor.dom.getParent( node, '.wp-caption' );
  574. if ( node.nodeName !== 'IMG' && ! DL ) {
  575. return;
  576. }
  577. node = DL || node;
  578. if ( editor.dom.hasClass( node, align ) ) {
  579. replacement = ' alignnone';
  580. } else {
  581. replacement = ' ' + align;
  582. }
  583. node.className = trim( node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement );
  584. editor.nodeChanged();
  585. event.preventDefault();
  586. if ( toolbar ) {
  587. toolbar.reposition();
  588. }
  589. editor.fire( 'ExecCommand', {
  590. command: cmd,
  591. ui: event.ui,
  592. value: event.value
  593. } );
  594. }
  595. });
  596. editor.on( 'keydown', function( event ) {
  597. var node, wrap, P, spacer,
  598. selection = editor.selection,
  599. keyCode = event.keyCode,
  600. dom = editor.dom,
  601. VK = tinymce.util.VK;
  602. if ( keyCode === VK.ENTER ) {
  603. // When pressing Enter inside a caption move the caret to a new parapraph under it
  604. node = selection.getNode();
  605. wrap = dom.getParent( node, 'div.mceTemp' );
  606. if ( wrap ) {
  607. dom.events.cancel( event ); // Doesn't cancel all :(
  608. // Remove any extra dt and dd cleated on pressing Enter...
  609. tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
  610. if ( dom.isEmpty( element ) ) {
  611. dom.remove( element );
  612. }
  613. });
  614. spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
  615. P = dom.create( 'p', null, spacer );
  616. if ( node.nodeName === 'DD' ) {
  617. dom.insertAfter( P, wrap );
  618. } else {
  619. wrap.parentNode.insertBefore( P, wrap );
  620. }
  621. editor.nodeChanged();
  622. selection.setCursorLocation( P, 0 );
  623. }
  624. } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
  625. node = selection.getNode();
  626. if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
  627. wrap = node;
  628. } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
  629. wrap = dom.getParent( node, 'div.mceTemp' );
  630. }
  631. if ( wrap ) {
  632. dom.events.cancel( event );
  633. removeImage( node );
  634. return false;
  635. }
  636. }
  637. });
  638. // After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS.
  639. // This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places.
  640. // Collapse the selection to remove the resize handles.
  641. if ( tinymce.Env.gecko ) {
  642. editor.on( 'undo redo', function() {
  643. if ( editor.selection.getNode().nodeName === 'IMG' ) {
  644. editor.selection.collapse();
  645. }
  646. });
  647. }
  648. editor.wpSetImgCaption = function( content ) {
  649. return parseShortcode( content );
  650. };
  651. editor.wpGetImgCaption = function( content ) {
  652. return getShortcode( content );
  653. };
  654. editor.on( 'beforeGetContent', function( event ) {
  655. if ( event.format !== 'raw' ) {
  656. editor.$( 'img[id="__wp-temp-img-id"]' ).attr( 'id', null );
  657. }
  658. });
  659. editor.on( 'BeforeSetContent', function( event ) {
  660. if ( event.format !== 'raw' ) {
  661. event.content = editor.wpSetImgCaption( event.content );
  662. }
  663. });
  664. editor.on( 'PostProcess', function( event ) {
  665. if ( event.get ) {
  666. event.content = editor.wpGetImgCaption( event.content );
  667. }
  668. });
  669. ( function() {
  670. var wrap;
  671. editor.on( 'dragstart', function() {
  672. var node = editor.selection.getNode();
  673. if ( node.nodeName === 'IMG' ) {
  674. wrap = editor.dom.getParent( node, '.mceTemp' );
  675. if ( ! wrap && node.parentNode.nodeName === 'A' && ! hasTextContent( node.parentNode ) ) {
  676. wrap = node.parentNode;
  677. }
  678. }
  679. } );
  680. editor.on( 'drop', function( event ) {
  681. var dom = editor.dom,
  682. rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint( event.clientX, event.clientY, editor.getDoc() );
  683. // Don't allow anything to be dropped in a captioned image.
  684. if ( rng && dom.getParent( rng.startContainer, '.mceTemp' ) ) {
  685. event.preventDefault();
  686. } else if ( wrap ) {
  687. event.preventDefault();
  688. editor.undoManager.transact( function() {
  689. if ( rng ) {
  690. editor.selection.setRng( rng );
  691. }
  692. editor.selection.setNode( wrap );
  693. dom.remove( wrap );
  694. } );
  695. }
  696. wrap = null;
  697. } );
  698. } )();
  699. // Add to editor.wp
  700. editor.wp = editor.wp || {};
  701. editor.wp.isPlaceholder = isPlaceholder;
  702. // Back-compat.
  703. return {
  704. _do_shcode: parseShortcode,
  705. _get_shcode: getShortcode
  706. };
  707. });