Text Editor

A rich text editor component with formatting toolbar and fonts.

vu-text-editor · @velkin/react-pro/text-editor

Copy page

Import

React

npm i @velkin/react-pro

import { LicenseInfo } from "@velkin/license";
// Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY
// Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY
LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? "");

// @velkin-pro
import { VuTextEditor } from "@velkin/react-pro/text-editor";

Examples

API

Props

Prop	Type	Default	Description
value	`string`	""	Text content.
editorStyle	Partial	{}	External style seed merged into the editor.
presets	VuTextEditorPresets	{}	Preset lists for toolbar selects.
useLocalFonts	`boolean`	false	Enables `queryLocalFonts()` on font field focus.
variant	VuTextEditorVariant	"default"	Field chrome recipe.
tone	VuTextEditorTone	"normal"	Neutral chrome weight.
size	VuTextEditorSize	"md"	Toolbar + textarea scale.
radius	VuTextEditorRadius	"md"	Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`.
block	`boolean`	false	Stretches to container width.
disabled	`boolean`	false	Disables editing and toolbar controls.
readonly	`boolean`	false	Keeps focus but blocks edits.
label	`string`	""	Plain-text label fallback.
placeholder	`string`	""	Textarea placeholder.
clearlabel	`string`	""	Clear text action label override.
resetstylelabel	`string`	""	Reset styles action label override.
arialabel	`string`	""	Accessible name when no visible label is provided.

Events

Event	Detail	Description
vu-change	VuTextEditorChangeDetail	When `value` or `style` changes.

Slots

Slot	Description
label	Rich label markup; takes precedence over string `label` when assigned.

CSS parts

Part	Description
field	Column stacking label and editor shell.
label	Visible label element.
container	Bordered editor shell (toolbar + body).
toolbar	Formatting toolbar row.
toolbar-divider	Hairline between toolbar and editor body.
toolbar-select	Toolbar `vu-combobox` controls.
body	Textarea container region.
textarea	Editable textarea surface.
actions	Reset action cluster.

Methods

Method	Description
getValue	- Returns current text content.
setValue	- Sets text content.
getStyle	- Returns the active editor style object.
focus	- Focuses the textarea.

Types

Name	Definition
VuTextEditorChangeDetail	`{ value: string; style: VuTextEditorStyle; source: VuTextEditorChangeSource; }`
VuTextEditorPresets	`{ fontFamilies?: VuTextEditorOption[]; fontSizes?: VuTextEditorOption[]; fontWeights?: VuTextEditorOption[]; textAligns?: VuTextEditorOption[]; colors?: VuTextEditorOption[]; backgrounds?: VuTextEditorOption[]; textDecorations?: VuTextEditorOption[]; lineHeights?: VuTextEditorOption[]; initialStyle?: Partial<VuTextEditorStyle>; }`
VuTextEditorRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuTextEditorSize	`"sm" \| "md" \| "lg"`
VuTextEditorTone	`"subtle" \| "normal" \| "strong"`
VuTextEditorVariant	`"outline" \| "default" \| "underline"`

Import

React

npm i @velkin/react-pro import { LicenseInfo } from "@velkin/license"; // Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY // Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? ""); // @velkin-pro import { VuTextEditor } from "@velkin/react-pro/text-editor";

API

Props

Prop	Type	Default	Description
value	`string`	""	Text content.
editorStyle	Partial	{}	External style seed merged into the editor.
presets	VuTextEditorPresets	{}	Preset lists for toolbar selects.
useLocalFonts	`boolean`	false	Enables `queryLocalFonts()` on font field focus.
variant	VuTextEditorVariant	"default"	Field chrome recipe.
tone	VuTextEditorTone	"normal"	Neutral chrome weight.
size	VuTextEditorSize	"md"	Toolbar + textarea scale.
radius	VuTextEditorRadius	"md"	Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`.
block	`boolean`	false	Stretches to container width.
disabled	`boolean`	false	Disables editing and toolbar controls.
readonly	`boolean`	false	Keeps focus but blocks edits.
label	`string`	""	Plain-text label fallback.
placeholder	`string`	""	Textarea placeholder.
clearlabel	`string`	""	Clear text action label override.
resetstylelabel	`string`	""	Reset styles action label override.
arialabel	`string`	""	Accessible name when no visible label is provided.

Events

Event	Detail	Description
vu-change	VuTextEditorChangeDetail	When `value` or `style` changes.

Slots

Slot	Description
label	Rich label markup; takes precedence over string `label` when assigned.

CSS parts

Part	Description
field	Column stacking label and editor shell.
label	Visible label element.
container	Bordered editor shell (toolbar + body).
toolbar	Formatting toolbar row.
toolbar-divider	Hairline between toolbar and editor body.
toolbar-select	Toolbar `vu-combobox` controls.
body	Textarea container region.
textarea	Editable textarea surface.
actions	Reset action cluster.

Methods

Method	Description
getValue	- Returns current text content.
setValue	- Sets text content.
getStyle	- Returns the active editor style object.
focus	- Focuses the textarea.

Types

Name	Definition
VuTextEditorChangeDetail	`{ value: string; style: VuTextEditorStyle; source: VuTextEditorChangeSource; }`
VuTextEditorPresets	`{ fontFamilies?: VuTextEditorOption[]; fontSizes?: VuTextEditorOption[]; fontWeights?: VuTextEditorOption[]; textAligns?: VuTextEditorOption[]; colors?: VuTextEditorOption[]; backgrounds?: VuTextEditorOption[]; textDecorations?: VuTextEditorOption[]; lineHeights?: VuTextEditorOption[]; initialStyle?: Partial<VuTextEditorStyle>; }`
VuTextEditorRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuTextEditorSize	`"sm" \| "md" \| "lg"`
VuTextEditorTone	`"subtle" \| "normal" \| "strong"`
VuTextEditorVariant	`"outline" \| "default" \| "underline"`

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Inputs

Guides

Browse

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Inputs

Guides

Browse