@rhc-shared-components/rich-text-editor 0.3.0 → 0.3.3

package/dist/index.js

@@ -123,6 +123,24 @@ var InsertCss$1 = function InsertCss() {
   }
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -212,17 +230,21 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
   var _useFormikContext = formik.useFormikContext(),
       isSubmitting = _useFormikContext.isSubmitting,
       setFieldValue = _useFormikContext.setFieldValue,
-      validateField = _useFormikContext.validateField;
+      validateField = _useFormikContext.validateField,
+      setTouched = _useFormikContext.setTouched,
+      touched = _useFormikContext.touched;
 
   var _React$useState = React__namespace.useState(maxLength || 0),
       numberOfCharacters = _React$useState[0],
       setNoOfCharacters = _React$useState[1];
 
   React__namespace.useEffect(function () {
-    setNoOfCharacters(value && value.length && maxLength ? maxLength - value.length : 0);
+    if (maxLength) {
+      setNoOfCharacters(value && value.length ? maxLength - value.length : maxLength);
+    }
   }, [value, maxLength]);
   return React__namespace.createElement(FormGroupContainer, {
-    validated: meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
+    validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
     onClick: function onClick() {
       if (editorRef) {
         // @ts-ignore
@@ -239,6 +261,7 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
     id: rest.name,
     name: rest.name,
     onReady: function onReady(editor) {
+      editor.setData(value);
       editorRef.current = editor;
     },
     disabled: disabled || isSubmitting,
@@ -247,13 +270,16 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
       validateField(rest.name);
     },
     onBlur: function onBlur(data) {
+      var _extends2;
+
+      setTouched(_extends({}, touched, (_extends2 = {}, _extends2[rest.name] = true, _extends2)));
       setFieldValue(rest.name, data);
       validateField(rest.name);
     }
   }), showMaxLengthText && React__namespace.createElement("div", {
     "data-testid": 'formTextAreaMaxLengthText',
     className: 'max-char-length' + (numberOfCharacters < 0 ? ' maxlength-error' : '')
-  }, numberOfCharacters, " character", numberOfCharacters !== 1 && 's', ' ', "remaining"));
+  }, numberOfCharacters, " character", numberOfCharacters !== 1 && 's', ' ', "remaining (includes HTML markup)"));
 };
 
 exports.RichTextEditor = RichTextEditor;

package/dist/index.modern.js

@@ -100,6 +100,24 @@ const InsertCss$1 = () => {
   }
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -193,14 +211,18 @@ const RichTextEditorFormComponent = _ref => {
   const {
     isSubmitting,
     setFieldValue,
-    validateField
+    validateField,
+    setTouched,
+    touched
   } = useFormikContext();
   const [numberOfCharacters, setNoOfCharacters] = React.useState(maxLength || 0);
   React.useEffect(() => {
-    setNoOfCharacters(value && value.length && maxLength ? maxLength - value.length : 0);
+    if (maxLength) {
+      setNoOfCharacters(value && value.length ? maxLength - value.length : maxLength);
+    }
   }, [value, maxLength]);
   return React.createElement(FormGroupContainer, {
-    validated: meta.error ? ValidatedOptions.error : ValidatedOptions.default,
+    validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
     onClick: () => {
       if (editorRef) {
         // @ts-ignore
@@ -217,6 +239,7 @@ const RichTextEditorFormComponent = _ref => {
     id: rest.name,
     name: rest.name,
     onReady: editor => {
+      editor.setData(value);
       editorRef.current = editor;
     },
     disabled: disabled || isSubmitting,
@@ -225,13 +248,16 @@ const RichTextEditorFormComponent = _ref => {
       validateField(rest.name);
     },
     onBlur: data => {
+      setTouched(_extends({}, touched, {
+        [rest.name]: true
+      }));
       setFieldValue(rest.name, data);
       validateField(rest.name);
     }
   }), showMaxLengthText && React.createElement("div", {
     "data-testid": 'formTextAreaMaxLengthText',
     className: 'max-char-length' + (numberOfCharacters < 0 ? ' maxlength-error' : '')
-  }, numberOfCharacters, " character", numberOfCharacters !== 1 && 's', ' ', "remaining"));
+  }, numberOfCharacters, " character", numberOfCharacters !== 1 && 's', ' ', "remaining (includes HTML markup)"));
 };
 
 export { RichTextEditor, RichTextEditorFormComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/rich-text-editor",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "WYSWYG Editor for Red Hat Certified Apps",
   "author": "gautamkrishnar",
   "license": "MIT",
@@ -75,6 +75,5 @@
     "formik": "^2.1.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
-  },
-  "gitHead": "9b859638f0e80c5a77f3660defbe00edcab15840"
+  }
 }