From f3fbc02aacbb4d65f72f2c4115596ff2681f1f4e Mon Sep 17 00:00:00 2001
From: David Bachmann <dabbi@dabbi.is>
Date: Thu, 14 Sep 2017 15:59:37 +0000
Subject: [PATCH 1/2] Render callback WIP

---
 .../EditInline/EditInline.admin.tsx           | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/tux/src/components/EditInline/EditInline.admin.tsx b/packages/tux/src/components/EditInline/EditInline.admin.tsx
index 14c3573..b6f22fb 100644
--- a/packages/tux/src/components/EditInline/EditInline.admin.tsx
+++ b/packages/tux/src/components/EditInline/EditInline.admin.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, ReactElement } from 'react'
 import PropTypes from 'prop-types'
 import { renderToStaticMarkup } from 'react-dom/server'
 import deepEqual from 'deep-eql'
@@ -14,14 +14,18 @@ import { HoverToolbar, HtmlPaste, MarkShortcuts } from '../../slate/plugins'
 export interface Props extends EditableProps {
   children?: ReactNode
   placeholder?: string
+  defaultValue?: string
   field: string | Array<string>
   format?: Format
   plugins?: Plugin[]
+  render?: (options: { isEditing: boolean, value: any, renderer: ReactElement<any> }) => Element
+  value?: any
 }
 
 export interface State {
   editorState: EditorState
   plugins: Plugin[]
+  value: any
 }
 
 class EditInline extends React.Component<Props, State> {
@@ -30,7 +34,8 @@ class EditInline extends React.Component<Props, State> {
 
     this.state = {
       editorState: this.getInitialEditorState(),
-      plugins: props.plugins || this.getDefaultPlugins()
+      plugins: props.plugins || this.getDefaultPlugins(),
+      value: get(props.model, props.field),
     }
   }
 
@@ -53,7 +58,7 @@ class EditInline extends React.Component<Props, State> {
     const { model, field, format, children } = this.props
     const value = get(model, field)
     let state: EditorState | null = null
-
+    
     try {
       state = deserialize(value, format)
     } catch (err) {
@@ -117,6 +122,7 @@ class EditInline extends React.Component<Props, State> {
     const fullModel = await tux.adapter.load(model)
     set(fullModel, field, newValue)
     await tux.adapter.save(fullModel)
+    this.setState({ value: newValue })
   }
 
   onChange = async (editorState: EditorState) => {
@@ -132,25 +138,33 @@ class EditInline extends React.Component<Props, State> {
     const {
       isEditing,
       placeholder,
+      render,
+      format,
     } = this.props
+
     const {
       editorState,
       plugins,
+      value,
     } = this.state
 
-    if (!isEditing && !editorState.document.length) {
-      return null
+    let renderer = (
+      <SlateRenderer
+        state={editorState}
+        onChange={this.onChange}
+        readOnly={!isEditing}
+        placeholder={placeholder || this.defaultPlaceholder()}
+        plugins={plugins}
+      />
+    )
+
+    if (render && typeof render === 'function') {
+      renderer = render({ value, renderer, isEditing })
     }
 
     return (
       <div className={`EditInline${isEditing ? ' is-editing' : ''}`}>
-        <SlateRenderer
-          state={editorState}
-          onChange={this.onChange}
-          readOnly={!isEditing}
-          placeholder={placeholder || this.defaultPlaceholder()}
-          plugins={plugins}
-        />
+        {renderer}
         <style jsx>{`
           .EditInline.is-editing:hover {
             cursor: text;

From d2e4f30dbafa55c7cf257c7b176606ab472eceea Mon Sep 17 00:00:00 2001
From: David Bachmann <dabbi@dabbi.is>
Date: Fri, 15 Sep 2017 10:02:26 +0000
Subject: [PATCH 2/2] Fix build

---
 packages/tux/src/components/EditInline/EditInline.admin.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/tux/src/components/EditInline/EditInline.admin.tsx b/packages/tux/src/components/EditInline/EditInline.admin.tsx
index b6f22fb..7df68fd 100644
--- a/packages/tux/src/components/EditInline/EditInline.admin.tsx
+++ b/packages/tux/src/components/EditInline/EditInline.admin.tsx
@@ -18,7 +18,7 @@ export interface Props extends EditableProps {
   field: string | Array<string>
   format?: Format
   plugins?: Plugin[]
-  render?: (options: { isEditing: boolean, value: any, renderer: ReactElement<any> }) => Element
+  render?: (options: { isEditing: boolean, value: any, renderer: ReactElement<any> }) => ReactElement<any>
   value?: any
 }
 
@@ -177,4 +177,4 @@ class EditInline extends React.Component<Props, State> {
   }
 }
 
-export default createEditable<Props>()(EditInline)
\ No newline at end of file
+export default createEditable<Props>()(EditInline)