We've worked on various projects which made use of the TipTap text editor. It's an opensource editor with quite a few extensions and built-in options.. However (for us), it's missing one important feature... Image resizing!
That's why we made a script that extends the normale image module and adds the resize feature. We will explain how to install and maybe change some looks to your liking.
(sorry Vue and other frameworks, React only for now)
Installation
Run npm i tiptap-imagresize
or yarn add tiptap-imagresize
After that import the ImageResize
module where you initialise your editor. If the image module exists replace it with the ImageResize
module, otherwise just add it.
const editor = useEditor({
extensions: [ StarterKit, ImageResize],
content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
})
Options
Since I try to make this post as simple as possible i will only cover the resize icon..
You can alter it by adding the configuration function to the ImageResize
extension. I will use React-icons as example on how to use your own icon for the resize icon.
import {GrBottomCorner} from 'react-icons/gr'
const editor = useEditor({
extensions: [ StarterKit, ImageResize.configure({resizeIcon: <GrBottomCorner/>})],
content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
})
Simply passing content in the resizeIcon
will render anything you want in the corner.
Styling
Since there are quite a few options to solve the styling part I gave the general (S)CSS that's used in our repository/readme. I will also include it below.
If you work with scss or css files you can use either of the codes below.. For styles
or other solutions you will have to convert this css to that or create your own styling for it.
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;
}
That's it!
That's all you need to get this working! Miss something or found some issues? Let me know in my repository and I will try to respond a.s.a.p!
Good luck all of you!
Top comments (1)
Did you ever merge the pr that fixed react18?