Package Exports

tiptap-imagresize
tiptap-imagresize/src/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tiptap-imagresize) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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