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}
/>