Configurable Extensions


# Extensions


### file

Upload handler example for audio recorder

```js live=true
<DanteEditor readOnly={false} 
  widgets={[
    AudioRecorderBlockConfig({
      options: {
        seconds_to_record: 20000,
        upload_handler: (a, editor)=>{
          console.log("UPLOAD HANDLER HERE")
          //editor.updateAttributes({
          //  url: "/aaaa",
          //});
        },
        //upload_url: `/attachments.json?id=${this.props.data.id}&app_id=${this.props.app.key}`,
      },
    })
  ]}
  tooltips={[
    AddButtonConfig({
      placement: "up",
      fixed: true
    }),
  ]} 
  content={null} 
/>
```





# Editor

## Installation

`npm install --save dante3`

## Basic usage

This is an empty editor. Will be initialized with default tooltips

```js live=true
<DanteEditor />
```

Is the same as

```js live=true
<DanteEditor content={null} />
```

## Body placeholder

```js live=true
<DanteEditor bodyPlaceholder={"Do what you will"} />
```

## Read Only

Read only will disable all interaction

```js live=true
<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:

```js live=true
<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
```js live=true
<DanteEditor readOnly={false} 
  tooltips={[
    AddButtonConfig({
      fixed: true
    }),
  ]} 
  content={"hello this is a non editable content"} 
/>
```

Placement Up
```js live=true
<DanteEditor readOnly={false} 
  tooltips={[
    AddButtonConfig({
      placement: "up",
      fixed: true
    }),
  ]} 
  content={null} 
/>
```


Menu fixed on top
```js live=true
<DanteEditor readOnly={false} 
  tooltips={[
    MenuBarConfig({
      placement: "up",
      fixed: true
    }),
  ]} 
  content={null} 
/>
```

Fixed Menu on bottom
```js live=true
<DanteEditor readOnly={false} 
  tooltips={[
    MenuBarConfig({
      fixed: true
    }),
  ]} 
  content={null} 
/>
```


Editor Props 
[prosemirror editor props](https://prosemirror.net/docs/ref/#view.Props)
```js live=true
<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} 
/>
```

Basic options


# Editor Parsers


Editor parser using @tiptap/html generateJSON

## Color styles


```js live=true

<State initial={{ data: "" }}>
  {({ state, setState }) => {
    var html = `<p>This is a file parser using image-block</p>
    <image-block src="https://placehold.co/800x400"/> `
     var a = generateJSON(html, [
      StarterKit, 
      extensionFactory(ImageBlockConfig()),
      extensionFactory(FileBlockConfig())
    ])

    return <div>
      <Renderer raw={a}/>
      {JSON.stringify(a)}
    </div>
  }}
</State>
```


```js live=true



<State initial={{ data: "" }}>
  {({ state, setState }) => {
    var html = `<p>This is a file parser using file-block </p>
    <file-block url="https://placehold.co/800x400"/>`
     var a = generateJSON(html, [
      StarterKit, 
      extensionFactory(ImageBlockConfig()),
      extensionFactory(FileBlockConfig())
    ])

    return <div>
      <Renderer raw={a}/>
      {JSON.stringify(a)}
    </div>
  }}
</State>
```

Parsers


# Editor Renderer


You can store your content as a JSON object or as a good old HTML string. 
Both work fine. And of course, you can pass both formats to the editor to restore your content. 


If you need to render the content for example to generate the HTML for a blog post, 
which has been written in Tiptap, you’ll probably want to do just that without an actual editor instance.

That’s what the `Renderer` is for. It’s a helper function which renders HTML without an actual editor instance.


## Color styles


```js live=true
<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div>
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"helo"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"#d42323"}}],"text":"o"}]}]}
}/>

    </div>
  )}
</State>
```

## Links marks

```js live=true
<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div>
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"hola "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://fkfjfj.com","target":"_blank","class":null}}],"text":"http://fkfjfj.com"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://google.com","target":"_blank","class":null}}],"text":"google.com"}]}]}
      }/>
    </div>
  )}
</State>
```

### Image Block

```js live=true
<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div>
      <Renderer raw={
        {"type":"doc","content":[{"type":"ImageBlock","attrs":{"url":"https://miro.medium.com/v2/resize:fit:1400/format:webp/1*cg_wdzpS-Me6_CQyL1pHiA.jpeg","src":null,"width":1686,"height":1580,"loading":true,"loading_progress":0,"caption":"caption!","direction":"center","file":{},"aspect_ratio":{"width":1000,"height":937.129300118624,"ratio":93.7129300118624}}}]}
      }/>
    </div>
  )}
</State>
```

### Integraiton content

```js live=true
<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        contentJSON
      }/>
    </div>
  )}
</State>
```


### Integration embeds

```js live=true
<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Hello"}]},{"type":"VideoBlock","attrs":{"embed_data":{"provider_url":"https://www.youtube.com/","height":113,"type":"video","html":"<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/SjhIlw3Iffs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"GPT-4 Creator Ilya Sutskever\"></iframe>","author_name":"Eye on AI","author_url":"https://www.youtube.com/@eyeonai3425","thumbnail_url":"https://i.ytimg.com/vi/SjhIlw3Iffs/hqdefault.jpg","title":"GPT-4 Creator Ilya Sutskever","thumbnail_width":480,"width":200,"provider_name":"YouTube","thumbnail_height":360,"version":"1.0","url":"https://www.youtube.com/watch?v=SjhIlw3Iffs"},"provisory_text":"https://www.youtube.com/watch?v=SjhIlw3Iffs"},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.youtube.com/watch?v=SjhIlw3Iffs","target":"_blank","class":null}}],"text":"https://www.youtube.com/watch?v=SjhIlw3Iffs"}]},{"type":"paragraph","content":[{"type":"text","text":"hellok"}]},{"type":"paragraph"}]}
      }/>
    </div>
  )}
</State>
```

```js live=true
<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph"},{"type":"EmbedBlock","attrs":{"embed_data":{"error":"no matching providers found","url":"https://github.com/michelson"},"provisory_text":"https://github.com/michelson"},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/michelson","target":"_blank","class":null}}],"text":"https://github.com/michelson"}]},{"type":"paragraph"}]}
      }/>
    </div>
  )}
</State>
```


### file

```js live=true
<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph"},{"type":"FileBlock","attrs":{"url":"blob:http://localhost:8080/fda338c3-79d5-4994-bb8a-8f1e6ebcfd52","src":null,"width":"","height":"","loading":true,"loading_progress":0,"caption":"caption!","direction":"center","file":{},"aspect_ratio":{"width":200,"height":200,"ratio":100}}}]}
      }/>
    </div>
  )}
</State>
```

### Video Recorder

```js live=true
<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        {"type":"doc","content":[{"type":"VideoRecorderBlock","attrs":{
          "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
          "src":null,
          "width":"","height":"","loading":false,"loading_progress":0,"caption":null,"direction":"center","file":null},"content":[{"type":"text","text":"kokokk"}]}]}
      }/>
    </div>
  )}
</State>
```




