@wordpress/rich-text - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

build-module/create.js

@@ -16,3 +16,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
 import { mergePair } from './concat';
-import { LINE_SEPARATOR, OBJECT_REPLACEMENT_CHARACTER } from './special-characters';
+import { LINE_SEPARATOR, OBJECT_REPLACEMENT_CHARACTER, ZWNBSP } from './special-characters';
 /**
@@ -270,6 +270,9 @@ * Browser dependencies
 
+var ZWNBSPRegExp = new RegExp(ZWNBSP, 'g');
+
 function filterString(string) {
   // Reduce any whitespace used for HTML formatting to one space
   // character, because it will also be displayed as such by the browser.
-  return string.replace(/[\n\r\t]+/g, ' ');
+  return string.replace(/[\n\r\t]+/g, ' ') // Remove padding added by `toTree`.
+  .replace(ZWNBSPRegExp, '');
 }
@@ -334,3 +337,5 @@ /**
 
-    if (node.getAttribute('data-rich-text-padding') || isEditableTree && type === 'br' && !node.getAttribute('data-rich-text-line-break')) {
+    if (isEditableTree && ( // Ignore any placeholders.
+    node.getAttribute('data-rich-text-placeholder') || // Ignore any line breaks that are not inserted by us.
+    type === 'br' && !node.getAttribute('data-rich-text-line-break'))) {
       accumulateSelection(accumulator, node, range, createEmptyValue());
@@ -337,0 +342,0 @@ return "continue";

build-module/index.js

@@ -26,3 +26,3 @@ /**
 export { split } from './split';
-export { apply as __unstableApply, toDom as __unstableToDom } from './to-dom';
+export { toDom as __unstableToDom } from './to-dom';
 export { toHTMLString } from './to-html-string';
@@ -35,4 +35,5 @@ export { toggleFormat } from './toggle-format';
 export { changeListType as __unstableChangeListType } from './change-list-type';
-export { updateFormats as __unstableUpdateFormats } from './update-formats';
-export { getActiveFormats as __unstableGetActiveFormats } from './get-active-formats';
+export { createElement as __unstableCreateElement } from './create-element';
+export { default as RichText } from './component';
+export { default as __unstableFormatEdit } from './component/format-edit';
 //# sourceMappingURL=index.js.map

build-module/special-characters.js

 /**
- * Line separator character.
+ * Line separator character, used for multiline text.
  */
 export var LINE_SEPARATOR = "\u2028";
+/**
+ * Object replacement character, used as a placeholder for objects.
+ */
+
 export var OBJECT_REPLACEMENT_CHARACTER = "\uFFFC";
+/**
+ * Zero width non-breaking space, used as padding in the editable DOM tree when
+ * it is empty otherwise.
+ */
+
+export var ZWNBSP = "\uFEFF";
 //# sourceMappingURL=special-characters.js.map

build-module/to-dom.js

@@ -132,3 +132,4 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
       _ref5$isEditableTree = _ref5.isEditableTree,
-      isEditableTree = _ref5$isEditableTree === void 0 ? true : _ref5$isEditableTree;
+      isEditableTree = _ref5$isEditableTree === void 0 ? true : _ref5$isEditableTree,
+      placeholder = _ref5.placeholder;
   var startPath = [];
@@ -160,3 +161,4 @@ var endPath = [];
     },
-    isEditableTree: isEditableTree
+    isEditableTree: isEditableTree,
+    placeholder: placeholder
   });
@@ -188,3 +190,4 @@ return {
       prepareEditableTree = _ref6.prepareEditableTree,
-      __unstableDomOnly = _ref6.__unstableDomOnly;
+      __unstableDomOnly = _ref6.__unstableDomOnly,
+      placeholder = _ref6.placeholder;
 
@@ -195,3 +198,4 @@ // Construct a new element tree in memory.
     multilineTag: multilineTag,
-    prepareEditableTree: prepareEditableTree
+    prepareEditableTree: prepareEditableTree,
+    placeholder: placeholder
   }),
@@ -198,0 +202,0 @@ body = _toDom.body,

build-module/to-tree.js

@@ -9,3 +9,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { getFormatType } from './get-format-type';
-import { LINE_SEPARATOR, OBJECT_REPLACEMENT_CHARACTER } from './special-characters';
+import { LINE_SEPARATOR, OBJECT_REPLACEMENT_CHARACTER, ZWNBSP } from './special-characters';
 /**
@@ -80,9 +80,2 @@ * Converts a format object to information that can be used to create an element
 
-var padding = {
-  type: 'br',
-  attributes: {
-    'data-rich-text-padding': 'true'
-  },
-  object: true
-};
 export function toTree(_ref2) {
@@ -101,3 +94,4 @@ var value = _ref2.value,
       onEndIndex = _ref2.onEndIndex,
-      isEditableTree = _ref2.isEditableTree;
+      isEditableTree = _ref2.isEditableTree,
+      placeholder = _ref2.placeholder;
   var formats = value.formats,
@@ -156,4 +150,3 @@ replacements = value.replacements,
 
-      append(getParent(node), padding);
-      append(getParent(node), '');
+      append(getParent(node), ZWNBSP);
     } // Set selection for the start of line.
@@ -256,3 +249,12 @@
     if (shouldInsertPadding && i === text.length) {
-      append(getParent(pointer), padding);
+      append(getParent(pointer), ZWNBSP);
+
+      if (placeholder && text.length === 0) {
+        append(getParent(pointer), {
+          type: 'span',
+          attributes: {
+            'data-rich-text-placeholder': placeholder
+          }
+        });
+      }
     }
@@ -259,0 +261,0 @@

build/create.js

@@ -286,6 +286,9 @@ "use strict";
 
+var ZWNBSPRegExp = new RegExp(_specialCharacters.ZWNBSP, 'g');
+
 function filterString(string) {
   // Reduce any whitespace used for HTML formatting to one space
   // character, because it will also be displayed as such by the browser.
-  return string.replace(/[\n\r\t]+/g, ' ');
+  return string.replace(/[\n\r\t]+/g, ' ') // Remove padding added by `toTree`.
+  .replace(ZWNBSPRegExp, '');
 }
@@ -350,3 +353,5 @@ /**
 
-    if (node.getAttribute('data-rich-text-padding') || isEditableTree && type === 'br' && !node.getAttribute('data-rich-text-line-break')) {
+    if (isEditableTree && ( // Ignore any placeholders.
+    node.getAttribute('data-rich-text-placeholder') || // Ignore any line breaks that are not inserted by us.
+    type === 'br' && !node.getAttribute('data-rich-text-line-break'))) {
       accumulateSelection(accumulator, node, range, createEmptyValue());
@@ -353,0 +358,0 @@ return "continue";

build/index.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
@@ -138,8 +140,2 @@ value: true
 });
-Object.defineProperty(exports, "__unstableApply", {
-  enumerable: true,
-  get: function get() {
-    return _toDom.apply;
-  }
-});
 Object.defineProperty(exports, "__unstableToDom", {
@@ -193,14 +189,20 @@ enumerable: true,
 });
-Object.defineProperty(exports, "__unstableUpdateFormats", {
+Object.defineProperty(exports, "__unstableCreateElement", {
   enumerable: true,
   get: function get() {
-    return _updateFormats.updateFormats;
+    return _createElement.createElement;
   }
 });
-Object.defineProperty(exports, "__unstableGetActiveFormats", {
+Object.defineProperty(exports, "RichText", {
   enumerable: true,
   get: function get() {
-    return _getActiveFormats.getActiveFormats;
+    return _component.default;
   }
 });
+Object.defineProperty(exports, "__unstableFormatEdit", {
+  enumerable: true,
+  get: function get() {
+    return _formatEdit.default;
+  }
+});
 
@@ -267,5 +269,7 @@ require("./store");
 
-var _updateFormats = require("./update-formats");
+var _createElement = require("./create-element");
 
-var _getActiveFormats = require("./get-active-formats");
+var _component = _interopRequireDefault(require("./component"));
+
+var _formatEdit = _interopRequireDefault(require("./component/format-edit"));
 //# sourceMappingURL=index.js.map

build/special-characters.js

@@ -6,11 +6,22 @@ "use strict";
 });
-exports.OBJECT_REPLACEMENT_CHARACTER = exports.LINE_SEPARATOR = void 0;
+exports.ZWNBSP = exports.OBJECT_REPLACEMENT_CHARACTER = exports.LINE_SEPARATOR = void 0;
 
 /**
- * Line separator character.
+ * Line separator character, used for multiline text.
  */
 var LINE_SEPARATOR = "\u2028";
+/**
+ * Object replacement character, used as a placeholder for objects.
+ */
+
 exports.LINE_SEPARATOR = LINE_SEPARATOR;
 var OBJECT_REPLACEMENT_CHARACTER = "\uFFFC";
+/**
+ * Zero width non-breaking space, used as padding in the editable DOM tree when
+ * it is empty otherwise.
+ */
+
 exports.OBJECT_REPLACEMENT_CHARACTER = OBJECT_REPLACEMENT_CHARACTER;
+var ZWNBSP = "\uFEFF";
+exports.ZWNBSP = ZWNBSP;
 //# sourceMappingURL=special-characters.js.map

build/to-dom.js

@@ -147,3 +147,4 @@ "use strict";
       _ref5$isEditableTree = _ref5.isEditableTree,
-      isEditableTree = _ref5$isEditableTree === void 0 ? true : _ref5$isEditableTree;
+      isEditableTree = _ref5$isEditableTree === void 0 ? true : _ref5$isEditableTree,
+      placeholder = _ref5.placeholder;
   var startPath = [];
@@ -175,3 +176,4 @@ var endPath = [];
     },
-    isEditableTree: isEditableTree
+    isEditableTree: isEditableTree,
+    placeholder: placeholder
   });
@@ -204,3 +206,4 @@ return {
       prepareEditableTree = _ref6.prepareEditableTree,
-      __unstableDomOnly = _ref6.__unstableDomOnly;
+      __unstableDomOnly = _ref6.__unstableDomOnly,
+      placeholder = _ref6.placeholder;
 
@@ -211,3 +214,4 @@ // Construct a new element tree in memory.
     multilineTag: multilineTag,
-    prepareEditableTree: prepareEditableTree
+    prepareEditableTree: prepareEditableTree,
+    placeholder: placeholder
   }),
@@ -214,0 +218,0 @@ body = _toDom.body,

build/to-tree.js

@@ -92,10 +92,2 @@ "use strict";
 
-var padding = {
-  type: 'br',
-  attributes: {
-    'data-rich-text-padding': 'true'
-  },
-  object: true
-};
-
 function toTree(_ref2) {
@@ -114,3 +106,4 @@ var value = _ref2.value,
       onEndIndex = _ref2.onEndIndex,
-      isEditableTree = _ref2.isEditableTree;
+      isEditableTree = _ref2.isEditableTree,
+      placeholder = _ref2.placeholder;
   var formats = value.formats,
@@ -169,4 +162,3 @@ replacements = value.replacements,
 
-      append(getParent(node), padding);
-      append(getParent(node), '');
+      append(getParent(node), _specialCharacters.ZWNBSP);
     } // Set selection for the start of line.
@@ -269,3 +261,12 @@
     if (shouldInsertPadding && i === text.length) {
-      append(getParent(pointer), padding);
+      append(getParent(pointer), _specialCharacters.ZWNBSP);
+
+      if (placeholder && text.length === 0) {
+        append(getParent(pointer), {
+          type: 'span',
+          attributes: {
+            'data-rich-text-placeholder': placeholder
+          }
+        });
+      }
     }
@@ -272,0 +273,0 @@

package.json

 {
 	"name": "@wordpress/rich-text",
-	"version": "3.4.0",
+	"version": "3.5.0",
 	"description": "Rich text value and manipulation API.",
@@ -25,7 +25,14 @@ "author": "The WordPress Contributors",
 		"@babel/runtime": "^7.4.4",
-		"@wordpress/compose": "^3.4.0",
-		"@wordpress/data": "^4.6.0",
-		"@wordpress/escape-html": "^1.4.0",
-		"@wordpress/hooks": "^2.4.0",
-		"lodash": "^4.17.11",
+		"@wordpress/compose": "^3.5.0",
+		"@wordpress/data": "^4.7.0",
+		"@wordpress/deprecated": "^2.5.0",
+		"@wordpress/dom": "^2.4.0",
+		"@wordpress/element": "^2.6.0",
+		"@wordpress/escape-html": "^1.5.0",
+		"@wordpress/hooks": "^2.5.0",
+		"@wordpress/is-shallow-equal": "^1.5.0",
+		"@wordpress/keycodes": "^2.5.0",
+		"classnames": "^2.2.5",
+		"lodash": "^4.17.14",
+		"memize": "^1.0.5",
 		"rememo": "^3.0.0"
@@ -36,3 +43,3 @@ },
 	},
-	"gitHead": "256d514d356709cfdb27e28a5b200043d768d9cc"
+	"gitHead": "2080b50d4a41c9f746485519d1dc368dd9d9354d"
 }

README.md

@@ -276,2 +276,7 @@ # Rich Text
 
+<a name="RichText" href="#RichText">#</a> **RichText**
+
+Renders a rich content input, providing users with the option to format the
+content.
+
 <a name="slice" href="#slice">#</a> **slice**
@@ -278,0 +283,0 @@

src/create.js

@@ -16,2 +16,3 @@ /**
 	OBJECT_REPLACEMENT_CHARACTER,
+	ZWNBSP,
 } from './special-characters';
@@ -271,6 +272,10 @@
 
+const ZWNBSPRegExp = new RegExp( ZWNBSP, 'g' );
+
 function filterString( string ) {
 	// Reduce any whitespace used for HTML formatting to one space
 	// character, because it will also be displayed as such by the browser.
-	return string.replace( /[\n\r\t]+/g, ' ' );
+	return string.replace( /[\n\r\t]+/g, ' ' )
+		// Remove padding added by `toTree`.
+		.replace( ZWNBSPRegExp, '' );
 }
@@ -333,6 +338,8 @@
 
-		if (
-			node.getAttribute( 'data-rich-text-padding' ) ||
-			( isEditableTree && type === 'br' && ! node.getAttribute( 'data-rich-text-line-break' ) )
-		) {
+		if ( isEditableTree && (
+			// Ignore any placeholders.
+			node.getAttribute( 'data-rich-text-placeholder' ) ||
+			// Ignore any line breaks that are not inserted by us.
+			( type === 'br' && ! node.getAttribute( 'data-rich-text-line-break' ) )
+		) ) {
 			accumulateSelection( accumulator, node, range, createEmptyValue() );
@@ -339,0 +346,0 @@ continue;

src/index.js

@@ -27,3 +27,3 @@ /**
 export { split } from './split';
-export { apply as __unstableApply, toDom as __unstableToDom } from './to-dom';
+export { toDom as __unstableToDom } from './to-dom';
 export { toHTMLString } from './to-html-string';
@@ -36,3 +36,5 @@ export { toggleFormat } from './toggle-format';
 export { changeListType as __unstableChangeListType } from './change-list-type';
-export { updateFormats as __unstableUpdateFormats } from './update-formats';
-export { getActiveFormats as __unstableGetActiveFormats } from './get-active-formats';
+export { createElement as __unstableCreateElement } from './create-element';
+
+export { default as RichText } from './component';
+export { default as __unstableFormatEdit } from './component/format-edit';

src/special-characters.js

 /**
- * Line separator character.
+ * Line separator character, used for multiline text.
  */
 export const LINE_SEPARATOR = '\u2028';
+
+/**
+ * Object replacement character, used as a placeholder for objects.
+ */
 export const OBJECT_REPLACEMENT_CHARACTER = '\ufffc';
+
+/**
+ * Zero width non-breaking space, used as padding in the editable DOM tree when
+ * it is empty otherwise.
+ */
+export const ZWNBSP = '\ufeff';

src/test/helpers/index.js

@@ -0,1 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { ZWNBSP } from '../../special-characters';
+
 export function getSparseArrayLength( array ) {
@@ -507,4 +512,4 @@ return array.reduce( ( i ) => i + 1, 0 );
 		} ),
-		startPath: [ 1, 2, 0 ],
-		endPath: [ 1, 2, 0 ],
+		startPath: [ 1, 1, 1 ],
+		endPath: [ 1, 1, 1 ],
 		record: {
@@ -572,3 +577,3 @@ start: 1,
 		description: 'should remove padding',
-		html: '<br data-rich-text-padding="true">',
+		html: ZWNBSP,
 		createRange: ( element ) => ( {
@@ -575,0 +580,0 @@ startOffset: 0,

src/to-dom.js

@@ -121,2 +121,3 @@ /**
 	isEditableTree = true,
+	placeholder,
 } ) {
@@ -151,2 +152,3 @@ let startPath = [];
 		isEditableTree,
+		placeholder,
 	} );
@@ -177,2 +179,3 @@
 	__unstableDomOnly,
+	placeholder,
 } ) {
@@ -184,2 +187,3 @@ // Construct a new element tree in memory.
 		prepareEditableTree,
+		placeholder,
 	} );
@@ -186,0 +190,0 @@

src/to-tree.js

@@ -10,2 +10,3 @@ /**
 	OBJECT_REPLACEMENT_CHARACTER,
+	ZWNBSP,
 } from './special-characters';
@@ -73,10 +74,2 @@
 
-const padding = {
-	type: 'br',
-	attributes: {
-		'data-rich-text-padding': 'true',
-	},
-	object: true,
-};
-
 export function toTree( {
@@ -96,2 +89,3 @@ value,
 	isEditableTree,
+	placeholder,
 } ) {
@@ -151,4 +145,3 @@ const { formats, replacements, text, start, end } = value;
 
-			append( getParent( node ), padding );
-			append( getParent( node ), '' );
+			append( getParent( node ), ZWNBSP );
 		}
@@ -262,3 +255,12 @@
 		if ( shouldInsertPadding && i === text.length ) {
-			append( getParent( pointer ), padding );
+			append( getParent( pointer ), ZWNBSP );
+
+			if ( placeholder && text.length === 0 ) {
+				append( getParent( pointer ), {
+					type: 'span',
+					attributes: {
+						'data-rich-text-placeholder': placeholder,
+					},
+				} );
+			}
 		}
@@ -265,0 +267,0 @@

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

1207923

increased by68.92%

Number of package files

292

increased by10.61%

Lines of code

17180

increased by54.69%

Number of lines in readme file

357

increased by1.42%

Worsened metrics

Dependency count

14

increased by100%

Number of low supply chain risk alerts

3

increased byInfinity%

Dependency changes

• + Added@wordpress/deprecated@^2.5.0

• + Added@wordpress/dom@^2.4.0

• + Added@wordpress/element@^2.6.0

• + Added@wordpress/is-shallow-equal@^1.5.0

• + Added@wordpress/keycodes@^2.5.0

• + Addedclassnames@^2.2.5

• + Addedmemize@^1.0.5

• + Added@wordpress/is-shallow-equal@1.8.0(transitive)

• + Addedclassnames@2.5.1(transitive)

• Updated@wordpress/compose@^3.5.0

• Updated@wordpress/data@^4.7.0

• Updated@wordpress/escape-html@^1.5.0

• Updated@wordpress/hooks@^2.5.0

• Updatedlodash@^4.17.14