@wordpress/format-library
Version:
Format library for the WordPress editor.
134 lines (130 loc) • 4.63 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.textColor = void 0;
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _richText = require("@wordpress/rich-text");
var _compose = require("@wordpress/compose");
var _inlineNative = require("./inline.native.js");
var _inline = _interopRequireDefault(require("./inline"));
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const name = 'core/text-color';
const title = (0, _i18n.__)('Text color');
function getComputedStyleProperty(element, property) {
var _element$props$style;
const style = (_element$props$style = element?.props?.style) !== null && _element$props$style !== void 0 ? _element$props$style : {};
if (property === 'background-color') {
const {
backgroundColor,
baseColors
} = style;
if (backgroundColor !== 'transparent') {
return backgroundColor;
} else if (baseColors && baseColors?.color?.background) {
return baseColors?.color?.background;
}
return 'transparent';
}
}
function fillComputedColors(element, {
color,
backgroundColor
}) {
if (!color && !backgroundColor) {
return;
}
return {
color: color || getComputedStyleProperty(element, 'color'),
backgroundColor: getComputedStyleProperty(element, 'background-color')
};
}
function TextColorEdit({
value,
onChange,
isActive,
activeAttributes,
contentRef
}) {
const [allowCustomControl] = (0, _blockEditor.useSettings)('color.custom');
const colors = (0, _blockEditor.useMobileGlobalStylesColors)();
const [isAddingColor, setIsAddingColor] = (0, _element.useState)(false);
const colorIndicatorStyle = (0, _element.useMemo)(() => fillComputedColors(contentRef, (0, _inlineNative.getActiveColors)(value, name, colors)), [contentRef, value, colors]);
const hasColorsToChoose = colors.length || !allowCustomControl;
const outlineStyle = [(0, _compose.usePreferredColorSchemeStyle)(_style.default['components-inline-color__outline'], _style.default['components-inline-color__outline--dark']), {
borderWidth: _reactNative.StyleSheet.hairlineWidth
}];
if (!hasColorsToChoose && !isActive) {
return null;
}
const isActiveStyle = {
...colorIndicatorStyle,
...(!colorIndicatorStyle?.backgroundColor ? {
backgroundColor: 'transparent'
} : {}),
..._style.default['components-inline-color--is-active']
};
const customContainerStyles = _style.default['components-inline-color__button-container'];
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
children: [isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: outlineStyle,
pointerEvents: "none"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
name: "text-color",
isActive: isActive,
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: Object.keys(activeAttributes).length ? _icons.textColor : _icons.color,
style: colorIndicatorStyle?.color && {
color: colorIndicatorStyle.color
}
}),
title: title,
extraProps: {
isActiveStyle,
customContainerStyles
}
// If has no colors to choose but a color is active remove the color onClick
,
onClick: hasColorsToChoose ? () => setIsAddingColor(true) : () => onChange((0, _richText.removeFormat)(value, name))
})]
})
}), isAddingColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inline.default, {
name: name,
onClose: () => setIsAddingColor(false),
activeAttributes: activeAttributes,
value: value,
onChange: onChange,
contentRef: contentRef
})]
});
}
const textColor = exports.textColor = {
name,
title,
tagName: 'mark',
className: 'has-inline-color',
attributes: {
style: 'style',
class: 'class'
},
edit: TextColorEdit
};
//# sourceMappingURL=index.native.js.map