Pass 'null' as selection range when sanitising before mount

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/index.umd.js": {
-    "bundled": 15914,
-    "minified": 6880,
-    "gzipped": 2594
+    "bundled": 16018,
+    "minified": 6922,
+    "gzipped": 2603
   },
   "dist/index.umd.min.js": {
-    "bundled": 15914,
-    "minified": 6880,
-    "gzipped": 2594
+    "bundled": 16018,
+    "minified": 6922,
+    "gzipped": 2603
   },
   "dist/index.esm.js": {
-    "bundled": 14601,
-    "minified": 7845,
-    "gzipped": 2641,
+    "bundled": 14699,
+    "minified": 7903,
+    "gzipped": 2649,
     "treeshaked": {
       "rollup": {
-        "code": 6566,
+        "code": 6608,
         "import_statements": 63
       },
       "webpack": {
-        "code": 7644
+        "code": 7690
       }
     }
   }

lib/cjs/react-sane-contenteditable.js

@@ -50,7 +50,7 @@ var propTypes = {
   focus: _propTypes2.default.bool,
   maxLength: _propTypes2.default.number,
   multiLine: _propTypes2.default.bool,
-  sanitise: _propTypes2.default.bool,
+  sanitise: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.func]),
   caretPosition: _propTypes2.default.oneOf(['start', 'end']),
   // The element to make contenteditable.
   // Takes an element string ('div', 'span', 'h1') or a styled component
@@ -235,6 +235,10 @@ function (_Component) {
   }, {
     key: "getRange",
     value: function getRange() {
+      if (!this.selection) {
+        return null;
+      }
+
       return this.selection.rangeCount ? this.selection.getRangeAt(0) : document.createRange();
     }
   }, {

lib/esm/react-sane-contenteditable.js

@@ -17,7 +17,7 @@ var propTypes = {
   focus: PropTypes.bool,
   maxLength: PropTypes.number,
   multiLine: PropTypes.bool,
-  sanitise: PropTypes.bool,
+  sanitise: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   caretPosition: PropTypes.oneOf(['start', 'end']),
   // The element to make contenteditable.
   // Takes an element string ('div', 'span', 'h1') or a styled component
@@ -202,6 +202,10 @@ function (_Component) {
   }, {
     key: "getRange",
     value: function getRange() {
+      if (!this.selection) {
+        return null;
+      }
+
       return this.selection.rangeCount ? this.selection.getRangeAt(0) : document.createRange();
     }
   }, {

src/__tests__/react-sane-contenteditable.test.js

@@ -292,6 +292,16 @@ describe('Sanitisation', () => {
     expect(wrapper.text()).toEqual('foo bar');
   });
 
+  it('calls sanitise function on mount', () => {
+    const content = 'foo';
+    const sanitise = jest.fn(value => value);
+    const wrapper = mount(<ContentEditable content={content} sanitise={sanitise} />);
+
+    // Will be passed 'null' range when sanitised server-side (ie; before
+    // "mount")
+    expect(sanitise).toHaveBeenCalledWith(content, null);
+  });
+
   it('calls sanitise prop when provided', () => {
     const content = 'foo';
     const nextContent = 'foo bar';

src/react-sane-contenteditable.js

@@ -9,7 +9,7 @@ const propTypes = {
   focus: PropTypes.bool,
   maxLength: PropTypes.number,
   multiLine: PropTypes.bool,
-  sanitise: PropTypes.bool,
+  sanitise: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   caretPosition: PropTypes.oneOf(['start', 'end']),
   // The element to make contenteditable.
   // Takes an element string ('div', 'span', 'h1') or a styled component
@@ -83,7 +83,11 @@ class ContentEditable extends Component {
     }
   }
 
-  getRange () {
+  getRange() {
+    if (!this.selection) {
+      return null;
+    }
+
     return this.selection.rangeCount ? this.selection.getRangeAt(0) : document.createRange();
   }