diff --git a/packages/tiptap-extensions/src/nodes/Image.js b/packages/tiptap-extensions/src/nodes/Image.js index 7a23ecd9a..2b3bdcf1c 100644 --- a/packages/tiptap-extensions/src/nodes/Image.js +++ b/packages/tiptap-extensions/src/nodes/Image.js @@ -1,4 +1,15 @@ import { Node, Plugin } from 'tiptap' +import { nodeInputRule } from 'tiptap-commands' + +/** + * Matches following attributes in Markdown-typed image: [, alt, src, title] + * + * Example: + * ![Lorem](image.jpg) -> [, "Lorem", "image.jpg"] + * ![](image.jpg "Ipsum") -> [, "", "image.jpg", "Ipsum"] + * ![Lorem](image.jpg "Ipsum") -> [, "Lorem", "image.jpg", "Ipsum"] + */ +const IMAGE_INPUT_REGEX = /!\[(.+|:?)\]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/ export default class Image extends Node { @@ -44,6 +55,19 @@ export default class Image extends Node { } } + inputRules({ type }) { + return [ + nodeInputRule(IMAGE_INPUT_REGEX, type, match => { + const [, alt, src, title] = match + return { + src, + alt, + title, + } + }), + ] + } + get plugins() { return [ new Plugin({