@wordpress/block-editor 12.14.0 → 12.16.0

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

@@ -4,31 +4,29 @@
 import { getColorObjectByAttributeValues } from '../../../components/colors';
 const FORMAT_TYPE = 'core/text-color';
 const REGEX_TO_MATCH = /^has-(.*)-color$/;
-const TAGS_TO_SEARCH = /\<mark/;
-export function getFormatColors(value, formats, colors) {
-  if (value?.search(TAGS_TO_SEARCH) !== -1) {
-    const newFormats = formats.slice();
-    newFormats.forEach(format => {
-      format.forEach(currentFormat => {
-        if (currentFormat?.type === FORMAT_TYPE) {
-          const className = currentFormat?.attributes?.class;
-          currentFormat.attributes.style = currentFormat.attributes.style.replace(/ /g, '');
-          className?.split(' ').forEach(currentClass => {
-            const match = currentClass.match(REGEX_TO_MATCH);
-            if (match) {
-              const [, colorSlug] = currentClass.match(REGEX_TO_MATCH);
-              const colorObject = getColorObjectByAttributeValues(colors, colorSlug);
-              const currentStyles = currentFormat?.attributes?.style;
-              if (colorObject && (!currentStyles || currentStyles?.indexOf(colorObject.color) === -1)) {
-                currentFormat.attributes.style = [`color: ${colorObject.color}`, currentStyles].join(';');
-              }
+export function getFormatColors(formats, colors) {
+  const newFormats = formats.slice();
+
+  // We are looping through a sparse array where empty indices will be
+  // skipped.
+  newFormats.forEach(format => {
+    format.forEach(currentFormat => {
+      if (currentFormat?.type === FORMAT_TYPE) {
+        const className = currentFormat?.attributes?.class;
+        className?.split(' ').forEach(currentClass => {
+          const match = currentClass.match(REGEX_TO_MATCH);
+          if (match) {
+            const [, colorSlug] = currentClass.match(REGEX_TO_MATCH);
+            const colorObject = getColorObjectByAttributeValues(colors, colorSlug);
+            const currentStyles = currentFormat?.attributes?.style;
+            if (colorObject && (!currentStyles || currentStyles?.indexOf(colorObject.color) === -1)) {
+              currentFormat.attributes.style = [`color: ${colorObject.color}`, currentStyles].join(';');
             }
-          });
-        }
-      });
+          }
+        });
+      }
     });
-    return newFormats;
-  }
-  return formats;
+  });
+  return newFormats;
 }
 //# sourceMappingURL=get-format-colors.native.js.map

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

@@ -69,21 +69,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 +141,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 +169,6 @@ export class RichText extends Component {
       ...create({
         html: this.value,
         range: null,
-        multilineTag: this.multilineTag,
-        multilineWrapperTags: this.multilineWrapperTags,
         preserveWhiteSpace
       })
     };
@@ -195,8 +183,7 @@ export class RichText extends Component {
   valueToFormat(value) {
     // Remove the outer root tags.
     return this.removeRootTagsProducedByAztec(toHTMLString({
-      value,
-      multilineTag: this.multilineTag
+      value
     }));
   }
   getActiveFormatNames(record) {
@@ -293,24 +280,14 @@ export class RichText extends Component {
   }
   onTextUpdate(event) {
     const contentWithoutRootTag = this.removeRootTagsProducedByAztec(unescapeSpaces(event.nativeEvent.text));
-    let formattedContent = contentWithoutRootTag;
-    if (!this.isIOS) {
-      formattedContent = this.restoreParagraphTags(contentWithoutRootTag, this.multilineTag);
-    }
     this.debounceCreateUndoLevel();
-    const refresh = this.value !== formattedContent;
-    this.value = formattedContent;
+    const refresh = this.value !== 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);
-    }
-  }
-  restoreParagraphTags(value, tag) {
-    if (tag === 'p' && (!value || !value.startsWith('<p>'))) {
-      return '<p>' + value + '</p>';
+      this.props.onChange(contentWithoutRootTag);
     }
-    return value;
   }
 
   /*
@@ -556,6 +533,30 @@ export class RichText extends Component {
     }
     return shouldDrop;
   }
+
+  /**
+   * Determines whether the text input should receive focus after an update.
+   * For cases where a RichText with a value is merged with an empty one.
+   *
+   * @param {Object} prevProps - The previous props of the component.
+   * @return {boolean} True if the text input should receive focus, false otherwise.
+   */
+  shouldFocusTextInputAfterMerge(prevProps) {
+    const {
+      __unstableIsSelected: isSelected,
+      blockIsSelected,
+      selectionStart,
+      selectionEnd,
+      __unstableMobileNoFocusOnMount
+    } = this.props;
+    const {
+      __unstableIsSelected: prevIsSelected,
+      blockIsSelected: prevBlockIsSelected
+    } = prevProps;
+    const noSelectionValues = selectionStart === undefined && selectionEnd === undefined;
+    const textInputWasNotFocused = !prevIsSelected && !isSelected;
+    return !__unstableMobileNoFocusOnMount && noSelectionValues && textInputWasNotFocused && !prevBlockIsSelected && blockIsSelected;
+  }
   onSelectionChangeFromAztec(start, end, text, event) {
     if (this.shouldDropEventFromAztec(event, 'onSelectionChange')) {
       return;
@@ -603,16 +604,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
       });
     }
@@ -707,17 +704,24 @@ export class RichText extends Component {
     if (this.props.value !== this.value) {
       this.value = this.props.value;
     }
-    const {
-      __unstableIsSelected: isSelected
-    } = this.props;
     const {
       __unstableIsSelected: prevIsSelected
     } = prevProps;
+    const {
+      __unstableIsSelected: isSelected
+    } = this.props;
     if (isSelected && !prevIsSelected) {
       this._editor.focus();
       // Update selection props explicitly when component is selected as Aztec won't call onSelectionChange
       // 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;
+      // 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;
+      this._editor.focus();
+      this.props.onSelectionChange(lastCharacterPosition, lastCharacterPosition);
     } else if (!isSelected && prevIsSelected) {
       this._editor.blur();
     }
@@ -1077,7 +1081,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