github / Markdown Toolbar Element
Licence: mit
Markdown formatting buttons for text inputs.
Stars: โญ 160
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Markdown Toolbar Element
Dataformsjs
๐ DataFormsJS ๐ A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.
Stars: โญ 95 (-40.62%)
Mutual labels: markdown, web-components, custom-elements
Auto Check Element
An input element that validates its value with a server endpoint.
Stars: โญ 85 (-46.87%)
Mutual labels: web-components, custom-elements
Task Lists Element
Drag and drop task list items.
Stars: โญ 73 (-54.37%)
Mutual labels: web-components, custom-elements
Aybolit
Lightweight web components library built with LitElement.
Stars: โญ 90 (-43.75%)
Mutual labels: web-components, custom-elements
Vuesence Book
Minimalistic Vue.js based documentation system component
Stars: โญ 48 (-70%)
Mutual labels: markdown, web-components
Custom Elements Ts
Create native custom elements using Typescript
Stars: โญ 52 (-67.5%)
Mutual labels: web-components, custom-elements
Use Custom Element
Custom hook to bridge Custom Elements (Web Components) to React.
Stars: โญ 77 (-51.87%)
Mutual labels: web-components, custom-elements
Elm Canvas
A canvas drawing library for Elm
Stars: โญ 124 (-22.5%)
Mutual labels: web-components, custom-elements
Image Crop Element
A custom element for cropping a square image. Returns x, y, width, and height.
Stars: โญ 115 (-28.12%)
Mutual labels: web-components, custom-elements
Nutmeg
Build, test, and publish vanilla Web Components with a little spice
Stars: โญ 111 (-30.62%)
Mutual labels: web-components, custom-elements
Details Dialog Element
A modal dialog that's opened with <details>.
Stars: โญ 603 (+276.88%)
Mutual labels: web-components, custom-elements
Ion Phaser
A web component to use Phaser Framework with Angular, React, Vue, etc ๐ฎ
Stars: โญ 152 (-5%)
Mutual labels: web-components, custom-elements
Xy Ui
๐จ้ขๅๆชๆฅ็ๅ็ web components UI็ปไปถๅบ
Stars: โญ 603 (+276.88%)
Mutual labels: web-components, custom-elements
File Input
A better <input type="file">
Stars: โญ 59 (-63.12%)
Mutual labels: web-components, custom-elements
Emoji Picker Element
A lightweight emoji picker for the modern web
Stars: โญ 587 (+266.88%)
Mutual labels: web-components, custom-elements
Dark Mode Toggle
A custom element that allows you to easily put a Dark Mode ๐ toggle or switch on your site:
Stars: โญ 550 (+243.75%)
Mutual labels: web-components, custom-elements
Vanilla Colorful
A tiny color picker custom element for modern web apps (2.7 KB) ๐จ
Stars: โญ 467 (+191.88%)
Mutual labels: web-components, custom-elements
Remount
Mount React components to the DOM using custom elements
Stars: โญ 522 (+226.25%)
Mutual labels: web-components, custom-elements
Vanilla Hamburger
Animated hamburger menu icons for modern web apps (1.8 KB) ๐
Stars: โญ 110 (-31.25%)
Mutual labels: web-components, custom-elements
Html Include Element
Easily include external HTML into your pages.
Stars: โญ 143 (-10.62%)
Mutual labels: web-components, custom-elements
<markdown-toolbar> element
Markdown formatting buttons for text inputs.
Installation
$ npm install --save @github/markdown-toolbar-element
Usage
import '@github/markdown-toolbar-element'
<markdown-toolbar for="textarea_id">
<md-bold>bold</md-bold>
<md-header>header</md-header>
<md-italic>italic</md-italic>
<md-quote>quote</md-quote>
<md-code>code</md-code>
<md-link>link</md-link>
<md-image>image</md-image>
<md-unordered-list>unordered-list</md-unordered-list>
<md-ordered-list>ordered-list</md-ordered-list>
<md-task-list>task-list</md-task-list>
<md-mention>mention</md-mention>
<md-ref>ref</md-ref>
<button data-md-button>Custom button</button>
</markdown-toolbar>
<textarea id="textarea_id"></textarea>
<markdown-toolbar>
comes with focus management as advised in WAI-ARIA Authoring Practices 1.1: Toolbar Design Pattern. The md-*
buttons that ship with this package are automatically managed. Add a data-md-button
attribute to any custom toolbar items to enroll them into focus management.
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
Development
npm install
npm test
License
Distributed under the MIT license. See LICENSE for details.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].