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