64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import { Node, mergeAttributes } from '@tiptap/core';
|
|
|
|
export interface VideoOptions {
|
|
HTMLAttributes: Record<string, any>;
|
|
}
|
|
|
|
export const Video = Node.create<VideoOptions>({
|
|
name: 'video',
|
|
|
|
group: 'block',
|
|
|
|
// Allows it to be selected and manipulated as a single block
|
|
selectable: true,
|
|
draggable: true,
|
|
|
|
addOptions() {
|
|
return {
|
|
HTMLAttributes: {
|
|
class: 'w-full rounded-lg border border-border/50 shadow-sm overflow-hidden my-4',
|
|
controls: true,
|
|
},
|
|
};
|
|
},
|
|
|
|
addAttributes() {
|
|
return {
|
|
src: {
|
|
default: null,
|
|
},
|
|
};
|
|
},
|
|
|
|
parseHTML() {
|
|
return [
|
|
{
|
|
tag: 'video',
|
|
},
|
|
];
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
return ['video', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
setVideo: (options: { src: string }) => ({ commands }) => {
|
|
return commands.insertContent({
|
|
type: this.name,
|
|
attrs: options,
|
|
});
|
|
},
|
|
};
|
|
},
|
|
});
|
|
|
|
declare module '@tiptap/core' {
|
|
interface Commands<ReturnType> {
|
|
video: {
|
|
setVideo: (options: { src: string }) => ReturnType;
|
|
};
|
|
}
|
|
}
|