tiptap-extension-resizable-image

!Pull request workflows

Links

- Documentation
- Contribute
- Changelog

Quickstart

Installation

``sh
npm install tiptap-extension-resizable-image
`

Import the CSS file:

`tsx
import 'tiptap-extension-resizable-image/styles.css';
`

Add the extension to Tiptap:

`tsx
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { ResizableImage } from 'tiptap-extension-resizable-image';

const Demo = () => {
const editor = useEditor({
extensions: [StarterKit, ResizableImage],
content: / html /

src="https://daily.jstor.org/wp-content/uploads/2016/10/Moving_Forest_1050_700.jpg"
alt="image alt"
title="image title"
width="300"
data-keep-ratio="true"
>

,
});

return (

);
};

export default Demo;
`

Commands

$3

`tsx
editor.commands.setResizableImage({
src: '',
alt: '',
title: '',
width: 200,
height: 200,
className: '',
'data-keep-ratio': true,
caption: '',
});
``

License

The MIT License.