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

package/build-module/components/rich-text/native/get-format-colors.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["getColorObjectByAttributeValues","FORMAT_TYPE","REGEX_TO_MATCH","TAGS_TO_SEARCH","getFormatColors","value","formats","colors","search","newFormats","slice","forEach","format","currentFormat","type","className","attributes","class","style","replace","split","currentClass","match","colorSlug","colorObject","currentStyles","indexOf","color","join"],"sources":["@wordpress/block-editor/src/components/rich-text/native/get-format-colors.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { getColorObjectByAttributeValues } from '../../../components/colors';\n\nconst FORMAT_TYPE = 'core/text-color';\nconst REGEX_TO_MATCH = /^has-(.*)-color$/;\nconst TAGS_TO_SEARCH = /\\<mark/;\n\nexport function getFormatColors( value, formats, colors ) {\n\tif ( value?.search( TAGS_TO_SEARCH ) !== -1 ) {\n\t\tconst newFormats = formats.slice();\n\n\t\tnewFormats.forEach( ( format ) => {\n\t\t\tformat.forEach( ( currentFormat ) => {\n\t\t\t\tif ( currentFormat?.type === FORMAT_TYPE ) {\n\t\t\t\t\tconst className = currentFormat?.attributes?.class;\n\t\t\t\t\tcurrentFormat.attributes.style =\n\t\t\t\t\t\tcurrentFormat.attributes.style.replace( / /g, '' );\n\n\t\t\t\t\tclassName?.split( ' ' ).forEach( ( currentClass ) => {\n\t\t\t\t\t\tconst match = currentClass.match( REGEX_TO_MATCH );\n\t\t\t\t\t\tif ( match ) {\n\t\t\t\t\t\t\tconst [ , colorSlug ] =\n\t\t\t\t\t\t\t\tcurrentClass.match( REGEX_TO_MATCH );\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tcolorSlug\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst currentStyles =\n\t\t\t\t\t\t\t\tcurrentFormat?.attributes?.style;\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcolorObject &&\n\t\t\t\t\t\t\t\t( ! currentStyles ||\n\t\t\t\t\t\t\t\t\tcurrentStyles?.indexOf(\n\t\t\t\t\t\t\t\t\t\tcolorObject.color\n\t\t\t\t\t\t\t\t\t) === -1 )\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcurrentFormat.attributes.style = [\n\t\t\t\t\t\t\t\t\t`color: ${ colorObject.color }`,\n\t\t\t\t\t\t\t\t\tcurrentStyles,\n\t\t\t\t\t\t\t\t].join( ';' );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\n\t\treturn newFormats;\n\t}\n\n\treturn formats;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,+BAA+B,QAAQ,4BAA4B;AAE5E,MAAMC,WAAW,GAAG,iBAAiB;AACrC,MAAMC,cAAc,GAAG,kBAAkB;AACzC,MAAMC,cAAc,GAAG,QAAQ;AAE/B,OAAO,SAASC,eAAeA,CAAEC,KAAK,EAAEC,OAAO,EAAEC,MAAM,EAAG;EACzD,IAAKF,KAAK,EAAEG,MAAM,CAAEL,cAAe,CAAC,KAAK,CAAC,CAAC,EAAG;IAC7C,MAAMM,UAAU,GAAGH,OAAO,CAACI,KAAK,CAAC,CAAC;IAElCD,UAAU,CAACE,OAAO,CAAIC,MAAM,IAAM;MACjCA,MAAM,CAACD,OAAO,CAAIE,aAAa,IAAM;QACpC,IAAKA,aAAa,EAAEC,IAAI,KAAKb,WAAW,EAAG;UAC1C,MAAMc,SAAS,GAAGF,aAAa,EAAEG,UAAU,EAAEC,KAAK;UAClDJ,aAAa,CAACG,UAAU,CAACE,KAAK,GAC7BL,aAAa,CAACG,UAAU,CAACE,KAAK,CAACC,OAAO,CAAE,IAAI,EAAE,EAAG,CAAC;UAEnDJ,SAAS,EAAEK,KAAK,CAAE,GAAI,CAAC,CAACT,OAAO,CAAIU,YAAY,IAAM;YACpD,MAAMC,KAAK,GAAGD,YAAY,CAACC,KAAK,CAAEpB,cAAe,CAAC;YAClD,IAAKoB,KAAK,EAAG;cACZ,MAAM,GAAIC,SAAS,CAAE,GACpBF,YAAY,CAACC,KAAK,CAAEpB,cAAe,CAAC;cACrC,MAAMsB,WAAW,GAAGxB,+BAA+B,CAClDO,MAAM,EACNgB,SACD,CAAC;cACD,MAAME,aAAa,GAClBZ,aAAa,EAAEG,UAAU,EAAEE,KAAK;cACjC,IACCM,WAAW,KACT,CAAEC,aAAa,IAChBA,aAAa,EAAEC,OAAO,CACrBF,WAAW,CAACG,KACb,CAAC,KAAK,CAAC,CAAC,CAAE,EACV;gBACDd,aAAa,CAACG,UAAU,CAACE,KAAK,GAAG,CAC/B,UAAUM,WAAW,CAACG,KAAO,EAAC,EAC/BF,aAAa,CACb,CAACG,IAAI,CAAE,GAAI,CAAC;cACd;YACD;UACD,CAAE,CAAC;QACJ;MACD,CAAE,CAAC;IACJ,CAAE,CAAC;IAEH,OAAOnB,UAAU;EAClB;EAEA,OAAOH,OAAO;AACf"}
+{"version":3,"names":["getColorObjectByAttributeValues","FORMAT_TYPE","REGEX_TO_MATCH","getFormatColors","formats","colors","newFormats","slice","forEach","format","currentFormat","type","className","attributes","class","split","currentClass","match","colorSlug","colorObject","currentStyles","style","indexOf","color","join"],"sources":["@wordpress/block-editor/src/components/rich-text/native/get-format-colors.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { getColorObjectByAttributeValues } from '../../../components/colors';\n\nconst FORMAT_TYPE = 'core/text-color';\nconst REGEX_TO_MATCH = /^has-(.*)-color$/;\n\nexport function getFormatColors( formats, colors ) {\n\tconst newFormats = formats.slice();\n\n\t// We are looping through a sparse array where empty indices will be\n\t// skipped.\n\tnewFormats.forEach( ( format ) => {\n\t\tformat.forEach( ( currentFormat ) => {\n\t\t\tif ( currentFormat?.type === FORMAT_TYPE ) {\n\t\t\t\tconst className = currentFormat?.attributes?.class;\n\n\t\t\t\tclassName?.split( ' ' ).forEach( ( currentClass ) => {\n\t\t\t\t\tconst match = currentClass.match( REGEX_TO_MATCH );\n\t\t\t\t\tif ( match ) {\n\t\t\t\t\t\tconst [ , colorSlug ] =\n\t\t\t\t\t\t\tcurrentClass.match( REGEX_TO_MATCH );\n\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\tcolorSlug\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst currentStyles = currentFormat?.attributes?.style;\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tcolorObject &&\n\t\t\t\t\t\t\t( ! currentStyles ||\n\t\t\t\t\t\t\t\tcurrentStyles?.indexOf( colorObject.color ) ===\n\t\t\t\t\t\t\t\t\t-1 )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tcurrentFormat.attributes.style = [\n\t\t\t\t\t\t\t\t`color: ${ colorObject.color }`,\n\t\t\t\t\t\t\t\tcurrentStyles,\n\t\t\t\t\t\t\t].join( ';' );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn newFormats;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,+BAA+B,QAAQ,4BAA4B;AAE5E,MAAMC,WAAW,GAAG,iBAAiB;AACrC,MAAMC,cAAc,GAAG,kBAAkB;AAEzC,OAAO,SAASC,eAAeA,CAAEC,OAAO,EAAEC,MAAM,EAAG;EAClD,MAAMC,UAAU,GAAGF,OAAO,CAACG,KAAK,CAAC,CAAC;;EAElC;EACA;EACAD,UAAU,CAACE,OAAO,CAAIC,MAAM,IAAM;IACjCA,MAAM,CAACD,OAAO,CAAIE,aAAa,IAAM;MACpC,IAAKA,aAAa,EAAEC,IAAI,KAAKV,WAAW,EAAG;QAC1C,MAAMW,SAAS,GAAGF,aAAa,EAAEG,UAAU,EAAEC,KAAK;QAElDF,SAAS,EAAEG,KAAK,CAAE,GAAI,CAAC,CAACP,OAAO,CAAIQ,YAAY,IAAM;UACpD,MAAMC,KAAK,GAAGD,YAAY,CAACC,KAAK,CAAEf,cAAe,CAAC;UAClD,IAAKe,KAAK,EAAG;YACZ,MAAM,GAAIC,SAAS,CAAE,GACpBF,YAAY,CAACC,KAAK,CAAEf,cAAe,CAAC;YACrC,MAAMiB,WAAW,GAAGnB,+BAA+B,CAClDK,MAAM,EACNa,SACD,CAAC;YACD,MAAME,aAAa,GAAGV,aAAa,EAAEG,UAAU,EAAEQ,KAAK;YACtD,IACCF,WAAW,KACT,CAAEC,aAAa,IAChBA,aAAa,EAAEE,OAAO,CAAEH,WAAW,CAACI,KAAM,CAAC,KAC1C,CAAC,CAAC,CAAE,EACL;cACDb,aAAa,CAACG,UAAU,CAACQ,KAAK,GAAG,CAC/B,UAAUF,WAAW,CAACI,KAAO,EAAC,EAC/BH,aAAa,CACb,CAACI,IAAI,CAAE,GAAI,CAAC;YACd;UACD;QACD,CAAE,CAAC;MACJ;IACD,CAAE,CAAC;EACJ,CAAE,CAAC;EAEH,OAAOlB,UAAU;AAClB"}

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

@@ -13,7 +13,8 @@ import { colord } from 'colord';
  */
 import RCTAztecView from '@wordpress/react-native-aztec';
 import { showUserSuggestions, showXpostSuggestions } from '@wordpress/react-native-bridge';
-import { BlockFormatControls, getPxFromCssUnit } from '@wordpress/block-editor';
+import { BlockFormatControls } from '@wordpress/block-editor';
+import { getPxFromCssUnit } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { compose, debounce, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
@@ -33,9 +34,6 @@ import FormatEdit from './format-edit';
 import { getFormatColors } from './get-format-colors';
 import styles from './style.scss';
 import ToolbarButtonWithOptions from './toolbar-button-with-options';
-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
@@ -69,21 +67,11 @@ export class RichText extends 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 = 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);
@@ -151,7 +139,7 @@ export class RichText extends Component {
     const {
       activeFormats
     } = this.state;
-    const newFormats = getFormatColors(value, formats, colorPalette);
+    const newFormats = getFormatColors(formats, colorPalette);
     return {
       formats: newFormats,
       replacements,
@@ -179,8 +167,6 @@ export class RichText extends Component {
       ...create({
         html: this.value,
         range: null,
-        multilineTag: this.multilineTag,
-        multilineWrapperTags: this.multilineWrapperTags,
         preserveWhiteSpace
       })
     };
@@ -195,8 +181,7 @@ export class RichText extends Component {
   valueToFormat(value) {
     // Remove the outer root tags.
     return this.removeRootTagsProducedByAztec(toHTMLString({
-      value,
-      multilineTag: this.multilineTag
+      value
     }));
   }
   getActiveFormatNames(record) {
@@ -242,7 +227,7 @@ export class RichText extends 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();
@@ -280,9 +265,9 @@ export class RichText extends 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;
@@ -292,26 +277,16 @@ export class RichText extends 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
@@ -522,7 +497,7 @@ export class RichText extends 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) {
@@ -539,7 +514,7 @@ export class RichText extends 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 = getActiveFormats(value);
@@ -591,8 +566,8 @@ export class RichText extends 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;
@@ -627,16 +602,12 @@ export class RichText extends Component {
     if (Array.isArray(value)) {
       return create({
         html: childrenBlock.toHTML(value),
-        multilineTag: this.multilineTag,
-        multilineWrapperTags: this.multilineWrapperTags,
         preserveWhiteSpace
       });
     }
     if (this.props.format === 'string') {
       return create({
         html: value,
-        multilineTag: this.multilineTag,
-        multilineWrapperTags: this.multilineWrapperTags,
         preserveWhiteSpace
       });
     }
@@ -676,7 +647,7 @@ export class RichText extends 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') {
@@ -715,11 +686,6 @@ export class RichText extends Component {
       this.onSelectionChange(this.props.selectionStart || 0, this.props.selectionEnd || 0);
     }
   }
-  componentWillUnmount() {
-    if (this._editor.isFocused()) {
-      this._editor.blur();
-    }
-  }
   componentDidUpdate(prevProps) {
     const {
       style,
@@ -728,7 +694,7 @@ export class RichText extends 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 {
@@ -743,10 +709,10 @@ export class RichText extends 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) {
@@ -774,7 +740,7 @@ export class RichText extends 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) {
@@ -1108,7 +1074,7 @@ export class RichText extends Component {
       fontWeight: this.props.fontWeight,
       fontStyle: this.props.fontStyle,
       disableEditingMenu: disableEditingMenu,
-      isMultiline: this.isMultiline,
+      isMultiline: false,
       textAlign: this.props.textAlign,
       ...(this.isIOS ? {
         maxWidth