MarkdownEditor

Usage

Loading demo...

Keep sanitize=true for user-authored or provider-authored content.
Use controlled mode when the host stores the current editor tab in route/query state.
Restrict toolbarActions for narrow editors such as release notes or comments.
Provide linkPrompt instead of letting the component own product-specific URL dialogs.

Prop	Type	Default	Description
`modelValue` / `v-model`	`string`	`''`	Markdown source.
`placeholder`	`string`	`''`	Placeholder shown in editable modes.
`mode`	`'wysiwyg' \| 'source' \| 'preview'`	-	Controlled editor mode.
`defaultMode`	`'wysiwyg' \| 'source' \| 'preview'`	`'wysiwyg'`	Initial internal mode.
`disabled`	`boolean`	`false`	Disable toolbar and fields.
`readonly`	`boolean`	`false`	Prevent edits while allowing reading.
`sanitize`	`boolean`	`true`	Sanitize rendered HTML with DOMPurify.
`theme`	`'auto' \| 'light' \| 'dark'`	`'auto'`	Editor theme.
`toolbar`	`boolean`	`true`	Show toolbar and mode switcher.
`toolbarActions`	`MarkdownEditorToolbarActionKey[]`	built-in set	Ordered toolbar actions.
`minHeight`	`string \| number`	`220`	Editor body minimum height.
`maxHeight`	`string \| number`	-	Editor body maximum height.
`linkPrompt`	`(selectedText: string) => string \| Promise<string>`	-	Async URL provider for link action.

heading, bold, italic, strike, quote, code, bulletList, orderedList, link, undo, redo.

No public slots are exposed; toolbar buttons, editing surfaces, and preview output are internal.

Event	Params	Description
`update:modelValue`	`(value: string)`	v-model update.
`change`	`(value: string)`	Markdown value changed.
`update:mode`	`(mode: MarkdownEditorMode)`	Mode update for controlled use.
`mode-change`	`(mode: MarkdownEditorMode)`	Mode changed.
`focus`	`()`	Editable surface or source field focused.
`blur`	`()`	Editable surface or source field blurred.

Method	Description
`focus()`	Focus the active editable surface.
`blur()`	Blur the active editable surface.
`setMode(mode)`	Change editor mode.
`getMode()`	Return current mode.
`getValue()`	Return current Markdown source.
`setValue(value)`	Set Markdown, emit updates, and refresh rendered HTML.

mode is controlled when provided; otherwise defaultMode initializes internal mode.
update:mode and mode-change emit whenever the user changes modes.
sanitize defaults to true; disable it only for already trusted content.
Source mode writes directly to Markdown. WYSIWYG mode serializes edited DOM back to Markdown on input.
Toolbar actions are shared across modes, but preview mode disables editing actions.
Toolbar and mode buttons draw Carbon icons (i-carbon-*) by class name, so the host's UnoCSS has to generate them. src/toolbar-icons.ts lists them as MARKDOWN_EDITOR_ICON_CLASSES for a host that does not scan tuffex sources to safelist, the way Tuff does.
The mode switcher is a toggle-button group: the container is role="group" labeled "Markdown editor mode", and each mode button reflects the active mode through aria-pressed (not role="tab", since there are no associated tabpanels).
theme="auto" watches documentElement class / data-theme and falls back to light.

Reviewed against packages/tuffex/packages/components/src/markdown-editor/src/types.ts, TxMarkdownEditor.vue, toolbar-icons.ts, markdown-serializer.ts, and markdown-editor.test.ts.
Sanitization is enabled by default through DOMPurify; sanitize=false should remain a trusted-content escape hatch only.
linkPrompt is the extension point for product-specific URL collection, keeping dialogs outside the component contract.
The toolbar icons used to be Remix (i-ri-*). Tuff keeps ri out of its dependencies on purpose, so every docs demo drew fourteen grey squares; Carbon is installed by both hosts.
Component source: packages/tuffex/packages/components/src/markdown-editor/src/TxMarkdownEditor.vue.
Types: packages/tuffex/packages/components/src/markdown-editor/src/types.ts.
Serializer: packages/tuffex/packages/components/src/markdown-editor/src/markdown-serializer.ts.
Verified coverage: Coverage: packages/tuffex/packages/components/src/markdown-editor/__tests__/markdown-editor.test.ts verifies exports, sanitized WYSIWYG rendering, source-mode input updates, uncontrolled mode emits, the role="group" / aria-pressed mode switcher, and rich-content serialization back to Markdown.

packages/tuffex/packages/components/src/markdown-editor/index.ts