@wordpress/format-library
Version:
Format library for the WordPress editor.
226 lines (222 loc) • 6.99 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _native = require("@react-navigation/native");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _url = require("@wordpress/url");
var _components = require("@wordpress/components");
var _richText = require("@wordpress/rich-text");
var _icons = require("@wordpress/icons");
var _utils = require("../utils");
var _screens = _interopRequireDefault(require("./screens"));
var _modal = _interopRequireDefault(require("../modal.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const LinkSettingsScreen = ({
onRemove,
onClose,
onChange,
speak,
value,
isActive,
activeAttributes,
isVisible
}) => {
const [text, setText] = (0, _element.useState)((0, _richText.getTextContent)((0, _richText.slice)(value)));
const [opensInNewWindow, setOpensInNewWindows] = (0, _element.useState)(activeAttributes.target === '_blank');
const [linkValues, setLinkValues] = (0, _element.useState)({
isActiveLink: isActive,
isRemovingLink: false
});
const {
shouldEnableBottomSheetMaxHeight,
onHandleClosingBottomSheet,
listProps
} = (0, _element.useContext)(_components.BottomSheetContext);
const navigation = (0, _native.useNavigation)();
const route = (0, _native.useRoute)();
const {
inputValue = activeAttributes.url || ''
} = route.params || {};
const onLinkCellPressed = () => {
shouldEnableBottomSheetMaxHeight(false);
navigation.navigate(_screens.default.picker, {
inputValue
});
};
(0, _element.useEffect)(() => {
onHandleClosingBottomSheet(() => {
submit(inputValue, {
skipStateUpdates: true
});
});
}, [inputValue, opensInNewWindow, text]);
(0, _element.useEffect)(() => {
const {
isActiveLink,
isRemovingLink
} = linkValues;
if (!!inputValue && !isActiveLink && isVisible) {
submitLink({
shouldCloseBottomSheet: false
});
} else if ((inputValue === '' && isActiveLink || isRemovingLink) && isVisible) {
removeLink({
shouldCloseBottomSheet: false
});
}
}, [inputValue, isVisible, linkValues.isActiveLink, linkValues.isRemovingLink]);
const clearFormat = ({
skipStateUpdates = false
} = {}) => {
onChange({
...value,
activeFormats: []
});
if (!skipStateUpdates) {
setLinkValues({
isActiveLink: false,
isRemovingLink: true
});
}
};
const submitLink = ({
shouldCloseBottomSheet = true,
skipStateUpdates = false
} = {}) => {
const url = (0, _url.prependHTTP)(inputValue);
const linkText = text || inputValue;
const format = (0, _utils.createLinkFormat)({
url,
opensInNewWindow,
text: linkText
});
let newAttributes;
if ((0, _richText.isCollapsed)(value) && !isActive) {
// Insert link.
const toInsert = (0, _richText.applyFormat)((0, _richText.create)({
text: linkText
}), format, 0, linkText.length);
newAttributes = (0, _richText.insert)(value, toInsert);
} else if (text !== (0, _richText.getTextContent)((0, _richText.slice)(value))) {
// Edit text in selected link.
const toInsert = (0, _richText.applyFormat)((0, _richText.create)({
text
}), format, 0, text.length);
newAttributes = (0, _richText.insert)(value, toInsert, value.start, value.end);
} else {
// Transform selected text into link.
newAttributes = (0, _richText.applyFormat)(value, format);
}
// Move selection to end of link.
const textLength = newAttributes.text.length;
// check for zero width spaces
if (newAttributes.end > textLength) {
newAttributes.start = textLength;
newAttributes.end = textLength;
} else {
newAttributes.start = newAttributes.end;
}
newAttributes.activeFormats = [];
onChange({
...newAttributes,
needsSelectionUpdate: true
});
if (!skipStateUpdates) {
setLinkValues({
isActiveLink: true,
isRemovingLink: false
});
}
if (!(0, _utils.isValidHref)(url)) {
speak((0, _i18n.__)('Warning: the link has been inserted but may have errors. Please test it.'), 'assertive');
} else if (isActive) {
speak((0, _i18n.__)('Link edited.'), 'assertive');
} else {
speak((0, _i18n.__)('Link inserted'), 'assertive');
}
if (shouldCloseBottomSheet) {
onClose();
}
};
const removeLink = ({
shouldCloseBottomSheet = true,
skipStateUpdates = false
} = {}) => {
clearFormat({
skipStateUpdates
});
onRemove();
if (shouldCloseBottomSheet) {
onClose();
}
};
const submit = (submitValue, {
skipStateUpdates = false
} = {}) => {
if (submitValue === '') {
removeLink({
skipStateUpdates
});
} else {
submitLink({
skipStateUpdates
});
}
};
(0, _element.useEffect)(() => {
const unsubscribe = navigation.addListener('focus', () => {
const {
params = {}
} = route;
if (!text && params.text) {
setText(params.text);
}
});
return unsubscribe;
}, [navigation, route.params?.text, text]);
return (0, _element.useMemo)(() => {
const shouldShowLinkOptions = !!inputValue;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.LinkCell, {
value: inputValue,
onPress: onLinkCellPressed
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.Cell, {
icon: _icons.textColor,
label: (0, _i18n.__)('Link text'),
value: text,
placeholder: (0, _i18n.__)('Add link text'),
onChangeValue: setText,
onSubmit: submit,
separatorType: shouldShowLinkOptions ? undefined : 'none'
}), shouldShowLinkOptions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.SwitchCell, {
icon: _icons.external,
label: (0, _i18n.__)('Open in new tab'),
value: opensInNewWindow,
onValueChange: setOpensInNewWindows,
separatorType: "fullWidth"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.Cell, {
label: (0, _i18n.__)('Remove link'),
labelStyle: _modal.default.clearLinkButton,
separatorType: "none",
onPress: removeLink
})]
})]
});
}, [inputValue, text, opensInNewWindow, listProps.safeAreaBottomInset]);
};
var _default = exports.default = LinkSettingsScreen;
//# sourceMappingURL=link-settings-screen.native.js.map