From 39045dd4390b99d147ee596f5d4ae5285d6f26db Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Tue, 19 Mar 2019 14:23:36 +0000 Subject: [PATCH 1/7] Implement image corrector for native. --- .../src/api/raw-handling/image-corrector.native.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 packages/blocks/src/api/raw-handling/image-corrector.native.js diff --git a/packages/blocks/src/api/raw-handling/image-corrector.native.js b/packages/blocks/src/api/raw-handling/image-corrector.native.js new file mode 100644 index 0000000000000..bc1e4f81bd390 --- /dev/null +++ b/packages/blocks/src/api/raw-handling/image-corrector.native.js @@ -0,0 +1,11 @@ + +export default function( node ) { + if ( node.nodeName !== 'IMG' ) { + return; + } + + // Remove trackers and hardly visible images. + if ( node.height === 1 || node.width === 1 ) { + node.parentNode.removeChild( node ); + } +} From 728a1fa7439596274e49e9db77115b5ed8b3db5d Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Tue, 19 Mar 2019 14:27:56 +0000 Subject: [PATCH 2/7] Add paste code to detect images being copy pasted. # Conflicts: # packages/block-editor/src/components/rich-text/index.native.js --- .../src/components/rich-text/index.native.js | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index a4761ca33f121..931b0b77d5ba3 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -302,11 +302,34 @@ export class RichText extends Component { const isPasted = true; const { onSplit } = this.props; - const { pastedText, pastedHtml } = event.nativeEvent; + const { pastedText, pastedHtml, files } = event.nativeEvent; const currentRecord = this.createRecord( event.nativeEvent ); event.preventDefault(); + // Only process file if no HTML is present. + // Note: a pasted file may have the URL as plain text. + const file = files[ 0 ]; + if ( file ) { + const content = pasteHandler( { + HTML: ``, + mode: 'BLOCKS', + tagName: this.props.tagName, + } ); + const shouldReplace = this.props.onReplace && this.isEmpty(); + + // Allows us to ask for this information when we get a report. + window.console.log( 'Received item:\n\n', file ); + + if ( shouldReplace ) { + this.props.onReplace( content ); + } else { + this.splitContent( currentRecord, content, isPasted ); + } + + return; + } + // There is a selection, check if a URL is pasted. if ( ! isCollapsed( currentRecord ) ) { const trimmedText = ( pastedHtml || pastedText ).replace( /<[^>]+>/g, '' ) From 52bf80ed5bc45c82ceaf2bc7a850ec2654c68f37 Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Wed, 3 Apr 2019 14:14:58 +0100 Subject: [PATCH 3/7] Accepts multiples files on copy paste. --- .../src/components/rich-text/index.native.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index 931b0b77d5ba3..ef92ebbceda69 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -309,18 +309,18 @@ export class RichText extends Component { // Only process file if no HTML is present. // Note: a pasted file may have the URL as plain text. - const file = files[ 0 ]; - if ( file ) { + if ( files ) { + let html = ''; + files.forEach( ( file ) => { + html += ``; + } ); const content = pasteHandler( { - HTML: ``, + HTML: html, mode: 'BLOCKS', tagName: this.props.tagName, } ); const shouldReplace = this.props.onReplace && this.isEmpty(); - // Allows us to ask for this information when we get a report. - window.console.log( 'Received item:\n\n', file ); - if ( shouldReplace ) { this.props.onReplace( content ); } else { From 27c32fae11c7349480aedc6fd909794a974c0f42 Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Wed, 3 Apr 2019 16:38:53 +0100 Subject: [PATCH 4/7] Implement media import. --- .../src/components/rich-text/index.native.js | 3 ++- packages/block-library/src/image/edit.native.js | 11 ++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index ef92ebbceda69..6e93a6560aa2d 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -310,9 +310,10 @@ export class RichText extends Component { // Only process file if no HTML is present. // Note: a pasted file may have the URL as plain text. if ( files ) { + const uploadId = Number.MAX_SAFE_INTEGER; let html = ''; files.forEach( ( file ) => { - html += ``; + html += ``; } ); const content = pasteHandler( { HTML: html, diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index b89015ea89a3b..be91cec5807ff 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -8,6 +8,7 @@ import { requestMediaPickFromMediaLibrary, requestMediaPickFromDeviceLibrary, requestMediaPickFromDeviceCamera, + requestMediaImport, mediaUploadSync, requestImageFailedRetryDialog, requestImageUploadCancelDialog, @@ -77,10 +78,18 @@ class ImageEdit extends React.Component { } componentDidMount() { - const { attributes } = this.props; + const { attributes, setAttributes } = this.props; if ( attributes.id && ! isURL( attributes.url ) ) { this.addMediaUploadListener(); + if ( attributes.url.indexOf( 'file:' ) === 0 ) { + requestMediaImport( attributes.url, ( mediaId, mediaUri ) => { + if ( mediaUri ) { + this.addMediaUploadListener( ); + setAttributes( { url: mediaUri, id: mediaId } ); + } + } ); + } mediaUploadSync(); } } From f0d056f60f5ceeebc7eb4900b6ab6388157eea9a Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Thu, 4 Apr 2019 21:58:07 +0100 Subject: [PATCH 5/7] Check if array has any images. --- packages/block-editor/src/components/rich-text/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index 6e93a6560aa2d..a6d2ef19a86a5 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -309,7 +309,7 @@ export class RichText extends Component { // Only process file if no HTML is present. // Note: a pasted file may have the URL as plain text. - if ( files ) { + if ( files && files.length > 0 ) { const uploadId = Number.MAX_SAFE_INTEGER; let html = ''; files.forEach( ( file ) => { From c5242415a0b4588d7403cdb8e6eca5ebe0189a72 Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Fri, 5 Apr 2019 10:39:32 +0100 Subject: [PATCH 6/7] Add comment. --- .../blocks/src/api/raw-handling/image-corrector.native.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/blocks/src/api/raw-handling/image-corrector.native.js b/packages/blocks/src/api/raw-handling/image-corrector.native.js index bc1e4f81bd390..d450ac7441730 100644 --- a/packages/blocks/src/api/raw-handling/image-corrector.native.js +++ b/packages/blocks/src/api/raw-handling/image-corrector.native.js @@ -1,4 +1,11 @@ +/** + * This method check for copy pasted img elements to see if they don't have suspicious attributes. + * + * @param {Node} node The node to check. + * + * @return {void} +*/ export default function( node ) { if ( node.nodeName !== 'IMG' ) { return; From d7b1fba3cc83ff93298e40c8e532e289705a0528 Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Fri, 5 Apr 2019 10:42:03 +0100 Subject: [PATCH 7/7] Remove duplicate listener activation. --- packages/block-library/src/image/edit.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1bb9c869f5014..af26201f1d35d 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -84,7 +84,6 @@ class ImageEdit extends React.Component { if ( attributes.url.indexOf( 'file:' ) === 0 ) { requestMediaImport( attributes.url, ( mediaId, mediaUri ) => { if ( mediaUri ) { - this.addMediaUploadListener( ); setAttributes( { url: mediaUri, id: mediaId } ); } } );