@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.