tiptap-extension-resize-image

Tiptap is a suite of open source content editing and real-time collaboration tools for developers building apps like Notion or Google Docs.

This package provides the ability to adjust the size of the tip tab image. It has been tested in React, Vue, and NextJS, and stability in VanillaJS may not be guaranteed. Additionally, it can align the image position.

Compatibility

tiptap-extension-resize-image	Supported TipTap Versions
≤ 1.2.2	v2 only
≥ 1.2.3	v2 and v3

Installation

You can install it using npm:

$ npm install tiptap-extension-resize-image

Usage

import StarterKit from '@tiptap/starter-kit';
import ImageResize from 'tiptap-extension-resize-image';
import { EditorContent, useEditor } from '@tiptap/react';

const editor = useEditor({
  extensions: [StarterKit, ImageResize],
  content: `<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />`,
});

Use as inline

If you want to render images as inline elements, you can configure the extension like this:

const editor = useEditor({
  extensions: [
    StarterKit,
    ImageResize.configure({
      inline: true,
    }),
  ],
  content: `<img src="..."/>`,
});

Contributing

Contributions are welcome! Please read our Contributing Guide before submitting a Pull Request.