Clicking the quote button toggles whether the block should be rendered with <blockquote>.
Integrating with Element Internals  Copy Chapter
Trix will integrate <trix-editor> elements with forms depending on the browser's support for Element Internals. If there is a need to disable support for ElementInternals, set Trix.elements.TrixEditorElement.formAssociated = false:

When Trix is configured to be compatible with ElementInternals, it is also
capable of functioning without an <input type="hidden"> element. To configure
a <trix-editor> element to skip creating its <input type="hidden">, set the
element's willCreateInput = false:

NOTE
Trix will always use an associated <input type="hidden"> element when the

[input] attribute is set. To migrate to <input>-free support, set

willCreateInput = false, then render the <trix-editor> without the

[input] attribute.
WARNING
In the absence of an <input type="hidden"> element, the <trix-editor>

element's value will not be included in <form> element submissions unless it

is rendered with a [name] attribute. Set the [name] attribute to the same

value that the <input type="hidden"> element would have.
Invoking Internal Trix Actions  Copy Chapter
Internal actions are defined in controllers/editor_controller.js and consist of:
* undo
* redo
* link
* increaseBlockLevel
* decreaseBlockLevel

Invoking External Custom Actions  Copy Chapter
If you want to add a button to the toolbar and have it invoke an external action, you can prefix your action name with x-. For example, if I want to print a log statement any time my new button is clicked, I would set by button's data attribute to be data-trix-action="x-log"

To respond to the action, listen for trix-action-invoke. The event's target property returns a reference to the <trix-editor> element, its invokingElement property returns a reference to the <button> element, and its actionName property returns the value of the [data-trix-action] attribute. Use the value of the actionName property to detect which external action was invoked.

Trix will automatically update the value of the hidden input field with each change to the editor.
Populating With Stored Content  Copy Chapter
To populate a <trix-editor> with stored content, include that content in the associated input element’s value attribute.

Use an associated input element to initially populate an editor. When an associated input element is absent, Trix will safely sanitize then load any HTML content inside a <trix-editor>…</trix-editor> tag.

WARNING
When a <trix-editor> element initially connects with both HTML content and

an associated input element, Trix will always disregard the HTML content and

load its initial content from the associated input element.
Validating the Editor  Copy Chapter
Out of the box, <trix-editor> elements support browsers' built-in [Constraint
validation][]. When rendered with the [required][] attribute, editors will be
invalid when they're completely empty. For example, consider the following HTML:

Since the <trix-editor> element is [required], it is invalid when its value
is empty:

In addition to the built-in [required] attribute, <trix-editor>
elements support custom validation through their [setCustomValidity][] method.
For example, consider the following HTML:

Custom validation can occur at any time. For example, validation can occur after
a trix-change event fired after the editor's contents change:

[Constraint validation]: https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
[required]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
[setCustomValidity]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity
Disabling the Editor  Copy Chapter
To disable the <trix-editor>, render it with the [disabled] attribute:

Disabled editors are not editable, cannot receive focus, and their values will
be ignored when their related <form> element is submitted.
To change whether or not an editor is disabled, either toggle the [disabled]
attribute or assign a boolean to the .disabled property:

When disabled, the editor will match the [:disabled CSS
pseudo-class][:disabled].
[:disabled]: https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
Providing an Accessible Name  Copy Chapter
Like other form controls, <trix-editor> elements should have an accessible name. The <trix-editor> element integrates with <label> elements. It supports two styles of integrating with <label> elements:
1. render the <trix-editor> element with an [id] attribute that the <label> element references through its [for] attribute:

2. render the <trix-editor> element as a child of the <label> element:

WARNING
When rendering the <trix-editor> element as a child of the <label> element, explicitly render the corresponding <trix-toolbar> element outside of the <label> element.
In addition to integrating with <label> elements, <trix-editor> elements support [aria-label] and [aria-labelledby] attributes.
Styling Formatted Content  Copy Chapter
To ensure what you see when you edit is what you see when you save, use a CSS class name to scope styles for Trix formatted content. Apply this class name to your <trix-editor> element, and to a containing element when you render stored Trix content for display in your application.

The default trix.css file includes styles for basic formatted content—including bulleted and numbered lists, code blocks, and block quotes—under the class name trix-content. We encourage you to use these styles as a starting point by copying them into your application’s CSS with a different class name.
Storing Attached Files  Copy Chapter
Trix automatically accepts files dragged or pasted into an editor and inserts them as attachments in the document. Each attachment is considered _pending_ until you store it remotely and provide Trix with a permanent URL.
To store attachments, listen for the trix-attachment-add event. Upload the attached files with XMLHttpRequest yourself and set the attachment’s URL attribute upon completion. See the attachment example for detailed information.
If you don’t want to accept dropped or pasted files, call preventDefault() on the trix-file-accept event, which Trix dispatches just before the trix-attachment-add event.
Previewing Attached Files  Copy Chapter
Trix automatically previews attached image files. To determine whether or not to preview an attached file, Trix compares the file's content type against the Trix.Attachment.previewablePattern. By default, Trix will preview the following content types:
* image/gif
* image/png
* image/webp
* image/jpg
* image/jpeg
To customize an attachment's preview, listen for the trix-attachment-add event. When handling the event, set the attachment's previewable attribute, then change its preview URL by calling setPreviewURL:

Editing Text Programmatically
You can manipulate a Trix editor programmatically through the Trix.Editor interface, available on each <trix-editor> element through its editor property.

Understanding the Document Model  Copy Chapter
The formatted content of a Trix editor is known as a _document_, and is represented as an instance of the Trix.Document class. To get the editor’s current document, use the editor.getDocument method.

You can convert a document to an unformatted JavaScript string with the document.toString method.

Immutability and Equality  Copy Section
Documents are immutable values. Each change you make in an editor replaces the previous document with a new document. Capturing a snapshot of the editor’s content is as simple as keeping a reference to its document, since that document will never change over time. (This is how Trix implements undo.)
To compare two documents for equality, use the document.isEqualTo method.

Getting and Setting the Selection  Copy Chapter
Trix documents are structured as sequences of individually addressable characters. The index of one character in a document is called a _position_, and a start and end position together make up a _range_.
To get the editor’s current selection, use the editor.getSelectedRange method, which returns a two-element array containing the start and end positions.

You can set the editor’s current selection by passing a range array to the editor.setSelectedRange method.

Collapsed Selections  Copy Section
When the start and end positions of a range are equal, the range is said to be _collapsed_. In the editor, a collapsed selection appears as a blinking cursor rather than a highlighted span of text.
For convenience, the following calls to setSelectedRange are equivalent when working with collapsed selections:

Directional Movement  Copy Section
To programmatically move the cursor or selection through the document, call the editor.moveCursorInDirection or editor.expandSelectionInDirection methods with a _direction_ argument. The direction can be either "forward" or "backward".

Converting Positions to Pixel Offsets  Copy Section
Sometimes you need to know the _x_ and _y_ coordinates of a character at a given position in the editor. For example, you might want to absolutely position a pop-up menu element below the editor’s cursor.
Call the editor.getClientRectAtPosition method with a position argument to get a DOMRect instance representing the left and top offsets, width, and height of the character at the given position.

Inserting and Deleting Text  Copy Chapter
The editor interface provides methods for inserting, replacing, and deleting text at the current selection.
To insert or replace text, begin by setting the selected range, then call one of the insertion methods below. Trix will first remove any selected text, then insert the new text at the start position of the selected range.
Inserting Plain Text  Copy Section
To insert unformatted text into the document, call the editor.insertString method.

Inserting HTML  Copy Section
To insert HTML into the document, call the editor.insertHTML method. Trix will first convert the HTML into its internal document model. During this conversion, any formatting that cannot be represented in a Trix document will be lost.

Inserting a File  Copy Section
To insert a DOM File object into the document, call the editor.insertFile method. Trix will insert a pending attachment for the file as if you had dragged and dropped it onto the editor.

Inserting a Content Attachment  Copy Section
Content attachments are self-contained units of HTML that behave like files in the editor. They can be moved or removed, but not edited directly, and are represented by a single character position in the document model.
To insert HTML as an attachment, create a Trix.Attachment with a content attribute and call the editor.insertAttachment method. The HTML inside a content attachment is not subject to Trix’s document conversion rules and will be rendered as-is.

Inserting a Line Break  Copy Section
To insert a line break, call the editor.insertLineBreak method, which is functionally equivalent to pressing the return key.

Deleting Text  Copy Section
If the current selection is collapsed, you can simulate deleting text before or after the cursor with the editor.deleteInDirection method.

To delete a range of text, first set the selected range, then call editor.deleteInDirection with either direction as the argument.

Working With Attributes and Nesting  Copy Chapter
Trix represents formatting as sets of _attributes_ applied across ranges of a document.
By default, Trix supports the inline attributes bold, italic, href, and strike, and the block-level attributes heading1, quote, code, bullet, and number.
Applying Formatting  Copy Section
To apply formatting to the current selection, use the editor.activateAttribute method.

To set the href attribute, pass a URL as the second argument to editor.activateAttribute.

Removing Formatting  Copy Section
Use the editor.deactivateAttribute method to remove formatting from a selection.

Formatting With a Collapsed Selection  Copy Section
If you activate or deactivate attributes when the selection is collapsed, your formatting changes will apply to the text inserted by any subsequent calls to editor.insertString.

Adjusting the Nesting Level  Copy Section
To adjust the nesting level of quotes, bulleted lists, or numbered lists, call the editor.increaseNestingLevel and editor.decreaseNestingLevel methods.

Using Undo and Redo  Copy Chapter
Trix editors support unlimited undo and redo. Successive typing and formatting changes are consolidated together at five-second intervals; all other input changes are recorded individually in undo history.
Call the editor.undo and editor.redo methods to perform an undo or redo operation.

Changes you make through the editor interface will not automatically record undo entries. You can save your own undo entries by calling the editor.recordUndoEntry method with a description argument.

Loading and Saving Editor State  Copy Chapter
Serialize an editor’s state with JSON.stringify and restore saved state with the editor.loadJSON method. The serialized state includes the document and current selection, but does not include undo history.

HTML Sanitization  Copy Chapter
Trix uses DOMPurify to sanitize the editor content. You can set the DOMPurify config via Trix.config.dompurify.
For example if you want to keep a custom tag, you can access do that with:

HTML Rendering  Copy Chapter
Trix renders changes to editor content by replacing existing nodes with new nodes.
To customize how Trix renders changes, set the <trix-editor> element's
render property to a function that accepts a <trix-editor> instance and a
[DocumentFragment][]:

CAUTION
By the time that render(editorElement, documentFragment) is

invoked, Trix will have finalized modifications to the HTML content (like HTML

sanitization, for example). If you make further modifications to the content,

be sure that they are safe.
[DocumentFragment]: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
Observing Editor Changes  Copy Chapter
The <trix-editor> element emits several events which you can use to observe and respond to changes in editor state.
* trix-before-initialize fires when the <trix-editor> element is attached to the DOM just before Trix installs its editor object. If you need to use a custom Trix configuration you can change Trix.config here.
* trix-initialize fires when the <trix-editor> element is attached to the DOM and its editor object is ready for use.
* trix-change fires whenever the editor’s contents have changed.
* trix-before-render fires before the editor’s new contents are rendered. You can override the function used to render the content through the render property on the event. The render function expects two positional arguments: the <trix-editor> element that will render and a DocumentFragment instance that contains the new content. Read HTML Rendering to learn more.
* trix-before-paste fires just before text is pasted into the editor. You can use this to modify the content being pasted or prevent the paste event from happening at all. The paste property on the event contains the pasted string or html, and the range of the inserted text.
* trix-paste fires whenever text is pasted into the editor. The paste property on the event contains the pasted string or html, and the range of the inserted text.
* trix-selection-change fires any time the selected range changes in the editor.
* trix-focus and trix-blur fire when the editor gains or loses focus, respectively.
* trix-file-accept fires when a file is dropped or inserted into the editor. You can access the DOM File object through the file property on the event. Call preventDefault on the event to prevent attaching the file to the document.
* trix-attachment-add fires after an attachment is added to the document. You can access the Trix attachment object through the attachment property on the event. If the attachment object has a file property, you should store this file remotely and set the attachment’s URL attribute. See the attachment example for detailed information.
* trix-attachment-edit fires after an attachment is edited in the document. You can access the Trix attachment object through the attachment property on the event.
* trix-attachment-remove fires when an attachment is removed from the document. You can access the Trix attachment object through the attachment property on the event. You may wish to use this event to clean up remotely stored files.
* trix-action-invoke fires when a Trix action is invoked. You can access the <trix-editor> element through the event's target property, the element responsible for invoking the action through the invokingElement property, and the action's name through the actionName property. The trix-action-invoke event will only fire for custom actions and not for built-in.
Contributing to Trix
Trix is open-source software, freely distributable under the terms of an MIT-style license. The source code is hosted on GitHub.
We welcome contributions in the form of bug reports, pull requests, or thoughtful discussions in the GitHub issue tracker. Please see the Code of Conduct for our pledge to contributors.
Trix was created by Javan Makhmali and Sam Stephenson, with development sponsored by 37signals.
Building From Source  Copy Section
Trix uses Yarn to manage dependencies and Rollup to bundle its source.
Install development dependencies with:

To generate distribution files run:

Developing In-Browser  Copy Section
You can run a watch process to automatically generate distribution files when your source file change:

When the watch process is running you can run a web server to serve the compiled assets:

With the development server running, you can visit /index.html to see a Trix debugger inspector, or /test.html to run the tests on a browser.
For easier development, you can watch for changes to the JavaScript and style files, and serve the results in a browser, with a single command:

Running Tests  Copy Section
You can also run the test in a headless mode with: