tiptap/packages/extension-image/src/image.ts

95 lines
1.6 KiB
TypeScript
Raw Normal View History

2020-11-25 16:50:54 +08:00
import {
Command,
Node,
nodeInputRule,
mergeAttributes,
} from '@tiptap/core'
2020-10-27 22:32:55 +08:00
2020-10-30 23:57:55 +08:00
export interface ImageOptions {
inline: boolean,
2021-04-21 15:43:31 +08:00
HTMLAttributes: Record<string, any>,
2020-10-30 23:57:55 +08:00
}
2021-02-10 16:59:35 +08:00
declare module '@tiptap/core' {
2021-02-17 01:39:37 +08:00
interface Commands {
2021-02-16 18:27:58 +08:00
image: {
/**
* Add an image
*/
setImage: (options: { src: string, alt?: string, title?: string }) => Command,
}
2021-02-10 16:59:35 +08:00
}
}
2020-10-28 05:35:31 +08:00
export const inputRegex = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
2020-10-27 22:32:55 +08:00
2021-02-11 01:25:08 +08:00
export const Image = Node.create<ImageOptions>({
2020-10-27 22:32:55 +08:00
name: 'image',
2021-02-11 01:25:08 +08:00
defaultOptions: {
2020-10-30 23:57:55 +08:00
inline: false,
2020-11-13 23:44:22 +08:00
HTMLAttributes: {},
2020-10-30 23:57:55 +08:00
},
inline() {
return this.options.inline
},
2020-10-27 22:32:55 +08:00
2020-10-30 23:57:55 +08:00
group() {
return this.options.inline ? 'inline' : 'block'
},
2020-10-27 22:32:55 +08:00
2020-10-28 04:38:29 +08:00
draggable: true,
2020-10-27 22:32:55 +08:00
addAttributes() {
return {
src: {
default: null,
},
alt: {
default: null,
},
title: {
default: null,
},
}
},
parseHTML() {
return [
{
tag: 'img[src]',
},
]
},
2020-11-13 23:07:20 +08:00
renderHTML({ HTMLAttributes }) {
2020-11-25 16:50:54 +08:00
return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
2020-10-27 22:32:55 +08:00
},
addCommands() {
return {
2021-02-10 16:59:35 +08:00
setImage: options => ({ tr, dispatch }) => {
2020-10-27 22:32:55 +08:00
const { selection } = tr
2020-10-28 05:35:31 +08:00
const node = this.type.create(options)
2020-11-18 19:28:08 +08:00
if (dispatch) {
tr.replaceRangeWith(selection.from, selection.to, node)
}
2020-10-27 22:32:55 +08:00
return true
},
}
},
addInputRules() {
return [
2020-10-28 05:35:31 +08:00
nodeInputRule(inputRegex, this.type, match => {
2020-10-27 22:32:55 +08:00
const [, alt, src, title] = match
2020-10-28 05:35:31 +08:00
return { src, alt, title }
2020-10-27 22:32:55 +08:00
}),
]
},
})