holepunchto-deps / @holepunchto / keet-editor / src / extensions / file-base.js

import { Node, mergeAttributes } from '@tiptap/core'
import { ReactNodeViewRenderer } from '@tiptap/react'

import { NODE_ATTR } from '../constants.js'

export const FileBase = Node.create({
  atom: true,

  draggable: true,

  inline () {
    return this.options.inline
  },

  group () {
    return this.options.inline ? 'inline' : 'block'
  },

  addOptions: {
    inline: false,
    HTMLAttributes: {}
  },

  addAttributes () {
    return {
      [NODE_ATTR.ID]: {
        default: ''
      },
      src: {
        default: null
      },
      preview: {
        default: null
      },
      name: {
        default: null
      },
      alt: {
        default: null
      },
      type: {
        default: null
      },
      title: {
        default: null
      },
      style: {
        default: ''
      },
      dimensions: {
        default: null
      }
    }
  },

  parseHTML () {
    return [
      {
        tag: this.name
      }
    ]
  },

  renderHTML ({ HTMLAttributes }) {
    return [this.name, mergeAttributes(HTMLAttributes)]
  },

  addNodeView () {
    const style = 'display: inline-block; vertical-align: top'

    return ReactNodeViewRenderer(this.options.Component, { attrs: { style } })
  }
})