The editor itself is without any styling and the intention is to wrap it with another component, such as Message Input, that provides the UI.
<dt-rich-text-editor
v-model="value"
:editable="true"
input-aria-label="this is a descriptive label"
output-format="html"
:auto-focus="false"
placeholder="Type here..."
:link="true"
/>There are 3 defined output formats currently for the input text.
Provide prop outputFormat: 'text'
Plain text format as output without taking into consideration any marks (italics, bold) / html tags/ codeblocks that may be included in the input text user provides.
Provide prop outputFormat: 'json'
the input will be formatted as a json document that can then be consumed by product.
The type of the each node in the input will be present for example: codeblock, image
along with other meta data pertaining to the text node.
Provide prop outputFormat: 'html'
the input will be formatted as native html that can then be consumed by product.
HardBreak plugin is used to add support for <br> tags in the rich text editor.
Codeblock plugin is used to enable the support for code and also specify the language. Type ``` followed by space or ~~~ with space to enable a codeblock in the rich text editor.
Provides support to enable placeholder support
The tiptap Mention plugin is apt for our use case of mentioning users or channels within the editor. It also creates the respective nodes with ability for user to customize the trigger character.
When using the Rich Text editor, the developer would have to pass in the suggestion object prop which MUST contain an items function that takes in a query and returns a list of object with the properties:
{
id: String,
name: String,
avatarSrc: String
}
There can be additional properties that override the mention plugin and more details can be seen here: Suggestion Tiptap utility. If this mentionSuggestion Object prop is not supplied, the mention plugin is disabled by default.
To see it in action type char '@' into rich editor With channel mentions.
<dt-rich-text-editor
v-model="value"
:editable="true"
input-aria-label="this is a descriptive label"
output-format="html"
:auto-focus="false"
placeholder="Type here..."
:link="true"
:mention-suggestion="{ items }"
/>import { DtRichTextEditor } from '@dialpad/dialtone-vue';
Name
|
Default
|
Type
|
|---|---|---|
inputAriaLabel
required
| string Descriptive label for the input element | |
additionalExtensions | [] | array Additional TipTap extensions to be added to the editor. |
allowBackgroundColor | false | boolean Whether the input allows background color to be introduced in the text. |
allowBlockquote | true | boolean Whether the input allows for block quote. |
allowBold | true | boolean Whether the input allows for bold to be introduced in the text. |
allowBulletList | true | boolean Whether the input allows for bullet list to be introduced in the text. |
allowCode | true | boolean Whether the input allows inline code (wrapped in backticks). |
allowCodeblock | true | boolean Whether the input allows codeblock to be introduced in the text. |
allowFontColor | false | boolean Whether the input allows color to be introduced in the text. |
allowFontFamily | false | boolean Whether the input allows different font-families to be introduced in the text. |
allowFontSize | false | boolean Whether the input allows font size to be introduced in the text. |
allowImageResize | false | boolean Whether the input allows image resize to be introduced in the text. |
allowInlineImages | false | boolean Whether the input allows inline images to be rendered. |
allowItalic | true | boolean Whether the input allows for italic to be introduced in the text. |
allowLineBreaks | false | boolean Whether the input allows for line breaks to be introduced in the text by pressing enter. If this is disabled,
line breaks can still be entered by pressing shift+enter. |
allowLineHeight | false | boolean Whether the input allows line height to be introduced in the text. |
allowStrike | true | boolean Whether the input allows for strike to be introduced in the text. |
allowTables | false | boolean Allow Tables to be used in to the editor |
allowTextAlign | true | boolean Allow text alignment controls (left, center, right, justify) in the editor. |
allowTyping | true | boolean Allows the user to type in the editor. Set to false to prevent typing while still allowing deletion. |
allowUnderline | true | boolean Whether the input allows for underline to be introduced in the text. |
allowVariable | false | boolean Whether the input allows variables to be introduced in the text. |
autoFocus | false |
"true"
|
"false"
|
"start"
|
"end"
|
"all"
|
"number"
Whether the input should receive focus after the component has been
mounted. Either one of |
channelSuggestion | null | object suggestion object containing the items query function.
The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion The only required key is the items function which is used to query the channels for suggestion.
items({ query }) => { return [ChannelObject]; }
ChannelObject format:
{ name: string, id: string, locked: boolean, channelKey?: string } When null, it does not add the plugin. Setting locked to true will display a lock rather than hash. |
customLink | false | boolean|object Enables the Custom Link extension and optionally passes configurations to it It is not recommended to use this and the built in TipTap link extension at the same time. The custom link does some additional things on top of the built in TipTap link
extension such as styling phone numbers and IP adresses as links, and allows you
to linkify text without having to type a space after the link. Currently it is missing some
functionality such as editing links and will likely require more work to be fully usable,
so it is recommended to use the built in TipTap link for now. |
editable | true | boolean Whether the input is editable |
inputClass | '' | string Additional class name for the input element. Only accepts a String value
because this is passed to the editor via options. For multiple classes,
join them into one string, e.g. "d-p-100 d-hmx-150" |
link | false | boolean|object Enables the TipTap Link extension and optionally passes configurations to it It is not recommended to use this and the custom link extension at the same time. |
linkPhoneNumbers | null | string[]|null Phone number strings to display as clickable links, typically provided
by the backend via |
mentionSuggestion | null | object suggestion object containing the items query function.
The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion The only required key is the items function which is used to query the contacts for suggestion.
items({ query }) => { return [ContactObject]; }
ContactObject format:
{ name: string, avatarSrc: string, id: string } When null, it does not add the plugin. |
modelValue | '' | object|string Value of the input. The object format should match TipTap's JSON
document structure: https://tiptap.dev/guide/output#option-1-json |
outputFormat | 'html' |
"text"
|
"json"
|
"html"
|
"markdown"
The output format that the editor uses when emitting the "update:modelValue" event.
One of |
pasteRichText | true | boolean When this option is false the editor will only ever paste plain text, no rich text formatting will be applied,
and any HTML will be rendered as text. |
placeholder | '' | string Placeholder text |
preserveWhitespace | 'full' |
"full"
|
"true"
|
"false"
Controls how whitespace is handled when parsing HTML content. |
showLinkBubbleMenu | true | boolean Shows the link bubble menu when a link is selected via the cursor.
Set to false when you want the link to remain selected but hide the bubble menu,
such as when showing a custom link editor popup. |
slashCommandSuggestion | null | object suggestion object containing the items query function.
The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion The only required key is the items function which is used to query the slash commands for suggestion.
items({ query }) => { return [SlashCommandObject]; }
SlashCommandObject format:
{ command: string, description: string, parametersExample?: string }
The "parametersExample" parameter is optional, and describes an example
of the parameters that command can take. When null, it does not add the plugin.
Note that slash commands only work when they are the first word in the input. |
useDivTags | false | boolean Show text in HTML div tags instead of paragraph tags |
variableItems | [] | array Array of available variable items that can be inserted. |
Name
|
Type
|
|---|---|
blur | FocusEvent Editor blur event |
channel-click | Object Event fired when a channel is clicked |
edit-link | Object "Edit link" button was clicked. Fires an event for the consuming component to handle the editing of the link.
event contains the link object with two properties href and text. |
enter | String Enter was pressed. Note that shift enter must be pressed to line break the input. |
focus | FocusEvent Editor focus event |
html-input | HTML Input event always in HTML format. |
json-input | JSON Input event always in JSON format. |
link-click | Object Event fired when a link is clicked.
Payload: { href: string, text: string, event: MouseEvent } — the link's
href, its text content, and the originating click event. Call
event.preventDefault() to suppress the default navigation (e.g. to route
same-origin URLs in-app instead of opening a new tab).
Requires the |
markdown-input | String Input event always in markdown format. |
mention-click | Object Event fired when a mention is clicked |
mention-hover | Object Event fired when the cursor enters a mention. The payload includes the
mention data (name, id, avatarSrc, contactKey) plus the native MouseEvent
as |
mention-leave | Object Event fired when the cursor leaves a mention. The payload includes the
mention data (name, id, avatarSrc, contactKey) plus the native MouseEvent
as |
phone-click | Object Event fired when a phone number link is clicked.
Payload: { phoneNumber: string } — the raw phone number text as matched.
Requires the |
selected | String "Selected" event is fired when the user selects text in the editor. returns the currently selected text.
If the selected text is partially a link, the full link text is returned. |
selected-command | String Event fired when a slash command is selected |
text-input | String Input event always in text format. |
update:modelValue | Object | String Event fired to sync the modelValue prop with the parent component |
Rich Text Editor documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope