Rich text editor

Used to content editor based Tiptap.js

Import

import { MpRichTextEditor, MpRTEStyleProvider } from '@mekari/pixel3'

Playground

API

MpRichTextEditor

Props

Events

Name	Type	Default
id Id of rich text editor.	string	-
value Value of rich text editor.	string	-
placeholder Placeholder of rich text editor.	string	-
maxlength Maximum character length of rich text editor.	number	-
options Options of rich text editor.	heading | bold | italic | underline | strike | blockquote | bulletList | orderedList | align | mention | variable | textLink | image | file | audio | location | undo | redo | clear | { value: string, tooltip?: string }	-
suggestions Mention suggestion items. Each item supports id, name, optional description, and optional avatar.	array	[]
variables Variable suggestion items. Each item supports id, name, and optional category for grouping.	VariableSuggestionItem[]	[]
is-disabled If true, rich text editor will be disabled.	boolean	false
is-invalid If true, rich text editor is marked as invalid.	boolean	false
has-border If true, rich text editor border will be displayed.	boolean	false
validate-link Custom function to validate link URLs.	(url: string, ctx: { defaultValidate: (url: string) => boolean; protocols: string[] }) => boolean	-
transform-link Custom function to transform / normalize link URLs.	(url: string) => string	-

MpRTEStyleProvider

Props

Name	Type	Default
id Id of RTE style provider.	string	-

Usage

Advance usage

Use emit action or paste event to handle attach image, file, audio

Link validation and transformation

Use validate-link prop to customize link validation rules and transform-link to auto-transform URLs (e.g. adding https:// to "example.com"). The input field will show an invalid state when the URL doesn't pass validation, and the accept button will be disabled.

Transformation happens before validation, allowing you to normalize URLs before they're checked.

Variable insertion

Use the variables prop to enable dynamic variable placeholders in your content. Users can type { to trigger the variable dropdown, which displays categorized variables that can be inserted with a click or keyboard selection.

Variables are inserted as special nodes with data attributes, making them easy to identify and replace with actual values during processing.

Attachment limit

Use disabled on toolbar option to disable attachment buttons when a limit is reached.