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