@wordpress/rich-text - npm Package Compare versions

Comparing version 6.12.0 to 6.12.1

build-module/component/index.js

@@ -104,2 +104,3 @@ /**
   if (!record.current) {
+    hadSelectionUpdate.current = isSelected;
     setRecordFromProps(); // Sometimes formats are added programmatically and we need to make
@@ -106,0 +107,0 @@ // sure it's persisted to the block store / markup. If these formats

build-module/component/index.native.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
@@ -1115,3 +1114,3 @@
       editableTagName: EditableView
-    }), createElement(RCTAztecView, _extends({
+    }), createElement(RCTAztecView, {
       accessibilityLabel: accessibilityLabel,
@@ -1167,6 +1166,6 @@ ref: ref => {
       isMultiline: this.isMultiline,
-      textAlign: this.props.textAlign
-    }, this.isIOS ? {
-      maxWidth
-    } : {}, {
+      textAlign: this.props.textAlign,
+      ...(this.isIOS ? {
+        maxWidth
+      } : {}),
       minWidth: minWidth,
@@ -1176,3 +1175,3 @@ id: this.props.id,
       disableAutocorrection: this.props.disableAutocorrection
-    })), isSelected && createElement(Fragment, null, createElement(FormatEdit, {
+    }), isSelected && createElement(Fragment, null, createElement(FormatEdit, {
       forwardedRef: this._editor,
@@ -1210,5 +1209,5 @@ formatTypes: formatTypes,
   });
-  return createElement(WrappedComponent, _extends({}, props, {
+  return createElement(WrappedComponent, { ...props,
     formatTypes: formatTypes
-  }));
+  });
 };
@@ -1215,0 +1214,0 @@

build-module/component/use-boundary-style.js

@@ -15,8 +15,11 @@ /**
   const {
-    activeFormats = []
+    activeFormats = [],
+    replacements,
+    start
   } = record.current;
+  const activeReplacement = replacements[start];
   useEffect(() => {
     // There's no need to recalculate the boundary styles if no formats are
     // active, because no boundary styles will be visible.
-    if (!activeFormats || !activeFormats.length) {
+    if ((!activeFormats || !activeFormats.length) && !activeReplacement) {
       return;
@@ -55,5 +58,5 @@ }
     }
-  }, [activeFormats]);
+  }, [activeFormats, activeReplacement]);
   return ref;
 }
 //# sourceMappingURL=use-boundary-style.js.map

build-module/component/use-copy-handler.js

@@ -24,4 +24,7 @@ /**
       } = propsRef.current;
+      const {
+        ownerDocument
+      } = element;
 
-      if (isCollapsed(record.current) || !element.contains(element.ownerDocument.activeElement)) {
+      if (isCollapsed(record.current) || !element.contains(ownerDocument.activeElement)) {
         return;
@@ -42,7 +45,13 @@ }
       event.preventDefault();
+
+      if (event.type === 'cut') {
+        ownerDocument.execCommand('delete');
+      }
     }
 
     element.addEventListener('copy', onCopy);
+    element.addEventListener('cut', onCopy);
     return () => {
       element.removeEventListener('copy', onCopy);
+      element.removeEventListener('cut', onCopy);
     };
@@ -49,0 +58,0 @@ }, []);

build-module/component/use-select-object.js

@@ -12,3 +12,3 @@ /**
 
-      if (target === element || target.textContent) {
+      if (target === element || target.textContent && target.isContentEditable) {
         return;
@@ -23,12 +23,25 @@ }
       } = ownerDocument;
+      const selection = defaultView.getSelection(); // If it's already selected, do nothing and let default behavior
+      // happen. This means it's "click-through".
+
+      if (selection.containsNode(target)) return;
       const range = ownerDocument.createRange();
-      const selection = defaultView.getSelection();
       range.selectNode(target);
       selection.removeAllRanges();
       selection.addRange(range);
+      event.preventDefault();
     }
 
+    function onFocusIn(event) {
+      // When there is incoming focus from a link, select the object.
+      if (event.relatedTarget && !element.contains(event.relatedTarget) && event.relatedTarget.tagName === 'A') {
+        onClick(event);
+      }
+    }
+
     element.addEventListener('click', onClick);
+    element.addEventListener('focusin', onFocusIn);
     return () => {
       element.removeEventListener('click', onClick);
+      element.removeEventListener('focusin', onFocusIn);
     };
@@ -35,0 +48,0 @@ }, []);

build-module/create.js

@@ -61,2 +61,3 @@ /**
     return {
+      formatType,
       type: formatType.name,
@@ -93,3 +94,8 @@ tagName
 
+  if (formatType.contentEditable === false) {
+    delete unregisteredAttributes.contenteditable;
+  }
+
   return {
+    formatType,
     type: formatType.name,
@@ -409,4 +415,20 @@ tagName,
       })
-    });
+    }); // When a format type is declared as not editable, replace it with an
+    // object replacement character and preserve the inner HTML.
 
+    if (format?.formatType?.contentEditable === false) {
+      delete format.formatType;
+      accumulateSelection(accumulator, node, range, createEmptyValue());
+      mergePair(accumulator, {
+        formats: [,],
+        replacements: [{ ...format,
+          innerHTML: node.innerHTML
+        }],
+        text: OBJECT_REPLACEMENT_CHARACTER
+      });
+      continue;
+    }
+
+    if (format) delete format.formatType;
+
     if (multilineWrapperTags && multilineWrapperTags.indexOf(tagName) !== -1) {
@@ -413,0 +435,0 @@ const value = createFromMultilineElement({

build-module/to-tree.js

@@ -97,2 +97,8 @@ /**
     }
+  } // When a format is declared as non editable, make it non editable in the
+  // editor.
+
+
+  if (isEditableTree && formatType.contentEditable === false) {
+    elementAttributes.contenteditable = 'false';
   }
@@ -271,3 +277,12 @@
     if (character === OBJECT_REPLACEMENT_CHARACTER) {
-      if (!isEditableTree && replacements[i]?.type === 'script') {
+      const replacement = replacements[i];
+      if (!replacement) continue;
+      const {
+        type,
+        attributes,
+        innerHTML
+      } = replacement;
+      const formatType = getFormatType(type);
+
+      if (!isEditableTree && type === 'script') {
         pointer = append(getParent(pointer), fromFormat({
@@ -278,6 +293,13 @@ type: 'script',
         append(pointer, {
-          html: decodeURIComponent(replacements[i].attributes['data-rich-text-script'])
+          html: decodeURIComponent(attributes['data-rich-text-script'])
         });
+      } else if (formatType?.contentEditable === false) {
+        // For non editable formats, render the stored inner HTML.
+        pointer = append(getParent(pointer), fromFormat({ ...replacement,
+          isEditableTree,
+          boundaryClass: start === i && end === i + 1
+        }));
+        if (innerHTML) append(pointer, innerHTML);
       } else {
-        pointer = append(getParent(pointer), fromFormat({ ...replacements[i],
+        pointer = append(getParent(pointer), fromFormat({ ...replacement,
           object: true,
@@ -284,0 +306,0 @@ isEditableTree

build/component/index.js

@@ -126,2 +126,3 @@ "use strict";
   if (!record.current) {
+    hadSelectionUpdate.current = isSelected;
     setRecordFromProps(); // Sometimes formats are added programmatically and we need to make
@@ -128,0 +129,0 @@ // sure it's persisted to the block store / markup. If these formats

build/component/index.native.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _reactNative = require("react-native");
@@ -1156,3 +1154,3 @@
       editableTagName: EditableView
-    }), (0, _element.createElement)(_reactNativeAztec.default, (0, _extends2.default)({
+    }), (0, _element.createElement)(_reactNativeAztec.default, {
       accessibilityLabel: accessibilityLabel,
@@ -1208,6 +1206,6 @@ ref: ref => {
       isMultiline: this.isMultiline,
-      textAlign: this.props.textAlign
-    }, this.isIOS ? {
-      maxWidth
-    } : {}, {
+      textAlign: this.props.textAlign,
+      ...(this.isIOS ? {
+        maxWidth
+      } : {}),
       minWidth: minWidth,
@@ -1217,3 +1215,3 @@ id: this.props.id,
       disableAutocorrection: this.props.disableAutocorrection
-    })), isSelected && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_formatEdit.default, {
+    }), isSelected && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_formatEdit.default, {
       forwardedRef: this._editor,
@@ -1253,5 +1251,5 @@ formatTypes: formatTypes,
   });
-  return (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, props, {
+  return (0, _element.createElement)(WrappedComponent, { ...props,
     formatTypes: formatTypes
-  }));
+  });
 };
@@ -1258,0 +1256,0 @@

build/component/use-boundary-style.js

@@ -23,8 +23,11 @@ "use strict";
   const {
-    activeFormats = []
+    activeFormats = [],
+    replacements,
+    start
   } = record.current;
+  const activeReplacement = replacements[start];
   (0, _element.useEffect)(() => {
     // There's no need to recalculate the boundary styles if no formats are
     // active, because no boundary styles will be visible.
-    if (!activeFormats || !activeFormats.length) {
+    if ((!activeFormats || !activeFormats.length) && !activeReplacement) {
       return;
@@ -63,5 +66,5 @@ }
     }
-  }, [activeFormats]);
+  }, [activeFormats, activeReplacement]);
   return ref;
 }
 //# sourceMappingURL=use-boundary-style.js.map

build/component/use-copy-handler.js

@@ -37,4 +37,7 @@ "use strict";
       } = propsRef.current;
+      const {
+        ownerDocument
+      } = element;
 
-      if ((0, _isCollapsed.isCollapsed)(record.current) || !element.contains(element.ownerDocument.activeElement)) {
+      if ((0, _isCollapsed.isCollapsed)(record.current) || !element.contains(ownerDocument.activeElement)) {
         return;
@@ -55,7 +58,13 @@ }
       event.preventDefault();
+
+      if (event.type === 'cut') {
+        ownerDocument.execCommand('delete');
+      }
     }
 
     element.addEventListener('copy', onCopy);
+    element.addEventListener('cut', onCopy);
     return () => {
       element.removeEventListener('copy', onCopy);
+      element.removeEventListener('cut', onCopy);
     };
@@ -62,0 +71,0 @@ }, []);

build/component/use-select-object.js

@@ -20,3 +20,3 @@ "use strict";
 
-      if (target === element || target.textContent) {
+      if (target === element || target.textContent && target.isContentEditable) {
         return;
@@ -31,12 +31,25 @@ }
       } = ownerDocument;
+      const selection = defaultView.getSelection(); // If it's already selected, do nothing and let default behavior
+      // happen. This means it's "click-through".
+
+      if (selection.containsNode(target)) return;
       const range = ownerDocument.createRange();
-      const selection = defaultView.getSelection();
       range.selectNode(target);
       selection.removeAllRanges();
       selection.addRange(range);
+      event.preventDefault();
     }
 
+    function onFocusIn(event) {
+      // When there is incoming focus from a link, select the object.
+      if (event.relatedTarget && !element.contains(event.relatedTarget) && event.relatedTarget.tagName === 'A') {
+        onClick(event);
+      }
+    }
+
     element.addEventListener('click', onClick);
+    element.addEventListener('focusin', onFocusIn);
     return () => {
       element.removeEventListener('click', onClick);
+      element.removeEventListener('focusin', onFocusIn);
     };
@@ -43,0 +56,0 @@ }, []);

build/create.js

@@ -74,2 +74,3 @@ "use strict";
     return {
+      formatType,
       type: formatType.name,
@@ -106,3 +107,8 @@ tagName
 
+  if (formatType.contentEditable === false) {
+    delete unregisteredAttributes.contenteditable;
+  }
+
   return {
+    formatType,
     type: formatType.name,
@@ -424,4 +430,20 @@ tagName,
       })
-    });
+    }); // When a format type is declared as not editable, replace it with an
+    // object replacement character and preserve the inner HTML.
 
+    if (format?.formatType?.contentEditable === false) {
+      delete format.formatType;
+      accumulateSelection(accumulator, node, range, createEmptyValue());
+      (0, _concat.mergePair)(accumulator, {
+        formats: [,],
+        replacements: [{ ...format,
+          innerHTML: node.innerHTML
+        }],
+        text: _specialCharacters.OBJECT_REPLACEMENT_CHARACTER
+      });
+      continue;
+    }
+
+    if (format) delete format.formatType;
+
     if (multilineWrapperTags && multilineWrapperTags.indexOf(tagName) !== -1) {
@@ -428,0 +450,0 @@ const value = createFromMultilineElement({

build/to-tree.js

@@ -106,2 +106,8 @@ "use strict";
     }
+  } // When a format is declared as non editable, make it non editable in the
+  // editor.
+
+
+  if (isEditableTree && formatType.contentEditable === false) {
+    elementAttributes.contenteditable = 'false';
   }
@@ -280,3 +286,12 @@
     if (character === _specialCharacters.OBJECT_REPLACEMENT_CHARACTER) {
-      if (!isEditableTree && replacements[i]?.type === 'script') {
+      const replacement = replacements[i];
+      if (!replacement) continue;
+      const {
+        type,
+        attributes,
+        innerHTML
+      } = replacement;
+      const formatType = (0, _getFormatType.getFormatType)(type);
+
+      if (!isEditableTree && type === 'script') {
         pointer = append(getParent(pointer), fromFormat({
@@ -287,6 +302,13 @@ type: 'script',
         append(pointer, {
-          html: decodeURIComponent(replacements[i].attributes['data-rich-text-script'])
+          html: decodeURIComponent(attributes['data-rich-text-script'])
         });
+      } else if (formatType?.contentEditable === false) {
+        // For non editable formats, render the stored inner HTML.
+        pointer = append(getParent(pointer), fromFormat({ ...replacement,
+          isEditableTree,
+          boundaryClass: start === i && end === i + 1
+        }));
+        if (innerHTML) append(pointer, innerHTML);
       } else {
-        pointer = append(getParent(pointer), fromFormat({ ...replacements[i],
+        pointer = append(getParent(pointer), fromFormat({ ...replacement,
           object: true,
@@ -293,0 +315,0 @@ isEditableTree

package.json

 {
 	"name": "@wordpress/rich-text",
-	"version": "6.12.0",
+	"version": "6.12.1",
 	"description": "Rich text value and manipulation API.",
@@ -34,10 +34,10 @@ "author": "The WordPress Contributors",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.35.0",
-		"@wordpress/compose": "^6.12.0",
-		"@wordpress/data": "^9.5.0",
-		"@wordpress/deprecated": "^3.35.0",
-		"@wordpress/element": "^5.12.0",
-		"@wordpress/escape-html": "^2.35.0",
-		"@wordpress/i18n": "^4.35.0",
-		"@wordpress/keycodes": "^3.35.0",
+		"@wordpress/a11y": "^3.35.1",
+		"@wordpress/compose": "^6.12.1",
+		"@wordpress/data": "^9.5.1",
+		"@wordpress/deprecated": "^3.35.1",
+		"@wordpress/element": "^5.12.1",
+		"@wordpress/escape-html": "^2.35.1",
+		"@wordpress/i18n": "^4.35.1",
+		"@wordpress/keycodes": "^3.35.1",
 		"memize": "^2.1.0",
@@ -52,3 +52,3 @@ "rememo": "^4.0.2"
 	},
-	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
+	"gitHead": "ce5639111c30763dbdf07f40eeb136ea6030ecf1"
 }

src/component/index.js

@@ -102,2 +102,3 @@ /**
 	if ( ! record.current ) {
+		hadSelectionUpdate.current = isSelected;
 		setRecordFromProps();
@@ -104,0 +105,0 @@ // Sometimes formats are added programmatically and we need to make

src/component/use-boundary-style.js

@@ -12,7 +12,11 @@ /**
 	const ref = useRef();
-	const { activeFormats = [] } = record.current;
+	const { activeFormats = [], replacements, start } = record.current;
+	const activeReplacement = replacements[ start ];
 	useEffect( () => {
 		// There's no need to recalculate the boundary styles if no formats are
 		// active, because no boundary styles will be visible.
-		if ( ! activeFormats || ! activeFormats.length ) {
+		if (
+			( ! activeFormats || ! activeFormats.length ) &&
+			! activeReplacement
+		) {
 			return;
@@ -50,4 +54,4 @@ }
 		}
-	}, [ activeFormats ] );
+	}, [ activeFormats, activeReplacement ] );
 	return ref;
 }

src/component/use-copy-handler.js

@@ -22,5 +22,6 @@ /**
 				propsRef.current;
+			const { ownerDocument } = element;
 			if (
 				isCollapsed( record.current ) ||
-				! element.contains( element.ownerDocument.activeElement )
+				! element.contains( ownerDocument.activeElement )
 			) {
@@ -45,9 +46,15 @@ return;
 			event.preventDefault();
+
+			if ( event.type === 'cut' ) {
+				ownerDocument.execCommand( 'delete' );
+			}
 		}
 
 		element.addEventListener( 'copy', onCopy );
+		element.addEventListener( 'cut', onCopy );
 		return () => {
 			element.removeEventListener( 'copy', onCopy );
+			element.removeEventListener( 'cut', onCopy );
 		};
 	}, [] );
 }

src/component/use-select-object.js

@@ -12,3 +12,6 @@ /**
 			// If the child element has no text content, it must be an object.
-			if ( target === element || target.textContent ) {
+			if (
+				target === element ||
+				( target.textContent && target.isContentEditable )
+			) {
 				return;
@@ -19,15 +22,35 @@ }
 			const { defaultView } = ownerDocument;
-			const range = ownerDocument.createRange();
 			const selection = defaultView.getSelection();
 
+			// If it's already selected, do nothing and let default behavior
+			// happen. This means it's "click-through".
+			if ( selection.containsNode( target ) ) return;
+
+			const range = ownerDocument.createRange();
+
 			range.selectNode( target );
 			selection.removeAllRanges();
 			selection.addRange( range );
+
+			event.preventDefault();
 		}
 
+		function onFocusIn( event ) {
+			// When there is incoming focus from a link, select the object.
+			if (
+				event.relatedTarget &&
+				! element.contains( event.relatedTarget ) &&
+				event.relatedTarget.tagName === 'A'
+			) {
+				onClick( event );
+			}
+		}
+
 		element.addEventListener( 'click', onClick );
+		element.addEventListener( 'focusin', onFocusIn );
 		return () => {
 			element.removeEventListener( 'click', onClick );
+			element.removeEventListener( 'focusin', onFocusIn );
 		};
 	}, [] );
 }

src/create.js

@@ -65,3 +65,3 @@ /**
 	if ( ! attributes ) {
-		return { type: formatType.name, tagName };
+		return { formatType, type: formatType.name, tagName };
 	}
@@ -99,3 +99,8 @@
 
+	if ( formatType.contentEditable === false ) {
+		delete unregisteredAttributes.contenteditable;
+	}
+
 	return {
+		formatType,
 		type: formatType.name,
@@ -424,2 +429,22 @@ tagName,
 
+		// When a format type is declared as not editable, replace it with an
+		// object replacement character and preserve the inner HTML.
+		if ( format?.formatType?.contentEditable === false ) {
+			delete format.formatType;
+			accumulateSelection( accumulator, node, range, createEmptyValue() );
+			mergePair( accumulator, {
+				formats: [ , ],
+				replacements: [
+					{
+						...format,
+						innerHTML: node.innerHTML,
+					},
+				],
+				text: OBJECT_REPLACEMENT_CHARACTER,
+			} );
+			continue;
+		}
+
+		if ( format ) delete format.formatType;
+
 		if (
@@ -426,0 +451,0 @@ multilineWrapperTags &&

src/test/helpers/index.js

@@ -915,2 +915,27 @@ /**
 	},
+	{
+		description: 'should be non editable',
+		formatName: 'my-plugin/non-editable',
+		formatType: {
+			title: 'Non Editable',
+			tagName: 'a',
+			className: 'non-editable',
+			contentEditable: false,
+			edit() {},
+		},
+		html: '<a class="non-editable">a</a>',
+		value: {
+			formats: [ , ],
+			replacements: [
+				{
+					type: 'my-plugin/non-editable',
+					tagName: 'a',
+					attributes: {},
+					unregisteredAttributes: {},
+					innerHTML: 'a',
+				},
+			],
+			text: OBJECT_REPLACEMENT_CHARACTER,
+		},
+	},
 ];

src/to-tree.js

@@ -104,2 +104,8 @@ /**
 
+	// When a format is declared as non editable, make it non editable in the
+	// editor.
+	if ( isEditableTree && formatType.contentEditable === false ) {
+		elementAttributes.contenteditable = 'false';
+	}
+
 	return {
@@ -295,3 +301,8 @@ type: formatType.tagName === '*' ? tagName : formatType.tagName,
 		if ( character === OBJECT_REPLACEMENT_CHARACTER ) {
-			if ( ! isEditableTree && replacements[ i ]?.type === 'script' ) {
+			const replacement = replacements[ i ];
+			if ( ! replacement ) continue;
+			const { type, attributes, innerHTML } = replacement;
+			const formatType = getFormatType( type );
+
+			if ( ! isEditableTree && type === 'script' ) {
 				pointer = append(
@@ -306,5 +317,17 @@ getParent( pointer ),
 					html: decodeURIComponent(
-						replacements[ i ].attributes[ 'data-rich-text-script' ]
+						attributes[ 'data-rich-text-script' ]
 					),
 				} );
+			} else if ( formatType?.contentEditable === false ) {
+				// For non editable formats, render the stored inner HTML.
+				pointer = append(
+					getParent( pointer ),
+					fromFormat( {
+						...replacement,
+						isEditableTree,
+						boundaryClass: start === i && end === i + 1,
+					} )
+				);
+
+				if ( innerHTML ) append( pointer, innerHTML );
 			} else {
@@ -314,3 +337,3 @@ pointer = append(
 					fromFormat( {
-						...replacements[ i ],
+						...replacement,
 						object: true,
@@ -317,0 +340,0 @@ isEditableTree,

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

1409877

increased by1.24%

Number of downloads

81962

increased by2.6%

Lines of code

19598

increased by1.12%

Dependency changes

• + Added@types/react@18.3.17(transitive)

• - Removed@types/react@18.3.18(transitive)

• Updated@wordpress/a11y@^3.35.1

• Updated@wordpress/compose@^6.12.1

• Updated@wordpress/data@^9.5.1

• Updated@wordpress/deprecated@^3.35.1

• Updated@wordpress/element@^5.12.1

• Updated@wordpress/escape-html@^2.35.1

• Updated@wordpress/i18n@^4.35.1

• Updated@wordpress/keycodes@^3.35.1