Basic options
Editor
Installation
npm install --save dante3
Basic usage
This is an empty editor. Will be initialized with default tooltips
<DanteEditor />
Is the same as
<DanteEditor content={null} />
Body placeholder
<DanteEditor bodyPlaceholder={"Do what you will"} />
Read Only
Read only will disable all interaction
<DanteEditor readOnly={true} content={"hello this is a non editable content"} />
onUpdate callback
onUpdate func will return the entire instance of the editor, so you can use all it's methods.
Save override example:
<State initial={{ data: "" }}>{({ state, setState }) => (<div><DanteEditor onUpdate={(editor) => setState({ data: editor.getHTML() })} /><div class="p-4 border-green-600 rounded-md border-2 overflow-auto">{`${state.data}`}</div></div>)}</State>
Tooltip position
Placement default
<DanteEditor readOnly={false}tooltips={[AddButtonConfig({fixed: true}),]}content={"hello this is a non editable content"}/>
Placement Up
<DanteEditor readOnly={false}tooltips={[AddButtonConfig({placement: "up",fixed: true}),]}content={null}/>
Menu fixed on top
<DanteEditor readOnly={false}tooltips={[MenuBarConfig({placement: "up",fixed: true}),]}content={null}/>
Fixed Menu on bottom
<DanteEditor readOnly={false}tooltips={[MenuBarConfig({fixed: true}),]}content={null}/>
Editor Props prosemirror editor props
<DanteEditor readOnly={false}editorProps={{handleKeyDown(view, event) {if(event.key === "Enter"){console.log("YES!!")return false}console.log(view, event)},attributes: {class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',},transformPastedText(text) {return text.toUpperCase()}}}content={null}/>