Skip to content

breakerh/tiptap-image-resize

Repository files navigation

@breakerh/tiptap-image-resize

Version License

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.