Community Extension: tiptap-extension-hr

[KID-1912]

Description

Extension to add dividers(horizontal) to your tiptap content.

Installation

npm install tiptap-extension-hr -S

Usage

import Hr from "tiptap-extension-hr";

const editor = new Editor({
  element: document.querySelector(".editor"),
  extensions: [StarterKit, Hr],
});

editor
  .chain()
  .focus()
  .insertContent([{ type: "hr" }])
  .run();

Options

Customize the line style with the optional style option.

  extensions: [
    StarterKit,
    Image.configure({ inline: true }),
    Hr.configure({
      style: 'border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);transform-origin: 0 0;transform: scale(1, 0.5);'
    }),
  ],

Type

Node

Other

More detail see：https://github.com/KID-1912/tiptap-extension-hr

[bdbch]

Are there any differences to the official HorizontalRule extension?
See: https://tiptap.dev/docs/editor/extensions/nodes/horizontal-rule