Page Notes

This page demonstrates a web component, <gw-dynamic-textarea> which enhances <textarea> elements to optionally allow tab-based indentation editing.

This is useful for <textarea>s which store complex information, such as code or detailed notes. However, without careful consideration, tab-based indentation editing can prevent keyboard navigation on the page.

This control handles that by introducing a keyboard-based toggle to turn the tab-based indentation editing on and off. When toggled, the setting extends to every <gw-dynamic-textarea> on the page at once, and is remembered between sessions with the localStorage API.

The web component progressively enhances underlying markup. To use it, simply wrap an existing <textarea> in an <gw-dynamic-textarea> after incluidng the script on your page.

The colors may be configured with some CSS variables.

--background-color-2
The color of the checkbox's background.
--selected-color
The color of the checkbox's background when checked
--icon-color
The color of the checkbox

Additionally, syntax highlighting for Javascript, CSS, and HTML is available via Prism. My particular approach for this was inspired by Chris @ GoMakeThings.

To use syntax highlighting, you need to do two things:

  • Download and include a link to Prism.js on your page. You do not need to include its CSS file. Prism is available for download on their website.
  • Add the data-language attribute to the <gw-dynamic-textarea> element. It should be one of "js", "css", or "html".

When the data-language is specified to add syntax highlighting, the colors of the component are no longer configurable.

Files

Markup

  • dynamicTextareaDemo.html

Scripts

  • dynamicTextareaControl.js
  • prism.js