Component

Markdown editor

Allows editing and previewing markdown

If JavaScript is disabled this component falls back to a textarea component without the preview functionality

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "components/markdown_editor", {
  label: {
    text: "Body"
  },
  textarea: {
    name: "markdown-editor",
    id: "markdown-editor",
    data: {
      "paste-html-to-govspeak": false
    },
    margin_bottom: 6
  },
  contextual_guidance: "document-contents-guidance"
} %>

Accessibility acceptance criteria

The component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • be usable with touch
  • indicate when it has focus
  • have correctly associated labels

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

With error (preview)

Error: There is a problem with this input 

<%= render "components/markdown_editor", {
  label: {
    text: "Body with error"
  },
  textarea: {
    name: "markdown-editor-error",
    id: "markdown-editor-error"
  },
  error_items: [
    {
      text: "There is a problem with this input"
    }
  ]
} %>

With paste html to govspeak (preview) 

<%= render "components/markdown_editor", {
  label: {
    text: "Body"
  },
  textarea: {
    name: "markdown-editor-with-paste-html-to-govspeak",
    id: "markdown-editor-with-paste-html-to-govspeak"
  },
  paste_html_to_govspeak: true
} %>