CnMarkdownEditor

Markdown editor with a textarea + live HTML preview, a formatting toolbar, and three layout modes (edit / split / preview).

Pragmatic MVP using <textarea> + cnRenderMarkdown. A richer TipTap-based WYSIWYG editor is tracked as a follow-up. The contract (props, events, methods) is forward-compatible: when the WYSIWYG path lands consumers will opt in via a new mode value without changing their v-model binding.

Try it

<template>
  <CnMarkdownEditor
    v-model="article"
    :mode.sync="mode"
    placeholder="Write your article…"
    hint="Supports Markdown. Use the toolbar or Ctrl+B / Ctrl+I." />
</template>

<script>
import { CnMarkdownEditor } from '@conduction/nextcloud-vue'

export default {
  components: { CnMarkdownEditor },
  data() { return { article: '', mode: 'split' } },
}
</script>

Props

Prop	Type	Default	Description
value	String	''	v-model. Markdown source.
mode	'edit'|'split'|'preview'	'split'	Layout mode. Use .sync or v-model:mode to bind.
placeholder	String	'Write Markdown…'	Textarea placeholder.
ariaLabel	String	'Markdown editor input'	Textarea aria-label.
rows	Number	10	Minimum textarea rows.
disabled	Boolean	false	Disables the textarea (preview still renders).
hideToolbar	Boolean	false	Hide the formatting toolbar.
hideModeSwitch	Boolean	false	Hide the toolbar's mode-cycle button.
modeSwitchTooltip	String	'Cycle layout …'	Tooltip for the mode-cycle button.
toolbar	Array<{id,label,prefix,suffix?,placeholder?,tooltip?,linePrefix?}>	default 8	Custom toolbar entries. linePrefix: true prefixes the line instead of wrapping.
hint	String	''	Helper text rendered under the editor.

Toolbar entry shape

{
  id: 'bold',
  label: 'B',                 // shown on the button
  prefix: '**',
  suffix: '**',
  placeholder: 'bold',        // text dropped when selection is empty
  tooltip: 'Bold (Ctrl+B)',
  linePrefix: false,          // true = prefix the current line, no suffix
}

Default toolbar

Bold (Ctrl+B), Italic (Ctrl+I), H1, H2, Link, Inline code, List, Quote.

Events

Event	Payload	Description
input	String	v-model emit on every text mutation.
update:mode	'edit'|'split'|'preview'	Mode-cycle button.

Public methods

Method	Signature	Description
insertAtCaret(text)	(text: string)	Drop text at the current caret (no markdown wrapping). Useful from file-picker callbacks.

Follow-up

A WYSIWYG mode backed by TipTap is tracked in nextcloud-vue#286 follow-ups. The intent is to add a mode: 'wysiwyg' value that swaps the textarea for a TipTap editor while keeping v-model semantics. Consumers can wire this when it lands without touching their template.

See also

• cnRenderMarkdown — drives the preview pipeline.