feat: add element override for text nodes

package.json

@@ -65,6 +65,6 @@
     "react": ">= 16.0.0"
   },
   "dependencies": {
-    "@contentful/rich-text-types": "^12.1.2"
+    "@contentful/rich-text-types": "^15.12.0"
   }
 }

src/components/RichText/RichText.spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
+import PropTypes from 'prop-types';
 
 import {
   createDocument,
@@ -27,4 +28,28 @@ describe('RichText', () => {
       expect(actual).toMatchSnapshot();
     });
   });
+
+  describe('styles', () => {
+    it('should allow to override normal text', () => {
+      const Text = ({ children, ...props }) => (
+        <span {...props}>{children}</span>
+      );
+      Text.propTypes = {
+        children: PropTypes.node
+      };
+
+      const richText = createDocument([paragraph]);
+      const actual = create(
+        <RichText
+          richText={richText}
+          overrides={{
+            text: {
+              component: Text
+            }
+          }}
+        />
+      );
+      expect(actual).toMatchSnapshot();
+    });
+  });
 });

src/components/RichText/__snapshots__/RichText.spec.js.snap

@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RichText styles should allow to override normal text 1`] = `
+<p>
+  <span>
+    This is normal text.
+  </span>
+  <strong>
+    This is bold text.
+  </strong>
+  <em>
+    This is italic text.
+  </em>
+  <u>
+    This is underlined text.
+  </u>
+  <a
+    href="https://acme.com"
+  >
+    <span>
+      This is a hyperlink.
+    </span>
+  </a>
+</p>
+`;
+
 exports[`RichText styles should render with default styles 1`] = `
 Array [
   <h1>

src/rich-text-to-jsx.js

@@ -117,7 +117,17 @@ export function textNodeToJsx(node, options, key) {
   const { overrides, createElement } = options;
 
   if (isEmpty(marks)) {
-    return value;
+    const element = getElement('text', overrides);
+
+    if (!element) {
+      return value;
+    }
+
+    const props = getProps('text', overrides, {
+      ...data,
+      key
+    });
+    return createElement(element, props, value);
   }
 
   return marks.reduce((children, mark, markKey) => {