From acbf3bc96663cbcd62d7e72ba60ecdd8e5e89ab7 Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 26 Nov 2018 15:04:18 +0100 Subject: [PATCH 1/3] Fix converting caption shortcode with link --- packages/block-library/src/image/index.js | 2 +- .../blocks-raw-handling.spec.js.snap | 14 ++++++++++++- test/integration/blocks-raw-handling.spec.js | 20 ++++++++++++++----- .../fixtures/caption-shortcode-out.html | 3 --- .../fixtures/shortcode-caption-with-link.html | 1 + ...ortcode-in.html => shortcode-caption.html} | 0 6 files changed, 30 insertions(+), 10 deletions(-) delete mode 100644 test/integration/fixtures/caption-shortcode-out.html create mode 100644 test/integration/fixtures/shortcode-caption-with-link.html rename test/integration/fixtures/{caption-shortcode-in.html => shortcode-caption.html} (100%) diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 0a5ca7618c4aa..3167cb3d607b9 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -186,7 +186,7 @@ export const settings = { caption: { shortcode: ( attributes, { shortcode } ) => { const { content } = shortcode; - return content.replace( /\s*]*>\s/, '' ); + return content.replace( /\s*(?:]*>\s*)?]*>(?:\s*<\/a>)?\s*/, '' ); }, }, href: { diff --git a/test/integration/__snapshots__/blocks-raw-handling.spec.js.snap b/test/integration/__snapshots__/blocks-raw-handling.spec.js.snap index 320b201a836e3..162ac7f405954 100644 --- a/test/integration/__snapshots__/blocks-raw-handling.spec.js.snap +++ b/test/integration/__snapshots__/blocks-raw-handling.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Blocks raw handling rawHandler should convert HTML post to blocks with minimal content changes 1`] = ` +exports[`rawHandler should convert HTML post to blocks with minimal content changes 1`] = ` "

Howdy

@@ -54,3 +54,15 @@ exports[`Blocks raw handling rawHandler should convert HTML post to blocks with

Heading

Text.

" `; + +exports[`rawHandler should convert a caption shortcode 1`] = ` +" +
\\"\\"
test
+" +`; + +exports[`rawHandler should convert a caption shortcode with link 1`] = ` +" +
\\"Bell
Bell on wharf in San Francisco
+" +`; diff --git a/test/integration/blocks-raw-handling.spec.js b/test/integration/blocks-raw-handling.spec.js index b0997d3b757d9..6b2dc583b362f 100644 --- a/test/integration/blocks-raw-handling.spec.js +++ b/test/integration/blocks-raw-handling.spec.js @@ -155,11 +155,21 @@ describe( 'Blocks raw handling', () => { } ); } ); } ); +} ); - describe( 'rawHandler', () => { - it( 'should convert HTML post to blocks with minimal content changes', () => { - const HTML = readFile( path.join( __dirname, 'fixtures/wordpress-convert.html' ) ); - expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot(); - } ); +describe( 'rawHandler', () => { + it( 'should convert HTML post to blocks with minimal content changes', () => { + const HTML = readFile( path.join( __dirname, 'fixtures/wordpress-convert.html' ) ); + expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot(); + } ); + + it( 'should convert a caption shortcode', () => { + const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption.html' ) ); + expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot(); + } ); + + it( 'should convert a caption shortcode with link', () => { + const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption-with-link.html' ) ); + expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot(); } ); } ); diff --git a/test/integration/fixtures/caption-shortcode-out.html b/test/integration/fixtures/caption-shortcode-out.html deleted file mode 100644 index 2027b65d2feae..0000000000000 --- a/test/integration/fixtures/caption-shortcode-out.html +++ /dev/null @@ -1,3 +0,0 @@ - -
test
- diff --git a/test/integration/fixtures/shortcode-caption-with-link.html b/test/integration/fixtures/shortcode-caption-with-link.html new file mode 100644 index 0000000000000..3405b7ac1ecf0 --- /dev/null +++ b/test/integration/fixtures/shortcode-caption-with-link.html @@ -0,0 +1 @@ +[caption id="attachment_754" align="alignnone" width="604"]Bell on Wharf Bell on wharf in San Francisco[/caption] diff --git a/test/integration/fixtures/caption-shortcode-in.html b/test/integration/fixtures/shortcode-caption.html similarity index 100% rename from test/integration/fixtures/caption-shortcode-in.html rename to test/integration/fixtures/shortcode-caption.html From 14533390005243598ee474ac942fcb958054ec70 Mon Sep 17 00:00:00 2001 From: iseulde Date: Sun, 9 Dec 2018 13:45:26 -0600 Subject: [PATCH 2/3] Parse HTML to DOM instead of using RegExp --- packages/block-library/src/image/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 3167cb3d607b9..cd0ac04cd1ea4 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -185,8 +185,12 @@ export const settings = { }, caption: { shortcode: ( attributes, { shortcode } ) => { - const { content } = shortcode; - return content.replace( /\s*(?:]*>\s*)?]*>(?:\s*<\/a>)?\s*/, '' ); + const { body } = document.implementation.createHTMLDocument( '' ); + + body.innerHTML = shortcode.content; + body.removeChild( body.firstElementChild ); + + return body.innerHTML.trim(); }, }, href: { From 70aea2f9665378ee4e056eb31bb5a1a6548c58d1 Mon Sep 17 00:00:00 2001 From: iseulde Date: Sun, 9 Dec 2018 13:58:12 -0600 Subject: [PATCH 3/3] Source anchor info only from first element --- packages/block-library/src/image/index.js | 36 ++++++++++++------- .../blocks-raw-handling.spec.js.snap | 6 ++++ test/integration/blocks-raw-handling.spec.js | 5 +++ .../shortcode-caption-with-caption-link.html | 1 + 4 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 test/integration/fixtures/shortcode-caption-with-caption-link.html diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index cd0ac04cd1ea4..65bd1df8f1dc2 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -111,6 +111,21 @@ const schema = { }, }; +function getFirstAnchorAttributeFormHTML( html, attributeName ) { + const { body } = document.implementation.createHTMLDocument( '' ); + + body.innerHTML = html; + + const { firstElementChild } = body; + + if ( + firstElementChild && + firstElementChild.nodeName === 'A' + ) { + return firstElementChild.getAttribute( attributeName ) || undefined; + } +} + export const settings = { title: __( 'Image' ), @@ -194,22 +209,19 @@ export const settings = { }, }, href: { - type: 'string', - source: 'attribute', - attribute: 'href', - selector: 'a', + shortcode: ( attributes, { shortcode } ) => { + return getFirstAnchorAttributeFormHTML( shortcode.content, 'href' ); + }, }, rel: { - type: 'string', - source: 'attribute', - attribute: 'rel', - selector: 'a', + shortcode: ( attributes, { shortcode } ) => { + return getFirstAnchorAttributeFormHTML( shortcode.content, 'rel' ); + }, }, linkClass: { - type: 'string', - source: 'attribute', - attribute: 'class', - selector: 'a', + shortcode: ( attributes, { shortcode } ) => { + return getFirstAnchorAttributeFormHTML( shortcode.content, 'class' ); + }, }, id: { type: 'number', diff --git a/test/integration/__snapshots__/blocks-raw-handling.spec.js.snap b/test/integration/__snapshots__/blocks-raw-handling.spec.js.snap index 162ac7f405954..9d8761f906216 100644 --- a/test/integration/__snapshots__/blocks-raw-handling.spec.js.snap +++ b/test/integration/__snapshots__/blocks-raw-handling.spec.js.snap @@ -61,6 +61,12 @@ exports[`rawHandler should convert a caption shortcode 1`] = ` " `; +exports[`rawHandler should convert a caption shortcode with caption 1`] = ` +" +
\\"\\"
test
+" +`; + exports[`rawHandler should convert a caption shortcode with link 1`] = ` "
\\"Bell
Bell on wharf in San Francisco
diff --git a/test/integration/blocks-raw-handling.spec.js b/test/integration/blocks-raw-handling.spec.js index 6b2dc583b362f..3f0e951026537 100644 --- a/test/integration/blocks-raw-handling.spec.js +++ b/test/integration/blocks-raw-handling.spec.js @@ -172,4 +172,9 @@ describe( 'rawHandler', () => { const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption-with-link.html' ) ); expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot(); } ); + + it( 'should convert a caption shortcode with caption', () => { + const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption-with-caption-link.html' ) ); + expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot(); + } ); } ); diff --git a/test/integration/fixtures/shortcode-caption-with-caption-link.html b/test/integration/fixtures/shortcode-caption-with-caption-link.html new file mode 100644 index 0000000000000..4eb0f6c4f0c1f --- /dev/null +++ b/test/integration/fixtures/shortcode-caption-with-caption-link.html @@ -0,0 +1 @@ +

[caption id="attachment_122" align="alignnone" width="300"] test[/caption]