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 className="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()
},
handleDrop: function (view, event, slice, moved) {
if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
let file = event.dataTransfer.files[0];
let filesize = ((file.size/1024)/1024).toFixed(4);
const { schema } = view.state;
const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
let _URL = window.URL || window.webkitURL;
if (file.type.startsWith("image/")) {
let image = new Image();
image.src = _URL.createObjectURL(file);
image.onload = function() {
const node = schema.nodes.ImageBlock.create({ src: image.src });
const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction);
}
} else if (file.type.startsWith("video/")) {
const node = schema.nodes.VideoRecorderBlock.create({ url: _URL.createObjectURL(file) });
const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction);
} else if (file.type.startsWith("audio/")) {
const node = schema.nodes.AudioRecorderBlock.create({ url: _URL.createObjectURL(file) });
const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction);
} else {
const node = schema.nodes.FileBlock.create({ url: _URL.createObjectURL(file) });
const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction);
}
return true
}
return false; // not handled use default behaviour
}
}
}
content={null}
/>