Tiptap

Source@react-form-builder/components-mantine

Introduction

The Tiptap component provides a rich text editor (WYSIWYG) with formatting toolbar and support for headings, lists, links, and more. It requires the optional package @mantine/tiptap and is based on Mantine Tiptap.

It is included within the following NPM package: @react-form-builder/components-mantine.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Content	string	Initial or controlled HTML/content (data-bound)
Placeholder	string	Placeholder when editor is empty
Editable	boolean	If true, the content is editable (default: true)
On change	event	Fired when the content changes

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your component as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color

Additional resources

• Mantine Tiptap documentation
• Tiptap editor documentation