Added onFocus and onBlur props. (#170)

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ## Unreleased
 
+### Added
+
+- Add [`onFocus`](https://www.draftail.org/docs/next/api#managing-focus) and [`onBlur`](https://www.draftail.org/docs/next/api#managing-focus) props to use callbacks on those events. This can be useful for [form validation](https://www.draftail.org/docs/next/form-validation). [#170](https://github.com/springload/draftail/issues/170), [#174](https://github.com/springload/draftail/pull/174), thanks to [@TheSpicyMeatball](https://github.com/TheSpicyMeatball).
+
 ### Fixed
 
 - Stop unnecessarily calling `onSave` in the editor’s `onBlur` ([#173](https://github.com/springload/draftail/issues/173)).

examples/docs.story.js

@@ -3,8 +3,9 @@ import React from "react";
 import { injectIntl } from "react-intl";
 import { convertFromHTML, convertToHTML } from "draft-convert";
 import { convertToRaw, convertFromRaw } from "draft-js";
+import { Formik } from "formik";
 
-import { INLINE_STYLE, ENTITY_TYPE, BLOCK_TYPE } from "../lib";
+import { DraftailEditor, INLINE_STYLE, ENTITY_TYPE, BLOCK_TYPE } from "../lib";
 
 import {
   INLINE_CONTROL,
@@ -368,4 +369,46 @@ storiesOf("Docs", module)
         entityTypes={[ENTITY_CONTROL.LINK, ENTITY_CONTROL.IMAGE]}
       />
     );
-  });
+  })
+  .add("Form validation", () => (
+    <Formik
+      initialValues={{ content: null }}
+      onSubmit={window.alert.bind(null, "Success!")}
+      validate={(values) => {
+        const errors = {};
+
+        if (!values.content) {
+          errors.content = "Please enter at least two paragraphs";
+        } else {
+          const { blocks, entityMap } = values.content;
+          if (Object.keys(entityMap).length === 0) {
+            errors.content = "Please use at least one link";
+          }
+
+          // Check there are at least two blocks with non-whitespace text
+          if (blocks.filter((b) => b.text.trim().length > 0).length < 2) {
+            errors.content = "Please enter at least two paragraphs";
+          }
+        }
+
+        return errors;
+      }}
+    >
+      {({ errors, touched, handleSubmit, setFieldTouched, setFieldValue }) => (
+        <form onSubmit={handleSubmit}>
+          <div className="form-field">
+            <DraftailEditor
+              entityTypes={[ENTITY_CONTROL.LINK]}
+              onSave={setFieldValue.bind(null, "content")}
+              onBlur={setFieldTouched.bind(null, "content")}
+              stateSaveInterval={errors.content ? 50 : 250}
+            />
+            <div role="alert">
+              {errors.content && touched.content && errors.content}
+            </div>
+          </div>
+          <button type="submit">Submit</button>
+        </form>
+      )}
+    </Formik>
+  ));

examples/utils/_forms.scss

@@ -1,3 +1,5 @@
+$color-error: #dc143c;
+
 fieldset {
   padding: 0;
   margin: 0;
@@ -60,3 +62,8 @@ fieldset {
   display: block;
   margin-bottom: 1rem;
 }
+
+.form-field [role="alert"] {
+  color: $color-error;
+  min-height: 18px;
+}

lib/components/DraftailEditor.js

@@ -108,12 +108,24 @@ class DraftailEditor extends Component {
     this.setState({
       hasFocus: true,
     });
+
+    const { onFocus } = this.props;
+
+    if (onFocus) {
+      onFocus();
+    }
   }
 
   onBlur() {
     this.setState({
       hasFocus: false,
     });
+
+    const { onBlur } = this.props;
+
+    if (onBlur) {
+      onBlur();
+    }
   }
 
   onTab(event) {
@@ -647,6 +659,10 @@ DraftailEditor.defaultProps = {
   rawContentState: null,
   // Called when changes occured. Use this to persist editor content.
   onSave: () => {},
+  // Called when the editor receives focus.
+  onFocus: null,
+  // Called when the editor loses focus.
+  onBlur: null,
   // Displayed when the editor is empty. Hidden if the user changes styling.
   placeholder: null,
   // Enable the use of horizontal rules in the editor.
@@ -698,6 +714,8 @@ DraftailEditor.defaultProps = {
 DraftailEditor.propTypes = {
   rawContentState: PropTypes.object,
   onSave: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
   placeholder: PropTypes.string,
   enableHorizontalRule: PropTypes.oneOfType([
     PropTypes.bool,

lib/components/DraftailEditor.test.js

@@ -438,6 +438,24 @@ describe("DraftailEditor", () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 
+  it("#onFocus", () => {
+    const onFocus = jest.fn();
+    const wrapper = shallowNoLifecycle(<DraftailEditor onFocus={onFocus} />);
+
+    wrapper.instance().onFocus();
+
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it("#onBlur", () => {
+    const onBlur = jest.fn();
+    const wrapper = shallowNoLifecycle(<DraftailEditor onBlur={onBlur} />);
+
+    wrapper.instance().onBlur();
+
+    expect(onBlur).toHaveBeenCalled();
+  });
+
   it("onTab", () => {
     jest.spyOn(RichUtils, "onTab");
 

package.json

@@ -66,6 +66,7 @@
     "eslint": "^5.6.0",
     "eslint-plugin-compat": "^2.5.1",
     "express": "^4.16.3",
+    "formik": "^1.4.1",
     "immutable": "~3.7.4",
     "jest": "^23.6.0",
     "jest-axe": "^3.1.0",

tests/integration/performance.test.js

@@ -1,3 +1,5 @@
+const PERFORMANCE_BUFFER = 1.5;
+
 describe("performance", () => {
   let page;
   beforeEach(async () => {
@@ -33,7 +35,7 @@ describe("performance", () => {
       () => window.performance.memory.usedJSHeapSize,
     );
     const heapSizeMB = heapSize / 10 ** 6;
-    expect(heapSizeMB).toBeLessThanOrEqual(19);
+    expect(heapSizeMB).toBeLessThanOrEqual(19 * PERFORMANCE_BUFFER);
   });
 
   it("markov_draftjs 41 speed", async () => {
@@ -46,6 +48,6 @@ describe("performance", () => {
     const mean = await page.$eval('[data-benchmark="mean"]', (elt) =>
       parseFloat(elt.innerHTML),
     );
-    expect(mean).toBeLessThanOrEqual(47 * 1.5);
+    expect(mean).toBeLessThanOrEqual(47 * PERFORMANCE_BUFFER);
   });
 });