plugin.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. /**
  2. * WordPress View plugin.
  3. */
  4. ( function( tinymce ) {
  5. tinymce.PluginManager.add( 'wpview', function( editor ) {
  6. function noop () {}
  7. // Set this here as wp-tinymce.js may be loaded too early.
  8. var wp = window.wp;
  9. if ( ! wp || ! wp.mce || ! wp.mce.views ) {
  10. return {
  11. getView: noop
  12. };
  13. }
  14. // Check if a node is a view or not.
  15. function isView( node ) {
  16. return editor.dom.hasClass( node, 'wpview' );
  17. }
  18. // Replace view tags with their text.
  19. function resetViews( content ) {
  20. function callback( match, $1 ) {
  21. return '<p>' + window.decodeURIComponent( $1 ) + '</p>';
  22. }
  23. if ( ! content || content.indexOf( ' data-wpview-' ) === -1 ) {
  24. return content;
  25. }
  26. return content
  27. .replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>(?:\.|[\s\S]+?wpview-end[^>]+>\s*<\/span>\s*)?<\/div>/g, callback )
  28. .replace( /<p[^>]+data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g, callback );
  29. }
  30. editor.on( 'init', function() {
  31. var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  32. if ( MutationObserver ) {
  33. new MutationObserver( function() {
  34. editor.fire( 'wp-body-class-change' );
  35. } )
  36. .observe( editor.getBody(), {
  37. attributes: true,
  38. attributeFilter: ['class']
  39. } );
  40. }
  41. // Pass on body class name changes from the editor to the wpView iframes.
  42. editor.on( 'wp-body-class-change', function() {
  43. var className = editor.getBody().className;
  44. editor.$( 'iframe[class="wpview-sandbox"]' ).each( function( i, iframe ) {
  45. // Make sure it is a local iframe
  46. // jshint scripturl: true
  47. if ( ! iframe.src || iframe.src === 'javascript:""' ) {
  48. try {
  49. iframe.contentWindow.document.body.className = className;
  50. } catch( er ) {}
  51. }
  52. });
  53. } );
  54. });
  55. // Scan new content for matching view patterns and replace them with markers.
  56. editor.on( 'beforesetcontent', function( event ) {
  57. var node;
  58. if ( ! event.selection ) {
  59. wp.mce.views.unbind();
  60. }
  61. if ( ! event.content ) {
  62. return;
  63. }
  64. if ( ! event.load ) {
  65. node = editor.selection.getNode();
  66. if ( node && node !== editor.getBody() && /^\s*https?:\/\/\S+\s*$/i.test( event.content ) ) {
  67. // When a url is pasted or inserted, only try to embed it when it is in an empty paragrapgh.
  68. node = editor.dom.getParent( node, 'p' );
  69. if ( node && /^[\s\uFEFF\u00A0]*$/.test( editor.$( node ).text() || '' ) ) {
  70. // Make sure there are no empty inline elements in the <p>
  71. node.innerHTML = '';
  72. } else {
  73. return;
  74. }
  75. }
  76. }
  77. event.content = wp.mce.views.setMarkers( event.content, editor );
  78. } );
  79. // Replace any new markers nodes with views.
  80. editor.on( 'setcontent', function() {
  81. wp.mce.views.render();
  82. } );
  83. // Empty view nodes for easier processing.
  84. editor.on( 'preprocess hide', function( event ) {
  85. editor.$( 'div[data-wpview-text], p[data-wpview-marker]', event.node ).each( function( i, node ) {
  86. node.innerHTML = '.';
  87. } );
  88. }, true );
  89. // Replace views with their text.
  90. editor.on( 'postprocess', function( event ) {
  91. event.content = resetViews( event.content );
  92. } );
  93. // Prevent adding of undo levels when replacing wpview markers
  94. // or when there are changes only in the (non-editable) previews.
  95. editor.on( 'beforeaddundo', function( event ) {
  96. var lastContent;
  97. var newContent = event.level.content || ( event.level.fragments && event.level.fragments.join( '' ) );
  98. if ( ! event.lastLevel ) {
  99. lastContent = editor.startContent;
  100. } else {
  101. lastContent = event.lastLevel.content || ( event.lastLevel.fragments && event.lastLevel.fragments.join( '' ) );
  102. }
  103. if (
  104. ! newContent ||
  105. ! lastContent ||
  106. newContent.indexOf( ' data-wpview-' ) === -1 ||
  107. lastContent.indexOf( ' data-wpview-' ) === -1
  108. ) {
  109. return;
  110. }
  111. if ( resetViews( lastContent ) === resetViews( newContent ) ) {
  112. event.preventDefault();
  113. }
  114. } );
  115. // Make sure views are copied as their text.
  116. editor.on( 'drop objectselected', function( event ) {
  117. if ( isView( event.targetClone ) ) {
  118. event.targetClone = editor.getDoc().createTextNode(
  119. window.decodeURIComponent( editor.dom.getAttrib( event.targetClone, 'data-wpview-text' ) )
  120. );
  121. }
  122. } );
  123. // Clean up URLs for easier processing.
  124. editor.on( 'pastepreprocess', function( event ) {
  125. var content = event.content;
  126. if ( content ) {
  127. content = tinymce.trim( content.replace( /<[^>]+>/g, '' ) );
  128. if ( /^https?:\/\/\S+$/i.test( content ) ) {
  129. event.content = content;
  130. }
  131. }
  132. } );
  133. // Show the view type in the element path.
  134. editor.on( 'resolvename', function( event ) {
  135. if ( isView( event.target ) ) {
  136. event.name = editor.dom.getAttrib( event.target, 'data-wpview-type' ) || 'object';
  137. }
  138. } );
  139. // See `media` plugin.
  140. editor.on( 'click keyup', function() {
  141. var node = editor.selection.getNode();
  142. if ( isView( node ) ) {
  143. if ( editor.dom.getAttrib( node, 'data-mce-selected' ) ) {
  144. node.setAttribute( 'data-mce-selected', '2' );
  145. }
  146. }
  147. } );
  148. editor.addButton( 'wp_view_edit', {
  149. tooltip: 'Edit|button', // '|button' is not displayed, only used for context
  150. icon: 'dashicon dashicons-edit',
  151. onclick: function() {
  152. var node = editor.selection.getNode();
  153. if ( isView( node ) ) {
  154. wp.mce.views.edit( editor, node );
  155. }
  156. }
  157. } );
  158. editor.addButton( 'wp_view_remove', {
  159. tooltip: 'Remove',
  160. icon: 'dashicon dashicons-no',
  161. onclick: function() {
  162. editor.fire( 'cut' );
  163. }
  164. } );
  165. editor.once( 'preinit', function() {
  166. var toolbar;
  167. if ( editor.wp && editor.wp._createToolbar ) {
  168. toolbar = editor.wp._createToolbar( [
  169. 'wp_view_edit',
  170. 'wp_view_remove'
  171. ] );
  172. editor.on( 'wptoolbar', function( event ) {
  173. if ( ! event.collapsed && isView( event.element ) ) {
  174. event.toolbar = toolbar;
  175. }
  176. } );
  177. }
  178. } );
  179. editor.wp = editor.wp || {};
  180. editor.wp.getView = noop;
  181. editor.wp.setViewCursor = noop;
  182. return {
  183. getView: noop
  184. };
  185. } );
  186. } )( window.tinymce );