From 8469c64d9eaeb3121e617cf6b1c0165bae5500d1 Mon Sep 17 00:00:00 2001
From: Craig <talktome@iwillreply.com>
Date: Wed, 16 Aug 2017 09:53:28 -0700
Subject: [PATCH] Custom wrapper component (#978)

* Provide prop to pass in custom wrapper component

* Fix linting

* Fix lint

* PR Feedback - change propName container -> tagName; remove custom-wrapper example

* Reset examples/index.js
---
 src/components/content.js | 13 ++++++++-----
 src/plugins/core.js       |  1 +
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/content.js b/src/components/content.js
index ef3f98c7d..1b2877796 100644
--- a/src/components/content.js
+++ b/src/components/content.js
@@ -62,7 +62,8 @@ class Content extends React.Component {
     spellCheck: Types.bool.isRequired,
     state: Types.object.isRequired,
     style: Types.object,
-    tabIndex: Types.number
+    tabIndex: Types.number,
+    tagName: Types.string
   }
 
   /**
@@ -72,7 +73,8 @@ class Content extends React.Component {
    */
 
   static defaultProps = {
-    style: {}
+    style: {},
+    tagName: 'div'
   }
 
   /**
@@ -826,7 +828,8 @@ class Content extends React.Component {
 
   render() {
     const { props } = this
-    const { className, readOnly, state, tabIndex, role } = props
+    const { className, readOnly, state, tabIndex, role, tagName } = props
+    const Container = tagName
     const { document } = state
     const children = document.nodes
       .map(node => this.renderNode(node))
@@ -855,7 +858,7 @@ class Content extends React.Component {
     debug('render', { props })
 
     return (
-      <div
+      <Container
         data-slate-editor
         key={this.tmp.forces}
         ref={this.ref}
@@ -891,7 +894,7 @@ class Content extends React.Component {
       >
         {children}
         {this.props.children}
-      </div>
+      </Container>
     )
   }
 
diff --git a/src/plugins/core.js b/src/plugins/core.js
index f88e0c567..b1b4cf8ea 100644
--- a/src/plugins/core.js
+++ b/src/plugins/core.js
@@ -962,6 +962,7 @@ function Plugin(options = {}) {
         state={state}
         style={props.style}
         tabIndex={props.tabIndex}
+        tagName={props.tagName}
       />
     )
   }