tiptap/packages/extension-image/src/image.ts
2021-05-05 14:50:43 +02:00

91 lines
1.5 KiB
TypeScript

import {
Command,
Node,
nodeInputRule,
mergeAttributes,
} from '@tiptap/core'
export interface ImageOptions {
inline: boolean,
HTMLAttributes: Record<string, any>,
}
declare module '@tiptap/core' {
interface Commands {
image: {
/**
* Add an image
*/
setImage: (options: { src: string, alt?: string, title?: string }) => Command,
}
}
}
export const inputRegex = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
export const Image = Node.create<ImageOptions>({
name: 'image',
defaultOptions: {
inline: false,
HTMLAttributes: {},
},
inline() {
return this.options.inline
},
group() {
return this.options.inline ? 'inline' : 'block'
},
draggable: true,
addAttributes() {
return {
src: {
default: null,
},
alt: {
default: null,
},
title: {
default: null,
},
}
},
parseHTML() {
return [
{
tag: 'img[src]',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
},
addCommands() {
return {
setImage: options => ({ commands }) => {
return commands.insertContent({
type: this.name,
attrs: options,
})
},
}
},
addInputRules() {
return [
nodeInputRule(inputRegex, this.type, match => {
const [, alt, src, title] = match
return { src, alt, title }
}),
]
},
})