@wordpress/rich-text - npm Package Compare versions

Comparing version 5.0.8 to 5.1.0

build-module/component/index.native.js

@@ -45,2 +45,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { remove } from '../remove';
+import { getFormatColors } from '../get-format-colors';
 import styles from './style.scss';
@@ -56,3 +57,4 @@ import ToolbarButtonWithOptions from './toolbar-button-with-options';
   'core/italic': 'italic',
-  'core/strikethrough': 'strikethrough'
+  'core/strikethrough': 'strikethrough',
+  'core/text-color': 'mark'
 };
@@ -114,3 +116,3 @@ const EMPTY_PARAGRAPH_TAGS = '<p></p>';
       height: 0,
-      dimensions: Dimensions.get('window')
+      currentFontSize: this.getFontSize(arguments[0])
     };
@@ -137,3 +139,4 @@ this.needsSelectionUpdate = false;
       selectionStart: start,
-      selectionEnd: end
+      selectionEnd: end,
+      colorPalette
     } = this.props;
@@ -143,2 +146,3 @@ const {
     } = this.props;
+    const currentValue = this.formatToValue(value);
     const {
@@ -148,8 +152,9 @@ formats,
       text
-    } = this.formatToValue(value);
+    } = currentValue;
     const {
       activeFormats
     } = this.state;
+    const newFormats = getFormatColors(value, formats, colorPalette);
     return {
-      formats,
+      formats: newFormats,
       replacements,
@@ -707,8 +712,8 @@ text,
       this.lastEventCount += 100; // bump by a hundred, hopefully native hasn't bombarded the JS side in the meantime.
-    } else {
-      window.console.warn("Tried to bump the RichText native event counter but was 'undefined'. Aborting bump.");
-    }
+    } // no need to bump when 'undefined' as native side won't receive the key when the value is undefined, and that will cause force updating anyway,
+    //   see https://github.com/WordPress/gutenberg/blob/82e578dcc75e67891c750a41a04c1e31994192fc/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java#L213-L215
+
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps, nextState) {
     if (nextProps.tagName !== this.props.tagName || nextProps.reversed !== this.props.reversed || nextProps.start !== this.props.start) {
@@ -753,3 +758,3 @@ this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
 
-      if ((nextProps === null || nextProps === void 0 ? void 0 : (_nextProps$style = nextProps.style) === null || _nextProps$style === void 0 ? void 0 : _nextProps$style.fontSize) !== ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$style = _this$props2.style) === null || _this$props2$style === void 0 ? void 0 : _this$props2$style.fontSize) || (nextProps === null || nextProps === void 0 ? void 0 : (_nextProps$style2 = nextProps.style) === null || _nextProps$style2 === void 0 ? void 0 : _nextProps$style2.lineHeight) !== ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$style = _this$props3.style) === null || _this$props3$style === void 0 ? void 0 : _this$props3$style.lineHeight)) {
+      if ((nextProps === null || nextProps === void 0 ? void 0 : (_nextProps$style = nextProps.style) === null || _nextProps$style === void 0 ? void 0 : _nextProps$style.fontSize) !== ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$style = _this$props2.style) === null || _this$props2$style === void 0 ? void 0 : _this$props2$style.fontSize) && nextState.currentFontSize !== this.state.currentFontSize || nextState.currentFontSize !== this.state.currentFontSize || (nextProps === null || nextProps === void 0 ? void 0 : (_nextProps$style2 = nextProps.style) === null || _nextProps$style2 === void 0 ? void 0 : _nextProps$style2.lineHeight) !== ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$style = _this$props3.style) === null || _this$props3$style === void 0 ? void 0 : _this$props3$style.lineHeight)) {
         this.needsSelectionUpdate = true;
@@ -782,2 +787,12 @@ this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
   componentDidUpdate(prevProps) {
+    var _prevProps$style;
+
+    const {
+      style,
+      tagName
+    } = this.props;
+    const {
+      currentFontSize
+    } = this.state;
+
     if (this.props.value !== this.value) {
@@ -802,2 +817,16 @@ this.value = this.props.value;
       this._editor.blur();
+    } // For font size values changes from the font size picker
+    // we compare previous values to refresh the selected font size,
+    // this is also used when the tag name changes
+    // e.g Heading block and a level change like h1->h2.
+
+
+    const currentFontSizeStyle = this.getParsedFontSize(style === null || style === void 0 ? void 0 : style.fontSize);
+    const prevFontSizeStyle = this.getParsedFontSize(prevProps === null || prevProps === void 0 ? void 0 : (_prevProps$style = prevProps.style) === null || _prevProps$style === void 0 ? void 0 : _prevProps$style.fontSize);
+    const isDifferentTag = prevProps.tagName !== tagName;
+
+    if (currentFontSize && (currentFontSizeStyle || prevFontSizeStyle) && currentFontSizeStyle !== currentFontSize || isDifferentTag) {
+      this.setState({
+        currentFontSize: this.getFontSize(this.props)
+      });
     }
@@ -849,11 +878,34 @@ }
 
-  getFontSize() {
-    var _baseGlobalStyles$ele, _baseGlobalStyles$ele2, _baseGlobalStyles$ele3, _baseGlobalStyles$typ, _this$props$style;
+  getParsedFontSize(fontSize) {
+    var _getPxFromCssUnit;
 
     const {
+      height,
+      width
+    } = Dimensions.get('window');
+    const cssUnitOptions = {
+      height,
+      width,
+      fontSize: DEFAULT_FONT_SIZE
+    };
+
+    if (!fontSize) {
+      return fontSize;
+    }
+
+    const selectedPxValue = (_getPxFromCssUnit = getPxFromCssUnit(fontSize, cssUnitOptions)) !== null && _getPxFromCssUnit !== void 0 ? _getPxFromCssUnit : DEFAULT_FONT_SIZE;
+    return parseFloat(selectedPxValue);
+  }
+
+  getFontSize(props) {
+    var _baseGlobalStyles$ele, _baseGlobalStyles$ele2, _baseGlobalStyles$ele3, _baseGlobalStyles$typ;
+
+    const {
       baseGlobalStyles,
-      tagName
-    } = this.props;
+      tagName,
+      fontSize,
+      style
+    } = props;
     const tagNameFontSize = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$ele = baseGlobalStyles.elements) === null || _baseGlobalStyles$ele === void 0 ? void 0 : (_baseGlobalStyles$ele2 = _baseGlobalStyles$ele[tagName]) === null || _baseGlobalStyles$ele2 === void 0 ? void 0 : (_baseGlobalStyles$ele3 = _baseGlobalStyles$ele2.typography) === null || _baseGlobalStyles$ele3 === void 0 ? void 0 : _baseGlobalStyles$ele3.fontSize;
-    let fontSize = DEFAULT_FONT_SIZE;
+    let newFontSize = DEFAULT_FONT_SIZE; // For block-based themes, get the default editor font size.
 
@@ -863,34 +915,31 @@ if (baseGlobalStyles !== null && baseGlobalStyles !== void 0 && (_baseGlobalStyles$typ = baseGlobalStyles.typography) !== null && _baseGlobalStyles$typ !== void 0 && _baseGlobalStyles$typ.fontSize) {
 
-      fontSize = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$typ2 = baseGlobalStyles.typography) === null || _baseGlobalStyles$typ2 === void 0 ? void 0 : _baseGlobalStyles$typ2.fontSize;
-    }
+      newFontSize = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$typ2 = baseGlobalStyles.typography) === null || _baseGlobalStyles$typ2 === void 0 ? void 0 : _baseGlobalStyles$typ2.fontSize;
+    } // For block-based themes, get the default element font size
+    // e.g h1, h2.
 
+
     if (tagNameFontSize) {
-      fontSize = tagNameFontSize;
-    }
+      newFontSize = tagNameFontSize;
+    } // For font size values provided from the styles,
+    // usually from values set from the font size picker.
 
-    if ((_this$props$style = this.props.style) !== null && _this$props$style !== void 0 && _this$props$style.fontSize) {
-      fontSize = this.props.style.fontSize;
-    }
 
-    if (this.props.fontSize && !tagNameFontSize) {
-      fontSize = this.props.fontSize;
-    }
+    if (style !== null && style !== void 0 && style.fontSize) {
+      newFontSize = style.fontSize;
+    } // Fall-back to a font size provided from its props (if there's any)
+    // and there are no other default values to use.
 
-    const {
-      height,
-      width
-    } = this.state.dimensions;
-    const cssUnitOptions = {
-      height,
-      width,
-      fontSize: DEFAULT_FONT_SIZE
-    }; // We need to always convert to px units because the selected value
+
+    if (fontSize && !tagNameFontSize && !(style !== null && style !== void 0 && style.fontSize)) {
+      newFontSize = fontSize;
+    } // We need to always convert to px units because the selected value
     // could be coming from the web where it could be stored as a different unit.
 
-    const selectedPxValue = getPxFromCssUnit(fontSize, cssUnitOptions);
-    return parseFloat(selectedPxValue);
+
+    const selectedPxValue = this.getParsedFontSize(newFontSize);
+    return selectedPxValue;
   }
 
   getLineHeight() {
-    var _baseGlobalStyles$ele4, _baseGlobalStyles$ele5, _baseGlobalStyles$ele6, _baseGlobalStyles$typ3, _this$props$style2;
+    var _baseGlobalStyles$ele4, _baseGlobalStyles$ele5, _baseGlobalStyles$ele6, _baseGlobalStyles$typ3, _this$props$style;
 
@@ -918,3 +967,3 @@ const {
 
-    if ((_this$props$style2 = this.props.style) !== null && _this$props$style2 !== void 0 && _this$props$style2.lineHeight) {
+    if ((_this$props$style = this.props.style) !== null && _this$props$style !== void 0 && _this$props$style.lineHeight) {
       lineHeight = parseFloat(this.props.style.lineHeight);
@@ -926,2 +975,19 @@ }
 
+  getBlockUseDefaultFont() {
+    // For block-based themes it enables using the defaultFont
+    // in Aztec for iOS so it allows customizing the font size
+    // for the Preformatted/Code and Heading blocks.
+    if (!this.isIOS) {
+      return;
+    }
+
+    const {
+      baseGlobalStyles,
+      tagName
+    } = this.props;
+    const isBlockBasedTheme = baseGlobalStyles && Object.entries(baseGlobalStyles).length !== 0;
+    const tagsToMatch = /pre|h([1-6])$/gm;
+    return isBlockBasedTheme && tagsToMatch.test(tagName);
+  }
+
   render() {
@@ -944,5 +1010,9 @@ var _baseGlobalStyles$col, _baseGlobalStyles$col2;
     } = this.props;
+    const {
+      currentFontSize
+    } = this.state;
     const record = this.getRecord();
     const html = this.getHtmlToRender(record, tagName);
     const editableProps = this.getEditableProps();
+    const blockUseDefaultFont = this.getBlockUseDefaultFont();
     const placeholderStyle = getStylesFromColorScheme(styles.richTextPlaceholder, styles.richTextPlaceholderDark);
@@ -952,3 +1022,3 @@ const {
     } = placeholderStyle;
-    const fontSize = this.getFontSize();
+    const fontSize = currentFontSize;
     const lineHeight = this.getLineHeight();
@@ -1045,2 +1115,3 @@ const {
       },
+      blockUseDefaultFont: blockUseDefaultFont,
       text: {
@@ -1050,3 +1121,4 @@ text: html,
         selection,
-        linkTextColor: (style === null || style === void 0 ? void 0 : style.linkColor) || defaultTextDecorationColor
+        linkTextColor: (style === null || style === void 0 ? void 0 : style.linkColor) || defaultTextDecorationColor,
+        tag: tagName
       },
@@ -1086,2 +1158,3 @@ placeholder: this.props.placeholder,
     })), isSelected && createElement(Fragment, null, createElement(FormatEdit, {
+      forwardedRef: this._editor,
       formatTypes: formatTypes,
@@ -1117,2 +1190,4 @@ value: record,
 export default compose([withSelect((select, _ref3) => {
+  var _settings$__experimen, _settings$__experimen2, _ref4, _ref5, _experimentalFeatures;
+
   let {
@@ -1131,2 +1206,4 @@ clientId
   const baseGlobalStyles = settings === null || settings === void 0 ? void 0 : settings.__experimentalGlobalStylesBaseStyles;
+  const experimentalFeatures = settings === null || settings === void 0 ? void 0 : (_settings$__experimen = settings.__experimentalFeatures) === null || _settings$__experimen === void 0 ? void 0 : (_settings$__experimen2 = _settings$__experimen.color) === null || _settings$__experimen2 === void 0 ? void 0 : _settings$__experimen2.palette;
+  const colorPalette = (_ref4 = (_ref5 = (_experimentalFeatures = experimentalFeatures === null || experimentalFeatures === void 0 ? void 0 : experimentalFeatures.user) !== null && _experimentalFeatures !== void 0 ? _experimentalFeatures : experimentalFeatures === null || experimentalFeatures === void 0 ? void 0 : experimentalFeatures.theme) !== null && _ref5 !== void 0 ? _ref5 : experimentalFeatures === null || experimentalFeatures === void 0 ? void 0 : experimentalFeatures.default) !== null && _ref4 !== void 0 ? _ref4 : settings === null || settings === void 0 ? void 0 : settings.colors;
   return {
@@ -1138,5 +1215,6 @@ areMentionsSupported: getSettings('capabilities').mentions === true,
     },
-    baseGlobalStyles
+    baseGlobalStyles,
+    colorPalette
   };
 }), withPreferredColorScheme, withFormatTypes])(RichText);
 //# sourceMappingURL=index.native.js.map

build/component/index.native.js

@@ -68,2 +68,4 @@ "use strict";
 
+var _getFormatColors = require("../get-format-colors");
+
 var _style = _interopRequireDefault(require("./style.scss"));
@@ -93,3 +95,4 @@
   'core/italic': 'italic',
-  'core/strikethrough': 'strikethrough'
+  'core/strikethrough': 'strikethrough',
+  'core/text-color': 'mark'
 };
@@ -152,3 +155,3 @@ const EMPTY_PARAGRAPH_TAGS = '<p></p>';
       height: 0,
-      dimensions: _reactNative.Dimensions.get('window')
+      currentFontSize: this.getFontSize(arguments[0])
     };
@@ -175,3 +178,4 @@ this.needsSelectionUpdate = false;
       selectionStart: start,
-      selectionEnd: end
+      selectionEnd: end,
+      colorPalette
     } = this.props;
@@ -181,2 +185,3 @@ const {
     } = this.props;
+    const currentValue = this.formatToValue(value);
     const {
@@ -186,8 +191,9 @@ formats,
       text
-    } = this.formatToValue(value);
+    } = currentValue;
     const {
       activeFormats
     } = this.state;
+    const newFormats = (0, _getFormatColors.getFormatColors)(value, formats, colorPalette);
     return {
-      formats,
+      formats: newFormats,
       replacements,
@@ -745,8 +751,8 @@ text,
       this.lastEventCount += 100; // bump by a hundred, hopefully native hasn't bombarded the JS side in the meantime.
-    } else {
-      window.console.warn("Tried to bump the RichText native event counter but was 'undefined'. Aborting bump.");
-    }
+    } // no need to bump when 'undefined' as native side won't receive the key when the value is undefined, and that will cause force updating anyway,
+    //   see https://github.com/WordPress/gutenberg/blob/82e578dcc75e67891c750a41a04c1e31994192fc/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java#L213-L215
+
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps, nextState) {
     if (nextProps.tagName !== this.props.tagName || nextProps.reversed !== this.props.reversed || nextProps.start !== this.props.start) {
@@ -791,3 +797,3 @@ this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
 
-      if ((nextProps === null || nextProps === void 0 ? void 0 : (_nextProps$style = nextProps.style) === null || _nextProps$style === void 0 ? void 0 : _nextProps$style.fontSize) !== ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$style = _this$props2.style) === null || _this$props2$style === void 0 ? void 0 : _this$props2$style.fontSize) || (nextProps === null || nextProps === void 0 ? void 0 : (_nextProps$style2 = nextProps.style) === null || _nextProps$style2 === void 0 ? void 0 : _nextProps$style2.lineHeight) !== ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$style = _this$props3.style) === null || _this$props3$style === void 0 ? void 0 : _this$props3$style.lineHeight)) {
+      if ((nextProps === null || nextProps === void 0 ? void 0 : (_nextProps$style = nextProps.style) === null || _nextProps$style === void 0 ? void 0 : _nextProps$style.fontSize) !== ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$style = _this$props2.style) === null || _this$props2$style === void 0 ? void 0 : _this$props2$style.fontSize) && nextState.currentFontSize !== this.state.currentFontSize || nextState.currentFontSize !== this.state.currentFontSize || (nextProps === null || nextProps === void 0 ? void 0 : (_nextProps$style2 = nextProps.style) === null || _nextProps$style2 === void 0 ? void 0 : _nextProps$style2.lineHeight) !== ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$style = _this$props3.style) === null || _this$props3$style === void 0 ? void 0 : _this$props3$style.lineHeight)) {
         this.needsSelectionUpdate = true;
@@ -820,2 +826,12 @@ this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
   componentDidUpdate(prevProps) {
+    var _prevProps$style;
+
+    const {
+      style,
+      tagName
+    } = this.props;
+    const {
+      currentFontSize
+    } = this.state;
+
     if (this.props.value !== this.value) {
@@ -840,2 +856,16 @@ this.value = this.props.value;
       this._editor.blur();
+    } // For font size values changes from the font size picker
+    // we compare previous values to refresh the selected font size,
+    // this is also used when the tag name changes
+    // e.g Heading block and a level change like h1->h2.
+
+
+    const currentFontSizeStyle = this.getParsedFontSize(style === null || style === void 0 ? void 0 : style.fontSize);
+    const prevFontSizeStyle = this.getParsedFontSize(prevProps === null || prevProps === void 0 ? void 0 : (_prevProps$style = prevProps.style) === null || _prevProps$style === void 0 ? void 0 : _prevProps$style.fontSize);
+    const isDifferentTag = prevProps.tagName !== tagName;
+
+    if (currentFontSize && (currentFontSizeStyle || prevFontSizeStyle) && currentFontSizeStyle !== currentFontSize || isDifferentTag) {
+      this.setState({
+        currentFontSize: this.getFontSize(this.props)
+      });
     }
@@ -887,11 +917,35 @@ }
 
-  getFontSize() {
-    var _baseGlobalStyles$ele, _baseGlobalStyles$ele2, _baseGlobalStyles$ele3, _baseGlobalStyles$typ, _this$props$style;
+  getParsedFontSize(fontSize) {
+    var _getPxFromCssUnit;
 
     const {
+      height,
+      width
+    } = _reactNative.Dimensions.get('window');
+
+    const cssUnitOptions = {
+      height,
+      width,
+      fontSize: DEFAULT_FONT_SIZE
+    };
+
+    if (!fontSize) {
+      return fontSize;
+    }
+
+    const selectedPxValue = (_getPxFromCssUnit = (0, _blockEditor.getPxFromCssUnit)(fontSize, cssUnitOptions)) !== null && _getPxFromCssUnit !== void 0 ? _getPxFromCssUnit : DEFAULT_FONT_SIZE;
+    return parseFloat(selectedPxValue);
+  }
+
+  getFontSize(props) {
+    var _baseGlobalStyles$ele, _baseGlobalStyles$ele2, _baseGlobalStyles$ele3, _baseGlobalStyles$typ;
+
+    const {
       baseGlobalStyles,
-      tagName
-    } = this.props;
+      tagName,
+      fontSize,
+      style
+    } = props;
     const tagNameFontSize = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$ele = baseGlobalStyles.elements) === null || _baseGlobalStyles$ele === void 0 ? void 0 : (_baseGlobalStyles$ele2 = _baseGlobalStyles$ele[tagName]) === null || _baseGlobalStyles$ele2 === void 0 ? void 0 : (_baseGlobalStyles$ele3 = _baseGlobalStyles$ele2.typography) === null || _baseGlobalStyles$ele3 === void 0 ? void 0 : _baseGlobalStyles$ele3.fontSize;
-    let fontSize = DEFAULT_FONT_SIZE;
+    let newFontSize = DEFAULT_FONT_SIZE; // For block-based themes, get the default editor font size.
 
@@ -901,34 +955,31 @@ if (baseGlobalStyles !== null && baseGlobalStyles !== void 0 && (_baseGlobalStyles$typ = baseGlobalStyles.typography) !== null && _baseGlobalStyles$typ !== void 0 && _baseGlobalStyles$typ.fontSize) {
 
-      fontSize = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$typ2 = baseGlobalStyles.typography) === null || _baseGlobalStyles$typ2 === void 0 ? void 0 : _baseGlobalStyles$typ2.fontSize;
-    }
+      newFontSize = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$typ2 = baseGlobalStyles.typography) === null || _baseGlobalStyles$typ2 === void 0 ? void 0 : _baseGlobalStyles$typ2.fontSize;
+    } // For block-based themes, get the default element font size
+    // e.g h1, h2.
 
+
     if (tagNameFontSize) {
-      fontSize = tagNameFontSize;
-    }
+      newFontSize = tagNameFontSize;
+    } // For font size values provided from the styles,
+    // usually from values set from the font size picker.
 
-    if ((_this$props$style = this.props.style) !== null && _this$props$style !== void 0 && _this$props$style.fontSize) {
-      fontSize = this.props.style.fontSize;
-    }
 
-    if (this.props.fontSize && !tagNameFontSize) {
-      fontSize = this.props.fontSize;
-    }
+    if (style !== null && style !== void 0 && style.fontSize) {
+      newFontSize = style.fontSize;
+    } // Fall-back to a font size provided from its props (if there's any)
+    // and there are no other default values to use.
 
-    const {
-      height,
-      width
-    } = this.state.dimensions;
-    const cssUnitOptions = {
-      height,
-      width,
-      fontSize: DEFAULT_FONT_SIZE
-    }; // We need to always convert to px units because the selected value
+
+    if (fontSize && !tagNameFontSize && !(style !== null && style !== void 0 && style.fontSize)) {
+      newFontSize = fontSize;
+    } // We need to always convert to px units because the selected value
     // could be coming from the web where it could be stored as a different unit.
 
-    const selectedPxValue = (0, _blockEditor.getPxFromCssUnit)(fontSize, cssUnitOptions);
-    return parseFloat(selectedPxValue);
+
+    const selectedPxValue = this.getParsedFontSize(newFontSize);
+    return selectedPxValue;
   }
 
   getLineHeight() {
-    var _baseGlobalStyles$ele4, _baseGlobalStyles$ele5, _baseGlobalStyles$ele6, _baseGlobalStyles$typ3, _this$props$style2;
+    var _baseGlobalStyles$ele4, _baseGlobalStyles$ele5, _baseGlobalStyles$ele6, _baseGlobalStyles$typ3, _this$props$style;
 
@@ -956,3 +1007,3 @@ const {
 
-    if ((_this$props$style2 = this.props.style) !== null && _this$props$style2 !== void 0 && _this$props$style2.lineHeight) {
+    if ((_this$props$style = this.props.style) !== null && _this$props$style !== void 0 && _this$props$style.lineHeight) {
       lineHeight = parseFloat(this.props.style.lineHeight);
@@ -964,2 +1015,19 @@ }
 
+  getBlockUseDefaultFont() {
+    // For block-based themes it enables using the defaultFont
+    // in Aztec for iOS so it allows customizing the font size
+    // for the Preformatted/Code and Heading blocks.
+    if (!this.isIOS) {
+      return;
+    }
+
+    const {
+      baseGlobalStyles,
+      tagName
+    } = this.props;
+    const isBlockBasedTheme = baseGlobalStyles && Object.entries(baseGlobalStyles).length !== 0;
+    const tagsToMatch = /pre|h([1-6])$/gm;
+    return isBlockBasedTheme && tagsToMatch.test(tagName);
+  }
+
   render() {
@@ -982,5 +1050,9 @@ var _baseGlobalStyles$col, _baseGlobalStyles$col2;
     } = this.props;
+    const {
+      currentFontSize
+    } = this.state;
     const record = this.getRecord();
     const html = this.getHtmlToRender(record, tagName);
     const editableProps = this.getEditableProps();
+    const blockUseDefaultFont = this.getBlockUseDefaultFont();
     const placeholderStyle = getStylesFromColorScheme(_style.default.richTextPlaceholder, _style.default.richTextPlaceholderDark);
@@ -990,3 +1062,3 @@ const {
     } = placeholderStyle;
-    const fontSize = this.getFontSize();
+    const fontSize = currentFontSize;
     const lineHeight = this.getLineHeight();
@@ -1083,2 +1155,3 @@ const {
       },
+      blockUseDefaultFont: blockUseDefaultFont,
       text: {
@@ -1088,3 +1161,4 @@ text: html,
         selection,
-        linkTextColor: (style === null || style === void 0 ? void 0 : style.linkColor) || defaultTextDecorationColor
+        linkTextColor: (style === null || style === void 0 ? void 0 : style.linkColor) || defaultTextDecorationColor,
+        tag: tagName
       },
@@ -1124,2 +1198,3 @@ placeholder: this.props.placeholder,
     })), isSelected && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_formatEdit.default, {
+      forwardedRef: this._editor,
       formatTypes: formatTypes,
@@ -1157,2 +1232,4 @@ value: record,
 var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref3) => {
+  var _settings$__experimen, _settings$__experimen2, _ref4, _ref5, _experimentalFeatures;
+
   let {
@@ -1171,2 +1248,4 @@ clientId
   const baseGlobalStyles = settings === null || settings === void 0 ? void 0 : settings.__experimentalGlobalStylesBaseStyles;
+  const experimentalFeatures = settings === null || settings === void 0 ? void 0 : (_settings$__experimen = settings.__experimentalFeatures) === null || _settings$__experimen === void 0 ? void 0 : (_settings$__experimen2 = _settings$__experimen.color) === null || _settings$__experimen2 === void 0 ? void 0 : _settings$__experimen2.palette;
+  const colorPalette = (_ref4 = (_ref5 = (_experimentalFeatures = experimentalFeatures === null || experimentalFeatures === void 0 ? void 0 : experimentalFeatures.user) !== null && _experimentalFeatures !== void 0 ? _experimentalFeatures : experimentalFeatures === null || experimentalFeatures === void 0 ? void 0 : experimentalFeatures.theme) !== null && _ref5 !== void 0 ? _ref5 : experimentalFeatures === null || experimentalFeatures === void 0 ? void 0 : experimentalFeatures.default) !== null && _ref4 !== void 0 ? _ref4 : settings === null || settings === void 0 ? void 0 : settings.colors;
   return {
@@ -1178,3 +1257,4 @@ areMentionsSupported: getSettings('capabilities').mentions === true,
     },
-    baseGlobalStyles
+    baseGlobalStyles,
+    colorPalette
   };
@@ -1181,0 +1261,0 @@ }), _compose.withPreferredColorScheme, withFormatTypes])(RichText);

CHANGELOG.md

@@ -5,2 +5,4 @@ <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
+## 5.1.0 (2022-01-27)
+
 ## 5.0.0 (2021-07-29)
@@ -7,0 +9,0 @@

LICENSE.md

 ## Gutenberg
 
-    Copyright 2016-2021 by the contributors
+    Copyright 2016-2022 by the contributors
 
@@ -5,0 +5,0 @@ **License for Contributions (on and after April 15, 2021)**

package.json

 {
 	"name": "@wordpress/rich-text",
-	"version": "5.0.8",
+	"version": "5.1.0",
 	"description": "Rich text value and manipulation API.",
@@ -33,11 +33,11 @@ "author": "The WordPress Contributors",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/data": "^6.1.5",
-		"@wordpress/dom": "^3.2.7",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/escape-html": "^2.2.3",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/is-shallow-equal": "^4.2.1",
-		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/a11y": "^3.3.0",
+		"@wordpress/compose": "^5.1.0",
+		"@wordpress/data": "^6.2.0",
+		"@wordpress/dom": "^3.3.0",
+		"@wordpress/element": "^4.1.0",
+		"@wordpress/escape-html": "^2.3.0",
+		"@wordpress/i18n": "^4.3.0",
+		"@wordpress/is-shallow-equal": "^4.3.0",
+		"@wordpress/keycodes": "^3.3.0",
 		"classnames": "^2.3.1",
@@ -51,3 +51,3 @@ "lodash": "^4.17.21",
 	},
-	"gitHead": "04883dd8275ee52245a45c8899eb720b91055c50"
+	"gitHead": "d95ccb9366e249133cdb1d7b25c382446b9ee502"
 }

src/component/index.native.js

@@ -45,2 +45,3 @@ /*eslint no-console: ["error", { allow: ["warn"] }] */
 import { remove } from '../remove';
+import { getFormatColors } from '../get-format-colors';
 import styles from './style.scss';
@@ -57,2 +58,3 @@ import ToolbarButtonWithOptions from './toolbar-button-with-options';
 	'core/strikethrough': 'strikethrough',
+	'core/text-color': 'mark',
 };
@@ -127,3 +129,3 @@
 			height: 0,
-			dimensions: Dimensions.get( 'window' ),
+			currentFontSize: this.getFontSize( arguments[ 0 ] ),
 		};
@@ -149,9 +151,22 @@ this.needsSelectionUpdate = false;
 	getRecord() {
-		const { selectionStart: start, selectionEnd: end } = this.props;
+		const {
+			selectionStart: start,
+			selectionEnd: end,
+			colorPalette,
+		} = this.props;
 		const { value } = this.props;
+		const currentValue = this.formatToValue( value );
 
-		const { formats, replacements, text } = this.formatToValue( value );
+		const { formats, replacements, text } = currentValue;
 		const { activeFormats } = this.state;
+		const newFormats = getFormatColors( value, formats, colorPalette );
 
-		return { formats, replacements, text, start, end, activeFormats };
+		return {
+			formats: newFormats,
+			replacements,
+			text,
+			start,
+			end,
+			activeFormats,
+		};
 	}
@@ -706,10 +721,7 @@
 			this.lastEventCount += 100; // bump by a hundred, hopefully native hasn't bombarded the JS side in the meantime.
-		} else {
-			window.console.warn(
-				"Tried to bump the RichText native event counter but was 'undefined'. Aborting bump."
-			);
-		}
+		} // no need to bump when 'undefined' as native side won't receive the key when the value is undefined, and that will cause force updating anyway,
+		//   see https://github.com/WordPress/gutenberg/blob/82e578dcc75e67891c750a41a04c1e31994192fc/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java#L213-L215
 	}
 
-	shouldComponentUpdate( nextProps ) {
+	shouldComponentUpdate( nextProps, nextState ) {
 		if (
@@ -772,3 +784,6 @@ nextProps.tagName !== this.props.tagName ||
 			if (
-				nextProps?.style?.fontSize !== this.props?.style?.fontSize ||
+				( nextProps?.style?.fontSize !== this.props?.style?.fontSize &&
+					nextState.currentFontSize !==
+						this.state.currentFontSize ) ||
+				nextState.currentFontSize !== this.state.currentFontSize ||
 				nextProps?.style?.lineHeight !== this.props?.style?.lineHeight
@@ -808,2 +823,5 @@ ) {
 	componentDidUpdate( prevProps ) {
+		const { style, tagName } = this.props;
+		const { currentFontSize } = this.state;
+
 		if ( this.props.value !== this.value ) {
@@ -827,2 +845,22 @@ this.value = this.props.value;
 		}
+
+		// For font size values changes from the font size picker
+		// we compare previous values to refresh the selected font size,
+		// this is also used when the tag name changes
+		// e.g Heading block and a level change like h1->h2.
+		const currentFontSizeStyle = this.getParsedFontSize( style?.fontSize );
+		const prevFontSizeStyle = this.getParsedFontSize(
+			prevProps?.style?.fontSize
+		);
+		const isDifferentTag = prevProps.tagName !== tagName;
+		if (
+			( currentFontSize &&
+				( currentFontSizeStyle || prevFontSizeStyle ) &&
+				currentFontSizeStyle !== currentFontSize ) ||
+			isDifferentTag
+		) {
+			this.setState( {
+				currentFontSize: this.getFontSize( this.props ),
+			} );
+		}
 	}
@@ -870,31 +908,51 @@
 
-	getFontSize() {
-		const { baseGlobalStyles, tagName } = this.props;
+	getParsedFontSize( fontSize ) {
+		const { height, width } = Dimensions.get( 'window' );
+		const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
+
+		if ( ! fontSize ) {
+			return fontSize;
+		}
+
+		const selectedPxValue =
+			getPxFromCssUnit( fontSize, cssUnitOptions ) ?? DEFAULT_FONT_SIZE;
+
+		return parseFloat( selectedPxValue );
+	}
+
+	getFontSize( props ) {
+		const { baseGlobalStyles, tagName, fontSize, style } = props;
 		const tagNameFontSize =
 			baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize;
 
-		let fontSize = DEFAULT_FONT_SIZE;
+		let newFontSize = DEFAULT_FONT_SIZE;
 
+		// For block-based themes, get the default editor font size.
 		if ( baseGlobalStyles?.typography?.fontSize ) {
-			fontSize = baseGlobalStyles?.typography?.fontSize;
+			newFontSize = baseGlobalStyles?.typography?.fontSize;
 		}
 
+		// For block-based themes, get the default element font size
+		// e.g h1, h2.
 		if ( tagNameFontSize ) {
-			fontSize = tagNameFontSize;
+			newFontSize = tagNameFontSize;
 		}
 
-		if ( this.props.style?.fontSize ) {
-			fontSize = this.props.style.fontSize;
+		// For font size values provided from the styles,
+		// usually from values set from the font size picker.
+		if ( style?.fontSize ) {
+			newFontSize = style.fontSize;
 		}
 
-		if ( this.props.fontSize && ! tagNameFontSize ) {
-			fontSize = this.props.fontSize;
+		// Fall-back to a font size provided from its props (if there's any)
+		// and there are no other default values to use.
+		if ( fontSize && ! tagNameFontSize && ! style?.fontSize ) {
+			newFontSize = fontSize;
 		}
-		const { height, width } = this.state.dimensions;
-		const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
+
 		// We need to always convert to px units because the selected value
 		// could be coming from the web where it could be stored as a different unit.
-		const selectedPxValue = getPxFromCssUnit( fontSize, cssUnitOptions );
+		const selectedPxValue = this.getParsedFontSize( newFontSize );
 
-		return parseFloat( selectedPxValue );
+		return selectedPxValue;
 	}
@@ -928,2 +986,18 @@
 
+	getBlockUseDefaultFont() {
+		// For block-based themes it enables using the defaultFont
+		// in Aztec for iOS so it allows customizing the font size
+		// for the Preformatted/Code and Heading blocks.
+		if ( ! this.isIOS ) {
+			return;
+		}
+
+		const { baseGlobalStyles, tagName } = this.props;
+		const isBlockBasedTheme =
+			baseGlobalStyles && Object.entries( baseGlobalStyles ).length !== 0;
+		const tagsToMatch = /pre|h([1-6])$/gm;
+
+		return isBlockBasedTheme && tagsToMatch.test( tagName );
+	}
+
 	render() {
@@ -944,2 +1018,3 @@ const {
 		} = this.props;
+		const { currentFontSize } = this.state;
 
@@ -949,2 +1024,3 @@ const record = this.getRecord();
 		const editableProps = this.getEditableProps();
+		const blockUseDefaultFont = this.getBlockUseDefaultFont();
 
@@ -957,3 +1033,3 @@ const placeholderStyle = getStylesFromColorScheme(
 		const { color: defaultPlaceholderTextColor } = placeholderStyle;
-		const fontSize = this.getFontSize();
+		const fontSize = currentFontSize;
 		const lineHeight = this.getLineHeight();
@@ -1056,2 +1132,3 @@
 					} }
+					blockUseDefaultFont={ blockUseDefaultFont }
 					text={ {
@@ -1063,2 +1140,3 @@ text: html,
 							style?.linkColor || defaultTextDecorationColor,
+						tag: tagName,
 					} }
@@ -1115,2 +1193,3 @@ placeholder={ this.props.placeholder }
 						<FormatEdit
+							forwardedRef={ this._editor }
 							formatTypes={ formatTypes }
@@ -1163,2 +1242,9 @@ value={ record }
 		const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles;
+		const experimentalFeatures =
+			settings?.__experimentalFeatures?.color?.palette;
+		const colorPalette =
+			experimentalFeatures?.user ??
+			experimentalFeatures?.theme ??
+			experimentalFeatures?.default ??
+			settings?.colors;
 
@@ -1171,2 +1257,3 @@ return {
 			baseGlobalStyles,
+			colorPalette,
 		};
@@ -1173,0 +1260,0 @@ } ),

src/test/index.native.js

@@ -1,2 +0,1 @@
-jest.mock( '@wordpress/data/src/components/use-select' );
 /**
@@ -6,10 +5,21 @@ * External dependencies
 import { Dimensions } from 'react-native';
-import { render } from 'test/helpers';
+import { getEditorHtml, render, initializeEditor } from 'test/helpers';
+
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { select } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { coreBlocks, registerBlock } from '@wordpress/block-library';
+import {
+	getBlockTypes,
+	setDefaultBlockName,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import '@wordpress/jest-console';
+
 /**
  * Internal dependencies
  */
+import { store as richTextStore } from '../store';
 import RichText from '../component/index.native';
@@ -29,12 +39,8 @@
 	};
-	const selectMock = {
-		getFormatTypes: jest.fn().mockReturnValue( [] ),
-		getBlockParents: jest.fn(),
-		getBlock: jest.fn(),
-		getSettings: jest.fn().mockReturnValue( DEFAULT_GLOBAL_STYLES ),
-	};
-
-	useSelect.mockImplementation( ( callback ) => {
-		return callback( () => selectMock );
-	} );
+	jest.spyOn( select( blockEditorStore ), 'getSettings' ).mockReturnValue(
+		DEFAULT_GLOBAL_STYLES
+	);
+	jest.spyOn( select( richTextStore ), 'getFormatTypes' ).mockReturnValue(
+		[]
+	);
 };
@@ -49,2 +55,16 @@
 
+	const decimalUnitsData = [
+		[ '1.125rem', 18 ],
+		[ '10.52px', 11 ],
+		[ '2.3136em', 37 ],
+		[ '1.42vh', 19 ],
+	];
+
+	beforeAll( () => {
+		// Register Paragraph block
+		const paragraph = coreBlocks[ 'core/paragraph' ];
+		registerBlock( paragraph );
+		setDefaultBlockName( paragraph.name );
+	} );
+
 	beforeEach( () => {
@@ -58,2 +78,9 @@ mockGlobalSettings( {} );
 
+	afterAll( () => {
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
 	describe( 'Font Size', () => {
@@ -116,6 +143,23 @@ it( 'should display rich text at the DEFAULT font size.', () => {
 
-		it( `should display rich text at the font size computed from the LOCAL \`fontSize\` CSS with HIGHEST PRIORITY
+		test.each( decimalUnitsData )(
+			`should display rich text at the PROVIDED font size computed from the selected GLOBAL
+		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS with decimal value: %s`,
+			( unit, expected ) => {
+				// Arrange
+				mockGlobalSettings( { fontSize: unit } );
+				// Act
+				const { getByA11yLabel } = render(
+					<RichText accessibilityLabel={ 'editor' } />
+				);
+				// Assert
+				const actualFontSize = getByA11yLabel( 'editor' ).props
+					.fontSize;
+				expect( actualFontSize ).toBe( expected );
+			}
+		);
+
+		it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with HIGHEST PRIORITY
 		when CSS is provided ambiguously from ALL possible sources.`, () => {
 			// Arrange
-			const expectedFontSize = 2;
+			const expectedFontSize = 1;
 			mockGlobalSettings( { fontSize: '0' } );
@@ -177,3 +221,36 @@ // Act
 		} );
+
+		it( 'should update the font size when style prop with font size property is provided', () => {
+			// Arrange
+			const fontSize = '10';
+			const style = { fontSize: '12' };
+			// Act
+			const screen = render( <RichText fontSize={ fontSize } /> );
+			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
+			// Assert
+			expect( screen.toJSON() ).toMatchSnapshot();
+		} );
+
+		it( 'renders component with style and font size', () => {
+			// Arrange
+			const initialHtml = `<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
+					<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
+					<!-- /wp:paragraph -->`;
+			// Act
+			initializeEditor( { initialHtml } );
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'should update the font size with decimals when style prop with font size property is provided', () => {
+			// Arrange
+			const fontSize = '10';
+			const style = { fontSize: '12.56px' };
+			// Act
+			const screen = render( <RichText fontSize={ fontSize } /> );
+			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
+			// Assert
+			expect( screen.toJSON() ).toMatchSnapshot();
+		} );
 	} );
 } );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1372629

increased by2.99%

Number of package files

359

increased by1.7%

Lines of code

19864

increased by2.06%

Dependency changes

• Updated@wordpress/a11y@^3.3.0

• Updated@wordpress/compose@^5.1.0

• Updated@wordpress/data@^6.2.0

• Updated@wordpress/dom@^3.3.0

• Updated@wordpress/element@^4.1.0

• Updated@wordpress/escape-html@^2.3.0

• Updated@wordpress/i18n@^4.3.0

• Updated@wordpress/is-shallow-equal@^4.3.0

• Updated@wordpress/keycodes@^3.3.0