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.

Some Label

<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>

Character Description She has **orange** hair and _green_ eyes.

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:

Fancy Textarea

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.