Make a simple version of Link that displays on mobile

packages/editor/src/components/index.native.js

@@ -13,3 +13,4 @@ export { default as BlockEdit } from './block-edit';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
+export { default as URLInput } from './url-input';

packages/editor/src/components/rich-text/index.native.js

@@ -195,9 +195,7 @@ export class RichText extends Component {
 	}
 
 	onSelectionChange( start, end, text ) {
-		const realStart = Math.min( start, end );
-		const realEnd = Math.max( start, end );
-		this.setState( { start: realStart, end: realEnd, text } );
+		this.setState( { start, end, text } );
 	}
 
 	isEmpty() {
@@ -227,7 +225,7 @@ export class RichText extends Component {
 		return value;
 	}
 
-	shouldComponentUpdate( nextProps ) {
+	shouldComponentUpdate( nextProps, nextState ) {
 		if ( nextProps.tagName !== this.props.tagName || nextProps.isSelected !== this.props.isSelected ) {
 			this.lastEventCount = undefined;
 			this.lastContent = undefined;
@@ -245,6 +243,10 @@ export class RichText extends Component {
 			this.lastEventCount = undefined; // force a refresh on the native side
 		}
 
+		if ( nextState.start !== this.state.start || nextState.end !== this.state.end ) {
+			return false;
+		}
+
 		return true;
 	}
 

packages/editor/src/components/url-input/index.native.js

@@ -0,0 +1,31 @@
+import { TextInput, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
+
+class URLInput extends Component {
+	render() {
+		const { value = '', autoFocus = true } = this.props;
+		/* eslint-disable jsx-a11y/no-autofocus */
+		return (
+			<View>
+				<TextInput
+					autoFocus={ autoFocus }
+					editable
+					selectTextOnFocus
+					textContentType="URL"
+					value={ value }
+					onChangeText={ this.props.onChange }
+					placeholder={ __( 'Paste URL or type to search' ) }
+				/>
+			</View>
+		);
+		/* eslint-enable jsx-a11y/no-autofocus */
+	}
+}
+
+export default withInstanceId( URLInput );

packages/editor/src/components/url-input/style.native.scss

@@ -0,0 +1,118 @@
+// Link input
+$input-padding: 8px;
+$input-size: 300px;
+
+.editor-block-list__block .editor-url-input,
+.components-popover .editor-url-input,
+.editor-url-input {
+	flex-grow: 1;
+	position: relative;
+	padding: 1px;
+
+	input[type="text"] {
+		width: 100%;
+		@include break-small() {
+			width: $input-size;
+		}
+		padding: $input-padding;
+		border: none;
+		border-radius: 0;
+		margin-left: 0;
+		margin-right: 0;
+
+		&::-ms-clear {
+			display: none;
+		}
+	}
+
+	.components-spinner {
+		position: absolute;
+		right: $input-padding;
+		top: $input-padding + 1;
+		margin: 0;
+	}
+}
+
+// Suggestions
+.editor-url-input__suggestions {
+	max-height: 200px;
+	transition: all 0.15s ease-in-out;
+	padding: 4px 0;
+	// To match the url-input width: input width + padding + 2 buttons.
+	width: $input-size + 2;
+	overflow-y: auto;
+}
+
+// Hide suggestions on mobile until we @todo find a better way to show them
+.editor-url-input__suggestions,
+.editor-url-input .components-spinner {
+	display: none;
+	@include break-small() {
+		display: inherit;
+	}
+}
+
+.editor-url-input__suggestion {
+	padding: 4px $input-padding;
+	color: $dark-gray-300; // lightest we can use for contrast
+	display: block;
+	font-size: $default-font-size;
+	cursor: pointer;
+	background: $white;
+	width: 100%;
+	border: none;
+	text-align: left;
+	@include menu-style__neutral();
+
+	&:hover {
+		background: $light-gray-500;
+	}
+
+	&:focus,
+	&.is-selected {
+		background: color(theme(primary) shade(15%));
+		color: $white;
+		outline: none;
+	}
+}
+
+// Toolbar button
+.components-toolbar > .editor-url-input__button {
+	position: inherit; // Let the dialog position according to parent.
+}
+
+.editor-url-input__button .editor-url-input__back {
+	margin-right: 4px;
+	overflow: visible;
+
+	&::after {
+		content: "";
+		position: absolute;
+		display: block;
+		width: 1px;
+		height: 24px;
+		right: -1px;
+		background: $light-gray-500;
+	}
+}
+
+.editor-url-input__button-modal {
+	box-shadow: $shadow-popover;
+	border: 1px solid $light-gray-500;
+	background: $white;
+}
+
+.editor-url-input__button-modal-line {
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	flex-shrink: 1;
+	min-width: 0;
+	align-items: flex-start;
+
+	.components-button {
+		flex-shrink: 0;
+		width: $icon-button-size;
+		height: $icon-button-size;
+	}
+}

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

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
+import { withSpokenMessages } from '@wordpress/components';
+import { RichTextToolbarButton } from '@wordpress/editor';
+import {
+	getTextContent,
+	applyFormat,
+	removeFormat,
+	slice,
+} from '@wordpress/rich-text';
+import { isURL } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import ModalLinkUI from './modal';
+
+const name = 'core/link';
+
+export const link = {
+	name,
+	title: __( 'Link' ),
+	tagName: 'a',
+	className: null,
+	attributes: {
+		url: 'href',
+		target: 'target',
+	},
+	edit: withSpokenMessages( class LinkEdit extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.addLink = this.addLink.bind( this );
+			this.stopAddingLink = this.stopAddingLink.bind( this );
+			this.onRemoveFormat = this.onRemoveFormat.bind( this );
+			this.state = {
+				addingLink: false,
+			};
+		}
+
+		addLink() {
+			const { value, onChange } = this.props;
+			const text = getTextContent( slice( value ) );
+
+			if ( text && isURL( text ) ) {
+				onChange( applyFormat( value, { type: name, attributes: { url: text } } ) );
+			} else {
+				this.setState( { addingLink: true } );
+			}
+		}
+
+		stopAddingLink() {
+			this.setState( { addingLink: false } );
+		}
+
+		onRemoveFormat() {
+			const { value, onChange, speak } = this.props;
+
+			onChange( removeFormat( value, name ) );
+			speak( __( 'Link removed.' ), 'assertive' );
+		}
+
+		render() {
+			const { isActive, value } = this.props;
+
+			return (
+				<Fragment>
+					<ModalLinkUI
+						isVisible={ this.state.addingLink }
+						onClose={ this.stopAddingLink }
+						value={ value }
+					/>
+					<RichTextToolbarButton
+						name="link"
+						icon="admin-links"
+						title={ __( 'Link' ) }
+						onClick={ this.addLink }
+						isActive={ isActive }
+						shortcutType="primary"
+						shortcutCharacter="k"
+					/>
+				</Fragment>
+			);
+		}
+	} ),
+};

packages/format-library/src/link/modal.native.js

@@ -0,0 +1,29 @@
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import Modal from 'react-native-modal';
+import { URLInput } from '@wordpress/editor';
+
+import styles from './modal.scss';
+
+export default ( { value, isVisible, onClose, ...customProps } ) => {
+	return (
+		<Modal
+			isVisible={ isVisible }
+			style={ styles.bottomModal }
+			animationInTiming={ 500 }
+			animationOutTiming={ 500 }
+			backdropTransitionInTiming={ 500 }
+			backdropTransitionOutTiming={ 500 }
+			onBackdropPress={ onClose }
+			onSwipe={ onClose }
+			swipeDirection="down"
+			{ ...customProps }
+		>
+			<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
+				<URLInput value={ 'https://wp.com' } />
+				<Text>{ value.text }</Text>
+			</View>
+		</Modal>
+	);
+};

packages/format-library/src/link/modal.native.scss

@@ -0,0 +1,13 @@
+
+.bottomModal {
+	justify-content: flex-end;
+	margin: 0;
+}
+
+.content {
+	background-color: $white;
+	padding: 22px;
+	justify-content: center;
+	align-items: center;
+	border-radius: 4px;
+}