Component

Govspeak Editor

A progressively enhanced textarea with added Govspeak specific functionality

Typically it is used to enhance a textarea field and add enhancements that help make it easy to edit and publish Govspeak content.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

How to call this component

<%= render "components/govspeak_editor", {
  label: {
    text: "Document content body",
    bold: true
  },
  name: "default"
} %>

Accessibility acceptance criteria

The component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • be usable with touch
  • indicate when they have focus
  • be recognisable as form textarea elements
  • have correctly associated labels

Enhances the GOVUK Textarea component

Other examples

With hint (preview)

Explain any acronyms

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

<%= render "components/govspeak_editor", {
  label: {
    text: "Document content body",
    bold: true
  },
  name: "default",
  hint: "Explain any acronyms",
  hint_id: "this_is_optional"
} %>

With data attributes (preview)

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

<%= render "components/govspeak_editor", {
  label: {
    text: "Document content body",
    bold: true
  },
  name: "with_data_attributes",
  data_attributes: {
    some_attribute: "This is for the main component"
  },
  textarea_data_attributes: {
    some_attribute: "This is for the textarea"
  },
  preview_button_data_attributes: {
    some_attribute: "This is for the toggle preview button"
  }
} %>

With value (preview)

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

<%= render "components/govspeak_editor", {
  label: {
    text: "Document content body",
    bold: true
  },
  name: "with_value",
  value: "## What is Lorem Ipsum?
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    "
} %>

With textarea rows (preview)

Allows the number of rows in the textarea to be adjusted.

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

<%= render "components/govspeak_editor", {
  label: {
    text: "Document content body",
    bold: true
  },
  name: "name",
  rows: 2
} %>

Right to left (preview)

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

<%= render "components/govspeak_editor", {
  label: {
    text: "Document content body",
    bold: true
  },
  name: "name",
  right_to_left: true,
  value: "This is right to left"
} %>

With errors (preview)

Error: there's nothing here
no really, there's nothing here

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

<%= render "components/govspeak_editor", {
  label: {
    text: "Document content body",
    bold: true
  },
  name: "default",
  error_items: [
    {
      text: "there's nothing here",
      href: "error1"
    },
    {
      text: "no really, there's nothing here",
      href: "error2"
    }
  ]
} %>

With attachments and alternative format provider (preview)

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

<%= render "components/govspeak_editor", {
  label: {
    text: "Document content body",
    bold: true
  },
  name: "with_image_ids_and_alternative_format_provider_id",
  data_attributes: {
    alternative_format_provider_id: 123,
    image_ids: [
      1,
      2,
      3
    ],
    attachment_ids: [
      3,
      4,
      5
    ]
  },
  value: "## What is Lorem Ipsum?
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    
    This is an attachment: !@1
    
    This is an image: !!1
    "
} %>