{"size": 2082, "ext": "js", "max_stars_repo_path": "src/editor/AttachmentImage.js", "max_stars_repo_name": "sparcs-kaist/new-ara-web", "max_stars_repo_stars_event_min_datetime": "2018-08-07T07:59:30.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-28T11:04:10.000Z", "max_issues_repo_path": "src/editor/AttachmentImage.js", "max_issues_repo_name": "sparcs-kaist/new-ara-web", "max_issues_repo_issues_event_min_datetime": "2018-06-30T10:38:21.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T12:34:56.000Z", "max_forks_repo_path": "src/editor/AttachmentImage.js", "max_forks_repo_name": "sparcs-kaist/new-ara-web", "max_forks_repo_forks_event_min_datetime": "2019-11-09T06:38:33.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-21T13:34:55.000Z"}
{"max_stars_count": 18, "max_issues_count": 154, "max_forks_count": 6, "avg_line_length": 25.3902439024, "max_line_length": 89, "alphanum_fraction": 0.5321805956}
import { Node } from 'tiptap'
import TheAttachmentImage from '../components/TheAttachmentImage'

/**
 * Matches following attributes in Markdown-typed image: [, alt, src, title]
 *
 * Example:
 * ![Lorem](image.jpg) -> [, "Lorem", "image.jpg"]
 * ![](image.jpg "Ipsum") -> [, "", "image.jpg", "Ipsum"]
 * ![Lorem](image.jpg "Ipsum") -> [, "Lorem", "image.jpg", "Ipsum"]
*
 * (Disabled as we do not support foreign images)
 * const IMAGE_INPUT_REGEX = /!\[(.+|:?)\]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
 */

// Rewrite of default Image plugin of tiptap as it is hard to integrate with attachments,
// and it handles image as data-uri when drag & drop
export default class AttachmentImage extends Node {
  get name () {
    return 'attachmentImage'
  }

  get schema () {
    return {
      inline: true,
      attrs: {
        src: {},
        alt: {
          default: null
        },
        title: {
          default: null
        },
        'data-attachment': {
          default: null
        }
      },
      group: 'inline',
      draggable: true,
      parseDOM: [
        {
          tag: this.options.editable ? 'img[src][data-attachment]' : 'img[src]',
          getAttrs: dom => ({
            src: dom.getAttribute('src'),
            title: dom.getAttribute('title'),
            alt: dom.getAttribute('alt'),
            'data-attachment': dom.getAttribute('data-attachment')
          })
        }
      ],
      toDOM: node => ['img', node.attrs]
    }
  }

  commands ({ type }) {
    return attrs => (state, dispatch) => {
      const { selection } = state
      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
      const node = type.create(attrs)
      const transaction = state.tr.insert(position, node)
      dispatch(transaction)
    }
  }

  /* inputRules ({ type }) {
    return [
      nodeInputRule(IMAGE_INPUT_REGEX, type, match => {
        const [, alt, src, title] = match
        return {
          src,
          alt,
          title
        }
      })
    ]
  } */

  get view () {
    return TheAttachmentImage
  }
}
