| 
									
										
										
										
											2019-03-12 09:27:46 +00:00
										 |  |  | /** | 
					
						
							|  |  |  |  * WordPress View plugin. | 
					
						
							|  |  |  |  */ | 
					
						
							| 
									
										
										
										
											2019-04-16 20:56:22 +01:00
										 |  |  | ( function( tinymce ) { | 
					
						
							| 
									
										
										
										
											2019-03-12 09:27:46 +00:00
										 |  |  | 	tinymce.PluginManager.add( 'wpview', function( editor ) { | 
					
						
							|  |  |  | 		function noop () {} | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-16 20:56:22 +01:00
										 |  |  | 		// Set this here as wp-tinymce.js may be loaded too early.
 | 
					
						
							|  |  |  | 		var wp = window.wp; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-03-12 09:27:46 +00:00
										 |  |  | 		if ( ! wp || ! wp.mce || ! wp.mce.views ) { | 
					
						
							|  |  |  | 			return { | 
					
						
							|  |  |  | 				getView: noop | 
					
						
							|  |  |  | 			}; | 
					
						
							|  |  |  | 		} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Check if a node is a view or not.
 | 
					
						
							|  |  |  | 		function isView( node ) { | 
					
						
							|  |  |  | 			return editor.dom.hasClass( node, 'wpview' ); | 
					
						
							|  |  |  | 		} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Replace view tags with their text.
 | 
					
						
							|  |  |  | 		function resetViews( content ) { | 
					
						
							|  |  |  | 			function callback( match, $1 ) { | 
					
						
							|  |  |  | 				return '<p>' + window.decodeURIComponent( $1 ) + '</p>'; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			if ( ! content ) { | 
					
						
							|  |  |  | 				return content; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			return content | 
					
						
							|  |  |  | 				.replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>(?:\.|[\s\S]+?wpview-end[^>]+>\s*<\/span>\s*)?<\/div>/g, callback ) | 
					
						
							|  |  |  | 				.replace( /<p[^>]+data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g, callback ); | 
					
						
							|  |  |  | 		} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		editor.on( 'init', function() { | 
					
						
							|  |  |  | 			var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			if ( MutationObserver ) { | 
					
						
							|  |  |  | 				new MutationObserver( function() { | 
					
						
							|  |  |  | 					editor.fire( 'wp-body-class-change' ); | 
					
						
							|  |  |  | 				} ) | 
					
						
							|  |  |  | 				.observe( editor.getBody(), { | 
					
						
							|  |  |  | 					attributes: true, | 
					
						
							|  |  |  | 					attributeFilter: ['class'] | 
					
						
							|  |  |  | 				} ); | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			// Pass on body class name changes from the editor to the wpView iframes.
 | 
					
						
							|  |  |  | 			editor.on( 'wp-body-class-change', function() { | 
					
						
							|  |  |  | 				var className = editor.getBody().className; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 				editor.$( 'iframe[class="wpview-sandbox"]' ).each( function( i, iframe ) { | 
					
						
							|  |  |  | 					// Make sure it is a local iframe
 | 
					
						
							|  |  |  | 					// jshint scripturl: true
 | 
					
						
							|  |  |  | 					if ( ! iframe.src || iframe.src === 'javascript:""' ) { | 
					
						
							|  |  |  | 						try { | 
					
						
							|  |  |  | 							iframe.contentWindow.document.body.className = className; | 
					
						
							|  |  |  | 						} catch( er ) {} | 
					
						
							|  |  |  | 					} | 
					
						
							|  |  |  | 				}); | 
					
						
							|  |  |  | 			} ); | 
					
						
							|  |  |  | 		}); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Scan new content for matching view patterns and replace them with markers.
 | 
					
						
							|  |  |  | 		editor.on( 'beforesetcontent', function( event ) { | 
					
						
							|  |  |  | 			var node; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			if ( ! event.selection ) { | 
					
						
							|  |  |  | 				wp.mce.views.unbind(); | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			if ( ! event.content ) { | 
					
						
							|  |  |  | 				return; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			if ( ! event.load ) { | 
					
						
							|  |  |  | 				node = editor.selection.getNode(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 				if ( node && node !== editor.getBody() && /^\s*https?:\/\/\S+\s*$/i.test( event.content ) ) { | 
					
						
							|  |  |  | 					// When a url is pasted or inserted, only try to embed it when it is in an empty paragrapgh.
 | 
					
						
							|  |  |  | 					node = editor.dom.getParent( node, 'p' ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 					if ( node && /^[\s\uFEFF\u00A0]*$/.test( editor.$( node ).text() || '' ) ) { | 
					
						
							|  |  |  | 						// Make sure there are no empty inline elements in the <p>
 | 
					
						
							|  |  |  | 						node.innerHTML = ''; | 
					
						
							|  |  |  | 					} else { | 
					
						
							|  |  |  | 						return; | 
					
						
							|  |  |  | 					} | 
					
						
							|  |  |  | 				} | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			event.content = wp.mce.views.setMarkers( event.content, editor ); | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Replace any new markers nodes with views.
 | 
					
						
							|  |  |  | 		editor.on( 'setcontent', function() { | 
					
						
							|  |  |  | 			wp.mce.views.render(); | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Empty view nodes for easier processing.
 | 
					
						
							|  |  |  | 		editor.on( 'preprocess hide', function( event ) { | 
					
						
							|  |  |  | 			editor.$( 'div[data-wpview-text], p[data-wpview-marker]', event.node ).each( function( i, node ) { | 
					
						
							|  |  |  | 				node.innerHTML = '.'; | 
					
						
							|  |  |  | 			} ); | 
					
						
							|  |  |  | 		}, true ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Replace views with their text.
 | 
					
						
							|  |  |  | 		editor.on( 'postprocess', function( event ) { | 
					
						
							|  |  |  | 			event.content = resetViews( event.content ); | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Replace views with their text inside undo levels.
 | 
					
						
							|  |  |  | 		// This also prevents that new levels are added when there are changes inside the views.
 | 
					
						
							|  |  |  | 		editor.on( 'beforeaddundo', function( event ) { | 
					
						
							|  |  |  | 			event.level.content = resetViews( event.level.content ); | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Make sure views are copied as their text.
 | 
					
						
							|  |  |  | 		editor.on( 'drop objectselected', function( event ) { | 
					
						
							|  |  |  | 			if ( isView( event.targetClone ) ) { | 
					
						
							|  |  |  | 				event.targetClone = editor.getDoc().createTextNode( | 
					
						
							|  |  |  | 					window.decodeURIComponent( editor.dom.getAttrib( event.targetClone, 'data-wpview-text' ) ) | 
					
						
							|  |  |  | 				); | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Clean up URLs for easier processing.
 | 
					
						
							|  |  |  | 		editor.on( 'pastepreprocess', function( event ) { | 
					
						
							|  |  |  | 			var content = event.content; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			if ( content ) { | 
					
						
							|  |  |  | 				content = tinymce.trim( content.replace( /<[^>]+>/g, '' ) ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 				if ( /^https?:\/\/\S+$/i.test( content ) ) { | 
					
						
							|  |  |  | 					event.content = content; | 
					
						
							|  |  |  | 				} | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// Show the view type in the element path.
 | 
					
						
							|  |  |  | 		editor.on( 'resolvename', function( event ) { | 
					
						
							|  |  |  | 			if ( isView( event.target ) ) { | 
					
						
							|  |  |  | 				event.name = editor.dom.getAttrib( event.target, 'data-wpview-type' ) || 'object'; | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		// See `media` plugin.
 | 
					
						
							|  |  |  | 		editor.on( 'click keyup', function() { | 
					
						
							|  |  |  | 			var node = editor.selection.getNode(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			if ( isView( node ) ) { | 
					
						
							|  |  |  | 				if ( editor.dom.getAttrib( node, 'data-mce-selected' ) ) { | 
					
						
							|  |  |  | 					node.setAttribute( 'data-mce-selected', '2' ); | 
					
						
							|  |  |  | 				} | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		editor.addButton( 'wp_view_edit', { | 
					
						
							|  |  |  | 			tooltip: 'Edit|button', // '|button' is not displayed, only used for context
 | 
					
						
							|  |  |  | 			icon: 'dashicon dashicons-edit', | 
					
						
							|  |  |  | 			onclick: function() { | 
					
						
							|  |  |  | 				var node = editor.selection.getNode(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 				if ( isView( node ) ) { | 
					
						
							|  |  |  | 					wp.mce.views.edit( editor, node ); | 
					
						
							|  |  |  | 				} | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		editor.addButton( 'wp_view_remove', { | 
					
						
							|  |  |  | 			tooltip: 'Remove', | 
					
						
							|  |  |  | 			icon: 'dashicon dashicons-no', | 
					
						
							|  |  |  | 			onclick: function() { | 
					
						
							|  |  |  | 				editor.fire( 'cut' ); | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		editor.once( 'preinit', function() { | 
					
						
							|  |  |  | 			var toolbar; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 			if ( editor.wp && editor.wp._createToolbar ) { | 
					
						
							|  |  |  | 				toolbar = editor.wp._createToolbar( [ | 
					
						
							|  |  |  | 					'wp_view_edit', | 
					
						
							|  |  |  | 					'wp_view_remove' | 
					
						
							|  |  |  | 				] ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 				editor.on( 'wptoolbar', function( event ) { | 
					
						
							|  |  |  | 					if ( ! event.collapsed && isView( event.element ) ) { | 
					
						
							|  |  |  | 						event.toolbar = toolbar; | 
					
						
							|  |  |  | 					} | 
					
						
							|  |  |  | 				} ); | 
					
						
							|  |  |  | 			} | 
					
						
							|  |  |  | 		} ); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		editor.wp = editor.wp || {}; | 
					
						
							|  |  |  | 		editor.wp.getView = noop; | 
					
						
							|  |  |  | 		editor.wp.setViewCursor = noop; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 		return { | 
					
						
							|  |  |  | 			getView: noop | 
					
						
							|  |  |  | 		}; | 
					
						
							|  |  |  | 	} ); | 
					
						
							| 
									
										
										
										
											2019-04-16 20:56:22 +01:00
										 |  |  | } )( window.tinymce ); |