diff --git a/shared/index.css b/shared/index.css index 0e2e206d8eb5f..900d54f6d6603 100644 --- a/shared/index.css +++ b/shared/index.css @@ -76,7 +76,8 @@ body { margin-top: 0.5em; } -#editor figure img { +#editor figure img, +#editor figure iframe { display: block; } @@ -84,6 +85,22 @@ body { 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; diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js index ba2708c200b42..d32b669bdbb78 100644 --- a/shared/tinymce/toolbar.js +++ b/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' ) { diff --git a/shared/tinymce/wplink.js b/shared/tinymce/wplink.js index 9b2f3212be15e..18c4ab8e495c9 100644 --- a/shared/tinymce/wplink.js +++ b/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 ) { diff --git a/tinymce-single/blocks/elements/horizontal-rule/register.js b/tinymce-single/blocks/elements/horizontal-rule/register.js new file mode 100644 index 0000000000000..e4939537779d3 --- /dev/null +++ b/tinymce-single/blocks/elements/horizontal-rule/register.js @@ -0,0 +1,8 @@ +window.wp.blocks.register( { + elements: [ 'hr' ], + type: 'separator', + icon: 'gridicons-minus', + buttons: [ + + ] +} ); diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js new file mode 100644 index 0000000000000..7e994a853c023 --- /dev/null +++ b/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' + } + ] +} ); diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/structure.css b/tinymce-single/blocks/my-awesome-plugin/youtube/structure.css new file mode 100644 index 0000000000000..5642f0c2d3698 --- /dev/null +++ b/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; +} diff --git a/tinymce-single/index.html b/tinymce-single/index.html index dc4bae63b95df..03d4a84dcadc5 100644 --- a/tinymce-single/index.html +++ b/tinymce-single/index.html @@ -10,6 +10,7 @@ +
@@ -18,12 +19,25 @@

1.0 Is The Loneliest Number

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!

-
+
+
I have no idea which mountain this is. It looks tall!

I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.

+

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.

+ +
+ +

NASA discovers system of seven Earth-sized planets

+ +
+

NASA’s Spitzer Space Telescope has revealed a new exoplanet discovery: the first known system of seven Earth-size planets around a single star. 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.

+ +

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.

+
+
A star shines on a planet's surface. @@ -37,17 +51,14 @@

1.0 Is The Loneliest Number

- +

And this is the end of another editor block prototype.

@@ -58,9 +69,11 @@

1.0 Is The Loneliest Number

+ + diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index ca937cd04ecb2..c4167a55ac985 100644 --- a/tinymce-single/tinymce/block.css +++ b/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 ); diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index 70d3c65ee1c3f..27f051e93b231 100644 --- a/tinymce-single/tinymce/block.js +++ b/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(); } } } );