This content originally appeared on DEV Community and was authored by Bram Hammer
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!
This content originally appeared on DEV Community and was authored by Bram Hammer
Bram Hammer | Sciencx (2022-06-28T23:09:36+00:00) TipTap image resize extension. Retrieved from https://www.scien.cx/2022/06/28/tiptap-image-resize-extension/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.