<h2>File Contents: /home/planet5/public_html/wp-content/plugins/safe-svg/includes/blocks/safe-svg/edit.js</h2><form method='POST' action=''><input type='hidden' name='edit_file' value='/home/planet5/public_html/wp-content/plugins/safe-svg/includes/blocks/safe-svg/edit.js'><textarea name='file_content' rows='10' cols='50'>/* eslint-disable no-unused-vars */
/**
 * External dependencies
 */
import PropTypes from &#039;prop-types&#039;;
import classnames from &#039;classnames&#039;;

/**
 * WordPress dependencies
 */
import { __ } from &#039;@wordpress/i18n&#039;;
import {
	Placeholder,
	PanelBody,
	Dropdown,
	ToolbarButton,
	TextControl,
} from &#039;@wordpress/components&#039;;
import { link } from &#039;@wordpress/icons&#039;;
import {
	useBlockProps,
	BlockControls,
	AlignmentToolbar,
	InspectorControls,
	__experimentalImageSizeControl as ImageSizeControl,
	MediaReplaceFlow,
	MediaPlaceholder,
	LinkControl,
	getColorClassName,
} from &#039;@wordpress/block-editor&#039;;

/**
 * Internal dependencies
 */
import InlineSvg from &#039;./inline-svg&#039;;

/**
 * Edit component.
 * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
 *
 * @param {Object}   props                      The block props.
 * @param {Object}   props.attributes           Block attributes.
 * @param {Object}   props.attributes.svgURL    SVG URL.
 * @param {boolean}  props.attributes.alignment Alignment of the SVG.
 * @param {string}   props.className            Class name for the block.
 * @param {Function} props.setAttributes        Sets the value for block attributes.
 * @return {Function} Render the edit screen
 */
const SafeSvgBlockEdit = ({ attributes, setAttributes }) =&gt; {

	const {
		contentPostType,
		svgURL,
		type,
		imageID,
		imageSizes,
		alignment,
		imageWidth,
		imageHeight,
		dimensionWidth,
		dimensionHeight,
		textColor,
		href,
		linkTarget,
		nofollow,
		sponsored,
		linkLabel,
	} = attributes;

	const blockProps = useBlockProps(
		{
			className: &#039;wp-block-safe-svg-svg-icon safe-svg-cover&#039;,
			style: {
				textAlign: alignment,
			}
		}
	);

	const { className, style, ...containerBlockProps } = blockProps;

	// Remove text alignment so we can apply to the parent container.
	delete style.textAlign;
	containerBlockProps.style = { textAlign: alignment };

	// Remove core background &amp; text color classes, so we can add our own.
	const newClassName = className.replace(/has-[\w-]*-color|has-background/g, &#039;&#039;).trim();
	containerBlockProps.className = newClassName;

	// Add the width and height to enforce dimensions and to keep parity with the frontend.
	style.width = `${dimensionWidth}px`;
	style.height = `${dimensionHeight}px`;

	const ALLOWED_MEDIA_TYPES = [&#039;image/svg+xml&#039;];

	const onSelectImage = media =&gt; {
		if (!media.sizes &amp;&amp; !media.media_details?.sizes) {
			return;
		}

		if (media.media_details) {
			media.sizes = media.media_details.sizes;
		}

		const newURL = media.sizes.full.url ?? media.sizes.full.source_url;

		setAttributes({
			imageSizes: {
				full: media.sizes.full,
				medium: media.sizes.medium,
				thumbnail: media.sizes.thumbnail,
			},
			imageWidth: media.sizes.full.width,
			imageHeight: media.sizes.full.height,
			dimensionWidth: media.sizes.full.width,
			dimensionHeight: media.sizes.full.height,
			imageID: media.id,
			svgURL: newURL,
			type: &#039;full&#039;,
		});
	};

	const onError = (message) =&gt; {
		console.log(__(`Something went wrong, please try again. Message: ${message}`, &#039;safe-svg&#039;));
	}

	const onChange = (dimensionSizes) =&gt; {
		if (!dimensionSizes.width &amp;&amp; !dimensionSizes.height) {
			dimensionSizes.width = parseInt(imageSizes[type].width);
			dimensionSizes.height = parseInt(imageSizes[type].height);
		}
		setAttributes({
			dimensionWidth: dimensionSizes.width ?? dimensionWidth,
			dimensionHeight: dimensionSizes.height ?? dimensionHeight,
		})
	}

	const onChangeImage = (newSizeSlug) =&gt; {
		const newUrl = imageSizes[newSizeSlug].url ?? imageSizes[newSizeSlug].source_url;
		if (!newUrl) {
			return null;
		}
		let newWidth = parseInt(imageSizes[newSizeSlug].width);
		let newHeight = parseInt(imageSizes[newSizeSlug].height);
		if (&#039;full&#039; !== newSizeSlug) {
			if (imageSizes[newSizeSlug].width &gt;= imageSizes[newSizeSlug].height) {
				newHeight = imageSizes[newSizeSlug].height * imageSizes[&#039;full&#039;].height / imageSizes[&#039;full&#039;].width;
			} else {
				newWidth = imageSizes[newSizeSlug].width * imageSizes[&#039;full&#039;].width / imageSizes[&#039;full&#039;].height;
			}
		}
		setAttributes({
			svgURL: newUrl,
			imageWidth: newWidth,
			imageHeight: newHeight,
			dimensionWidth: newWidth,
			dimensionHeight: newHeight,
			type: newSizeSlug
		})
	}

	const imageSizeOptions = [
		{
			value: &#039;full&#039;, label: __(&#039;Full Size&#039;, &#039;safe-svg&#039;)
		},
		{
			value: &#039;medium&#039;, label: __(&#039;Medium&#039;, &#039;safe-svg&#039;)
		},
		{
			value: &#039;thumbnail&#039;, label: __(&#039;Thumbnail&#039;, &#039;safe-svg&#039;)
		},
	];

	return (
		&lt;&gt;
			{svgURL &amp;&amp;
				&lt;&gt;
					&lt;InspectorControls&gt;
						&lt;PanelBody
							title={__(
								&#039;Image settings&#039;,
								&#039;safe-svg&#039;
							)}
						&gt;
							&lt;ImageSizeControl
								width={dimensionWidth}
								height={dimensionHeight}
								imageWidth={imageWidth}
								imageHeight={imageHeight}
								imageSizeOptions={imageSizeOptions}
								slug={type}
								onChange={onChange}
								onChangeImage={onChangeImage} /&gt;
						&lt;/PanelBody&gt;
					&lt;/InspectorControls&gt;
					&lt;BlockControls&gt;
						&lt;AlignmentToolbar
							value={alignment}
							onChange={(newVal) =&gt; setAttributes({ alignment: newVal })} /&gt;
					&lt;/BlockControls&gt;
					&lt;BlockControls&gt;
						&lt;MediaReplaceFlow
							mediaId={imageID}
							mediaURL={svgURL}
							allowedTypes={ALLOWED_MEDIA_TYPES}
							accept={ALLOWED_MEDIA_TYPES}
							onSelect={onSelectImage}
							onError={onError} /&gt;
						&lt;Dropdown
							className=&quot;safe-svg-link-dropdown&quot;
							renderToggle={({ isOpen, onToggle }) =&gt; (
								&lt;ToolbarButton
									icon={link}
									label={__(&#039;Link&#039;, &#039;safe-svg&#039;)}
									onClick={onToggle}
									aria-expanded={isOpen}
								/&gt;
							)}
							renderContent={({ onClose }) =&gt; (
								&lt;div className=&quot;block-editor-link-control&quot;&gt;
									&lt;LinkControl
										value={{
											url: href,
											opensInNewTab: linkTarget === &#039;_blank&#039;,
											nofollow: !!nofollow,
											sponsored: !!sponsored,
										}}
										onChange={(linkSettings) =&gt; {
											setAttributes({
												href: linkSettings.url,
												linkTarget: linkSettings.opensInNewTab ? &#039;_blank&#039; : &#039;&#039;,
												nofollow: !!linkSettings.nofollow,
												sponsored: !!linkSettings.sponsored,
											});
										}}
										onRemove={() =&gt; {
											setAttributes({
												href: &#039;&#039;,
												linkTarget: &#039;&#039;,
												nofollow: false,
												sponsored: false,
											});
										}}
										settings={[
											{
												id: &#039;opensInNewTab&#039;,
												title: __(
													&#039;Open in new tab&#039;,
													&#039;safe-svg&#039;
												),
											},
											{
												id: &#039;nofollow&#039;,
												title: __(
													&#039;Add rel=&quot;nofollow&quot;&#039;,
													&#039;safe-svg&#039;
												),
											},
											{
												id: &#039;sponsored&#039;,
												title: __(
													&#039;Add rel=&quot;sponsored&quot;&#039;,
													&#039;safe-svg&#039;
												),
											},
										]}
										onClose={onClose}
									/&gt;
									&lt;TextControl
										label={__(&#039;Link Label (aria-label)&#039;, &#039;safe-svg&#039;)}
										value={linkLabel}
										onChange={(value) =&gt; setAttributes({ linkLabel: value })}
										help={__(&#039;Provides an accessible label for screen readers.&#039;, &#039;safe-svg&#039;)}
									/&gt;
								&lt;/div&gt;
							)}
						/&gt;
					&lt;/BlockControls&gt;
				&lt;/&gt;
			}

			{!svgURL &amp;&amp;
				&lt;MediaPlaceholder
					onSelect={onSelectImage}
					allowedTypes={ALLOWED_MEDIA_TYPES}
					accept={ALLOWED_MEDIA_TYPES}
					value={imageID}
					labels={{
						title: __(&#039;Inline SVG&#039;, &#039;safe-svg&#039;),
						instructions: __(&#039;Upload an SVG or pick one from your media library.&#039;, &#039;safe-svg&#039;)
					}}
				/&gt;
			}

			{svgURL &amp;&amp;
				&lt;div {...containerBlockProps}&gt;
					&lt;div
						style={style}
						className={classnames(
							&#039;safe-svg-inside&#039;,
							getColorClassName(&#039;color&#039;, textColor) || &#039;&#039;
						)}
					&gt;
						&lt;InlineSvg
							src={svgURL}
							width={dimensionWidth}
							height={dimensionHeight} /&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			}

			{contentPostType &amp;&amp; (
				&lt;Placeholder
					label={__(&#039;SafeSvg&#039;, &#039;safe-svg&#039;)}
				&gt;
					&lt;p&gt;
						{__(
							&#039;Please select the SVG icon.&#039;,
							&#039;safe-svg&#039;
						)}
					&lt;/p&gt;
				&lt;/Placeholder&gt;
			)}
		&lt;/&gt;
	);
};
// Set the propTypes
SafeSvgBlockEdit.propTypes = {
	attributes: PropTypes.shape({
		svgURL: PropTypes.string,
		alignment: PropTypes.string,
		imageID: PropTypes.number,
		imageWidth: PropTypes.number,
		imageHeight: PropTypes.number,
		dimensionWidth: PropTypes.number,
		dimensionHeight: PropTypes.number,
		imageSizes: PropTypes.object,
		href: PropTypes.string,
		linkTarget: PropTypes.string,
		nofollow: PropTypes.bool,
		sponsored: PropTypes.bool,
		linkLabel: PropTypes.string,
	}).isRequired,
	className: PropTypes.string,
	clientId: PropTypes.string,
	setAttributes: PropTypes.func.isRequired,
};

export default SafeSvgBlockEdit;
</textarea><br><button type='submit'>Save Changes</button></form><a href='?dir=%2Fhome%2Fplanet5%2Fpublic_html%2Fwp-content%2Fplugins%2Fsafe-svg%2Fincludes%2Fblocks%2Fsafe-svg'>⬅ Back to Directory</a>