Rich Text Editor | Dialtone Design System

Preview

Base Style

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.

With Links

Output Format

There are 3 defined output formats currently for the input text.

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.

Json

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.

HTML

Provide prop outputFormat: 'html'

the input will be formatted as native html that can then be consumed by product.

Tiptap Plugins Used

HardBreak

HardBreak plugin is used to add support for <br> tags in the rich text editor.

CodeBlocks

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.

Placeholder

Provides support to enable placeholder support

Mention

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.

How to Use the Mention Plugin:

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.

Vue API

import { DtRichTextEditor } from '@dialpad/dialtone-vue';

Props

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 `start`, `end`, `all` or a Boolean or a Number. `start` Sets the focus to the beginning of the input `end` Sets the focus to the end of the input `all` Selects the whole contents of the input `Number` Sets the focus to a specific position in the input `true` Defaults to `start` `false` Disables autofocus
`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 `rich_media`. Matching text in the editor will be marked and emit a `phone-click` event when clicked. An empty array or `null` disables phone linking.
`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 `text`, `json`, `html`, `markdown`. See https://tiptap.dev/guide/output for examples.
`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. 'full': All whitespace is preserved true: Whitespace in inline content is preserved, whitespace-only nodes between blocks are removed false: Standard HTML whitespace collapsing
`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.

Events

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.
`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 `event`, which can be used for positioning a hovercard.
`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 `event`.
`phone-click`	`Object` Event fired when a phone number link is clicked. Payload: { phoneNumber: string } — the raw phone number text as matched. Requires the `linkPhoneNumbers` prop to be set (loads the LinkPhoneNumbers extension).
`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

Preview

Base Style #

With Links #

Output Format #

Text #

Json #

HTML #

Tiptap Plugins Used #

HardBreak #

CodeBlocks #

Placeholder #

Mention #

How to Use the Mention Plugin:

Vue API #

Props

Events

Base Style

With Links

Output Format

Text

Json

HTML

Tiptap Plugins Used

HardBreak

CodeBlocks

Placeholder

Mention

Vue API