https://github.com/albertarakelyan/tiptap-extensions-line-height
A Tiptap line-height extension for React, Next.
https://github.com/albertarakelyan/tiptap-extensions-line-height
leading line-height paragraph text tiptap tiptap-extension tiptap-line-height
Last synced: 4 months ago
JSON representation
A Tiptap line-height extension for React, Next.
- Host: GitHub
- URL: https://github.com/albertarakelyan/tiptap-extensions-line-height
- Owner: AlbertArakelyan
- License: mit
- Created: 2025-02-26T08:45:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-07T18:44:20.000Z (over 1 year ago)
- Last Synced: 2025-10-06T21:29:58.854Z (8 months ago)
- Topics: leading, line-height, paragraph, text, tiptap, tiptap-extension, tiptap-line-height
- Language: TypeScript
- Homepage:
- Size: 1.05 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tiptap-extensions-line-height
[Tiptap](https://tiptap.dev/) 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 line height of the tip tap text or paragraph.
Make sure you already have installed all Tiptap related packages in you project
```bash
$ npm install @tiptap/react @tiptap/pm @tiptap/starter-kit
```
## Installation
You can install it using npm:
```bash
$ npm install tiptap-extensions-line-height
```
## Usage
```tsx
import { EditorContent, useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import LineHeight from 'tiptap-extensions-resize-image';
export const Editor = () => {
const editor = useEditor({
extensions: [StarterKit, LineHeight],
});
const lineHeights = [
{ label: 'Normal', value: 'normal' },
{ label: 'Simple', value: '1' },
{ label: '1.15', value: '1.15' },
{ label: '1.5', value: '1.5' },
{ label: 'Double', value: '2' },
];
const handleLineHeightChange = (e: React.ChangeEvent) => {
editor?.chain().focus().setLineHeight(e.target.value).run();
};
return (
{lineHeights.map((lineHeight) => (
{lineHeight.label}
))}
);
};
```