TipTap image resize extension

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!

Comments

[Peter Ndungu]

Did you ever merge the pr that fixed react18?