@wordpress/block-editor 12.26.0 → 13.0.1

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

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /* eslint no-console: ["error", { allow: ["warn"] }] */
 
 /**
@@ -38,6 +37,9 @@ import ToolbarButtonWithOptions from './toolbar-button-with-options';
 // 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.
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const flatColorPalettes = memize(colorsPalettes => [...(colorsPalettes?.theme || []), ...(colorsPalettes?.custom || []), ...(colorsPalettes?.default || [])]);
 const getSelectionColor = memize((currentSelectionColor, defaultSelectionColor, baseGlobalStyles, isBlockBasedTheme) => {
   let selectionColor = defaultSelectionColor;
@@ -348,8 +350,10 @@ export class RichText extends Component {
     const {
       start,
       end,
-      text
+      text,
+      activeFormats
     } = value;
+    const hasActiveFormats = activeFormats && !!activeFormats.length;
     let newValue;
 
     // Always handle full content deletion ourselves.
@@ -361,7 +365,7 @@ export class RichText extends Component {
     }
 
     // Only process delete if the key press occurs at an uncollapsed edge.
-    if (!onDelete || !isCollapsed(value) || isReverse && start !== 0 || !isReverse && end !== text.length) {
+    if (!isCollapsed(value) || hasActiveFormats || isReverse && start !== 0 || !isReverse && end !== text.length) {
       return;
     }
     onDelete({
@@ -1022,84 +1026,89 @@ export class RichText extends Component {
     const selectionColor = getSelectionColor(this.props.selectionColor, defaultSelectionColor, baseGlobalStyles, this.getIsBlockBasedTheme());
     const EditableView = props => {
       this.customEditableOnKeyDown = props?.onKeyDown;
-      return createElement(Fragment, null);
+      return /*#__PURE__*/_jsx(_Fragment, {});
     };
-    return createElement(View, {
-      style: containerStyles
-    }, children && children({
-      isSelected,
-      value: record,
-      onChange: this.onFormatChange,
-      onFocus: () => {},
-      editableProps,
-      editableTagName: EditableView
-    }), createElement(RCTAztecView, {
-      accessibilityLabel: accessibilityLabel,
-      ref: ref => {
-        this._editor = ref;
-        if (this.props.nativeEditorRef) {
-          this.props.nativeEditorRef(ref);
-        }
-      },
-      style: {
-        backgroundColor: styles.richText.backgroundColor,
-        ...style,
-        ...(this.isIOS && minWidth && maxWidth ? {
-          width
-        } : {
+    return /*#__PURE__*/_jsxs(View, {
+      style: containerStyles,
+      children: [children && children({
+        isSelected,
+        value: record,
+        onChange: this.onFormatChange,
+        onFocus: () => {},
+        editableProps,
+        editableTagName: EditableView
+      }), /*#__PURE__*/_jsx(RCTAztecView, {
+        accessibilityLabel: accessibilityLabel,
+        ref: ref => {
+          this._editor = ref;
+          if (this.props.nativeEditorRef) {
+            this.props.nativeEditorRef(ref);
+          }
+        },
+        style: {
+          backgroundColor: styles.richText.backgroundColor,
+          ...style,
+          ...(this.isIOS && minWidth && maxWidth ? {
+            width
+          } : {
+            maxWidth
+          }),
+          minHeight: this.state.height
+        },
+        blockUseDefaultFont: blockUseDefaultFont,
+        text: {
+          text: html,
+          eventCount: this.lastEventCount,
+          selection,
+          linkTextColor,
+          tag: tagName
+        },
+        placeholder: this.props.placeholder,
+        placeholderTextColor: this.getPlaceholderTextColor(),
+        deleteEnter: this.props.deleteEnter,
+        onChange: this.onChangeFromAztec,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        onKeyDown: this.onKeyDown,
+        triggerKeyCodes: disableEditingMenu ? [] : this.suggestionOptions().map(op => op.triggerChar),
+        onPaste: this.onPaste,
+        activeFormats: this.getActiveFormatNames(record),
+        onContentSizeChange: this.onContentSizeChange,
+        onSelectionChange: this.onSelectionChangeFromAztec,
+        blockType: {
+          tag: tagName
+        },
+        color: style && style.color || parentBlockStyles && parentBlockStyles.color || baseGlobalStyles && baseGlobalStyles?.color?.text || defaultColor,
+        maxImagesWidth: 200,
+        fontFamily: this.props.fontFamily || defaultFontFamily,
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        fontWeight: this.props.fontWeight,
+        fontStyle: this.props.fontStyle,
+        disableEditingMenu: disableEditingMenu,
+        isMultiline: false,
+        textAlign: this.props.textAlign,
+        ...(this.isIOS ? {
           maxWidth
-        }),
-        minHeight: this.state.height
-      },
-      blockUseDefaultFont: blockUseDefaultFont,
-      text: {
-        text: html,
-        eventCount: this.lastEventCount,
-        selection,
-        linkTextColor,
-        tag: tagName
-      },
-      placeholder: this.props.placeholder,
-      placeholderTextColor: this.getPlaceholderTextColor(),
-      deleteEnter: this.props.deleteEnter,
-      onChange: this.onChangeFromAztec,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeyDown: this.onKeyDown,
-      triggerKeyCodes: disableEditingMenu ? [] : this.suggestionOptions().map(op => op.triggerChar),
-      onPaste: this.onPaste,
-      activeFormats: this.getActiveFormatNames(record),
-      onContentSizeChange: this.onContentSizeChange,
-      onSelectionChange: this.onSelectionChangeFromAztec,
-      blockType: {
-        tag: tagName
-      },
-      color: style && style.color || parentBlockStyles && parentBlockStyles.color || baseGlobalStyles && baseGlobalStyles?.color?.text || defaultColor,
-      maxImagesWidth: 200,
-      fontFamily: this.props.fontFamily || defaultFontFamily,
-      fontSize: fontSize,
-      lineHeight: lineHeight,
-      fontWeight: this.props.fontWeight,
-      fontStyle: this.props.fontStyle,
-      disableEditingMenu: disableEditingMenu,
-      isMultiline: false,
-      textAlign: this.props.textAlign,
-      ...(this.isIOS ? {
-        maxWidth
-      } : {}),
-      minWidth: minWidth,
-      id: this.props.id,
-      selectionColor: selectionColor,
-      disableAutocorrection: this.props.disableAutocorrection
-    }), isSelected && createElement(Fragment, null, createElement(FormatEdit, {
-      forwardedRef: this._editor,
-      formatTypes: formatTypes,
-      value: record,
-      onChange: this.onFormatChange,
-      onFocus: () => {}
-    }), !disableSuggestions && createElement(BlockFormatControls, null, createElement(ToolbarButtonWithOptions, {
-      options: this.suggestionOptions()
-    }))));
+        } : {}),
+        minWidth: minWidth,
+        id: this.props.id,
+        selectionColor: selectionColor,
+        disableAutocorrection: this.props.disableAutocorrection
+      }), isSelected && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(FormatEdit, {
+          forwardedRef: this._editor,
+          formatTypes: formatTypes,
+          value: record,
+          onChange: this.onFormatChange,
+          onFocus: () => {}
+        }), !disableSuggestions && /*#__PURE__*/_jsx(BlockFormatControls, {
+          children: /*#__PURE__*/_jsx(ToolbarButtonWithOptions, {
+            options: this.suggestionOptions()
+          })
+        })]
+      })]
+    });
   }
 }
 RichText.defaultProps = {
@@ -1122,7 +1131,7 @@ const withFormatTypes = WrappedComponent => props => {
     withoutInteractiveFormatting,
     allowedFormats
   });
-  return createElement(WrappedComponent, {
+  return /*#__PURE__*/_jsx(WrappedComponent, {
     ...props,
     formatTypes: formatTypes
   });