forked from 77media/video-flow
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
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)
|
|
},
|
|
})
|