{"_id":"@auroratide/textarea-markdown","_rev":"3-0f74c9df996f76ad6091d36102c692ec","name":"@auroratide/textarea-markdown","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@auroratide/textarea-markdown","version":"0.1.0","keywords":["textarea","mardkown","web component","element"],"author":{"url":"https://auroratide.com","name":"Timothy Foster"},"license":"ISC","_id":"@auroratide/textarea-markdown@0.1.0","maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"homepage":"https://github.com/Auroratide/web-components#readme","bugs":{"url":"https://github.com/Auroratide/web-components/issues"},"dist":{"shasum":"e2f61d841d9422e69904e1b9ccf2ac3958ac8a67","tarball":"https://registry.npmjs.org/@auroratide/textarea-markdown/-/textarea-markdown-0.1.0.tgz","fileCount":15,"integrity":"sha512-cZ6C6jsPdoEk+5qgTpaoucGJ0MS79gA/3Xh41pPLMKiFZDw5sA6KTVA4OHcgmBC+dN0ZloCctr2pWJmgaGhtFg==","signatures":[{"sig":"MEUCIFm7gYqLF24UtWkgvK0Ycp4aVeVt5FCvtPfRMsv9He15AiEA2XG4LpLLZRUFgqnTPKU72q6CQlhuwao+wpb6ExOaj6s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43651},"main":"lib/index.js","type":"module","_from":"file:auroratide-textarea-markdown-0.1.0.tgz","types":"./lib/index.d.ts","module":"lib/index.js","scripts":{"test":"wtr --node-resolve --port 10011 test","build":"tsc","clean":"rm -rf lib","test:clean":"pnpm clean && pnpm build && pnpm test","build:watch":"tsc -w"},"_npmUser":{"name":"auroratide","email":"tf.auroratide@gmail.com"},"_resolved":"/private/var/folders/v4/8mbblx3x25z2k8p9_0gssvtm0000gn/T/417d31d478f00ff52df18d6f711c853a/auroratide-textarea-markdown-0.1.0.tgz","_integrity":"sha512-cZ6C6jsPdoEk+5qgTpaoucGJ0MS79gA/3Xh41pPLMKiFZDw5sA6KTVA4OHcgmBC+dN0ZloCctr2pWJmgaGhtFg==","repository":{"url":"git+https://github.com/Auroratide/web-components.git","type":"git"},"_npmVersion":"11.6.2","description":"Web component for a textarea with markdown capabilities.","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.8.3","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.1","@web/test-runner-commands":"^0.9.0"},"_npmOperationalInternal":{"tmp":"tmp/textarea-markdown_0.1.0_1785783136012_0.07401472906150053","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@auroratide/textarea-markdown","version":"0.1.1","keywords":["textarea","mardkown","web component","element"],"author":{"url":"https://auroratide.com","name":"Timothy Foster"},"license":"ISC","_id":"@auroratide/textarea-markdown@0.1.1","maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"homepage":"https://github.com/Auroratide/web-components#readme","bugs":{"url":"https://github.com/Auroratide/web-components/issues"},"dist":{"shasum":"139880d1adf63eb1b01ca5069022a9705556a120","tarball":"https://registry.npmjs.org/@auroratide/textarea-markdown/-/textarea-markdown-0.1.1.tgz","fileCount":14,"integrity":"sha512-KBn5vt1PxD5+1upB7mrIC0frl8gDpLPAvh44jCy6TTQO2auX3iDGRq3GyqPdfe70cRYqvsAgXDdFwTXhmtZGCA==","signatures":[{"sig":"MEYCIQDWIevnWnHczZcHVbtGL83NJ+ndaV4F2j+FoRLUweZqDAIhAOExHxV1sNss/WKN6zAWwvUpLAetnRtPbv4CV8oqUm9J","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEQCIFDGYWnxphBoEXNQHDU0nijhn5Euivnnd+jD8UcDVh6GAiBW8qUKbM85XQcsxsqWS9pMf1jIb8PO98MIRmKhEnyrFw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36579},"main":"lib/index.js","type":"module","_from":"file:auroratide-textarea-markdown-0.1.1.tgz","types":"./lib/index.d.ts","module":"lib/index.js","scripts":{"test":"wtr --node-resolve --port 10011 test","build":"tsc","clean":"rm -rf lib","test:clean":"pnpm clean && pnpm build && pnpm test","build:watch":"tsc -w"},"_npmUser":{"name":"auroratide","email":"tf.auroratide@gmail.com"},"_resolved":"/private/var/folders/v4/8mbblx3x25z2k8p9_0gssvtm0000gn/T/2d9f3c69d584cb4cec65753ac9a5fa31/auroratide-textarea-markdown-0.1.1.tgz","_integrity":"sha512-KBn5vt1PxD5+1upB7mrIC0frl8gDpLPAvh44jCy6TTQO2auX3iDGRq3GyqPdfe70cRYqvsAgXDdFwTXhmtZGCA==","repository":{"url":"git+https://github.com/Auroratide/web-components.git","type":"git"},"_npmVersion":"11.6.2","description":"Web component for a textarea with markdown capabilities.","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.8.3","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.1","@web/test-runner-commands":"^0.9.0"},"_npmOperationalInternal":{"tmp":"tmp/textarea-markdown_0.1.1_1789220467985_0.45037228397030016","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"_id":"@auroratide/textarea-markdown@0.1.2","bugs":{"url":"https://github.com/Auroratide/web-components/issues"},"dist":{"shasum":"e3280047134398de1fadd1609a8b7cc307cd35eb","tarball":"https://registry.npmjs.org/@auroratide/textarea-markdown/-/textarea-markdown-0.1.2.tgz","fileCount":14,"integrity":"sha512-1MPpMRCIi3K7e1bVw+qSGJEHy+Ey5OX4nj2as57AaLoQrOR9dt0P2Wtt3SLuc8xVW0eRYeOEB0tACJt7NYRkXQ==","signatures":[{"sig":"MEUCIQCTPogVmbuoSJTJZcQHI8aybYIIsCWDWra0a6aQplyvaAIgLfM13/BCMGPQM9sRhS4xuyglOyfjBxFdND6QrliF8+Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDfQR+09dQfyICUpPuSEMbRCiz8I+JufQVfYSbrzp7H1AIhAKgz+3tBDxUo1VxXOr5lCyxhjUesgWwrR0DuT35AZBfr"}],"unpackedSize":36783},"main":"lib/index.js","name":"@auroratide/textarea-markdown","type":"module","_from":"file:auroratide-textarea-markdown-0.1.2.tgz","types":"./lib/index.d.ts","author":{"url":"https://auroratide.com","name":"Timothy Foster"},"module":"lib/index.js","license":"ISC","scripts":{"test":"wtr --node-resolve --port 10011 test","build":"tsc","clean":"rm -rf lib","test:clean":"pnpm clean && pnpm build && pnpm test","build:watch":"tsc -w"},"version":"0.1.2","_npmUser":{"name":"auroratide","email":"tf.auroratide@gmail.com"},"homepage":"https://github.com/Auroratide/web-components#readme","keywords":["textarea","mardkown","web component","element"],"_resolved":"/private/var/folders/v4/8mbblx3x25z2k8p9_0gssvtm0000gn/T/227d89c3347fd1be2e8021c99f8c707d/auroratide-textarea-markdown-0.1.2.tgz","_integrity":"sha512-1MPpMRCIi3K7e1bVw+qSGJEHy+Ey5OX4nj2as57AaLoQrOR9dt0P2Wtt3SLuc8xVW0eRYeOEB0tACJt7NYRkXQ==","repository":{"url":"git+https://github.com/Auroratide/web-components.git","type":"git"},"_npmVersion":"11.6.2","description":"Web component for a textarea with markdown capabilities.","directories":{},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.8.3","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.1","@web/test-runner-commands":"^0.9.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/textarea-markdown_0.1.2_1789487356438_0.6946837836984532"}}},"time":{"created":"2026-08-03T18:52:15.843Z","modified":"2026-09-15T15:49:16.657Z","0.1.0":"2026-08-03T18:52:16.148Z","0.1.1":"2026-09-12T13:41:08.060Z","0.1.2":"2026-09-15T15:49:16.517Z"},"bugs":{"url":"https://github.com/Auroratide/web-components/issues"},"author":{"url":"https://auroratide.com","name":"Timothy Foster"},"license":"ISC","homepage":"https://github.com/Auroratide/web-components#readme","keywords":["textarea","mardkown","web component","element"],"repository":{"url":"git+https://github.com/Auroratide/web-components.git","type":"git"},"description":"Web component for a textarea with markdown capabilities.","maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"readme":"# The textarea-markdown Element\n\n<p hidden><strong><a href=\"https://components.auroratide.com/textarea-markdown\">View this page with live demos!</a></strong></p>\n\nThe `textarea-markdown` element represents a textarea which supports [Markdown Syntax](https://www.markdownguide.org/). 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](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/).\n\n> [!WARNING]\n> 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!\n\n<!--DEMO\n<wc-demo>\n\t<label for=\"example-01\">Some Label</label>\n\t<textarea-markdown id=\"example-01\" placeholder=\"Type some text\" rows=\"6\"></textarea-markdown>\n</wc-demo>\n<style>\n\tlabel, toggle-switch {\n\t\tvertical-align: middle;\n\t}\n</style>\n/DEMO-->\n\n```html\n<label for=\"example-01\">Some Label</label>\n<textarea-markdown id=\"example-01\" placeholder=\"Type some text\" rows=\"6\">\n</textarea-markdown>\n```\n\n## Installation\n\nYou can import through CDN:\n\n```html\n<script type=\"module\" src=\"https://unpkg.com/@auroratide/textarea-markdown/lib/define.js\"></script>\n```\n\nOr, you may install through [NPM](https://www.npmjs.com/package/@auroratide/textarea-markdown) and include it as part of your build process:\n\n```\n$ npm i @auroratide/textarea-markdown\n```\n\n```javascript\nimport '@auroratide/textarea-markdown/lib/define.js'\n```\n\n## Usage\n\n`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](https://html.spec.whatwg.org/#the-label-element) it like so:\n\n```html\n<label for=\"example-02\">Character Description</label>\n<textarea-markdown id=\"example-02\"></textarea-markdown>\n```\n\nYou can start initialize the input with some text as well:\n\n```html\n<label for=\"example-03\">Character Description</label>\n<textarea-markdown checked id=\"example-03\">\nShe has **orange** hair and _green_ eyes.\n</textarea-markdown>\n```\n\n<!--DEMO\n<wc-demo>\n<label for=\"example-03\">Character Description</label>\n<textarea-markdown checked id=\"example-03\" rows=\"6\">\nShe has **orange** hair and _green_ eyes.\n</textarea-markdown>\n</wc-demo>\n/DEMO-->\n\n### Attributes\n\n| Attribute | Default | Description |\n| ------------- | --------- | ------------- |\n| `placeholder` | - | Hint text to show when there is no value. |\n| `rows` | - | Number of rows to include in the textarea. |\n| `cols` | - | Numer of columns to include in the textarea. |\n| `disabled` | - | Whether the textarea can be edited. |\n| `required` | - | Whether the textarea is required for form submission. |\n\n### CSS Customization\n\nThe `textarea-markdown` is composed of a **menu** with **buttons** and a **textarea** which can be individually customized:\n\n* `menu`: List of markdown controls.\n* `button`: A single button that controls markdown formatting.\n* `textarea`: The editable input field.\n\nHere's an example showing how to use CSS to customize the appearance:\n\n<!--DEMO\n<wc-demo>\n\t<label id=\"fancy-textarea-label\" for=\"fancy-textarea\">Fancy Textarea</label>\n\t<textarea-markdown id=\"fancy-textarea\" rows=\"6\"></textarea-markdown>\n\t<style>\n\t\t#fancy-textarea-label {\n\t\t\tdisplay: block;\n\t\t\tmargin-block-end: 0.333em;\n\t\t}\n\t\t#fancy-textarea {\n\t\t\tborder: 0.0625em solid oklch(1 0 0 / 0.5);\n\t\t\tborder-radius: 0.25em;\n\t\t}\n\t\t#fancy-textarea:focus {\n\t\t\tborder: 0.0625em solid var(--t-primary-b);\n\t\t}\n\t\t#fancy-textarea::part(menu) {\n\t\t\tbackground-color: oklch(1 0 0 / 0.125);\n\t\t\tpadding: 0.25em 0.5em;\n\t\t}\n\t\t#fancy-textarea::part(button) {\n\t\t\tborder-radius: 0.25em;\n\t\t\tbackground: none;\n\t\t\tfont-size: 87.5%;\n\t\t}\n\t\t#fancy-textarea::part(button):hover {\n\t\t\tbackground: oklch(0 0 0 / 0.25);\n\t\t}\n\t\t#fancy-textarea::part(textarea) {\n\t\t\tborder: none;\n\t\t}\n\t</style>\n</wc-demo>\n/DEMO-->\n\n```css\ntextarea-markdown {\n\tborder: 0.0625em solid oklch(1 0 0 / 0.5);\n\tborder-radius: 0.25em;\n}\n\ntextarea-markdown:focus {\n\tborder: 0.0625em solid var(--t-primary-b);\n}\n\ntextarea-markdown::part(menu) {\n\tbackground-color: oklch(1 0 0 / 0.125);\n\tpadding: 0.25em 0.5em;\n}\n\ntextarea-markdown::part(button) {\n\tborder-radius: 0.25em;\n\tbackground: none;\n\tfont-size: 87.5%;\n}\n\ntextarea-markdown::part(button):hover {\n\tbackground: oklch(0 0 0 / 0.25);\n}\n\ntextarea-markdown::part(textarea) {\n\tborder: none;\n}\n```\n\n### Events\n\nThe `textarea-markdown` element dispatches the following events:\n\n| Name | When Triggered |\n| ---- | -------------- |\n| `change` | Whenever the value of the textarea changes, or when one of the tools is invoked. |\n| `input` | Whenever a change occurs in the textarea through the user interface. |\n\nThe value of the text field can be accessed with `event.target.value`.\n\n### Toolbar\n\nAs of this version, the toolbar is static and provides the following options:\n\n| Tool | Shortcut | Purpose |\n| ---- | -------- | ------- |\n| Header | - | Switches between a level 2, level 3, and level 4 header. |\n| Bold | Ctrl+B | Makes the selected text bold. |\n| Italic | Ctrl+I | Makes the selected text italic. |\n| Bullets | Ctrl+Shift+8 | Starts a bulleted list. |\n| Numbers | Ctrl+Shift+7 | Starts a numbered list. |\n\n## Accessibility\n\nThis custom element is build with accessibility in mind! It follows the WAI-ARIA guidelines for the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/).\n\n- When focus is on the toolbar, <kbd>Left</kbd> and <kbd>Right</kbd> navigate between the options.\n- The textarea is form-associated, so it participates in form submission and can be labeled the same way as inputs.\n","readmeFilename":"README.md"}