From aae86d4724ba3ed688a3b6a04b9e55183a79a960 Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 27 Feb 2017 16:20:02 +0100 Subject: [PATCH] Show block UI on focus, hide on type. --- shared/index.css | 4 +- shared/tinymce/logger.js | 4 +- shared/tinymce/toolbar.js | 146 +----- .../blocks/core/gallery/register.js | 25 + .../blocks/core/gallery/structure.css | 39 ++ tinymce-single/index.html | 41 +- tinymce-single/tinymce/block.css | 42 -- tinymce-single/tinymce/block.js | 471 +++++++++++------- tinymce-single/tinymce/config.js | 97 +--- tinymce-single/tinymce/formatting.js | 108 ---- tinymce-single/tinymce/new.js | 56 --- 11 files changed, 413 insertions(+), 620 deletions(-) create mode 100644 tinymce-single/blocks/core/gallery/register.js create mode 100644 tinymce-single/blocks/core/gallery/structure.css delete mode 100644 tinymce-single/tinymce/formatting.js delete mode 100644 tinymce-single/tinymce/new.js diff --git a/shared/index.css b/shared/index.css index 695e917ad306d..c6af751c4c746 100644 --- a/shared/index.css +++ b/shared/index.css @@ -31,9 +31,9 @@ body { #editor figure { float: none; - margin: 0; + margin: 1em 0; width: 100%; - transition: margin 0.5s, width 0.5s; + /*transition: margin 0.5s, width 0.5s;*/ } #editor figure.aligncenter { diff --git a/shared/tinymce/logger.js b/shared/tinymce/logger.js index 5e64340918fd6..c2bfa6fde1c7d 100644 --- a/shared/tinymce/logger.js +++ b/shared/tinymce/logger.js @@ -11,12 +11,12 @@ window.tinymce.PluginManager.add( 'logger', function( editor ) { beforeExecCommand: 'fires before commands are executed.', execCommand: 'fires after commands are executed.', change: 'fires when a new undo level is added.', - dirty: 'fires when the editor is considered to be in a dirty (unsaved) state. ' + dirty: 'fires when the editor is considered to be in a dirty (unsaved) state.' }; window.tinymce.each( types, function( info, type ) { editor.on( type, function( event ) { - console.log( type, info, event ); + window.console.log( type, info, event ); } ); } ); } ); diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js index 4af5555c8bea1..d38bab7e72bb2 100644 --- a/shared/tinymce/toolbar.js +++ b/shared/tinymce/toolbar.js @@ -190,83 +190,7 @@ toolbar.bottom = bottom; - function reposition() { - if ( ! currentSelection ) { - return this; - } - - var scrollX = window.pageXOffset || document.documentElement.scrollLeft, - scrollY = window.pageYOffset || document.documentElement.scrollTop, - windowWidth = window.innerWidth, - windowHeight = window.innerHeight, - toolbar = this.getEl(), - toolbarWidth = toolbar.offsetWidth, - toolbarHeight = toolbar.clientHeight + 10, - selection = currentSelection.getBoundingClientRect(), - selectionMiddle = ( selection.left + selection.right ) / 2, - buffer = 5, - spaceNeeded = toolbarHeight + buffer, - spaceTop = selection.top, - spaceBottom = windowHeight - selection.bottom, - editorHeight = windowHeight, - className = '', - top, left; - - if ( spaceTop >= editorHeight || spaceBottom >= editorHeight ) { - this.scrolling = true; - this.hide(); - this.scrolling = false; - return this; - } - - if ( this.bottom ) { - if ( spaceBottom >= spaceNeeded ) { - className = ' mce-arrow-up'; - top = selection.bottom + scrollY; - } else if ( spaceTop >= spaceNeeded ) { - className = ' mce-arrow-down'; - top = selection.top + scrollY - toolbarHeight; - } - } else { - if ( spaceTop >= spaceNeeded ) { - className = ' mce-arrow-down'; - top = selection.top + scrollY - toolbarHeight; - } else if ( spaceBottom >= spaceNeeded && editorHeight / 2 > selection.bottom ) { - className = ' mce-arrow-up'; - top = selection.bottom + scrollY; - } - } - - if ( typeof top === 'undefined' ) { - top = scrollY + buffer; - } - - left = selectionMiddle - toolbarWidth / 2 + scrollX; - - if ( selection.left < 0 || selection.right > windowWidth ) { - left = scrollX + ( windowWidth - toolbarWidth ) / 2; - } else if ( toolbarWidth >= windowWidth ) { - className += ' mce-arrow-full'; - left = 0; - } else if ( ( left < 0 && selection.left + toolbarWidth > windowWidth ) || ( left + toolbarWidth > windowWidth && selection.right - toolbarWidth < 0 ) ) { - left = ( windowWidth - toolbarWidth ) / 2; - } else if ( left < scrollX ) { - className += ' mce-arrow-left'; - left = selection.left + scrollX; - } else if ( left + toolbarWidth > windowWidth + scrollX ) { - className += ' mce-arrow-right'; - left = selection.right - toolbarWidth + scrollX; - } - - toolbar.className = toolbar.className.replace( / ?mce-arrow-[\w]+/g, '' ) + className; - - DOM.setStyles( toolbar, { - 'left': left, - 'top': top - } ); - - return this; - } + function reposition() {} toolbar.on( 'show', function() { this.reposition(); @@ -289,67 +213,11 @@ return toolbar; } - editor.shortcuts.add( 'alt+119', '', function() { - var node; - - if ( activeToolbar ) { - node = activeToolbar.find( 'toolbar' )[0]; - node && node.focus( true ); - } - } ); - - editor.on( 'nodechange', function( event ) { - // This can move the carect unexpectedly! - // event.element.normalize(); - - var range = editor.selection.getRng() - - var empty = ( - editor.dom.isEmpty( event.element ) && - ( event.element.nodeName === 'P' || ( - event.element.nodeName === 'BR' && - event.element.parentNode.nodeName === 'P' - ) ) - ); - - var args = { - element: event.element, - empty: empty, - parents: event.parents, - range: range, - }; - - 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; - } - } ); - - editor.on( 'focus', function() { - if ( activeToolbar ) { - activeToolbar.show(); - } - } ); - function hide( event ) { - if ( activeToolbar ) { - if ( activeToolbar.tempHide || event.type === 'hide' ) { - activeToolbar.hide(); - activeToolbar = false; + // if ( activeToolbar ) { + // if ( activeToolbar.tempHide || event.type === 'hide' ) { + // activeToolbar.hide(); + // activeToolbar = false; // } else if ( ( // event.type === 'resizewindow' || // event.type === 'scrollwindow' || @@ -367,8 +235,8 @@ // activeToolbar.scrolling = true; // activeToolbar.hide(); - } - } + // } + // } } // For full height editor. diff --git a/tinymce-single/blocks/core/gallery/register.js b/tinymce-single/blocks/core/gallery/register.js new file mode 100644 index 0000000000000..dd993aff73778 --- /dev/null +++ b/tinymce-single/blocks/core/gallery/register.js @@ -0,0 +1,25 @@ +window.wp.blocks.register( { + name: 'gallery', + namespace: 'core', + type: 'image', + keywords: [], + icon: 'gridicons-image', + buttons: [ + 'block-align-left', + 'block-align-center', + 'block-align-right', + // { + // type: 'select', + // label: 'Columns' + // }, + // { + // type: 'button', + // label: 'Columns', + // icon: 'gridicons-image', + // command: function( editor, node ) { + // // body... + // } + // }, + 'block-options' + ] +} ); diff --git a/tinymce-single/blocks/core/gallery/structure.css b/tinymce-single/blocks/core/gallery/structure.css new file mode 100644 index 0000000000000..700a2e8564c93 --- /dev/null +++ b/tinymce-single/blocks/core/gallery/structure.css @@ -0,0 +1,39 @@ +#editor figure[data-wp-block-type="core:gallery"] { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + width: auto; +} + +#editor figure[data-wp-block-type="core:gallery"].aligncenter { + margin-left: auto; + margin-right: auto; +} + +#editor figure[data-wp-block-type="core:gallery"].alignleft { + float: left; + margin: 0.5em 1em 0.5em 0; + width: 50%; +} + +#editor figure[data-wp-block-type="core:gallery"].alignright { + float: right; + margin: 0.5em 0 0.5em 1em; + width: 50%; +} + +#editor figure[data-wp-block-type="core:gallery"] figure { + margin: 0; +} + +#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="2"] figure { + width: 43%; +} + +#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="3"] figure { + width: 32%; +} + +#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="4"] figure { + width: 24%; +} diff --git a/tinymce-single/index.html b/tinymce-single/index.html index 2ffca8682ef72..5d288db815a6c 100644 --- a/tinymce-single/index.html +++ b/tinymce-single/index.html @@ -2,32 +2,67 @@ + Editor Blocks Demo (Single TinyMCE Instance) + + + +
+

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 like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.

+ +
+
+ A star shines on a planet's surface. +
TRAPPIST-1f
+
+
+ +
+
+ +
+
+ + +
+ + + - - + + diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index f356e25469d4a..c849c19a95259 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -187,10 +187,6 @@ div.mce-inline-toolbar-grp { max-width: 98%; } -div.mce-inline-toolbar-grp:not(.block-toolbar) { - transition: all 0.5s; -} - div.wp-link-preview { float: left; max-width: 694px; @@ -246,44 +242,6 @@ div.mce-inline-toolbar-grp.block-toolbar { left: -30px; } -/*.mce-btn.mce-move-up, -.mce-btn.mce-move-down { - float: left; - border: none; -} - -.mce-btn.mce-move-up { - margin-bottom: 0; -} - -.mce-btn.mce-move-down { - margin-top: 0; - position: absolute; - bottom: 2px; - left: 2px; -} - -.mce-btn.mce-move-up:focus, -.mce-btn.mce-move-down:focus, -.mce-btn.mce-move-up:hover, -.mce-btn.mce-move-down:hover { - background: none; - box-shadow: none; -} - -.mce-btn.mce-move-up button, -.mce-btn.mce-move-down button { - height: 12px; - padding: 1px; -} - -.mce-move-up svg.gridicon, -.mce-move-down svg.gridicon { - position: relative; - top: -6px; - width: 20px; -}*/ - .block-toolbar { margin-top: -6px; } diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index b8d5941e2203d..285b84e84f3df 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -1,3 +1,103 @@ +( function( wp ) { + var _settings = {}; + + wp.blocks = { + register: function( settings ) { + // Note, elements should probably only be registered by core. + // May for all block, we should offer to extend the settings (add buttons). + + if ( settings.elements ) { + settings.elements.forEach( function( element ) { + _settings[ 'element:' + element ] = settings; + } ); + } else if ( settings.namespace && settings.name ) { + _settings[ settings.namespace + ':' + settings.name ] = settings; + } + }, + getSettings: function( id ) { + return _settings[ id ]; + } + }; +} )( window.wp = window.wp || {} ); + +( function( register ) { + register( { + elements: [ 'p' ], + type: 'text', + icon: 'gridicons-posts', + buttons: [ + 'alignleft', + 'aligncenter', + 'alignright', + 'heading', + 'blockquote', + 'bullist', + 'preformatted' + ] + } ); + + register( { + elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], + type: 'text', + icon: 'gridicons-heading', + buttons: [ + 'alignleft', + 'aligncenter', + 'alignright', + 'heading1', + 'heading2', + 'heading3', + 'heading4', + 'heading5', + 'heading6', + 'removeheading' + ] + } ); + + register( { + elements: [ 'ul', 'ol' ], + type: 'text', + icon: 'gridicons-list-unordered', + buttons: [ + 'bullist', + 'numlist', + 'removelist' + ] + } ); + + register( { + elements: [ 'blockquote' ], + type: 'text', + icon: 'gridicons-quote', + buttons: [ + 'removeblockquote' + ] + } ); + + register( { + elements: [ 'pre' ], + type: 'text', + icon: 'gridicons-code', + buttons: [ + 'syntax', + 'removepreformatted' + ] + } ); + + register( { + name: 'image', + namespace: 'core', + type: 'image', + icon: 'gridicons-image', + buttons: [ + 'block-align-left', + 'block-align-center', + 'block-align-right', + 'togglefigcaption' + ] + } ); +} )( window.wp.blocks.register ); + ( function( tinymce ) { tinymce.PluginManager.add( 'block', function( editor ) { function focusToolbar( toolbar ) { @@ -10,7 +110,6 @@ var element; var blockToolbar; var blockToolbars = {}; - var blockSelection = false; tinymce.each( '123456'.split(''), function( level ) { editor.addCommand( 'heading' + level, function() { @@ -109,6 +208,11 @@ editor.buttons.bullist.icon = 'gridicons-list-unordered'; editor.buttons.numlist.icon = 'gridicons-list-ordered'; + editor.buttons.bold.icon = 'gridicons-bold'; + editor.buttons.italic.icon = 'gridicons-italic'; + editor.buttons.strikethrough.icon = 'gridicons-strikethrough'; + editor.buttons.link.icon = 'gridicons-link'; + editor.addCommand( 'removelist', function() { editor.selection.select( element ); @@ -127,24 +231,24 @@ } ); tinymce.each( [ 'left', 'center', 'right' ], function( position ) { - editor.addCommand( 'imgalign' + position, function() { + editor.addCommand( 'block-align-' + position, function() { tinymce.each( [ 'left', 'center', 'right' ], function( position ) { - editor.formatter.remove( 'align' + position, element ); + editor.$( element ).removeClass( 'align' + position ); } ); - editor.formatter.apply( 'align' + position, element ); + editor.$( element ).addClass( 'align' + position ); editor.nodeChanged(); } ); - editor.addButton( 'imgalign' + position, { + editor.addButton( 'block-align-' + position, { icon: 'gridicons-align-image-' + position, - cmd: 'imgalign' + position, + cmd: 'block-align-' + position, onPostRender: function() { var button = this; editor.on( 'nodechange', function( event ) { - $element = editor.$( event.parents[ event.parents.length - 1 ] ); + $element = editor.$( element ); if ( position === 'center' ) { button.active( ! ( @@ -201,24 +305,7 @@ } } ); - editor.addCommand( 'selectblock', function() { - editor.$( element ).attr( 'data-mce-selected', 'block' ); - editor.nodeChanged(); - - editor.once('click keydown', function ( event ) { - if ( tinymce.util.VK.modifierPressed( event ) ) { - return; - } - - editor.$('*[data-mce-selected="block"]').removeAttr('data-mce-selected'); - editor.nodeChanged(); - } ); - } ); - - // editor.addCommand( 'moveblock', function() { - // blockSelection = false; - - // } ); + editor.addCommand( 'selectblock', function() {} ); editor.addButton( 'moveblock', { icon: 'gridicons-reblog', @@ -249,7 +336,7 @@ } }); - editor.addCommand( 'removeblock', function() { + editor.addCommand( 'block-remove', function() { var $blocks = editor.$( '*[data-mce-selected="block"]' ).add( element ); var p = editor.$( '


' ); @@ -258,15 +345,11 @@ editor.selection.setCursorLocation( p[0], 0 ); $blocks.remove(); } ); - - setTimeout( function() { - editor.$( p ).attr( 'data-mce-selected', null ); - } ); } ); - editor.addButton( 'removeblock', { + editor.addButton( 'block-remove', { icon: 'gridicons-trash', - cmd: 'removeblock' + cmd: 'block-remove' } ); editor.addCommand( 'up', function() { @@ -307,201 +390,228 @@ classes: 'widget btn move-down' } ); - blockToolbar = editor.wp._createToolbar( [ 'up', 'block', 'down' ] ) + editor.addButton( 'add', { + icon: 'gridicons-add-outline', + tooltip: 'Add Block' + } ); + + var toolbarInline = editor.wp._createToolbar( [ 'bold', 'italic', 'strikethrough', 'link' ] ); + var toolbarCaret = editor.wp._createToolbar( [ 'add' ] ); + blockToolbar = editor.wp._createToolbar( [ 'up', 'block', 'down' ] ); + + toolbarCaret.$el.addClass( 'block-toolbar' ); + blockToolbar.$el.addClass( 'block-toolbar' ); + + var range; + + toolbarInline.reposition = function () { + if ( ! range ) { + return; + } + + var toolbar = this.getEl(); + var toolbarRect = toolbar.getBoundingClientRect(); + var elementRect = range.getBoundingClientRect(); + + DOM.setStyles( toolbar, { + position: 'absolute', + left: elementRect.left + 'px', + top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px' + } ); - blockToolbar.$el.addClass('block-toolbar') + this.show(); + } + toolbarCaret.reposition = blockToolbar.reposition = function () { - if (!element) return + if ( ! element ) { + return; + } - var toolbar = this.getEl() - var toolbarRect = toolbar.getBoundingClientRect() - var elementRect = element.getBoundingClientRect() + var toolbar = this.getEl(); + var toolbarRect = toolbar.getBoundingClientRect(); + var elementRect = element.getBoundingClientRect(); var contentRect = editor.getBody().getBoundingClientRect(); - DOM.setStyles(toolbar, { + DOM.setStyles( toolbar, { position: 'absolute', left: contentRect.left + 50 + 'px', top: elementRect.top + window.pageYOffset + 'px' } ); - this.show() + this.show(); } - editor.on('blur', function () { - blockToolbar.hide() + editor.on( 'blur', function() { + toolbarCaret.hide(); + blockToolbar.hide(); + tinymce.each( editor.settings.blocks, function( block, key ) { + blockToolbars[ key ].hide(); + } ); } ); - editor.on( 'nodechange', function( event ) { - var empty = ( - editor.dom.isEmpty( event.element ) && - ( event.element.nodeName === 'P' || ( - event.element.nodeName === 'BR' && - event.element.parentNode.nodeName === 'P' - ) ) - ); - - element = event.parents[ event.parents.length - 1 ]; - - if ( ! empty && editor.dom.isBlock( element ) ) { - blockToolbar.reposition(); - } else { - blockToolbar.hide(); + function isEmptySlot( node ) { + // Text node. + if ( node.nodeType === 3 ) { + // Has text. + if ( node.data.length ) { + return false; + } else { + node = node.parentNode; + } } - if ( element.nodeName === 'FIGURE' ) { - editor.$( element ).attr( 'data-mce-selected', 'block' ); + // Element node. + if ( node.nodeType === 1 ) { + // Element is no direct child. + if ( node.parentNode !== editor.getBody() ) { + return false; + } - editor.once('click keydown', function ( event ) { - if ( tinymce.util.VK.modifierPressed( event ) ) { - return; + var childNodes = node.childNodes; + var i = childNodes.length; + + // Loop over children. + while ( i-- ) { + // Text node. + if ( childNodes[ i ].nodeType === 3 ) { + // Has text. + if ( node.data.length ) { + return false; + } } - editor.$('*[data-mce-selected="block"]').removeAttr('data-mce-selected'); - editor.nodeChanged(); - } ); + // Element node. + if ( childNodes[ i ].nodeType === 1 ) { + // Is not BR. + if ( childNodes[ i ].nodeName !== 'BR' ) { + return false; + } + } + } } - var range = editor.selection.getRng() + return true; + } - var $start = editor.$( editor.dom.getParent( range.startContainer, function( element ) { - return element.parentNode === editor.getBody(); - } ) ); + function hideBlockUI() { + blockToolbar.hide(); - var $end = editor.$( editor.dom.getParent( range.endContainer, function( element ) { - return element.parentNode === editor.getBody(); - } ) ); + tinymce.each( blockToolbars, function( toolbar ) { + toolbar.hide(); + } ); + } - // Selection only has the start of a new block. - if ( $end[0] === range.endContainer && range.endOffset === 0 ) { - $end = $end.prev(); - } + function showBlockUI( focus ) { + blockToolbar.reposition(); - if ( ! empty && $start[0] !== $end[0] ) { - // $start.add( $start.nextUntil( $end ) ).add( $end ).attr( 'data-mce-selected', 'block' ); + var name = element.getAttribute( 'data-wp-block-type' ) || 'element:' + element.nodeName.toLowerCase(); + var settings = wp.blocks.getSettings( name ); - // editor.once('click keydown', function ( event ) { - // if ( tinymce.util.VK.modifierPressed( event ) ) { - // return; - // } + console.log(name, settings); - // editor.$('*[data-mce-selected="block"]').removeAttr('data-mce-selected'); - // editor.nodeChanged(); - // } ); + tinymce.each( blockToolbars, function( toolbar, key ) { + if ( key !== name ) { + toolbar.hide(); + } + } ); - return; - } + if ( settings ) { + if ( ! blockToolbars[ name ] ) { + blockToolbars[ name ] = editor.wp._createToolbar( settings.buttons.concat( [ 'block-remove' ] ) ); + blockToolbars[ name ].reposition = function () { + if (!element) return - if ( ! empty && editor.$( element ).attr( 'data-mce-selected' ) === 'block' ) { - blockSelection = true; + var toolbar = this.getEl(); + var toolbarRect = toolbar.getBoundingClientRect(); + var elementRect = element.getBoundingClientRect(); + var contentRect = editor.getBody().getBoundingClientRect(); - tinymce.each( editor.settings.blocks, function( block, key ) { - if ( block.match( element ) ) { - blockToolbars[ key ].reposition(); + DOM.setStyles( toolbar, { + position: 'absolute', + left: elementRect.left + 'px', + top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px' + } ); - if ( element.nodeName !== 'FIGURE' ) { - focusToolbar( blockToolbars[ key ] ); - } - } else { - blockToolbars[ key ].hide(); + this.show(); } - } ); - } else { - blockSelection = false; - - tinymce.each( editor.settings.blocks, function( block, key ) { - blockToolbars[ key ].hide(); - } ); - } - } ) - - tinymce.each( editor.settings.blocks, function( block, key ) { - blockToolbars[ key ] = editor.wp._createToolbar( block.buttons ); - blockToolbars[ key ].reposition = function () { - if (!element) return - - var toolbar = this.getEl() - var toolbarRect = toolbar.getBoundingClientRect() - var elementRect = element.getBoundingClientRect() - var contentRect = editor.getBody().getBoundingClientRect(); - - DOM.setStyles(toolbar, { - position: 'absolute', - left: elementRect.left + 'px', - top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px' - }) - - setTimeout( function() { - editor.nodeChanged(); - }, 500 ); + editor.nodeChanged(); // Update UI. + } - this.show() + blockToolbars[ name ].reposition(); + focus && focusToolbar( blockToolbars[ name ] ); } + } - blockToolbars[ key ].on( 'keydown', function( event ) { - if ( event.keyCode === 27 ) { - editor.$('*[data-mce-selected="block"]').removeAttr('data-mce-selected'); - editor.nodeChanged(); - editor.focus(); - } + var hidden = true; - // if ( event.keyCode === tinymce.util.VK.DOWN ) { - // editor.execCommand( 'down' ); - // event.preventDefault(); - // event.stopImmediatePropagation(); - // } - - // if ( event.keyCode === tinymce.util.VK.UP ) { - // editor.execCommand( 'up' ); - // event.preventDefaultntDefault(); - // event.stopImmediatePropagation(); - // } - }, true ); + editor.on( 'keydown', function() { + hidden = true; } ); - editor.on( 'beforeexeccommand', function( event ) { - var block = blockSelection; - - editor.once( 'nodechange', function( event ) { - setTimeout( function() { - if ( block ) { - editor.$('*[data-mce-selected="block"]').removeAttr('data-mce-selected'); - editor.$( element ).attr( 'data-mce-selected', 'block' ); - editor.nodeChanged(); - } - } ); - }, true ); + editor.on( 'mousedown touchstart', function() { + hidden = false; } ); - var prevEmpty; + editor.on( 'selectionChange nodeChange', function( event ) { + var selection = window.getSelection(); + var isCollapsed = selection.isCollapsed; + var anchorNode = selection.anchorNode; + var isEmpty = isCollapsed && isEmptySlot( anchorNode ); + var isBlockUIVisible = ! hidden; - // Throttle? - editor.on( 'keyup', function() { - var empty = editor.dom.isEmpty( element ); + if ( isEmpty ) { + window.console.log( 'Debug: empty node.' ); - if ( ( empty && ! prevEmpty ) || ( ! empty && prevEmpty ) ) { - editor.nodeChanged() - } + hideBlockUI(); + toolbarInline.hide(); + toolbarCaret.reposition(); + } else { + toolbarCaret.hide(); - prevEmpty = empty; - } ); + if ( ! isCollapsed && anchorNode.nodeType === 3 ) { + hidden = true; + hideBlockUI(); - editor.on( 'keydown', function( event ) { - if ( editor.$( element ).attr( 'data-mce-selected' ) === 'block' ) { - if ( event.keyCode === tinymce.util.VK.DOWN ) { - editor.execCommand( 'down' ); - event.preventDefault(); - } + 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(); + } + } else { + toolbarInline.hide(); - if ( event.keyCode === tinymce.util.VK.UP ) { - editor.execCommand( 'up' ); - event.preventDefault(); + // setTimeout( function() { + if ( isBlockUIVisible ) { + window.console.log( 'Debug: visible block UI.' ); + showBlockUI(); + } else { + hideBlockUI(); + } + // }, 50 ); } } } ); + // editor.on( 'keydown', function( event ) { + // if ( editor.$( element ).attr( 'data-mce-selected' ) === 'block' ) { + // if ( event.keyCode === tinymce.util.VK.DOWN ) { + // editor.execCommand( 'down' ); + // event.preventDefault(); + // } + + // if ( event.keyCode === tinymce.util.VK.UP ) { + // editor.execCommand( 'up' ); + // event.preventDefault(); + // } + // } + // } ); + var metaCount = 0; editor.on( 'keydown', function( event ) { @@ -518,7 +628,7 @@ var caretEl = editor.selection.getNode(); if ( caretEl.nodeName !== 'FIGCAPTION' ) { - editor.execCommand( 'removeblock' ); + editor.execCommand( 'block-remove' ); event.preventDefault(); } else { var range = editor.selection.getRng(); @@ -546,14 +656,13 @@ } if ( keyCode === 27 ) { - editor.$('*[data-mce-selected="block"]').removeAttr('data-mce-selected'); - editor.nodeChanged(); + hideBlockUI(); } }, true ); editor.on( 'keyup', function( event ) { if ( metaCount === 1 ) { - editor.execCommand( 'selectblock' ); + showBlockUI( true ); } metaCount = 0; @@ -565,9 +674,5 @@ } } ); } ); - - editor.on( 'init', function() { - editor.focus(); - } ); } ); } )( window.tinymce ); diff --git a/tinymce-single/tinymce/config.js b/tinymce-single/tinymce/config.js index 5d4b62f5cce32..16f766d8b0a23 100644 --- a/tinymce-single/tinymce/config.js +++ b/tinymce-single/tinymce/config.js @@ -9,8 +9,6 @@ window.tinymce.init( { object_resizing: false, plugins: [ 'block', - 'new', - 'formatting', 'clean-paste', 'lists', 'paste', @@ -23,89 +21,18 @@ window.tinymce.init( { theme: false, toolbar: false, formats: { - alignleft: [ - { - selector: 'p,h1,h2,h3,h4,h5,h6', - styles: { textAlign: 'left' } - }, - { - selector: 'figure', - classes: 'alignleft' - } - ], - aligncenter: [ - { - selector: 'p,h1,h2,h3,h4,h5,h6', - styles: { textAlign: 'center' } - }, - { - selector: 'figure', - classes: 'aligncenter' - } - ], - alignright: [ - { - selector: 'p,h1,h2,h3,h4,h5,h6', - styles: { textAlign: 'right' } - }, - { - selector: 'figure', - classes: 'alignright' - } - ], + alignleft: [ { + selector: 'p,h1,h2,h3,h4,h5,h6', + styles: { textAlign: 'left' } + } ], + aligncenter: [ { + selector: 'p,h1,h2,h3,h4,h5,h6', + styles: { textAlign: 'center' } + } ], + alignright: [ { + selector: 'p,h1,h2,h3,h4,h5,h6', + styles: { textAlign: 'right' } + } ], strikethrough: { inline: 'del' } - }, - blocks: { - paragraph: { - match: function( element ) { - return element.nodeName === 'P'; - }, - buttons: [ 'alignleft', 'aligncenter', 'alignright', 'heading', 'blockquote', 'bullist', 'preformatted', 'removeblock' ], - icon: 'gridicons-posts' - }, - heading: { - match: function( element ) { - var nodeName = element.nodeName; - - return ( - nodeName === 'H1' || - nodeName === 'H2' || - nodeName === 'H3' || - nodeName === 'H4' || - nodeName === 'H5' || - nodeName === 'H6' - ); - }, - buttons: [ 'alignleft', 'aligncenter', 'alignright', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'removeheading', 'removeblock' ], - icon: 'gridicons-heading' - }, - list: { - match: function( element ) { - return element.nodeName === 'UL' || element.nodeName === 'OL'; - }, - buttons: [ 'bullist', 'numlist', 'removelist', 'removeblock' ], - icon: 'gridicons-list-unordered' - }, - image: { - match: function( element ) { - return element.nodeName === 'FIGURE'; - }, - buttons: [ 'imgalignleft', 'imgaligncenter', 'imgalignright', 'togglefigcaption', 'removeblock' ], - icon: 'gridicons-image' - }, - blockquote: { - match: function( element ) { - return element.nodeName === 'BLOCKQUOTE'; - }, - buttons: [ 'removeblockquote', 'removeblock' ], - icon: 'gridicons-quote' - }, - preformatted: { - match: function( element ) { - return element.nodeName === 'PRE'; - }, - buttons: [ 'syntax', 'removepreformatted', 'removeblock' ], - icon: 'gridicons-code' - } } } ); diff --git a/tinymce-single/tinymce/formatting.js b/tinymce-single/tinymce/formatting.js deleted file mode 100644 index 63ef381c3ef0e..0000000000000 --- a/tinymce-single/tinymce/formatting.js +++ /dev/null @@ -1,108 +0,0 @@ -( function( tinymce ) { - tinymce.PluginManager.add( 'formatting', function( editor ) { - var each = tinymce.each - var DOM = tinymce.DOM - - editor.on( 'preinit', function() { - // Adjust icon of TinyMCE core buttons. - editor.buttons.bold.icon = 'gridicons-bold'; - editor.buttons.italic.icon = 'gridicons-italic'; - editor.buttons.strikethrough.icon = 'gridicons-strikethrough'; - editor.buttons.link.icon = 'gridicons-link'; - } ); - - editor.on('focus', function () { - if (editor.wp && editor.wp._createToolbar) { - var element - var toolbarInline = editor.wp._createToolbar( [ 'bold', 'italic', 'strikethrough', 'link' ] ) - var toolbarMulti = editor.wp._createToolbar( [ 'alignleft', 'aligncenter', 'alignright', 'blockquote', 'bullist', 'removeblock' ] ) - - toolbarMulti.reposition = function () { - if (!element) return - - var toolbar = this.getEl() - var toolbarRect = toolbar.getBoundingClientRect() - var elementRect = element.getBoundingClientRect() - - var contentRect = document.getElementById( 'content' ).getBoundingClientRect(); - - DOM.setStyles(toolbar, { - position: 'absolute', - left: elementRect.left + 'px', - top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px' - }) - - this.show() - } - - editor.on('wptoolbar', function (event) { - element = event.element - range = event.range - - var content = editor.selection.getContent() - var parent = editor.dom.getParent(range.startContainer, '*[data-mce-selected="block"]') - - // No collapsed selection. - if (range.collapsed) { - return - } - - // No non editable elements. - if ( - element.getAttribute('contenteditable') === 'false' || - element.getAttribute('data-mce-bogus') === 'all' - ) { - return - } - - // No images. - if (element.nodeName === 'IMG') { - return - } - - // No horizontal rules. - if (element.nodeName === 'HR') { - return - } - - // No links. - if (element.nodeName === 'A') { - return - } - - // No empty selection. - if (!content.replace(/<[^>]+>/g, '').replace(/(?:\s| )/g, '')) { - return - } - - // Block where the selection starts. - var $start = editor.$( editor.dom.getParent( range.startContainer, editor.dom.isBlock ) ); - // Block where the selection ends. - var $end = editor.$( editor.dom.getParent( range.endContainer, editor.dom.isBlock ) ); - - // Selection end only has the start of a new block. - if ( $end[0] === range.endContainer && range.endOffset === 0 ) { - $end = $end.prev(); - } - - // Start and end blocks are not the same. - if ( $start[0] !== $end[0] ) { - event.toolbar = toolbarMulti - event.selection = range - } else if ( ! parent ) { - event.toolbar = toolbarInline - event.selection = range - } - - // Click inside selection does not trigger nodechange. - editor.once( 'click', function ( event ) { - window.setTimeout( function() { - editor.$('*[data-mce-selected="block"]').removeAttr('data-mce-selected'); - editor.nodeChanged(); - } ); - } ); - }) - } - }) - } ); -} )( window.tinymce ); diff --git a/tinymce-single/tinymce/new.js b/tinymce-single/tinymce/new.js deleted file mode 100644 index f016d7740a220..0000000000000 --- a/tinymce-single/tinymce/new.js +++ /dev/null @@ -1,56 +0,0 @@ -( function( tinymce ) { - tinymce.PluginManager.add( 'new', function( editor ) { - var DOM = tinymce.DOM; - - editor.addButton( 'add', { - icon: 'gridicons-add-outline', - tooltip: 'Add Block' - } ); - - editor.on('focus', function () { - if (editor.wp && editor.wp._createToolbar) { - var element - var toolbarCaret = editor.wp._createToolbar( [ 'add' ] ) - - toolbarCaret.$el.addClass('block-toolbar') - - toolbarCaret.reposition = function () { - if (!element) return - - var toolbar = this.getEl() - var toolbarRect = toolbar.getBoundingClientRect() - var elementRect = element.getBoundingClientRect() - - var contentRect = editor.getBody().getBoundingClientRect(); - - DOM.setStyles(toolbar, { - position: 'absolute', - left: contentRect.left + 50 + 'px', - top: elementRect.top + window.pageYOffset + 'px' - // top: elementRect.top + window.pageYOffset + elementRect.height / 2 - toolbarRect.height / 2 + 'px' - }) - - this.show() - } - - editor.on('blur', function () { - toolbarCaret.hide() - }) - - editor.on('wptoolbar', function (event) { - element = event.element - range = event.range - - // No collapsed selection. - if (range.collapsed) { - if ( event.empty ) { - event.toolbar = toolbarCaret - } - - return - } - } ); - } - } ); - } ); -} )( window.tinymce );