@bangle.dev/react
This package provides you with a React API for integrating Bangle in your React app.
#
Installation#
Usage💡 Do not forget to load the stylesheet located at '@bangle.dev/core/style.css'.
React.Element#
BangleEditor:A React component for rendering a Bangle instance.
#
Propsid: ?string
The id of the DOM node bangle mounts on. Please make sure this is unique if you are having multiple editors.renderNodeViews: ?fn({ children, node, view, getPos, decorations, selected, attrs, updateAttrs}) -> React.Element
Allows customization of how a Node is rendered in the DOM. This will be called with anode
and you are expected to return a matching React component for thenode.type
. You are also expected to correctly nest thechildren
props. Note:children
prop is not available for atom nodes. See React custom rendering guidefocusOnInit: ?boolean=true
Brings editor to focus when it loads.onReady: ?fn(editor)
A callback which is called when the editor has mounted.children: ?React.Element
React components which need the editor context but are not directly editable i.e. do not lie inside the contentEditable of the editor. A good example of what can bechildren
is FloatingMenu.state: BangleEditorState
Pass in the output of useEditorState hook.pmViewOpts: ?Prosemirror.DirectEditorProps
#
useEditorState: ReactHookA hook for initialing the editor state.
💡 This hook will never trigger a re-render, if you want to react to a change in your editor consider using usePluginState. Read React Basic example.
📖 Checkout React example
#
usePluginState: ReactHookfn(pluginKey
<T>
): T
A hook for hooking to a Prosemirror plugin's state. This hook works only with children of <BangleEditor />
. This will re-render the React component every-time the plugin's state changes.
#
useEditorViewContext: ReactHookfn(): Prosemirror.EditorView
A hook for providing the Prosemirror.EditorView to a React component. This context is only available to children of <BangleEditor />
. It will never trigger a re-render as the hook maintains the same Prosemirror.EditorView instance throughout the editor's lifecycle.
📖 Checkout Floating menu dropdown example.