A wrapper around quill to be used in shadow DOM projects and components

<od-richtext> is similar to an input textarea however it comes with a variety of styling options to format he users input. The component outputs semantic HTML and styling to go with it.

Installation

• Install with npm

npm i @orcden/od-richtext

Usage

import '@orcden/od-richtext';

<od-richtext></od-richtext>

Attributes

| Attribute | Type | Default | Description | |-----------|---------|---------|-----------------------------------------------------------------------------------------| | active | Boolean | true | Controls if the field is active and allowing input or disabled and in read-only mode |

Properties

| Property | Type | Default | Description | |-----------|---------|---------|-----------------------------------------------------------------------------------------| | active | Boolean | true | Controls if the field is active and allowing input or disabled and in read-only mode | | quill | Quill | Quill | Get Only. A passthrough for the Quill instance. can be used for extending functionality | | editior | Quill | Quill | Get Only. A passthrough for the Quill instance. can be used for extending functionality | | length | Number | 0 | Get Only. Returns the current length of the users input | | hasFocus | Boolean | false | Get Only. Returns True/False if the field is currently in the users focus | | styleTag | HTMLElement | HTMLElement | Get Only. Returns the componentized styles used for formatting the text | | styles | String | String | Get Only. Returns the styles as a string that are being used for formatting the text | | value | String | String | Get Only. Returns the pure HTML representation of the input | | contents | Delta | Delta | Can be used for setting or getting the contents of the Quill instance as a Delta | | text | String | String | Can be used for setting or getting the text contents of the Quill instance |

Functions

| Name | Parameters | Description | |-----------|------|-----------------------------------------------| | getLength | None | Gets the current length of the users input | | hasFocus | None | Returns True/False if the field is currently in the users focus | | focus | None | Sets the focus of the user to the editor | | blur | None | Removes focus from the editor | | getHTML | None | Returns the pure html associated with the input | | getContents | None | Returns the contents of the field in a Quill Delta | | setContents | Delta | Sets the contents of the field with a given Quill Delta | | getText | None | Returns the text of the field without formatting | | setText | String | Sets the text content of the field. For index insert use the editor passthrough | | dangerouslySetHTMLValue | String | Sets the HTML content of the field. Explicitly stated as dangerous, value property not available so use this if you need it |

Styling

• CSS variables are available to alter the default styling provided

| Shadow Parts | Description | |------------------|-----------------------| | button | The html button used inside the component |

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Run tests

npm run test

Build for production

npm run build