feat: add allowBase64 option to image extension

This commit is contained in:
Philipp Kühn
2022-02-09 12:21:03 +01:00
parent 55d907885d
commit a97a46fc51
2 changed files with 27 additions and 12 deletions

View File

@@ -20,17 +20,6 @@ npm install @tiptap/extension-image
## Settings ## Settings
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
Image.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
### inline ### inline
Renders the image node inline, for example in a paragraph tag: `<p><img src="spacer.gif"></p>`. By default images are on the same level as paragraphs. Renders the image node inline, for example in a paragraph tag: `<p><img src="spacer.gif"></p>`. By default images are on the same level as paragraphs.
@@ -44,6 +33,28 @@ Image.configure({
}) })
``` ```
### allowBase64
Allow images to be parsed as base64 strings `<img src="data:image/jpg;base64...">`.
Default: `false`
```js
Image.configure({
allowBase64: true,
})
```
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
Image.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
## Commands ## Commands
### setImage() ### setImage()

View File

@@ -6,6 +6,7 @@ import {
export interface ImageOptions { export interface ImageOptions {
inline: boolean, inline: boolean,
allowBase64: boolean,
HTMLAttributes: Record<string, any>, HTMLAttributes: Record<string, any>,
} }
@@ -28,6 +29,7 @@ export const Image = Node.create<ImageOptions>({
addOptions() { addOptions() {
return { return {
inline: false, inline: false,
allowBase64: false,
HTMLAttributes: {}, HTMLAttributes: {},
} }
}, },
@@ -59,7 +61,9 @@ export const Image = Node.create<ImageOptions>({
parseHTML() { parseHTML() {
return [ return [
{ {
tag: 'img[src]:not([src^="data:"])', tag: this.options.allowBase64
? 'img[src]'
: 'img[src]:not([src^="data:"])',
}, },
] ]
}, },