Markdown Input Component

Markdown Editor Input​

The <MarkdownInput> component is a developer-friendly Markdown Editor that provides a rich Markdown Textarea Input to capture rich formatted text in Markdown with icons for markdown's popular formatting options and convenience keyboard bindings for a pleasant intuitive authoring experience.

It's optimized GitHub Flavored Markdown where it supports popular short-cuts for editing and documenting code like tab block un/indenting, single-line and code and comments blocks.

It behaves like all other Input components which you can embed in custom UIs as a standard Vue Component:

<MarkdownInput id="body" v-model="request.body" />

MarkdownInput Properties​

It offers a number of properties to customize its appearance and behavior:

defineProps<{
    status?: ResponseStatus|null
    id: string
    inputClass?: string
    label?: string
    labelClass?: string
    help?: string
    placeholder?: string
    modelValue?: string

    counter?: boolean
    rows?: number
    errorMessages?: string[]
    lang?: string
    autoFocus?: boolean
    disabled?: boolean
    helpUrl?: string
    hide?: string|MarkdownInputOptions|MarkdownInputOptions[]
}>()

type MarkdownInputOptions = "bold" | "italics" | "link" | "image" | "blockquote" | "code" 
  | "heading" | "orderedList" | "unorderedList" | "strikethrough" | "undo" | "redo" | "help"

Just like other Input components it can be annotated on Request DTO string properties to change which Input component it should use in AutoForm components, where it can be further customized with tailwind classes on its containing Field and Textarea Input elements, e.g:

public class MarkdownEmail
{
    [Input(Type="MarkdownInput", Label=""), FieldCss(Field="col-span-12", Input="h-56")]
    public string? Body { get; set; }
}

Where it's used to generate all of CreatorKit's Markdown Email Forms, e.g:

Keyboard Shortcuts​

For added productivity the Editor supports many of the popular Keyboard shortcuts in found in common IDEs:

Edit this page on GitHub