'use client'

import { getContentEditorHighlightColorName } from '@admin/utils/editor/get-content-editor-highlight-color-name'
import { getContentEditorHighlightColorValue } from '@admin/utils/editor/get-content-editor-highlight-color-value'
import { isContentEditorHighlightColor } from '@admin/utils/editor/is-content-editor-highlight-color'
import { Highlight } from '@tiptap/extension-highlight'

export const ContentEditorHighlight = Highlight.extend({
  parseHTML() {
    return [
      {
        tag: 'span[data-highlight-color]',
        getAttrs: (element) => {
          if (!(element instanceof HTMLElement)) return false

          const color = element.getAttribute('data-highlight-color')
          if (!color || !isContentEditorHighlightColor(color)) return false

          return {
            color: getContentEditorHighlightColorValue(color)
          }
        }
      }
    ]
  },

  renderMarkdown: (node, helpers) => {
    const color = getContentEditorHighlightColorName(node.attrs?.color)
    return `<span data-highlight-color="${color}">${helpers.renderChildren(node)}</span>`
  },
  parseMarkdown: null as never,
  markdownTokenizer: null as never
})