import { Mark, mergeAttributes } from '@tiptap/core'

export const LandmarkMark = Mark.create({
  name: 'landmark',
  inclusive: true,
  addAttributes() {
    return {
      label: { default: '' },
      landmarkType: { default: 'todo' }
    }
  },
  parseHTML() {
    return [{ tag: 'span[data-landmark]' }]
  },
  renderHTML({ HTMLAttributes }) {
    const label = HTMLAttributes.label ?? ''
    return [
      'span',
      mergeAttributes(HTMLAttributes, {
        'data-landmark': 'true',
        class: 'landmark-mark',
        'data-testid': 'landmark-mark'
      }),
      `[TODO: ${label}]`
    ]
  }
})