Merge pull request #1357 from vektor-inc/fix/highlighter/rgba

【確認中】Highlighter alpha付きのカラーパレットに対応

readme.txt

@@ -64,6 +64,8 @@ e.g.
 
 == Changelog ==
 
+[ Bug Fix ][ highlighter ] cope with color palette with alpha.
+
 = 1.41.1 =
 [ Bug Fix ] Fix don't display Admin screen in case of spacific option value
 

src/utils/hex-to-rgba.js

@@ -1,5 +1,9 @@
 //hexカラーコード定義をrgbaに変換
 export default function hex2rgba(hex, alpha) {
+	// rgbaの場合は、そのまま返す（例：rgba( 255,255,255,0.1 )）
+	if (hex.substring(0, 4) === 'rgba') {
+		return hex;
+	}
 	// ロングバージョンの場合（例：#FF0000）
 	let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
 	let c = null;

test/e2e-tests/specs/__snapshots__/highlighter-lightning.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Lightning Highlighter Lightning Highlighter 1`] = `
+"<!-- wp:paragraph -->
+<p><span data-color=\\"#000000\\" style=\\"background: linear-gradient(transparent 60%,rgba(0, 0, 0, 0.7) 0);\\" class=\\"vk_highlighter\\">1</span></p>
+<!-- /wp:paragraph -->"
+`;

test/e2e-tests/specs/__snapshots__/highlighter-x-t9.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`x-t9 Highlighter x-t9 Highlighter 1`] = `
+"<!-- wp:paragraph -->
+<p><span data-color=\\"rgba(0,0,0,0.5)\\" style=\\"background: linear-gradient(transparent 60%,rgba(0,0,0,0.5) 0);\\" class=\\"vk_highlighter\\">1</span></p>
+<!-- /wp:paragraph -->"
+`;

test/e2e-tests/specs/highlighter-lightning.test.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+ import {
+	pressKeyWithModifier,
+	createNewPost,
+	clickBlockAppender,
+	clickBlockToolbarButton,
+	getEditedPostContent,
+	activateTheme,
+	installTheme,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+ import { changeSiteLang } from '../helper/changeSiteLang';
+
+describe( 'Lightning Highlighter', () => {
+  let oldLanguage;
+	beforeAll( async () => {
+		await installTheme( 'lightning' );
+		await activateTheme( 'lightning' );
+	} );
+	beforeEach( async () => {
+		oldLanguage = await changeSiteLang( 'en' );
+		await createNewPost();
+	} );
+	afterEach( async () => {
+		await changeSiteLang( oldLanguage );
+	});
+	afterAll( async () => {
+		await activateTheme( 'twentytwentytwo' );
+	} );
+
+	it( 'Lightning Highlighter', async () => {
+		/**
+		 * 新しく投稿を作る
+		 */
+		await createNewPost();
+
+		await clickBlockAppender();
+
+		// Add text and select to color.
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await clickBlockToolbarButton( 'More' );
+
+		const button = await page.waitForXPath(
+			`//button[text()='Highlighter']`
+		);
+		// Clicks may fail if the button is out of view. Assure it is before click.
+		await button.evaluate( ( element ) => element.scrollIntoView() );
+		await button.click();
+
+		const option = await page.waitForSelector(
+			'[aria-label="Color: Black"]'
+		);
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+	} )
+
+});

test/e2e-tests/specs/highlighter-x-t9.test.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+ import {
+	pressKeyWithModifier,
+	createNewPost,
+	clickBlockAppender,
+	clickBlockToolbarButton,
+	getEditedPostContent,
+	activateTheme,
+	installTheme,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+ import { changeSiteLang } from '../helper/changeSiteLang';
+
+describe( 'x-t9 Highlighter', () => {
+  let oldLanguage;
+	beforeAll( async () => {
+		await installTheme( 'x-t9' );
+		await activateTheme( 'x-t9' );
+	} );
+	beforeEach( async () => {
+		oldLanguage = await changeSiteLang( 'en' );
+		await createNewPost();
+	} );
+	afterEach( async () => {
+		await changeSiteLang( oldLanguage );
+	});
+	afterAll( async () => {
+		await activateTheme( 'twentytwentytwo' );
+	} );
+
+	it( 'x-t9 Highlighter', async () => {
+		/**
+		 * 新しく投稿を作る
+		 */
+		await createNewPost();
+
+		await clickBlockAppender();
+
+		// Add text and select to color.
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await clickBlockToolbarButton( 'More' );
+
+		const button = await page.waitForXPath(
+			`//button[text()='Highlighter']`
+		);
+		// Clicks may fail if the button is out of view. Assure it is before click.
+		await button.evaluate( ( element ) => element.scrollIntoView() );
+		await button.click();
+
+		const option = await page.waitForSelector(
+			'[aria-label="Color: Text Secondary"]'
+		);
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+	} )
+
+});