@wordpress/format-library 5.32.0 → 5.32.1-next.ff1cebbba.0

package/src/link/css-classes-setting.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalInputControl as InputControl,
+	CheckboxControl,
+	VisuallyHidden,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * CSSClassesSettingComponent
+ *
+ * Presents a toggleable text input for editing link CSS classes. The input
+ * is shown when the toggle is enabled or when there is already a value. When
+ * toggled off and a value exists, it resets the value to an empty string.
+ *
+ * @param {Object}   props          - Component props.
+ * @param {Object}   props.setting  - Setting configuration object.
+ * @param {Object}   props.value    - Current link value object.
+ * @param {Function} props.onChange - Callback when value changes.
+ */
+const CSSClassesSettingComponent = ( { setting, value, onChange } ) => {
+	const hasValue = value ? value?.cssClasses?.length > 0 : false;
+	const [ isSettingActive, setIsSettingActive ] = useState( hasValue );
+	const instanceId = useInstanceId( CSSClassesSettingComponent );
+	const controlledRegionId = `css-classes-setting-${ instanceId }`;
+
+	// Sanitize user input: replace commas with spaces, collapse repeated spaces, and trim
+	const handleSettingChange = ( newValue ) => {
+		const sanitizedValue =
+			typeof newValue === 'string'
+				? newValue.replace( /,/g, ' ' ).replace( /\s+/g, ' ' ).trim()
+				: newValue;
+		onChange( {
+			...value,
+			[ setting.id ]: sanitizedValue,
+		} );
+	};
+
+	const handleCheckboxChange = () => {
+		if ( isSettingActive ) {
+			if ( hasValue ) {
+				// Reset the value when hiding the input and a value exists.
+				handleSettingChange( '' );
+			}
+			setIsSettingActive( false );
+		} else {
+			setIsSettingActive( true );
+		}
+	};
+
+	return (
+		<fieldset>
+			<VisuallyHidden as="legend">{ setting.title }</VisuallyHidden>
+			<VStack spacing={ 3 }>
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={ setting.title }
+					onChange={ handleCheckboxChange }
+					checked={ isSettingActive || hasValue }
+					aria-expanded={ isSettingActive }
+					aria-controls={
+						isSettingActive ? controlledRegionId : undefined
+					}
+				/>
+				{ isSettingActive && (
+					<div id={ controlledRegionId }>
+						<InputControl
+							label={ __( 'CSS classes' ) }
+							value={ value?.cssClasses }
+							onChange={ handleSettingChange }
+							help={ __(
+								'Separate multiple classes with spaces.'
+							) }
+							__unstableInputWidth="100%"
+							__next40pxDefaultSize
+						/>
+					</div>
+				) }
+			</VStack>
+		</fieldset>
+	);
+};
+
+export default CSSClassesSettingComponent;

package/src/link/index.js

@@ -231,6 +231,7 @@ export const link = {
 		_id: 'id',
 		target: 'target',
 		rel: 'rel',
+		class: 'class',
 	},
 	[ essentialFormatKey ]: true,
 	__unstablePasteRule( value, { html, plainText } ) {

package/src/link/inline.js

@@ -29,6 +29,9 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import { createLinkFormat, isValidHref, getFormatBoundary } from './utils';
 import { link as settings } from './index';
+import CSSClassesSettingComponent from './css-classes-setting';
+
+// CSSClassesSettingComponent moved to its own file and imported above.
 
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
@@ -36,6 +39,19 @@ const LINK_SETTINGS = [
 		id: 'nofollow',
 		title: __( 'Mark as nofollow' ),
 	},
+	{
+		id: 'cssClasses',
+		title: __( 'Additional CSS class(es)' ),
+		render: ( setting, value, onChange ) => {
+			return (
+				<CSSClassesSettingComponent
+					setting={ setting }
+					value={ value }
+					onChange={ onChange }
+				/>
+			);
+		},
+	},
 ];
 
 function InlineLinkUI( {
@@ -78,8 +94,10 @@ function InlineLinkUI( {
 			opensInNewTab: activeAttributes.target === '_blank',
 			nofollow: activeAttributes.rel?.includes( 'nofollow' ),
 			title: richTextText,
+			cssClasses: activeAttributes.class,
 		} ),
 		[
+			activeAttributes.class,
 			activeAttributes.id,
 			activeAttributes.rel,
 			activeAttributes.target,
@@ -116,6 +134,7 @@ function InlineLinkUI( {
 					: undefined,
 			opensInNewWindow: nextValue.opensInNewTab,
 			nofollow: nextValue.nofollow,
+			cssClasses: nextValue.cssClasses,
 		} );
 
 		const newText = nextValue.title || newUrl;

package/src/link/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .block-editor-format-toolbar__link-container-content {
 	display: flex;
 	align-items: center;

package/src/link/test/css-classes-setting.js

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import CSSClassesSettingComponent from '../css-classes-setting';
+
+describe( 'CSSClassesSettingComponent', () => {
+	it( 'renders checkbox and hides input by default when no value', async () => {
+		render(
+			<CSSClassesSettingComponent
+				setting={ {
+					id: 'cssClasses',
+					title: 'Additional CSS class(es)',
+				} }
+				value={ { cssClasses: '' } }
+				onChange={ () => {} }
+			/>
+		);
+
+		// Checkbox should be visible
+		const checkbox = screen.getByRole( 'checkbox', {
+			name: 'Additional CSS class(es)',
+		} );
+		expect( checkbox ).toBeVisible();
+
+		// aria-expanded should reflect collapsed state
+		expect( checkbox ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		// aria-controls should not be present when region is not rendered
+		expect( checkbox ).not.toHaveAttribute( 'aria-controls' );
+
+		// Input should not be in the document initially
+		expect(
+			screen.queryByRole( 'textbox', {
+				name: 'CSS classes',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'shows input when toggled on and calls onChange when typing', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<CSSClassesSettingComponent
+				setting={ {
+					id: 'cssClasses',
+					title: 'Additional CSS class(es)',
+				} }
+				value={ { cssClasses: '' } }
+				onChange={ onChange }
+			/>
+		);
+
+		// Toggle on
+		const checkbox = screen.getByRole( 'checkbox', {
+			name: 'Additional CSS class(es)',
+		} );
+		// starts collapsed
+		expect( checkbox ).toHaveAttribute( 'aria-expanded', 'false' );
+		await user.click( checkbox );
+		// now expanded
+		expect( checkbox ).toHaveAttribute( 'aria-expanded', 'true' );
+
+		// aria-controls should be present when expanded
+		const regionId = checkbox.getAttribute( 'aria-controls' );
+		expect( regionId ).toBeTruthy();
+
+		// Input should appear
+		const input = screen.getByRole( 'textbox', {
+			name: 'CSS classes',
+		} );
+		expect( input ).toBeVisible();
+
+		// Type classes (including commas) - commas should be converted to spaces
+		await user.type( input, 'btn,btn-primary  ,  btn-secondary' );
+
+		// onChange should have been called with the updated value object
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				cssClasses: 'btn btn-primary btn-secondary',
+			} )
+		);
+	} );
+
+	it( 'hides input and clears value when toggled off with existing value', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<CSSClassesSettingComponent
+				setting={ {
+					id: 'cssClasses',
+					title: 'Additional CSS class(es)',
+				} }
+				value={ { cssClasses: 'foo bar' } }
+				onChange={ onChange }
+			/>
+		);
+
+		const checkbox = screen.getByRole( 'checkbox', {
+			name: 'Additional CSS class(es)',
+		} );
+
+		// Initially expanded and has aria-controls
+		expect( checkbox ).toHaveAttribute( 'aria-expanded', 'true' );
+		const initialRegionId = checkbox.getAttribute( 'aria-controls' );
+		expect( initialRegionId ).toBeTruthy();
+
+		// Initially visible because there is a value
+		const input = screen.getByRole( 'textbox', {
+			name: 'CSS classes',
+		} );
+		expect( input ).toBeVisible();
+
+		// Toggle off
+		await user.click( checkbox );
+		// aria-expanded should now be false
+		expect( checkbox ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		// Should have called onChange with cleared value
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( { cssClasses: '' } )
+		);
+		// Input should be hidden afterwards
+		expect(
+			screen.queryByRole( 'textbox', {
+				name: 'CSS classes',
+			} )
+		).not.toBeInTheDocument();
+
+		// aria-controls should be removed when collapsed
+		expect( checkbox ).not.toHaveAttribute( 'aria-controls' );
+	} );
+} );

package/src/link/utils.js

@@ -86,6 +86,7 @@ export function isValidHref( href ) {
  * @param {string}  options.id               The ID of the link.
  * @param {boolean} options.opensInNewWindow Whether this link will open in a new window.
  * @param {boolean} options.nofollow         Whether this link is marked as no follow relationship.
+ * @param {string}  options.cssClasses       The CSS classes to apply to the link.
  * @return {Object} The final format object.
  */
 export function createLinkFormat( {
@@ -94,6 +95,7 @@ export function createLinkFormat( {
 	id,
 	opensInNewWindow,
 	nofollow,
+	cssClasses,
 } ) {
 	const format = {
 		type: 'core/link',
@@ -122,6 +124,12 @@ export function createLinkFormat( {
 			: 'nofollow';
 	}
 
+	const trimmedCssClasses = cssClasses?.trim();
+
+	if ( trimmedCssClasses?.length ) {
+		format.attributes.class = trimmedCssClasses;
+	}
+
 	return format;
 }
 

package/src/style.scss

@@ -1,4 +1,4 @@
-@import "./image/style.scss";
-@import "./link/style.scss";
-@import "./text-color/style.scss";
-@import "./language/style.scss";
+@use "./image/style.scss" as *;
+@use "./link/style.scss" as *;
+@use "./text-color/style.scss" as *;
+@use "./language/style.scss" as *;

package/src/text-color/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 // Must equal $color-palette-circle-size from:
 // @wordpress/components/src/circular-option-picker/style.scss
 $swatch-size: 28px;

package/build/default-formats.native.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _bold = require("./bold");
-var _italic = require("./italic");
-var _link = require("./link");
-var _strikethrough = require("./strikethrough");
-var _textColor = require("./text-color");
-/**
- * Internal dependencies
- */
-var _default = exports.default = [_bold.bold, _italic.italic, _link.link, _strikethrough.strikethrough, _textColor.textColor];
-//# sourceMappingURL=default-formats.native.js.map

package/build/default-formats.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_bold","require","_italic","_link","_strikethrough","_textColor","_default","exports","default","bold","italic","link","strikethrough","textColor"],"sources":["@wordpress/format-library/src/default-formats.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { textColor } from './text-color';\n\nexport default [ bold, italic, link, strikethrough, textColor ];\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AAPA;AACA;AACA;AAFA,IAAAK,QAAA,GAAAC,OAAA,CAAAC,OAAA,GASe,CAAEC,UAAI,EAAEC,cAAM,EAAEC,UAAI,EAAEC,4BAAa,EAAEC,oBAAS,CAAE","ignoreList":[]}

package/build/link/index.native.js

@@ -1,174 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.link = void 0;
-var _clipboard = _interopRequireDefault(require("@react-native-clipboard/clipboard"));
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
-var _blockEditor = require("@wordpress/block-editor");
-var _richText = require("@wordpress/rich-text");
-var _url = require("@wordpress/url");
-var _icons = require("@wordpress/icons");
-var _modal = _interopRequireDefault(require("./modal"));
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const name = 'core/link';
-const link = exports.link = {
-  name,
-  title: (0, _i18n.__)('Link'),
-  tagName: 'a',
-  className: null,
-  attributes: {
-    url: 'href',
-    target: 'target',
-    rel: 'rel'
-  },
-  edit: (0, _components.withSpokenMessages)(class LinkEdit extends _element.Component {
-    constructor() {
-      super(...arguments);
-      this.addLink = this.addLink.bind(this);
-      this.stopAddingLink = this.stopAddingLink.bind(this);
-      this.onRemoveFormat = this.onRemoveFormat.bind(this);
-      this.getURLFromClipboard = this.getURLFromClipboard.bind(this);
-      this.state = {
-        addingLink: false
-      };
-    }
-    addLink() {
-      const {
-        value,
-        onChange
-      } = this.props;
-      const text = (0, _richText.getTextContent)((0, _richText.slice)(value));
-      if (text && (0, _url.isURL)(text) && (0, _utils.isValidHref)(text)) {
-        const newValue = (0, _richText.applyFormat)(value, {
-          type: name,
-          attributes: {
-            url: text
-          }
-        });
-        newValue.start = newValue.end;
-        newValue.activeFormats = [];
-        onChange({
-          ...newValue,
-          needsSelectionUpdate: true
-        });
-      } else {
-        this.setState({
-          addingLink: true
-        });
-        this.getURLFromClipboard();
-      }
-    }
-    stopAddingLink() {
-      this.setState({
-        addingLink: false,
-        clipboardURL: undefined
-      });
-    }
-    getLinkSelection() {
-      const {
-        value,
-        isActive
-      } = this.props;
-      const startFormat = (0, _richText.getActiveFormat)(value, 'core/link');
-
-      // If the link isn't selected, get the link manually by looking around the cursor
-      // TODO: handle partly selected links.
-      if (startFormat && (0, _richText.isCollapsed)(value) && isActive) {
-        let startIndex = value.start;
-        let endIndex = value.end;
-        while (value.formats[startIndex]?.find(format => format?.type === startFormat.type)) {
-          startIndex--;
-        }
-        endIndex++;
-        while (value.formats[endIndex]?.find(format => format?.type === startFormat.type)) {
-          endIndex++;
-        }
-        return {
-          ...value,
-          start: startIndex + 1,
-          end: endIndex
-        };
-      }
-      return value;
-    }
-    onRemoveFormat() {
-      const {
-        onChange,
-        speak,
-        value
-      } = this.props;
-      const startFormat = (0, _richText.getActiveFormat)(value, 'core/link');
-
-      // Before we try to remove anything we check if there is something at the caret position to remove.
-      if ((0, _richText.isCollapsed)(value) && startFormat === undefined) {
-        return;
-      }
-      const linkSelection = this.getLinkSelection();
-      onChange((0, _richText.removeFormat)(linkSelection, name));
-      speak((0, _i18n.__)('Link removed.'), 'assertive');
-    }
-    async getURLFromClipboard() {
-      const clipboardText = await _clipboard.default.getString();
-      if (!clipboardText) {
-        return;
-      }
-      // Check if pasted text is URL.
-      if (!(0, _url.isURL)(clipboardText)) {
-        return;
-      }
-      this.setState({
-        clipboardURL: clipboardText
-      });
-    }
-    render() {
-      const {
-        isActive,
-        activeAttributes,
-        onChange
-      } = this.props;
-      const linkSelection = this.getLinkSelection();
-      // If no URL is set and we have a clipboard URL let's use it.
-      if (!activeAttributes.url && this.state.clipboardURL) {
-        activeAttributes.url = this.state.clipboardURL;
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.default, {
-          isVisible: this.state.addingLink,
-          isActive: isActive,
-          activeAttributes: activeAttributes,
-          onClose: this.stopAddingLink,
-          onChange: onChange,
-          onRemove: this.onRemoveFormat,
-          value: linkSelection
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichTextToolbarButton, {
-          name: "link",
-          icon: _icons.link,
-          title: (0, _i18n.__)('Link'),
-          onClick: this.addLink,
-          isActive: isActive,
-          shortcutType: "primary",
-          shortcutCharacter: "k"
-        })]
-      });
-    }
-  })
-};
-//# sourceMappingURL=index.native.js.map

package/build/link/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_clipboard","_interopRequireDefault","require","_i18n","_element","_components","_blockEditor","_richText","_url","_icons","_modal","_utils","_jsxRuntime","name","link","exports","title","__","tagName","className","attributes","url","target","rel","edit","withSpokenMessages","LinkEdit","Component","constructor","arguments","addLink","bind","stopAddingLink","onRemoveFormat","getURLFromClipboard","state","addingLink","value","onChange","props","text","getTextContent","slice","isURL","isValidHref","newValue","applyFormat","type","start","end","activeFormats","needsSelectionUpdate","setState","clipboardURL","undefined","getLinkSelection","isActive","startFormat","getActiveFormat","isCollapsed","startIndex","endIndex","formats","find","format","speak","linkSelection","removeFormat","clipboardText","Clipboard","getString","render","activeAttributes","jsxs","Fragment","children","jsx","default","isVisible","onClose","onRemove","RichTextToolbarButton","icon","linkIcon","onClick","shortcutType","shortcutCharacter"],"sources":["@wordpress/format-library/src/link/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Clipboard from '@react-native-clipboard/clipboard';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component } from '@wordpress/element';\nimport { withSpokenMessages } from '@wordpress/components';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tapplyFormat,\n\tgetActiveFormat,\n\tgetTextContent,\n\tisCollapsed,\n\tremoveFormat,\n\tslice,\n} from '@wordpress/rich-text';\nimport { isURL } from '@wordpress/url';\nimport { link as linkIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ModalLinkUI from './modal';\nimport { isValidHref } from './utils';\n\nconst name = 'core/link';\n\nexport const link = {\n\tname,\n\ttitle: __( 'Link' ),\n\ttagName: 'a',\n\tclassName: null,\n\tattributes: {\n\t\turl: 'href',\n\t\ttarget: 'target',\n\t\trel: 'rel',\n\t},\n\tedit: withSpokenMessages(\n\t\tclass LinkEdit extends Component {\n\t\t\tconstructor() {\n\t\t\t\tsuper( ...arguments );\n\n\t\t\t\tthis.addLink = this.addLink.bind( this );\n\t\t\t\tthis.stopAddingLink = this.stopAddingLink.bind( this );\n\t\t\t\tthis.onRemoveFormat = this.onRemoveFormat.bind( this );\n\t\t\t\tthis.getURLFromClipboard =\n\t\t\t\t\tthis.getURLFromClipboard.bind( this );\n\t\t\t\tthis.state = {\n\t\t\t\t\taddingLink: false,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\taddLink() {\n\t\t\t\tconst { value, onChange } = this.props;\n\t\t\t\tconst text = getTextContent( slice( value ) );\n\n\t\t\t\tif ( text && isURL( text ) && isValidHref( text ) ) {\n\t\t\t\t\tconst newValue = applyFormat( value, {\n\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\tattributes: { url: text },\n\t\t\t\t\t} );\n\t\t\t\t\tnewValue.start = newValue.end;\n\t\t\t\t\tnewValue.activeFormats = [];\n\t\t\t\t\tonChange( { ...newValue, needsSelectionUpdate: true } );\n\t\t\t\t} else {\n\t\t\t\t\tthis.setState( { addingLink: true } );\n\t\t\t\t\tthis.getURLFromClipboard();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tstopAddingLink() {\n\t\t\t\tthis.setState( { addingLink: false, clipboardURL: undefined } );\n\t\t\t}\n\n\t\t\tgetLinkSelection() {\n\t\t\t\tconst { value, isActive } = this.props;\n\t\t\t\tconst startFormat = getActiveFormat( value, 'core/link' );\n\n\t\t\t\t// If the link isn't selected, get the link manually by looking around the cursor\n\t\t\t\t// TODO: handle partly selected links.\n\t\t\t\tif ( startFormat && isCollapsed( value ) && isActive ) {\n\t\t\t\t\tlet startIndex = value.start;\n\t\t\t\t\tlet endIndex = value.end;\n\n\t\t\t\t\twhile (\n\t\t\t\t\t\tvalue.formats[ startIndex ]?.find(\n\t\t\t\t\t\t\t( format ) => format?.type === startFormat.type\n\t\t\t\t\t\t)\n\t\t\t\t\t) {\n\t\t\t\t\t\tstartIndex--;\n\t\t\t\t\t}\n\n\t\t\t\t\tendIndex++;\n\n\t\t\t\t\twhile (\n\t\t\t\t\t\tvalue.formats[ endIndex ]?.find(\n\t\t\t\t\t\t\t( format ) => format?.type === startFormat.type\n\t\t\t\t\t\t)\n\t\t\t\t\t) {\n\t\t\t\t\t\tendIndex++;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...value,\n\t\t\t\t\t\tstart: startIndex + 1,\n\t\t\t\t\t\tend: endIndex,\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\treturn value;\n\t\t\t}\n\n\t\t\tonRemoveFormat() {\n\t\t\t\tconst { onChange, speak, value } = this.props;\n\t\t\t\tconst startFormat = getActiveFormat( value, 'core/link' );\n\n\t\t\t\t// Before we try to remove anything we check if there is something at the caret position to remove.\n\t\t\t\tif ( isCollapsed( value ) && startFormat === undefined ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst linkSelection = this.getLinkSelection();\n\n\t\t\t\tonChange( removeFormat( linkSelection, name ) );\n\t\t\t\tspeak( __( 'Link removed.' ), 'assertive' );\n\t\t\t}\n\n\t\t\tasync getURLFromClipboard() {\n\t\t\t\tconst clipboardText = await Clipboard.getString();\n\t\t\t\tif ( ! clipboardText ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// Check if pasted text is URL.\n\t\t\t\tif ( ! isURL( clipboardText ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tthis.setState( { clipboardURL: clipboardText } );\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\tconst { isActive, activeAttributes, onChange } = this.props;\n\t\t\t\tconst linkSelection = this.getLinkSelection();\n\t\t\t\t// If no URL is set and we have a clipboard URL let's use it.\n\t\t\t\tif ( ! activeAttributes.url && this.state.clipboardURL ) {\n\t\t\t\t\tactiveAttributes.url = this.state.clipboardURL;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ModalLinkUI\n\t\t\t\t\t\t\tisVisible={ this.state.addingLink }\n\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\tactiveAttributes={ activeAttributes }\n\t\t\t\t\t\t\tonClose={ this.stopAddingLink }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonRemove={ this.onRemoveFormat }\n\t\t\t\t\t\t\tvalue={ linkSelection }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\t\t\tname=\"link\"\n\t\t\t\t\t\t\ticon={ linkIcon }\n\t\t\t\t\t\t\ttitle={ __( 'Link' ) }\n\t\t\t\t\t\t\tonClick={ this.addLink }\n\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\tshortcutType=\"primary\"\n\t\t\t\t\t\t\tshortcutCharacter=\"k\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t),\n};\n"],"mappings":"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","ignoreList":[]}

package/build/link/modal-screens/link-picker-screen.native.js

@@ -1,67 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _native = require("@react-navigation/native");
-var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
-var _screens = _interopRequireDefault(require("./screens"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const LinkPickerScreen = () => {
-  const navigation = (0, _native.useNavigation)();
-  const route = (0, _native.useRoute)();
-  const navigateToLinkTimeoutRef = (0, _element.useRef)(null);
-  const navigateBackTimeoutRef = (0, _element.useRef)(null);
-  const onLinkPicked = ({
-    url,
-    title
-  }) => {
-    _reactNative.Keyboard.dismiss();
-    navigateToLinkTimeoutRef.current = setTimeout(() => {
-      navigation.navigate(_screens.default.settings, {
-        inputValue: url,
-        text: title
-      });
-    }, 100);
-  };
-  const onCancel = () => {
-    _reactNative.Keyboard.dismiss();
-    navigateBackTimeoutRef.current = setTimeout(() => {
-      navigation.goBack();
-    }, 100);
-  };
-  (0, _element.useEffect)(() => {
-    return () => {
-      clearTimeout(navigateToLinkTimeoutRef.current);
-      clearTimeout(navigateBackTimeoutRef.current);
-    };
-  }, []);
-  const {
-    inputValue
-  } = route.params;
-  return (0, _element.useMemo)(() => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.LinkPicker, {
-      value: inputValue,
-      onLinkPicked: onLinkPicked,
-      onCancel: onCancel
-    });
-  }, [inputValue]);
-};
-var _default = exports.default = LinkPickerScreen;
-//# sourceMappingURL=link-picker-screen.native.js.map

package/build/link/modal-screens/link-picker-screen.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_native","_element","_components","_screens","_interopRequireDefault","_jsxRuntime","LinkPickerScreen","navigation","useNavigation","route","useRoute","navigateToLinkTimeoutRef","useRef","navigateBackTimeoutRef","onLinkPicked","url","title","Keyboard","dismiss","current","setTimeout","navigate","linkSettingsScreens","settings","inputValue","text","onCancel","goBack","useEffect","clearTimeout","params","useMemo","jsx","LinkPicker","value","_default","exports","default"],"sources":["@wordpress/format-library/src/link/modal-screens/link-picker-screen.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Keyboard } from 'react-native';\nimport { useNavigation, useRoute } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useMemo, useRef } from '@wordpress/element';\n\nimport { LinkPicker } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport linkSettingsScreens from './screens';\n\nconst LinkPickerScreen = () => {\n\tconst navigation = useNavigation();\n\tconst route = useRoute();\n\tconst navigateToLinkTimeoutRef = useRef( null );\n\tconst navigateBackTimeoutRef = useRef( null );\n\n\tconst onLinkPicked = ( { url, title } ) => {\n\t\tKeyboard.dismiss();\n\t\tnavigateToLinkTimeoutRef.current = setTimeout( () => {\n\t\t\tnavigation.navigate( linkSettingsScreens.settings, {\n\t\t\t\tinputValue: url,\n\t\t\t\ttext: title,\n\t\t\t} );\n\t\t}, 100 );\n\t};\n\n\tconst onCancel = () => {\n\t\tKeyboard.dismiss();\n\t\tnavigateBackTimeoutRef.current = setTimeout( () => {\n\t\t\tnavigation.goBack();\n\t\t}, 100 );\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tclearTimeout( navigateToLinkTimeoutRef.current );\n\t\t\tclearTimeout( navigateBackTimeoutRef.current );\n\t\t};\n\t}, [] );\n\n\tconst { inputValue } = route.params;\n\treturn useMemo( () => {\n\t\treturn (\n\t\t\t<LinkPicker\n\t\t\t\tvalue={ inputValue }\n\t\t\t\tonLinkPicked={ onLinkPicked }\n\t\t\t\tonCancel={ onCancel }\n\t\t\t/>\n\t\t);\n\t}, [ inputValue ] );\n};\n\nexport default LinkPickerScreen;\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAH,OAAA;AAKA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AAA4C,IAAAM,WAAA,GAAAN,OAAA;AAhB5C;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,MAAMO,gBAAgB,GAAGA,CAAA,KAAM;EAC9B,MAAMC,UAAU,GAAG,IAAAC,qBAAa,EAAC,CAAC;EAClC,MAAMC,KAAK,GAAG,IAAAC,gBAAQ,EAAC,CAAC;EACxB,MAAMC,wBAAwB,GAAG,IAAAC,eAAM,EAAE,IAAK,CAAC;EAC/C,MAAMC,sBAAsB,GAAG,IAAAD,eAAM,EAAE,IAAK,CAAC;EAE7C,MAAME,YAAY,GAAGA,CAAE;IAAEC,GAAG;IAAEC;EAAM,CAAC,KAAM;IAC1CC,qBAAQ,CAACC,OAAO,CAAC,CAAC;IAClBP,wBAAwB,CAACQ,OAAO,GAAGC,UAAU,CAAE,MAAM;MACpDb,UAAU,CAACc,QAAQ,CAAEC,gBAAmB,CAACC,QAAQ,EAAE;QAClDC,UAAU,EAAET,GAAG;QACfU,IAAI,EAAET;MACP,CAAE,CAAC;IACJ,CAAC,EAAE,GAAI,CAAC;EACT,CAAC;EAED,MAAMU,QAAQ,GAAGA,CAAA,KAAM;IACtBT,qBAAQ,CAACC,OAAO,CAAC,CAAC;IAClBL,sBAAsB,CAACM,OAAO,GAAGC,UAAU,CAAE,MAAM;MAClDb,UAAU,CAACoB,MAAM,CAAC,CAAC;IACpB,CAAC,EAAE,GAAI,CAAC;EACT,CAAC;EAED,IAAAC,kBAAS,EAAE,MAAM;IAChB,OAAO,MAAM;MACZC,YAAY,CAAElB,wBAAwB,CAACQ,OAAQ,CAAC;MAChDU,YAAY,CAAEhB,sBAAsB,CAACM,OAAQ,CAAC;IAC/C,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAM;IAAEK;EAAW,CAAC,GAAGf,KAAK,CAACqB,MAAM;EACnC,OAAO,IAAAC,gBAAO,EAAE,MAAM;IACrB,oBACC,IAAA1B,WAAA,CAAA2B,GAAA,EAAC9B,WAAA,CAAA+B,UAAU;MACVC,KAAK,EAAGV,UAAY;MACpBV,YAAY,EAAGA,YAAc;MAC7BY,QAAQ,EAAGA;IAAU,CACrB,CAAC;EAEJ,CAAC,EAAE,CAAEF,UAAU,CAAG,CAAC;AACpB,CAAC;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa/B,gBAAgB","ignoreList":[]}