Merge pull request #152 from WordPress/tinymce-single/mimic-ui-prototype

Tinymce single/mimic ui prototype

shared/index.css

@@ -76,14 +76,31 @@ body {
 	margin-top: 0.5em;
 }
 
-#editor figure img {
+#editor figure img,
+#editor figure iframe {
 	display: block;
 }
 
 #editor pre {
 	overflow: auto;
 }
 
+#editor hr {
+	border: none;
+	font-size: 36px;
+	margin: 1em 0;
+}
+
+#editor hr:before {
+	content: '\2767';
+	display: block;
+	text-align: center;
+}
+
+#editor blockquote {
+	margin: 2em;
+}
+
 #editor:after {
    content: ".";
    visibility: hidden;

shared/tinymce/toolbar.js

@@ -199,7 +199,23 @@
 
 				toolbar.bottom = bottom;
 
-				function reposition() {}
+				function reposition() {
+					if ( ! currentSelection ) {
+						return;
+					}
+
+					var toolbar = this.getEl();
+					var toolbarRect = toolbar.getBoundingClientRect();
+					var elementRect = currentSelection.getBoundingClientRect();
+
+					DOM.setStyles( toolbar, {
+						position: 'absolute',
+						left: elementRect.left + 'px',
+						top: elementRect.bottom + window.pageYOffset + 'px'
+					} );
+
+					this.show();
+				}
 
 				toolbar.on( 'show', function() {
 					this.reposition();
@@ -222,6 +238,32 @@
 				return toolbar;
 			}
 
+			editor.on( 'nodechange', function( event ) {
+				var args = {
+					element: event.element,
+					parents: event.parents
+				};
+
+				editor.fire( 'wptoolbar', args );
+
+				currentSelection = args.selection || args.element;
+
+				if ( activeToolbar && activeToolbar !== args.toolbar ) {
+					activeToolbar.hide();
+				}
+
+				if ( args.toolbar ) {
+					if ( activeToolbar !== args.toolbar ) {
+						activeToolbar = args.toolbar;
+						activeToolbar.show();
+					} else {
+						activeToolbar.reposition();
+					}
+				} else {
+					activeToolbar = false;
+				}
+			} );
+
 			function hide( event ) {
 				// if ( activeToolbar ) {
 				// 	if ( activeToolbar.tempHide || event.type === 'hide' ) {

shared/tinymce/wplink.js

@@ -192,7 +192,7 @@
 				editToolbar.on( 'show', function() {
 					if ( typeof window.wpLink === 'undefined' || ! window.wpLink.modalOpen ) {
 						window.setTimeout( function() {
-							var element = editToolbar.$el.find( 'input.ui-autocomplete-input' )[0],
+							var element = editToolbar.$el.find( 'input' )[0],
 								selection = linkNode && ( linkNode.textContent || linkNode.innerText );
 
 							if ( element ) {

tinymce-single/blocks/elements/horizontal-rule/register.js

@@ -0,0 +1,8 @@
+window.wp.blocks.register( {
+	elements: [ 'hr' ],
+	type: 'separator',
+	icon: 'gridicons-minus',
+	buttons: [
+
+	]
+} );

tinymce-single/blocks/my-awesome-plugin/youtube/register.js

@@ -0,0 +1,15 @@
+window.wp.blocks.register( {
+	name: 'youtube',
+	namespace: 'my-awesome-plugin',
+	type: 'video',
+	keywords: [],
+	icon: 'gridicons-video',
+	buttons: [
+		'block-align-left',
+		'block-align-center',
+		'block-align-right',
+		{
+			icon: 'gridicons-cog'
+		}
+	]
+} );

tinymce-single/blocks/my-awesome-plugin/youtube/structure.css

@@ -0,0 +1,29 @@
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"] {
+	position: relative;
+}
+
+/* Should probably be handled internally. */
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"]:before {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"][data-mce-selected]:before {
+	display: none;
+}
+
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"] iframe {
+	width: 750px;
+	height: 422px;
+}
+
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignleft iframe,
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignright iframe {
+	width: 375px;
+	height: 211px;
+}

tinymce-single/index.html

@@ -10,6 +10,7 @@
 		<link rel="stylesheet" type="text/css" href="../shared/index.css">
 
 		<link rel="stylesheet" type="text/css" href="blocks/core/gallery/structure.css">
+		<link rel="stylesheet" type="text/css" href="blocks/my-awesome-plugin/youtube/structure.css">
 	</head>
 	<body>
 		<div id="editor">
@@ -18,12 +19,25 @@ <h1>1.0 Is The Loneliest Number</h1>
 
 			<p>Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>
 
-			<figure data-wp-block-type="core:image">
+			<figure data-wp-block-type="core:image" class="alignright">
 				<img src="https://cldup.com/HN3-c7ER9p.jpg" alt="">
+				<figcaption>I have no idea which mountain this is. It looks tall!</figcaption>
 			</figure>
 
 			<p>I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.</p>
 
+			<p>A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.</p>
+
+			<hr>
+
+			<h2>NASA discovers system of seven Earth-sized planets</h2>
+
+			<blockquote>
+				<p>NASA’s Spitzer Space Telescope has revealed a new exoplanet discovery: the <a href="https://exoplanets.nasa.gov/trappist1">first known system of seven Earth-size planets around a single star</a>. Three of these planets are firmly located in the habitable zone, the area around the parent star where a rocky planet is most likely to have liquid water.</p>
+
+				<p>The discovery sets a new record for greatest number of habitable-zone planets found around a single star outside our solar system. All of these seven planets could have liquid water—key to life as we know it—under the right atmospheric conditions, but the chances are highest with the three in the habitable zone.</p>
+			</blockquote>
+
 			<figure data-wp-block-type="core:gallery" data-wp-block-setting-column="3">
 				<figure>
 					<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/1_main_pia21423-png.png" alt="A star shines on a planet's surface.">
@@ -37,17 +51,14 @@ <h1>1.0 Is The Loneliest Number</h1>
 				</figure>
 			</figure>
 
-			<!-- <figure data-wp-block-type="lost-in-space-plugin:nasa-poster">
-
-			</figure>
+			<p>Okay, now let’s take an interstellar road trip:</p>
 
 			<figure data-wp-block-type="my-awesome-plugin:youtube">
-				<iframe src=""></iframe>
+				<iframe width="560" height="315" src="https://www.youtube.com/embed/3-NTv0CdFCk" allowfullscreen></iframe>
+				<figcaption>More planets! 😊</figcaption>
 			</figure>
 
-			<figure>
-				<video></video>
-			</figure> -->
+			<p>And this is the end of another editor block prototype.</p>
 
 		</div>
 
@@ -58,9 +69,11 @@ <h1>1.0 Is The Loneliest Number</h1>
 		<script src="blocks/core/gallery/register.js"></script>
 		<script src="blocks/elements/blockquote/register.js"></script>
 		<script src="blocks/elements/headings/register.js"></script>
+		<script src="blocks/elements/horizontal-rule/register.js"></script>
 		<script src="blocks/elements/lists/register.js"></script>
 		<script src="blocks/elements/paragraph/register.js"></script>
 		<script src="blocks/elements/preformatted/register.js"></script>
+		<script src="blocks/my-awesome-plugin/youtube/register.js"></script>
 
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>
 

tinymce-single/tinymce/block.css

@@ -6,7 +6,12 @@
 	background-color: transparent;
 }
 
-#editor.has-block-ui *[data-mce-selected="block"] {
+#editor hr[data-mce-selected] {
+	outline: none;
+}
+
+#editor.has-block-ui *[data-mce-selected="block"],
+#editor.has-block-ui hr[data-mce-selected] {
 	outline: 2px solid #e0e5e9;
 	outline-offset: 11px;
 	/*background-color: rgba( 135, 166, 188, 0.3 );

tinymce-single/tinymce/block.js

@@ -20,8 +20,9 @@
 
 					if ( position !== 'left' ) {
 						editor.$( element ).addClass( 'text-align-' + position );
-						editor.nodeChanged();
 					}
+
+					editor.nodeChanged();
 				},
 				onPostRender: function() {
 					var button = this;
@@ -216,19 +217,20 @@
 			blockToolbar.$el.addClass( 'block-toolbar' );
 
 			var range;
+			var blockToolbarWidth = 0;
 
 			toolbarInline.reposition = function () {
-				if ( ! range ) {
+				if ( ! element ) {
 					return;
 				}
 
 				var toolbar = this.getEl();
 				var toolbarRect = toolbar.getBoundingClientRect();
-				var elementRect = range.getBoundingClientRect();
+				var elementRect = element.getBoundingClientRect();
 
 				DOM.setStyles( toolbar, {
 					position: 'absolute',
-					left: elementRect.left + 'px',
+					left: elementRect.left + 8 + blockToolbarWidth + 'px',
 					top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
 				} );
 
@@ -257,11 +259,9 @@
 			}
 
 			editor.on( 'blur', function() {
+				toolbarInline.hide();
 				toolbarCaret.hide();
-				blockToolbar.hide();
-				tinymce.each( editor.settings.blocks, function( block, key ) {
-					blockToolbars[ key ].hide();
-				} );
+				hideBlockUI();
 			} );
 
 			function isEmptySlot( node, isAtRoot ) {
@@ -361,6 +361,8 @@
 								top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
 							} );
 
+							blockToolbarWidth = toolbarRect.width;
+
 							this.show();
 						}
 
@@ -464,6 +466,10 @@
 					return;
 				}
 
+				if ( ! editor.getBody().contains( selection.anchorNode ) ) {
+					return;
+				}
+
 				anchorNode = selection.anchorNode;
 
 				var isEmpty = isCollapsed && isEmptySlot( anchorNode, true );
@@ -478,26 +484,16 @@
 				} else {
 					toolbarCaret.hide();
 
-					if ( ! isCollapsed && anchorNode.nodeType === 3 ) {
-						hidden = true;
-						hideBlockUI();
-
-						if ( anchorNode.parentNode.nodeName === 'A' ) {
-							toolbarInline.hide();
-						} else {
-							range = document.createRange();
-							range.setStart( selection.anchorNode, selection.anchorOffset );
-							range.setEnd( selection.anchorNode, selection.anchorOffset );
-							toolbarInline.reposition();
-						}
+					if ( anchorNode.nodeType === 3 ) {
+						toolbarInline.reposition();
 					} else {
 						toolbarInline.hide();
+					}
 
-						if ( isBlockUIVisible ) {
-							showBlockUI();
-						} else {
-							hideBlockUI();
-						}
+					if ( isBlockUIVisible ) {
+						showBlockUI();
+					} else {
+						hideBlockUI();
 					}
 				}
 			} );