@micromag/element-heading 0.3.732 → 0.3.736

package/es/index.js

@@ -1,12 +1,10 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-import { v1 } from 'uuid';
+import React, { useId } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { LinkStyle, HighlightStyle } from '@micromag/core/components';
-import { getStyleFromLink, getStyleFromHighlight, getStyleFromText, getStyleFromMargin } from '@micromag/core/utils';
+import { getStyleFromLink, getStyleFromHighlight, getStyleFromText, getStyleFromMargin, addNonBreakingSpaces } from '@micromag/core/utils';
 
 var styles = {"container":"micromag-element-heading-container"};
 
@@ -16,6 +14,7 @@ var propTypes = {
   textStyle: PropTypes$1.textStyle,
   linksStyle: PropTypes$1.textStyle,
   margin: PropTypes$1.margin,
+  withoutNonBreakingSpaces: PropTypes.bool,
   className: PropTypes.string,
   headingRef: PropTypes.shape({})
 };
@@ -25,6 +24,7 @@ var defaultProps = {
   textStyle: null,
   linksStyle: null,
   margin: null,
+  withoutNonBreakingSpaces: false,
   className: null,
   headingRef: null
 };
@@ -34,6 +34,7 @@ var Heading = function Heading(_ref) {
     textStyle = _ref.textStyle,
     linksStyle = _ref.linksStyle,
     margin = _ref.margin,
+    withoutNonBreakingSpaces = _ref.withoutNonBreakingSpaces,
     className = _ref.className,
     headingRef = _ref.headingRef;
   var HeadingComponent = "h".concat(size);
@@ -55,21 +56,19 @@ var Heading = function Heading(_ref) {
     finalLinkStyle = _objectSpread(_objectSpread({}, finalLinkStyle), getStyleFromText(linksStyle));
   }
   var needsId = finalLinkStyle !== null || highlightStyle !== null;
-  var id = useMemo(function () {
-    return needsId ? "text-component-".concat(v1()) : null;
-  }, [needsId]);
+  var id = useId();
   return /*#__PURE__*/React.createElement(React.Fragment, null, finalLinkStyle !== null ? /*#__PURE__*/React.createElement(LinkStyle, {
-    selector: "#".concat(id),
+    selector: "#text-component-".concat(id),
     style: finalLinkStyle
   }) : null, finalHighlightStyle !== null ? /*#__PURE__*/React.createElement(HighlightStyle, {
-    selector: "#".concat(id),
+    selector: "#text-component-".concat(id),
     style: finalHighlightStyle
   }) : null, /*#__PURE__*/React.createElement(HeadingComponent, {
-    id: id,
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
+    id: needsId ? "text-component-".concat(id) : null,
+    className: classNames([styles.container, className]),
     style: finalStyle,
     dangerouslySetInnerHTML: {
-      __html: body
+      __html: !withoutNonBreakingSpaces ? addNonBreakingSpaces(body) : body
     },
     ref: headingRef
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-heading",
-    "version": "0.3.732",
+    "version": "0.3.736",
     "private": false,
     "description": "",
     "keywords": [
@@ -59,7 +59,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.732",
+        "@micromag/core": "^0.3.736",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^6.6.4",
@@ -69,5 +69,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5cb81184739b8b84d734bf2cdf5ae070562ab1dc"
+    "gitHead": "77bd0bf6941418463c0f7bbb68bf9b20379c5c55"
 }