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

// React 组件用于自定义渲染（不可编辑标题）
const ShotTitleComponent = (props: any) => {
  const title = props.node?.attrs?.title || '分镜'

  return (
    <NodeViewWrapper className="inline text-gray-500 mr-2 select-none pointer-events-none" contentEditable={false}>
      {title}
    </NodeViewWrapper>
  )
}

// Tiptap Node 扩展定义
export const ShotTitle = Node.create({
  name: 'shotTitle',
  group: 'block',
  atom: true, // 作为原子节点，无法拆解
  selectable: false,
  draggable: false,
  content: '',
  defining: true,

  addAttributes() {
    return {
      title: {
        default: '分镜',
      },
    }
  },

  parseHTML() {
    return [
      {
        tag: 'div[data-type="shot-title"]',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return [
      'div',
      mergeAttributes(HTMLAttributes, { 'data-type': 'shot-title', class: 'shot-title' }),
      HTMLAttributes.title,
    ]
  },

  addNodeView() {
    return ReactNodeViewRenderer(ShotTitleComponent)
  },
})