Trix Scientific

A modified version of Basecamp's Trix editor for use in scientific applications.

Modifications include:

* Superscript tags
* Subscript tags
* Text underlining
* Common notation symbols
* Registration/Copyright/Trademark symbols
* Greek Alpha and Beta symbols
* Removal of quote and code blocks

Getting Started

Include the bundled trix.css and trix.js files in the of your page.

``html

…



`

trix.css includes default styles for the Trix toolbar, editor, and attachments. Skip this file if you prefer to define these styles yourself.

To use your own polyfills, or to target only browsers that support all of the required standards, include trix-core.js instead.

Creating an Editor

Place an empty tag on the page. Trix will automatically insert a separate before the editor.

Like an HTML <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> accepts </code>autofocus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>placeholder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attributes. Unlike a </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> automatically expands vertically to fit its contents.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Integrating With Forms</h2></p><p class="my-3">To submit the contents of a </code><trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with a form, first define a hidden input field in the form and assign it an </code>id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Then reference that </code>id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the editor’s </code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><form …><br /> <input id="x" type="hidden" name="content"><br /> <trix-editor input="x"></trix-editor><br /></form><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Trix will automatically update the value of the hidden input field with each change to the editor.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Populating With Stored Content</h2></p><p class="my-3">To populate a </code><trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with stored content, include that content in the associated input element’s </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><form …><br /> <input id="x" value="Editor content goes here" type="hidden" name="content"><br /> <trix-editor input="x"></trix-editor><br /></form><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Always use an associated input element to safely populate an editor. Trix won’t load any HTML content inside a </code><trix-editor>…</trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Styling Formatted Content</h2></p><p class="my-3">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 </code><trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element, and to a containing element when you render stored Trix content for display in your application.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><trix-editor class="trix-content"></trix-editor><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="trix-content">Stored content here</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The default </code>trix.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> file includes styles for basic formatted content—including bulleted and numbered lists, code blocks, and block quotes—under the class name </code>trix-content<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. We encourage you to use these styles as a starting point by copying them into your application’s CSS with a different class name.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Storing Attached Files</h2></p><p class="my-3">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.</p><p class="my-3">To store attachments, listen for the </code>trix-attachment-add<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event. Upload the attached files with XMLHttpRequest yourself and set the attachment’s URL attribute upon completion. See the <a href="https://trix-editor.org/js/attachments.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">attachment example</a> for detailed information.</p><p class="my-3">If you don’t want to accept dropped or pasted files, call </code>preventDefault()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on the </code>trix-file-accept<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event, which Trix dispatches just before the </code>trix-attachment-add<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event.</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Editing Text Programmatically</h1></p><p class="my-3">You can manipulate a Trix editor programmatically through the </code>Trix.Editor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> interface, available on each </code><trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element through its </code>editor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var element = document.querySelector("trix-editor")<br />element.editor // is a Trix.Editor instance<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Understanding the Document Model</h2></p><p class="my-3">The formatted content of a Trix editor is known as a _document_, and is represented as an instance of the </code>Trix.Document<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class. To get the editor’s current document, use the </code>editor.getDocument<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.getDocument() // is a Trix.Document instance<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">You can convert a document to an unformatted JavaScript string with the </code>document.toString<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var document = element.editor.getDocument()<br />document.toString() // is a JavaScript string<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">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.)</p><p class="my-3">To compare two documents for equality, use the </code>document.isEqualTo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var document = element.editor.getDocument()<br />document.isEqualTo(element.editor.getDocument()) // true<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Getting and Setting the Selection</h2></p><p class="my-3">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_.</p><p class="my-3">To get the editor’s current selection, use the </code>editor.getSelectedRange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method, which returns a two-element array containing the start and end positions.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.getSelectedRange() // [0, 0]<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">You can set the editor’s current selection by passing a range array to the </code>editor.setSelectedRange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// Select the first character in the document<br />element.editor.setSelectedRange([0, 1])<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">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.</p><p class="my-3">For convenience, the following calls to </code>setSelectedRange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> are equivalent when working with collapsed selections:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.setSelectedRange(1)<br />element.editor.setSelectedRange([1])<br />element.editor.setSelectedRange([1, 1])<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">To programmatically move the cursor or selection through the document, call the </code>editor.moveCursorInDirection<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>editor.expandSelectionInDirection<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> methods with a _direction_ argument. The direction can be either </code>"forward"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>"backward"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// Move the cursor backward one character<br />element.editor.moveCursorInDirection("backward")</p><p class="my-3">// Expand the end of the selection forward by one character<br />element.editor.expandSelectionInDirection("forward")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">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.</p><p class="my-3">Call the </code>editor.getClientRectAtPosition<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method with a position argument to get a <a href="https://drafts.fxtf.org/geometry/#DOMRect" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>DOMRect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> instance representing the left and top offsets, width, and height of the character at the given position.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var rect = element.editor.getClientRectAtPosition(0)<br />[rect.left, rect.top] // [17, 49]<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Inserting and Deleting Text</h2></p><p class="my-3">The editor interface provides methods for inserting, replacing, and deleting text at the current selection.</p><p class="my-3">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.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">To insert unformatted text into the document, call the </code>editor.insertString<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// Insert “Hello” at the beginning of the document<br />element.editor.setSelectedRange([0, 0])<br />element.editor.insertString("Hello")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">To insert HTML into the document, call the </code>editor.insertHTML<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 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.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// Insert a bold “Hello” at the beginning of the document<br />element.editor.setSelectedRange([0, 0])<br />element.editor.insertHTML("<strong>Hello</strong>")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">To insert a DOM <a href="http://www.w3.org/TR/FileAPI/#file" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>File<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> object into the document, call the </code>editor.insertFile<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method. Trix will insert a pending attachment for the file as if you had dragged and dropped it onto the editor.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// Insert the selected file from the first file input element<br />var file = document.querySelector("input[type=file]").file<br />element.editor.insertFile(file)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">To insert a line break, call the </code>editor.insertLineBreak<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method, which is functionally equivalent to pressing the return key.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// Insert “Hello\n”<br />element.editor.insertString("Hello")<br />element.editor.insertLineBreak()<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If the current selection is collapsed, you can simulate deleting text before or after the cursor with the </code>editor.deleteInDirection<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// “Backspace” the first character in the document<br />element.editor.setSelectedRange([1, 1])<br />element.editor.deleteInDirection("backward")</p><p class="my-3">// Delete the second character in the document<br />element.editor.setSelectedRange([1, 1])<br />element.editor.deleteInDirection("forward")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To delete a range of text, first set the selected range, then call </code>editor.deleteInDirection<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with either direction as the argument.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// Delete the first five characters<br />element.editor.setSelectedRange([0, 4])<br />element.editor.deleteInDirection("forward")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Working With Attributes and Nesting</h2></p><p class="my-3">Trix represents formatting as sets of _attributes_ applied across ranges of a document.</p><p class="my-3">By default, Trix supports the inline attributes </code>bold<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>italic<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>href<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>strike<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and the block-level attributes </code>heading1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>quote<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>code<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>bullet<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">To apply formatting to the current selection, use the </code>editor.activateAttribute<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.insertString("Hello")<br />element.editor.setSelectedRange([0, 5])<br />element.editor.activateAttribute("bold")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To set the </code>href<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute, pass a URL as the second argument to </code>editor.activateAttribute<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.insertString("Trix")<br />element.editor.setSelectedRange([0, 4])<br />element.editor.activateAttribute("href", "https://trix-editor.org/")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Use the </code>editor.deactivateAttribute<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method to remove formatting from a selection.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.setSelectedRange([2, 4])<br />element.editor.deactivateAttribute("bold")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">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 </code>editor.insertString<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.activateAttribute("italic")<br />element.editor.insertString("This is italic")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">To adjust the nesting level of quotes, bulleted lists, or numbered lists, call the </code>editor.increaseNestingLevel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>editor.decreaseNestingLevel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> methods.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.activateAttribute("quote")<br />element.editor.increaseNestingLevel()<br />element.editor.decreaseNestingLevel()<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Using Undo and Redo</h2></p><p class="my-3">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.</p><p class="my-3">Call the </code>editor.undo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>editor.redo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> methods to perform an undo or redo operation.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.undo()<br />element.editor.redo()<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Changes you make through the editor interface will not automatically record undo entries. You can save your own undo entries by calling the </code>editor.recordUndoEntry<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method with a description argument.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />element.editor.insertString("Hello")<br />element.editor.recordUndoEntry("Insert Text")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Loading and Saving Editor State</h2></p><p class="my-3">Serialize an editor’s state with </code>JSON.stringify<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and restore saved state with the </code>editor.loadJSON<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method. The serialized state includes the document and current selection, but does not include undo history.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// Save editor state to local storage<br />localStorage["editorState"] = JSON.stringify(element.editor)</p><p class="my-3">// Restore editor state from local storage<br />element.editor.loadJSON(JSON.parse(localStorage["editorState"]))<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Observing Editor Changes</h2></p><p class="my-3">The </code><trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element emits several events which you can use to observe and respond to changes in editor state.</p><p class="my-3">* </code>trix-initialize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fires when the </code><trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element is attached to the DOM and its </code>editor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object is ready for use.</p><p class="my-3">* </code>trix-change<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fires whenever the editor’s contents have changed.</p><p class="my-3">* </code>trix-selection-change<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fires any time the selected range changes in the editor.</p><p class="my-3">* </code>trix-focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>trix-blur<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fire when the editor gains or loses focus, respectively.</p><p class="my-3">* </code>trix-file-accept<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fires when a file is dropped or inserted into the editor. You can access the DOM </code>File<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object through the </code>file<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property on the event. Call </code>preventDefault<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on the event to prevent attaching the file to the document.</p><p class="my-3">* </code>trix-attachment-add<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fires after an attachment is added to the document. You can access the Trix attachment object through the </code>attachment<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property on the event. If the </code>attachment<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object has a </code>file<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property, you should store this file remotely and set the attachment’s URL attribute. See the <a href="http://trix-editor.org/js/attachments.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">attachment example</a> for detailed information.</p><p class="my-3">* </code>trix-attachment-remove<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fires when an attachment is removed from the document. You can access the Trix attachment object through the </code>attachment` property on the event. You may wish to use this event to clean up remotely stored files.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2></p><p class="my-3">Bug reports and pull requests are welcome on GitHub at https://github.com/DRBragg/trix-scientific. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the <a href="http://contributor-covenant.org" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Contributor Covenant</a> code of conduct.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">The gem is available as open source under the terms of the <a href="https://opensource.org/licenses/MIT" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT License</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Code of Conduct</h2></p><p class="my-3">Everyone interacting in the Trix Scientific project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the <a href="https://github.com/DRBragg/trix_scientific/blob/master/CODE_OF_CONDUCT.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">code of conduct</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Credits</h2></p><p class="my-3">This project is a direct modification of <a href="https://basecamp.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Basecamp's</a> <a href="http://trix-editor.org" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Trix WYSIWYG editor</a>. Without their time and effort this wouldn't exist.</p><p class="my-3">A huge thanks to my employer <a href="https://www.cellohealthcommunications.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Cello Health Communications</a> for not only being super supportive of open source projects and giving me the time and support to work on this project, but also for constantly pushing me to be better and continue to learn and grow.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>