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