@meitner/tiptap-imageresize
v1.0.17
Published
image extension + resize function for tiptap
Downloads
17
Readme
@breakerh/tiptap-image-resize
Introduction
tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian. I am not affiliated with TipTap in any way. I build this module for myself and thought maybe I can help other with it.. Please let me know if you experience any problems whatsoever!
Installation
Install the package through NPM ( npm i tiptap-imagresize
) or yarn ( yarn add tiptap-imagresize
), and don't forget to include it in the use editor explained here.
Configuration
While adding Image Resizer to your TipTap editor you can set a few options.
| Key | Description | Default |
|----------------|-------------------------------------------------|---------|
| inline | Is the image inline? | false
|
| allowBase64 | Can you insert Base64 encoded images? | false
|
| HTMLAttributes | Do you want to add custom attributes? | empty |
| resizeIcon | What type if resize icon would you want to see? | ⊙
|
| useFigure | Do you want to wrap your image in a figure tag? | false
|
Example:
const editor = useEditor({
extensions: [
StarterKit, ImageResize.configure({resizeIcon: <>ResizeMe</>})
],
content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
})
Styling
I didn't include any styling since a assume you have your reasons you will use TipTap instead of other editors. Do you still want a quick result or just want some starter css? Add this to your (s)css or convert it to react styles markup.
Scss
.image-resizer {
display: inline-flex;
position: relative;
flex-grow: 0;
.resize-trigger {
position: absolute;
right: -6px;
bottom: -9px;
opacity: 0;
transition: opacity .3s ease;
color: #3259a5;
}
&:hover .resize-trigger {
opacity: 1;
}
}
Css
.image-resizer {
display: inline-flex;
position: relative;
flex-grow: 0;
}
.image-resizer .resize-trigger {
position: absolute;
right: -6px;
bottom: -9px;
opacity: 0;
transition: opacity .3s ease;
color: #3259a5;
}
.image-resizer:hover .resize-trigger {
opacity: 1;
}
Official Documentation
Documentation can be found on the tiptap website.
License
tiptap is open sourced software licensed under the MIT license.