Как прочитать состояние HTMLRenderer в стороннем плагине

Question

Я разработал свой класс рендеринга и прекрасно отрисовал данные, но я разработал некоторый плагин, который предназначен для рендеринга данных для шаблона.

В состоянии плагина я не смог найти никаких данных.

здесь найдите класс рендера.

import React, { Component } from 'react'

import { HTMLRenderer } from 'ory-editor-renderer'
import { createEmptyState } from 'ory-editor-core'
import dataProvider from '../dataProvider';
// Load some exemplary plugins:
import slate from 'ory-editor-plugins-slate' // The rich text area plugin
import image from 'ory-editor-plugins-image';
import spacer from 'ory-editor-plugins-spacer';
import divider from 'ory-editor-plugins-divider';

import 'ory-editor-plugins-slate/lib/index.css' // Stylesheets for the rich text area plugin
import parallax from 'ory-editor-plugins-parallax-background' // A plugin for parallax background images
import 'ory-editor-plugins-parallax-background/lib/index.css'
import { GET_ONE } from 'react-admin';
import firstName from './plugins/firstName'
import lastName from './plugins/lastName'
import Native from './plugins/Native'
import PCSLetterInput from './plugins/pcsLetterDate';
import firstNameLable from './plugins/lables/firstNameLable';

// Define which plugins we want to use. We only have slate and parallax available, so load those.
const EditorPlugins = {
    content: [
        slate(),
        image,
        spacer,
        firstName,
        lastName,
        PCSLetterInput,
        divider,
        firstNameLable
    ], // Define plugins for content cells. To import multiple plugins, use [slate(), image, spacer, divider]
    layout: [parallax({ defaultPlugin: slate() })], // Define plugins for layout cells
    Native
}

class TemplateRender extends Component {

    constructor(props) {
        super(props);
        this.state = {
            template:createEmptyState()
        };    
    }


    myCallback = (dataFromParent) => {

        this.state = dataFromParent
    }

    onUpdate = (val) => {
        this.setState({
          data: val
        })
      };

    componentWillMount() {
        console.log(this);
        dataProvider(GET_ONE, 'templates', { id: this.props.id })
            .then(response => response.data.body)
            .then(template => {
                this.state.template = JSON.parse(template)
            })
        dataProvider(GET_ONE, 'employees', { id: this.props.record.person_id })
            .then(response => response.data)
            .then(employee => {
                this.state.template.data = employee
            })
        console.log(this.state);
    }


    render() {
        return (
            <div className="my-editor" >
                <HTMLRenderer state={this.state.template}  onUpdate={this.onUpdate.bind(this.state)}   plugins={EditorPlugins} />
            </div>
        )
    }
}

export default TemplateRender;

Здесь найдите код плагина.//'../Fields/firstName 'import React, {Component} из' response ';импортировать dataProvider из '../../dataProvider';import RemoveIcon из '@ material-ui / icons / Remove' import {GET_ONE} из'act-admin ';import {Typography, ButtonBase} из '@ material-ui / core';

const onRemove = (props) =>
    new Promise(
        (resolve: Function, reject: Function) =>
            props ? resolve() : reject()
    )



class FirstName extends Component {


    state = {
        employee: {
            Personal_Detail: {
                f_name: 'First Name'
            }
        }
    };


    render() {
        console.log(this.props)
        return (
            <Typography classe="ory-cell-sm-2" >
                {this.state.employee ? this.state.employee.Personal_Detail.f_name : ''}
                {this.state.employee ? <small><ButtonBase {...this.props} onClick={onRemove}><RemoveIcon></RemoveIcon></ButtonBase></small> : ''}
            </Typography>
        )
    }


}

export default (FirstName);

Экспорт плагина

import React, { Component } from 'react';
import PeopleIcon from '@material-ui/icons/People';
import FirstName from '../Fields/firstName'


const handleRemoveHotKey = (
  _: KeyboardEvent,
  {
    content: {
      state: { editorState }
    }
  }: Props
) =>
  new Promise(
    (resolve: Function, reject: Function) =>
    FirstName.length < 1 ? resolve() : reject()
  )


 export default {
    Component: FirstName,
    IconComponent: <PeopleIcon />,
    name: 'example/layout/first-name',
    version: '0.0.1',
    text: 'First Name',
    description: 'First Name of the Employee',
    handleRemoveHotKey:handleRemoveHotKey,
  }

Как я могу прочитать эти данные в плагине firstName