@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/build/components/rich-text/native/index.native.js

@@ -12,6 +12,7 @@ var _colord = require("colord");
 var _reactNativeAztec = _interopRequireDefault(require("@wordpress/react-native-aztec"));
 var _reactNativeBridge = require("@wordpress/react-native-bridge");
 var _blockEditor = require("@wordpress/block-editor");
+var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _data = require("@wordpress/data");
@@ -41,10 +42,6 @@ var _toolbarButtonWithOptions = _interopRequireDefault(require("./toolbar-button
  * Internal dependencies
  */
 
-const unescapeSpaces = text => {
-  return text.replace(/ | /gi, ' ');
-};
-
 // The flattened color palettes array is memoized to ensure that the same array instance is
 // returned for the colors palettes. This value might be used as a prop, so having the same
 // instance will prevent unnecessary re-renders of the RichText component.
@@ -77,21 +74,11 @@ class RichText extends _element.Component {
   constructor({
     value,
     selectionStart,
-    selectionEnd,
-    __unstableMultilineTag: multiline
+    selectionEnd
   }) {
     super(...arguments);
-    this.isMultiline = false;
-    if (multiline === true || multiline === 'p' || multiline === 'li') {
-      this.multilineTag = multiline === true ? 'p' : multiline;
-      this.isMultiline = true;
-    }
-    if (this.multilineTag === 'li') {
-      this.multilineWrapperTags = ['ul', 'ol'];
-    }
     this.isIOS = _reactNative.Platform.OS === 'ios';
     this.createRecord = this.createRecord.bind(this);
-    this.restoreParagraphTags = this.restoreParagraphTags.bind(this);
     this.onChangeFromAztec = this.onChangeFromAztec.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.handleEnter = this.handleEnter.bind(this);
@@ -159,7 +146,7 @@ class RichText extends _element.Component {
     const {
       activeFormats
     } = this.state;
-    const newFormats = (0, _getFormatColors.getFormatColors)(value, formats, colorPalette);
+    const newFormats = (0, _getFormatColors.getFormatColors)(formats, colorPalette);
     return {
       formats: newFormats,
       replacements,
@@ -187,8 +174,6 @@ class RichText extends _element.Component {
       ...(0, _richText.create)({
         html: this.value,
         range: null,
-        multilineTag: this.multilineTag,
-        multilineWrapperTags: this.multilineWrapperTags,
         preserveWhiteSpace
       })
     };
@@ -203,8 +188,7 @@ class RichText extends _element.Component {
   valueToFormat(value) {
     // Remove the outer root tags.
     return this.removeRootTagsProducedByAztec((0, _richText.toHTMLString)({
-      value,
-      multilineTag: this.multilineTag
+      value
     }));
   }
   getActiveFormatNames(record) {
@@ -250,7 +234,7 @@ class RichText extends _element.Component {
       __unstableOnCreateUndoLevel: onCreateUndoLevel
     } = this.props;
     // If the content is the same, no level needs to be created.
-    if (this.lastHistoryValue === this.value) {
+    if (this.lastHistoryValue.toString() === this.value.toString()) {
       return;
     }
     onCreateUndoLevel();
@@ -288,9 +272,9 @@ class RichText extends _element.Component {
     if (this.shouldDropEventFromAztec(event, 'onChange')) {
       return;
     }
-    const contentWithoutRootTag = this.removeRootTagsProducedByAztec(unescapeSpaces(event.nativeEvent.text));
+    const contentWithoutRootTag = this.removeRootTagsProducedByAztec(event.nativeEvent.text);
     // On iOS, onChange can be triggered after selection changes, even though there are no content changes.
-    if (contentWithoutRootTag === this.value) {
+    if (contentWithoutRootTag === this.value.toString()) {
       return;
     }
     this.lastEventCount = event.nativeEvent.eventCount;
@@ -300,26 +284,16 @@ class RichText extends _element.Component {
     this.lastAztecEventType = 'input';
   }
   onTextUpdate(event) {
-    const contentWithoutRootTag = this.removeRootTagsProducedByAztec(unescapeSpaces(event.nativeEvent.text));
-    let formattedContent = contentWithoutRootTag;
-    if (!this.isIOS) {
-      formattedContent = this.restoreParagraphTags(contentWithoutRootTag, this.multilineTag);
-    }
+    const contentWithoutRootTag = this.removeRootTagsProducedByAztec(event.nativeEvent.text);
     this.debounceCreateUndoLevel();
-    const refresh = this.value !== formattedContent;
-    this.value = formattedContent;
+    const refresh = this.value.toString() !== contentWithoutRootTag;
+    this.value = contentWithoutRootTag;
 
     // We don't want to refresh if our goal is just to create a record.
     if (refresh) {
-      this.props.onChange(formattedContent);
+      this.props.onChange(contentWithoutRootTag);
     }
   }
-  restoreParagraphTags(value, tag) {
-    if (tag === 'p' && (!value || !value.startsWith('<p>'))) {
-      return '<p>' + value + '</p>';
-    }
-    return value;
-  }
 
   /*
    * Handles any case where the content of the AztecRN instance has changed in size
@@ -530,7 +504,7 @@ class RichText extends _element.Component {
     this.isTouched = false;
 
     // Check if value is up to date with latest state of native AztecView.
-    if (event.nativeEvent.text && event.nativeEvent.text !== this.props.value) {
+    if (event.nativeEvent.text && event.nativeEvent.text !== this.props.value.toString()) {
       this.onTextUpdate(event);
     }
     if (this.props.onBlur) {
@@ -547,7 +521,7 @@ class RichText extends _element.Component {
     // and we did not just trigger a text update
     // `onChange` could be the last event and could have been triggered a long time ago so
     // this approach is not perfectly reliable.
-    const isManual = this.lastAztecEventType !== 'input' && this.props.value === this.value;
+    const isManual = this.lastAztecEventType !== 'input' && this.props.value.toString() === this.value.toString();
     if (hasChanged && isManual) {
       const value = this.createRecord();
       const activeFormats = (0, _richText.getActiveFormats)(value);
@@ -599,8 +573,8 @@ class RichText extends _element.Component {
     const realEnd = Math.max(start, end);
 
     // Check and dicsard stray event, where the text and selection is equal to the ones already cached.
-    const contentWithoutRootTag = this.removeRootTagsProducedByAztec(unescapeSpaces(event.nativeEvent.text));
-    if (contentWithoutRootTag === this.value && realStart === this.selectionStart && realEnd === this.selectionEnd) {
+    const contentWithoutRootTag = this.removeRootTagsProducedByAztec(event.nativeEvent.text);
+    if (contentWithoutRootTag === this.value.toString() && realStart === this.selectionStart && realEnd === this.selectionEnd) {
       return;
     }
     this.comesFromAztec = true;
@@ -635,16 +609,12 @@ class RichText extends _element.Component {
     if (Array.isArray(value)) {
       return (0, _richText.create)({
         html: _blocks.childrenBlock.toHTML(value),
-        multilineTag: this.multilineTag,
-        multilineWrapperTags: this.multilineWrapperTags,
         preserveWhiteSpace
       });
     }
     if (this.props.format === 'string') {
       return (0, _richText.create)({
         html: value,
-        multilineTag: this.multilineTag,
-        multilineWrapperTags: this.multilineWrapperTags,
         preserveWhiteSpace
       });
     }
@@ -684,7 +654,7 @@ class RichText extends _element.Component {
     //  with only some of the text, while the virtual keyboard's suggestion system does its magic.
     // ** compare with this.lastContent for optimizing performance by not forcing Aztec with text it already has
     // , but compare with props.value to not lose "half word" text because of Android virtual keyb autosuggestion behavior
-    if (typeof nextProps.value !== 'undefined' && typeof this.props.value !== 'undefined' && (!this.comesFromAztec || !this.firedAfterTextChanged) && nextProps.value !== this.props.value) {
+    if (typeof nextProps.value !== 'undefined' && typeof this.props.value !== 'undefined' && (!this.comesFromAztec || !this.firedAfterTextChanged) && nextProps.value.toString() !== this.props.value.toString()) {
       // Gutenberg seems to try to mirror the caret state even on events that only change the content so,
       //  let's force caret update if state has selection set.
       if (typeof nextProps.selectionStart !== 'undefined' && typeof nextProps.selectionEnd !== 'undefined') {
@@ -723,11 +693,6 @@ class RichText extends _element.Component {
       this.onSelectionChange(this.props.selectionStart || 0, this.props.selectionEnd || 0);
     }
   }
-  componentWillUnmount() {
-    if (this._editor.isFocused()) {
-      this._editor.blur();
-    }
-  }
   componentDidUpdate(prevProps) {
     const {
       style,
@@ -736,7 +701,7 @@ class RichText extends _element.Component {
     const {
       currentFontSize
     } = this.state;
-    if (this.props.value !== this.value) {
+    if (this.props.value.toString() !== this.value.toString()) {
       this.value = this.props.value;
     }
     const {
@@ -751,10 +716,10 @@ class RichText extends _element.Component {
       // if its internal value hasn't change. When created, default value is 0, 0.
       this.onSelectionChange(this.props.selectionStart || 0, this.props.selectionEnd || 0);
     } else if (this.shouldFocusTextInputAfterMerge(prevProps)) {
-      var _this$value$length;
+      var _this$value$toString$;
       // Since this is happening when merging blocks, the selection should be at the last character position.
       // As a fallback the internal selectionEnd value is used.
-      const lastCharacterPosition = (_this$value$length = this.value?.length) !== null && _this$value$length !== void 0 ? _this$value$length : this.selectionEnd;
+      const lastCharacterPosition = (_this$value$toString$ = this.value?.toString().length) !== null && _this$value$toString$ !== void 0 ? _this$value$toString$ : this.selectionEnd;
       this._editor.focus();
       this.props.onSelectionChange(lastCharacterPosition, lastCharacterPosition);
     } else if (!isSelected && prevIsSelected) {
@@ -782,7 +747,7 @@ class RichText extends _element.Component {
       value = '';
     }
     // On android if content is empty we need to send no content or else the placeholder will not show.
-    if (!this.isIOS && (value === '' || value === EMPTY_PARAGRAPH_TAGS)) {
+    if (!this.isIOS && (value.toString() === '' || value.toString() === EMPTY_PARAGRAPH_TAGS)) {
       return '';
     }
     if (tagName) {
@@ -821,7 +786,7 @@ class RichText extends _element.Component {
     if (!fontSize) {
       return fontSize;
     }
-    const selectedPxValue = (_getPxFromCssUnit = (0, _blockEditor.getPxFromCssUnit)(fontSize, cssUnitOptions)) !== null && _getPxFromCssUnit !== void 0 ? _getPxFromCssUnit : DEFAULT_FONT_SIZE;
+    const selectedPxValue = (_getPxFromCssUnit = (0, _components.getPxFromCssUnit)(fontSize, cssUnitOptions)) !== null && _getPxFromCssUnit !== void 0 ? _getPxFromCssUnit : DEFAULT_FONT_SIZE;
     return parseFloat(selectedPxValue);
   }
   getFontSize(props) {
@@ -1116,7 +1081,7 @@ class RichText extends _element.Component {
       fontWeight: this.props.fontWeight,
       fontStyle: this.props.fontStyle,
       disableEditingMenu: disableEditingMenu,
-      isMultiline: this.isMultiline,
+      isMultiline: false,
       textAlign: this.props.textAlign,
       ...(this.isIOS ? {
         maxWidth