Question about adding footnotes to Wagtail - wagtail

Question

I'm making a project on wagtail and want to add possibility to add footnotes to a text in Draftjs editor. I've read that this is possible here, but then I tried to repeat this success i've got only errors.
Here my code of wagtail_hooks.py:
#hooks.register('register_rich_text_features')
def register_footnote_feature(features):
features.default_features.append('footnote')
"""
Registering the `footnote` feature, which uses the `FOOTNOTE` Draft.js entity type,
and is stored as HTML with a `<span data-footnote>` tag.
"""
feature_name = 'footnote'
type_ = 'FOOTNOTE'
control = {
'type': type_,
'label': '$',
'description': 'footnote',
}
features.register_editor_plugin(
'draftail', feature_name, draftail_features.EntityFeature(
control,
js=['js/footnote.js'],
css={'all': []}
)
)
features.register_converter_rule('contentstate', feature_name, {
# Note here that the conversion is more complicated than for blocks and inline styles.
'from_database_format': {'span[data-footnote]': FootnoteEntityElementHandler(type_)},
'to_database_format': {'entity_decorators': {type_: footnote_entity_decorator}},
})
def footnote_entity_decorator(props):
"""
Draft.js ContentState to database HTML.
Converts the FOOTNOTE entities into a span tag.
"""
return DOM.create_element('span', {
'data-footnote': props['footnote'],
}, props['children'])
class FootnoteEntityElementHandler(InlineEntityElementHandler):
"""
Database HTML to Draft.js ContentState.
Converts the span tag into a FOOTNOTE entity, with the right data.
"""
mutability = 'MUTABLE'
def get_attribute_data(self, attrs):
"""
Take the ``footnote`` value from the ``data-footnote`` HTML attribute.
"""
return {
'footnote': attrs['data-footnote'],
Here is the code of footnote.js:
const React = window.React;
const Modifier = window.DraftJS.Modifier;
const EditorState = window.DraftJS.EditorState;
class FootnoteSource extends React.Component {
componentDidMount() {
const { editorState, entityType, onComplete } = this.props;
const content = editorState.getCurrentContent();
// // Uses the Draft.js API to create a new entity with the right data.
const contentWithEntity = content.createEntity(entityType.type, 'MUTABLE', {});
const entityKey = contentWithEntity.getLastCreatedEntityKey();
const editorStateWithEntity = Modifier.applyEntity(
editorState.getCurrentContent(),
editorState.getSelection(),
entityKey
)
const nextState = EditorState.push(editorState, editorStateWithEntity, 'apply-entity');
onComplete(nextState);
}
render() {
return null;
}
}
//import PropTypes from 'prop-types';
const Footnote = (props) => {
const { children, entityKey, contentState } = props;
const data = contentState.getEntity(entityKey).getData();
return (
<span
role="button"
className="FootnoteEntity"
>
<span class="FootnoteEntity__label" aria-hidden="true">[Footnote]</span>
{children}
</span>
);
};
Footnote.propTypes = {
entityKey: PropTypes.string.isRequired,
contentState: PropTypes.object.isRequired,
};
window.draftail.registerPlugin({
type: 'FOOTNOTE',
source: FootnoteSource,
decorator: Footnote,
});
I've got this code from this question. Unfortunately, I've not found any docs or references about system of JS objects of Wagtail admin panel. So, now I just don't know what to do, cause I've got nothing to work with.
Now in the richtext editor I just get error:
Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at r (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:102534)
at i (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:102803)
at It (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:127629)
at c (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:133308)
at h (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:134676)
at v (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:135240)
at http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:137125
at En (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:142062)
at Dn (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:149997)
at xr (http://localhost:8000/static/wagtailadmin/js/vendor.js?v=a92d317e:1:169294)
in div
in e
in e
May be anyone know how to extend Draftail in Wagtail admin panel and could pick me where to dig?