The textarea-markdown Element

The textarea-markdown element represents a textarea which supports Markdown Syntax. This component is built with accessibility in mind: it is form-associated, works with customary labels, and uses the WAI-ARIA guidelines for the toolbar pattern.

[!WARNING] This component is still in active development and may not implement all the things necessary for an element to be fully form-associated and accessible. If you decide to use this, be sure to update often!

<label for="example-01">Some Label</label>
<textarea-markdown id="example-01" placeholder="Type some text" rows="6">
</textarea-markdown>

Installation

You can import through CDN:

<script type="module" src="https://unpkg.com/@auroratide/textarea-markdown/lib/define.js"></script>

Or, you may install through NPM and include it as part of your build process:

$ npm i @auroratide/textarea-markdown

import '@auroratide/textarea-markdown/lib/define.js'

Usage

textarea-markdown is an inline markup element that you can use in your HTML document. It is a form control, meaning it is appropriate to properly label it like so:

<label for="example-02">Character Description</label>
<textarea-markdown id="example-02"></textarea-markdown>

You can start initialize the input with some text as well:

<label for="example-03">Character Description</label>
<textarea-markdown checked id="example-03">
She has **orange** hair and _green_ eyes.
</textarea-markdown>

Attributes

| Attribute | Default | Description | | ------------- | --------- | ------------- | | placeholder | - | Hint text to show when there is no value. | | rows | - | Number of rows to include in the textarea. | | cols | - | Numer of columns to include in the textarea. | | disabled | - | Whether the textarea can be edited. | | required | - | Whether the textarea is required for form submission. |

CSS Customization

The textarea-markdown is composed of a menu with buttons and a textarea which can be individually customized:

• menu: List of markdown controls.
• button: A single button that controls markdown formatting.
• textarea: The editable input field.

Here's an example showing how to use CSS to customize the appearance:

textarea-markdown {
	border: 0.0625em solid oklch(1 0 0 / 0.5);
	border-radius: 0.25em;
}

textarea-markdown:focus {
	border: 0.0625em solid var(--t-primary-b);
}

textarea-markdown::part(menu) {
	background-color: oklch(1 0 0 / 0.125);
	padding: 0.25em 0.5em;
}

textarea-markdown::part(button) {
	border-radius: 0.25em;
	background: none;
	font-size: 87.5%;
}

textarea-markdown::part(button):hover {
	background: oklch(0 0 0 / 0.25);
}

textarea-markdown::part(textarea) {
	border: none;
}

Events

The textarea-markdown element dispatches the following events:

| Name | When Triggered | | ---- | -------------- | | change | Whenever the value of the textarea changes, or when one of the tools is invoked. | | input | Whenever a change occurs in the textarea through the user interface. |

The value of the text field can be accessed with event.target.value.

Toolbar

As of this version, the toolbar is static and provides the following options:

| Tool | Shortcut | Purpose | | ---- | -------- | ------- | | Header | - | Switches between a level 2, level 3, and level 4 header. | | Bold | Ctrl+B | Makes the selected text bold. | | Italic | Ctrl+I | Makes the selected text italic. | | Bullets | Ctrl+Shift+8 | Starts a bulleted list. | | Numbers | Ctrl+Shift+7 | Starts a numbered list. |

Accessibility

This custom element is build with accessibility in mind! It follows the WAI-ARIA guidelines for the toolbar pattern.

• When focus is on the toolbar, Left and Right navigate between the options.
• The textarea is form-associated, so it participates in form submission and can be labeled the same way as inputs.