Automatically add tel to phone number when linking url (#64865)

Co-authored-by: devansh016 <devansh2002@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>

packages/format-library/src/link/index.js

@@ -12,7 +12,7 @@ import {
 	insert,
 	create,
 } from '@wordpress/rich-text';
-import { isURL, isEmail } from '@wordpress/url';
+import { isURL, isEmail, isPhoneNumber } from '@wordpress/url';
 import {
 	RichTextToolbarButton,
 	RichTextShortcut,
@@ -104,6 +104,13 @@ function Edit( {
 					attributes: { url: `mailto:${ text }` },
 				} )
 			);
+		} else if ( ! isActive && text && isPhoneNumber( text ) ) {
+			onChange(
+				applyFormat( value, {
+					type: name,
+					attributes: { url: `tel:${ text.replace( /\D/g, '' ) }` },
+				} )
+			);
 		} else {
 			if ( target ) {
 				setOpenedBy( {

packages/url/README.md

@@ -322,6 +322,24 @@ _Returns_
 
 -   `boolean`: Whether or not it looks like an email.
 
+### isPhoneNumber
+
+Determines whether the given string looks like a phone number.
+
+_Usage_
+
+```js
+const isPhoneNumber = isPhoneNumber( '+1 (555) 123-4567' ); // true
+```
+
+_Parameters_
+
+-   _phoneNumber_ `string`: The string to scrutinize.
+
+_Returns_
+
+-   `boolean`: Whether or not it looks like a phone number.
+
 ### isURL
 
 Determines whether the given string looks like a URL.

packages/url/src/index.js

@@ -1,5 +1,6 @@
 export { isURL } from './is-url';
 export { isEmail } from './is-email';
+export { isPhoneNumber } from './is-phone-number';
 export { getProtocol } from './get-protocol';
 export { isValidProtocol } from './is-valid-protocol';
 export { getAuthority } from './get-authority';

packages/url/src/is-phone-number.js

@@ -0,0 +1,19 @@
+const PHONE_REGEXP = /^(tel:)?(\+)?\d{6,15}$/;
+
+/**
+ * Determines whether the given string looks like a phone number.
+ *
+ * @param {string} phoneNumber The string to scrutinize.
+ *
+ * @example
+ * ```js
+ * const isPhoneNumber = isPhoneNumber('+1 (555) 123-4567'); // true
+ * ```
+ *
+ * @return {boolean} Whether or not it looks like a phone number.
+ */
+export function isPhoneNumber( phoneNumber ) {
+	// Remove any seperator from phone number.
+	phoneNumber = phoneNumber.replace( /[-.() ]/g, '' );
+	return PHONE_REGEXP.test( phoneNumber );
+}

packages/url/src/test/index.js

@@ -17,6 +17,7 @@ import {
 	hasQueryArg,
 	isEmail,
 	isURL,
+	isPhoneNumber,
 	isValidAuthority,
 	isValidFragment,
 	isValidPath,
@@ -73,6 +74,52 @@ describe( 'isEmail', () => {
 	);
 } );
 
+describe( 'isPhoneNumber', () => {
+	it.each( [
+		'+1 (555) 123-4567',
+		'(555) 123-4567',
+		'555-123-4567',
+		'5551234567',
+		'+91 987 654 3210',
+		'123-456-7890',
+		'(123) 456-7890',
+		'123 456 7890',
+		'123.456.7890',
+		'+1 123 456 7890',
+		'1234567890',
+		'+44 791 112 3456',
+		'(123) 4567',
+		'+1 (123) 45678901',
+		'12-34-56',
+		'123456789012345',
+		'+12 3456789012345',
+		'tel:+1-123-456-7890',
+	] )(
+		'returns true when given things that look like a phone number: %s',
+		( phoneNumber ) => {
+			expect( isPhoneNumber( phoneNumber ) ).toBe( true );
+		}
+	);
+
+	it.each( [
+		'not a phone number',
+		'123',
+		'1234',
+		'12345',
+		'+91 123',
+		'abc-def-ghij',
+		'a123456789b',
+		'12-34-5',
+		'tel:911',
+		'tel:12345',
+	] )(
+		"returns false when given things that don't look like a phone number: %s",
+		( phoneNumber ) => {
+			expect( isPhoneNumber( phoneNumber ) ).toBe( false );
+		}
+	);
+} );
+
 describe( 'getProtocol', () => {
 	it( 'returns the protocol part of a URL', () => {
 		expect(