!license
!travis
!bower
!npm

angular-trix

##### A rich wysiwyg text editor directive for angularjs.

> Angularjs directive for trix editor

!angular-trix
Demo
---
Angular-trix demo. Plunker demo

Install

You can get it on npm.

``



npm install angular-trix --save





Or bower, too.



bower install angular-trix --save





If you're not into package management, just download a ZIP file.



Setup



#### First, include angularjs, trix.js and trix.css into your document.

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.



####  Then Include angular-trix.js.

html

Add

angularTrix

 dependency to your module

javascript

var myApp = angular.module('app', ['angularTrix']);





#### Create trix-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 autofocus and placeholder 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.
<br />
<br />#### Finally, add </code>angular-trix<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directive and ng-model to the </code><trix-editor></trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.
<br />
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><trix-editor angular-trix ng-model="foo"></trix-editor>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Styling Formatted Content</h2>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><trix-editor angular-trix ng-model="foo" class="trix-content"></trix-editor>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Observing Editor Changes</h2>
<br />
<br />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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property on the event. You may wish to use this event to clean up remotely stored files.
<br />
<br />You can use the following attributes to listen the trix events and implement your custom logic. You can access trix event and editor instance parameters in controller.
<br />* </code>trix-initialize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-change <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-selection-change <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-focus <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-blur<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 
<br />* </code>trix-file-accept<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 
<br />* </code>trix-attachment-add <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-attachment-remove<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><trix-editor ng-model="trix" angular-trix trix-initialize="trixInitialize(e, editor);" trix-change="trixChange(e, editor);" trix-selection-change="trixSelectionChange(e, editor);" trix-focus="trixFocus(e, editor);" trix-blur="trixBlur(e, editor);" trix-file-accept="trixFileAccept(e, editor);" trix-attachment-add="trixAttachmentAdd(e, editor);" trix-attachment-remove="trixAttachmentRemove(e, editor);"></trix-editor>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />// You can still access the trix event
<br />var events = ['trixInitialize', 'trixChange', 'trixSelectionChange', 'trixFocus', 'trixBlur', 'trixFileAccept', 'trixAttachmentAdd', 'trixAttachmentRemove'];
<br />
<br />for (var i = 0; i < events.length; i++) {
<br />    $scope[events[i]] = function(e, editor) {
<br />        console.info('Event type:', e.type);
<br />    }
<br />};
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />For a live demonstration, open this <a href="https://sachinchoolur.github.io/angular-trix/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">site</a> and just your console :)
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Storing Attached Files</h2>
<br />
<br />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.
<br />
<br />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="http://plnkr.co/edit/hSzwlzUmRQoUtZJke2C4?p=preview" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Plunker</a> for detailed information.
<br />
<br />If you don’t want to accept dropped or pasted files,  add</code>prevent-trix-file-accept = "true"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute to the trix editor.
<br />
<br /><h1 class="text-2xl font-bold mt-6 mb-4">Editing Text Programmatically</h1>
<br />
<br />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.  You can access editor property in controller via trix event parameter.
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><trix-editor angular-trix ng-model="foo" trix-initialize="trixInitialize(e, editor);"></trix-editor>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />// Controller 
<br />// @e trix event
<br />// @editor Trix.Editor instance
<br />$scope.trixInitialize = function(e, editor) {}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Understanding the Document Model</h2>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.getDocument()  // is a Trix.Document instance
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	var document = editor.getDocument()
<br />	document.toString()  // is a JavaScript string
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Getting and Setting the Selection</h2>
<br />
<br />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_.
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.getSelectedRange()  // [0, 0]
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	// Select the first character in the document
<br />	editor.setSelectedRange([0, 1])
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br />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:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.setSelectedRange(1)
<br />	editor.setSelectedRange([1])
<br />	editor.setSelectedRange([1, 1])
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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">.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	// Move the cursor backward one character
<br />	editor.moveCursorInDirection("backward")
<br />	
<br />	// Expand the end of the selection forward by one character
<br />	editor.expandSelectionInDirection("forward")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	var rect = editor.getClientRectAtPosition(0)
<br />	[rect.left, rect.top]  // [17, 49]
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Inserting and Deleting Text</h2>
<br />
<br />The editor interface provides methods for inserting, replacing, and deleting text at the current selection.
<br />
<br />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.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Insert “Hello” at the beginning of the document
<br />	editor.setSelectedRange([0, 0])
<br />	editor.insertString("Hello")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Insert a bold “Hello” at the beginning of the document
<br />	editor.setSelectedRange([0, 0])
<br />	editor.insertHTML("<strong>Hello</strong>")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Insert the selected file from the first file input element
<br />	var file = document.querySelector("input[type=file]").file
<br />	editor.insertFile(file)
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Insert “Hello\n”
<br />	editor.insertString("Hello")
<br />	editor.insertLineBreak()
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// “Backspace” the first character in the document
<br />	editor.setSelectedRange([1, 1])
<br />	editor.deleteInDirection("backward")
<br />	
<br />	// Delete the second character in the document
<br />	editor.setSelectedRange([1, 1])
<br />	editor.deleteInDirection("forward")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Delete the first five characters
<br />	editor.setSelectedRange([0, 4])
<br />	editor.deleteInDirection("forward")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Working With Attributes and Indentation</h2>
<br />
<br />Trix represents formatting as sets of _attributes_ applied across ranges of a document.
<br />
<br />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>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">.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.insertString("Hello")
<br />	editor.setSelectedRange([0, 5])
<br />	editor.activateAttribute("bold")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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">.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.insertString("Trix")
<br />	editor.setSelectedRange([0, 4])
<br />	editor.activateAttribute("href", "http://trix-editor.org/")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.setSelectedRange([2, 4])
<br />	editor.deactivateAttribute("bold")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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">.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.activateAttribute("italic")
<br />	editor.insertString("This is italic")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />To adjust the indentation level of block-level attributes, call the </code>editor.increaseIndentationLevel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>editor.decreaseIndentationLevel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> methods.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.activateAttribute("quote")
<br />	editor.increaseIndentationLevel()
<br />	editor.decreaseIndentationLevel()
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Using Undo and Redo</h2>
<br />
<br />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.
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.undo()
<br />	editor.redo()
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.insertString("Hello")
<br />	editor.recordUndoEntry("Insert Text")
<br />}
<br /></code>``
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2>
<br />
<br />MIT License
<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 class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"angular-trix\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"angular-trix\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"angular-trix - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A rich wysiwyg text editor directive for angularjs.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>angular-trix - npm explorer</title><meta name="description" content="A rich wysiwyg text editor directive for angularjs."/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};
$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"angular-trix\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"1.0.2\"]}],\"$undefined\",\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"A rich wysiwyg text editor directive for angularjs.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-1.5\",\"children\":[[\"$\",\"$L5\",\"angular-trix\",{\"href\":\"/search?q=angular-trix\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"angular-trix\"}]}],[\"$\",\"$L5\",\"wysiwyg-editor\",{\"href\":\"/search?q=wysiwyg-editor\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"wysiwyg-editor\"}]}],[\"$\",\"$L5\",\"text-editor\",{\"href\":\"/search?q=text-editor\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"text-editor\"}]}],[\"$\",\"$L5\",\"directive\",{\"href\":\"/search?q=directive\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"directive\"}]}],\"$L18\"]}],\"$L19\",\"$L1a\"]}],\"$L1b\"]}],\"$L1c\"]}]\n"])</script><script>self.__next_f.push([1,"1d:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n1e:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n1f:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n20:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n21:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n22:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"$L5\",\"angularjs\",{\"href\":\"/search?q=angularjs\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"angularjs\"}]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"0\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"3 years ago\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}],[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}],[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}],\"$undefined\"]}],\"MIT\"]}],\"$undefined\"]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~Sachin\",\"className\":\"font-medium hover:underline\",\"children\":\"Sachin\"}]]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L1d\",null,{\"packageName\":\"angular-trix\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/sachinchoolur/angular-trix\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-github mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"tonef\",{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"}],[\"$\",\"path\",\"9comsn\",{\"d\":\"M9 18c-4.51 2-5-2-7-2\"}],\"$undefined\"]}],\"Repository\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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-[\u003esvg]:px-2.5\",\"ref\":null}],[\"$\",\"a\",null,{\"href\":\"https://github.com/sachinchoolur/angular-trix\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Homepage\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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-[\u003esvg]:px-2.5\",\"ref\":null}],\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/angular-trix\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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-[\u003esvg]:px-2.5\",\"ref\":null}]]}],false]}]\n"])</script><script>self.__next_f.push([1,"23:T3b58,"])</script><script>self.__next_f.push([1,"![license](https://img.shields.io/npm/l/angular-trix.svg)\r\n![travis](https://travis-ci.org/sachinchoolur/angular-trix.svg?branch=master)\r\n![bower](https://img.shields.io/bower/v/angular-trix.svg)\r\n![npm](https://img.shields.io/npm/v/angular-trix.svg)\r\n\r\n# angular-trix\r\n##### A rich wysiwyg text editor directive for angularjs.\r\n\r\n\u003e Angularjs directive for [trix editor](https://github.com/basecamp/trix/)\r\n\r\n![angular-trix](https://raw.githubusercontent.com/sachinchoolur/angular-trix/master/src/angular-trix.png)\r\nDemo\r\n---\r\n[Angular-trix demo](http://sachinchoolur.github.io/angular-trix/). [Plunker demo](http://plnkr.co/edit/hSzwlzUmRQoUtZJke2C4?p=preview) \r\n\r\n## Install\r\n\r\nYou can get it on npm.\r\n\r\n```\r\nnpm install angular-trix --save\r\n```\r\n\r\nOr bower, too.\r\n\r\n```\r\nbower install angular-trix --save\r\n```\r\n\r\nIf you're not into package management, just [download a ZIP](https://github.com/sachinchoolur/angular-trix/archive/master.zip) file.\r\n\r\n## Setup\r\n\r\n#### First, include angularjs, trix.js and trix.css into your document. \r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/trix/0.9.2/trix.css\"\u003e\r\n\r\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/trix/0.9.2/trix.js\"\u003e\u003c/script\u003e\r\n```\r\ntrix.css includes default styles for the Trix toolbar, editor, and attachments. Skip this file if you prefer to define these styles yourself.\r\n\r\nTo use your own polyfills, or to target only browsers that support all of the required standards, include trix-core.js instead.\r\n\r\n####  Then Include angular-trix.js. \r\n\r\n```html\r\n\u003cscript src=\"dist/angular-trix.min.js\"\u003e\u003c/script\u003e\r\n```\r\nAdd `angularTrix` dependency to your module\r\n```javascript\r\nvar myApp = angular.module('app', ['angularTrix']);\r\n```\r\n\r\n#### Create trix-editor\r\nPlace an empty `\u003ctrix-editor\u003e\u003c/trix-editor\u003e` tag on the page. Trix will automatically insert a separate `\u003ctrix-toolbar\u003e` before the editor.\r\n\r\nLike an HTML `\u003ctextarea\u003e`, `\u003ctrix-editor\u003e` accepts autofocus and placeholder attributes. Unlike a `\u003ctextarea\u003e`, `\u003ctrix-editor\u003e` automatically expands vertically to fit its contents.\r\n\r\n#### Finally, add `angular-trix` directive and ng-model to the `\u003ctrix-editor\u003e\u003c/trix-editor\u003e`.\r\n\r\n\r\n```html\r\n\u003ctrix-editor angular-trix ng-model=\"foo\"\u003e\u003c/trix-editor\u003e\r\n```\r\n\r\n## Styling Formatted Content\r\n\r\nTo 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 `\u003ctrix-editor\u003e` element, and to a containing element when you render stored Trix content for display in your application.\r\n\r\n```html\r\n\u003ctrix-editor angular-trix ng-model=\"foo\" class=\"trix-content\"\u003e\u003c/trix-editor\u003e\r\n```\r\n\r\nThe 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.\r\n\r\n## Observing Editor Changes\r\n\r\nThe `\u003ctrix-editor\u003e` element emits several events which you can use to observe and respond to changes in editor state.\r\n\r\n* `trix-initialize` fires when the `\u003ctrix-editor\u003e` element is attached to the DOM and its `editor` object is ready for use.\r\n\r\n* `trix-change` fires whenever the editor’s contents have changed.\r\n\r\n* `trix-selection-change` fires any time the selected range changes in the editor.\r\n\r\n* `trix-focus` and `trix-blur` fire when the editor gains or loses focus, respectively.\r\n\r\n* `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.\r\n\r\n* `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.\r\n\r\n* `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.\r\n\r\nYou can use the following attributes to listen the trix events and implement your custom logic. You can access trix event and editor instance parameters in controller.\r\n* `trix-initialize`\r\n* `trix-change `\r\n* `trix-selection-change `\r\n* `trix-focus `\r\n* `trix-blur` \r\n* `trix-file-accept` \r\n* `trix-attachment-add `\r\n* `trix-attachment-remove`\r\n\r\n```html\r\n\u003ctrix-editor ng-model=\"trix\" angular-trix trix-initialize=\"trixInitialize(e, editor);\" trix-change=\"trixChange(e, editor);\" trix-selection-change=\"trixSelectionChange(e, editor);\" trix-focus=\"trixFocus(e, editor);\" trix-blur=\"trixBlur(e, editor);\" trix-file-accept=\"trixFileAccept(e, editor);\" trix-attachment-add=\"trixAttachmentAdd(e, editor);\" trix-attachment-remove=\"trixAttachmentRemove(e, editor);\"\u003e\u003c/trix-editor\u003e\r\n```\r\n\r\n```js\r\n// You can still access the trix event\r\nvar events = ['trixInitialize', 'trixChange', 'trixSelectionChange', 'trixFocus', 'trixBlur', 'trixFileAccept', 'trixAttachmentAdd', 'trixAttachmentRemove'];\r\n\r\nfor (var i = 0; i \u003c events.length; i++) {\r\n    $scope[events[i]] = function(e, editor) {\r\n        console.info('Event type:', e.type);\r\n    }\r\n};\r\n\r\n```\r\n\r\nFor a live demonstration, open this [site](https://sachinchoolur.github.io/angular-trix/) and just your console :)\r\n\r\n## Storing Attached Files\r\n\r\nTrix 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.\r\n\r\nTo 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 [Plunker](http://plnkr.co/edit/hSzwlzUmRQoUtZJke2C4?p=preview) for detailed information.\r\n\r\nIf you don’t want to accept dropped or pasted files,  add`prevent-trix-file-accept = \"true\"` attribute to the trix editor.\r\n\r\n# Editing Text Programmatically\r\n\r\nYou can manipulate a Trix editor programmatically through the `Trix.Editor` interface, available on each `\u003ctrix-editor\u003e` element through its `editor` property.  You can access editor property in controller via trix event parameter.\r\n```html\r\n\u003ctrix-editor angular-trix ng-model=\"foo\" trix-initialize=\"trixInitialize(e, editor);\"\u003e\u003c/trix-editor\u003e\r\n```\r\n```js\r\n// Controller \r\n// @e trix event\r\n// @editor Trix.Editor instance\r\n$scope.trixInitialize = function(e, editor) {}\r\n```\r\n\r\n## Understanding the Document Model\r\n\r\nThe 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.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.getDocument()  // is a Trix.Document instance\r\n}\r\n```\r\n\r\nYou can convert a document to an unformatted JavaScript string with the `document.toString` method.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\tvar document = editor.getDocument()\r\n\tdocument.toString()  // is a JavaScript string\r\n}\r\n```\r\n## Getting and Setting the Selection\r\n\r\nTrix 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_.\r\n\r\nTo get the editor’s current selection, use the `editor.getSelectedRange` method, which returns a two-element array containing the start and end positions.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.getSelectedRange()  // [0, 0]\r\n}\r\n```\r\n\r\nYou can set the editor’s current selection by passing a range array to the `editor.setSelectedRange` method.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\t// Select the first character in the document\r\n\teditor.setSelectedRange([0, 1])\r\n}\r\n```\r\n\r\n### Collapsed Selections\r\n\r\nWhen 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.\r\n\r\nFor convenience, the following calls to `setSelectedRange` are equivalent when working with collapsed selections:\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.setSelectedRange(1)\r\n\teditor.setSelectedRange([1])\r\n\teditor.setSelectedRange([1, 1])\r\n}\r\n```\r\n\r\n### Directional Movement\r\n\r\nTo 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\"`.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\t// Move the cursor backward one character\r\n\teditor.moveCursorInDirection(\"backward\")\r\n\t\r\n\t// Expand the end of the selection forward by one character\r\n\teditor.expandSelectionInDirection(\"forward\")\r\n}\r\n```\r\n### Converting Positions to Pixel Offsets\r\n\r\nSometimes 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.\r\n\r\nCall the `editor.getClientRectAtPosition` method with a position argument to get a [`DOMRect`](https://drafts.fxtf.org/geometry/#DOMRect) instance representing the left and top offsets, width, and height of the character at the given position.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\tvar rect = editor.getClientRectAtPosition(0)\r\n\t[rect.left, rect.top]  // [17, 49]\r\n}\r\n```\r\n## Inserting and Deleting Text\r\n\r\nThe editor interface provides methods for inserting, replacing, and deleting text at the current selection.\r\n\r\nTo 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.\r\n\r\n### Inserting Plain Text\r\n\r\nTo insert unformatted text into the document, call the `editor.insertString` method.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\r\n\t// Insert “Hello” at the beginning of the document\r\n\teditor.setSelectedRange([0, 0])\r\n\teditor.insertString(\"Hello\")\r\n}\r\n```\r\n\r\n### Inserting HTML\r\n\r\nTo 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.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\r\n\t// Insert a bold “Hello” at the beginning of the document\r\n\teditor.setSelectedRange([0, 0])\r\n\teditor.insertHTML(\"\u003cstrong\u003eHello\u003c/strong\u003e\")\r\n}\r\n```\r\n\r\n### Inserting a File\r\n\r\nTo insert a DOM [`File`](http://www.w3.org/TR/FileAPI/#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.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\r\n\t// Insert the selected file from the first file input element\r\n\tvar file = document.querySelector(\"input[type=file]\").file\r\n\teditor.insertFile(file)\r\n}\r\n```\r\n\r\n### Inserting a Line Break\r\n\r\nTo insert a line break, call the `editor.insertLineBreak` method, which is functionally equivalent to pressing the return key.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\r\n\t// Insert “Hello\\n”\r\n\teditor.insertString(\"Hello\")\r\n\teditor.insertLineBreak()\r\n}\r\n```\r\n\r\n### Deleting Text\r\n\r\nIf the current selection is collapsed, you can simulate deleting text before or after the cursor with the `editor.deleteInDirection` method.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\r\n\t// “Backspace” the first character in the document\r\n\teditor.setSelectedRange([1, 1])\r\n\teditor.deleteInDirection(\"backward\")\r\n\t\r\n\t// Delete the second character in the document\r\n\teditor.setSelectedRange([1, 1])\r\n\teditor.deleteInDirection(\"forward\")\r\n}\r\n```\r\n\r\nTo delete a range of text, first set the selected range, then call `editor.deleteInDirection` with either direction as the argument.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\r\n\t// Delete the first five characters\r\n\teditor.setSelectedRange([0, 4])\r\n\teditor.deleteInDirection(\"forward\")\r\n}\r\n```\r\n\r\n## Working With Attributes and Indentation\r\n\r\nTrix represents formatting as sets of _attributes_ applied across ranges of a document.\r\n\r\nBy default, Trix supports the inline attributes `bold`, `italic`, `href`, and `strike`, and the block-level attributes `quote`, `code`, `bullet`, and `number`.\r\n\r\n### Applying Formatting\r\n\r\nTo apply formatting to the current selection, use the `editor.activateAttribute` method.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.insertString(\"Hello\")\r\n\teditor.setSelectedRange([0, 5])\r\n\teditor.activateAttribute(\"bold\")\r\n}\r\n```\r\n\r\nTo set the `href` attribute, pass a URL as the second argument to `editor.activateAttribute`.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.insertString(\"Trix\")\r\n\teditor.setSelectedRange([0, 4])\r\n\teditor.activateAttribute(\"href\", \"http://trix-editor.org/\")\r\n}\r\n```\r\n\r\n### Removing Formatting\r\n\r\nUse the `editor.deactivateAttribute` method to remove formatting from a selection.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.setSelectedRange([2, 4])\r\n\teditor.deactivateAttribute(\"bold\")\r\n}\r\n```\r\n\r\n### Formatting With a Collapsed Selection\r\n\r\nIf 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`.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.activateAttribute(\"italic\")\r\n\teditor.insertString(\"This is italic\")\r\n}\r\n```\r\n\r\n### Adjusting the Indentation Level\r\n\r\nTo adjust the indentation level of block-level attributes, call the `editor.increaseIndentationLevel` and `editor.decreaseIndentationLevel` methods.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.activateAttribute(\"quote\")\r\n\teditor.increaseIndentationLevel()\r\n\teditor.decreaseIndentationLevel()\r\n}\r\n```\r\n\r\n## Using Undo and Redo\r\n\r\nTrix 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.\r\n\r\nCall the `editor.undo` and `editor.redo` methods to perform an undo or redo operation.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.undo()\r\n\teditor.redo()\r\n}\r\n```\r\n\r\nChanges 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.\r\n\r\n```js\r\n$scope.trixInitialize = function(e, editor) {\r\n\teditor.insertString(\"Hello\")\r\n\teditor.recordUndoEntry(\"Insert Text\")\r\n}\r\n```\r\n\r\n## License\r\n\r\nMIT License\r\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"$L1e\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L1f\",null,{\"children\":[[\"$\",\"$L20\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L20\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",2,\")\"]}]]}],[\"$\",\"$L20\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",2,\")\"]}]]}]]}],[\"$\",\"$L21\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L22\",null,{\"readme\":\"$23\"}]}],\"$L24\",\"$L25\"]}]\n"])</script><script>self.__next_f.push([1,"29:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"$L21\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-6 lg:grid-cols-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package h-4 w-4\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],\"Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":2}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"angular\",{\"href\":\"/package/angular\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"angular\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=1.2.0\"}]]}],[\"$\",\"$L5\",\"trix\",{\"href\":\"/package/trix\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"trix\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]]}]}]]}],false,[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[\"$L26\",\"Dev Dependencies\",\"$L27\"]}]}],\"$L28\"]}]]}]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"$L21\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L29\",null,{\"packageName\":\"angular-trix\",\"versions\":[{\"version\":\"1.0.2\",\"date\":\"2015-12-21T15:40:49.169Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.0\",\"date\":\"2015-12-09T15:06:04.035Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"1.0.2\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">angular-trix</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v1.0.2</span></div></div><p class="text-lg text-muted-foreground">A rich wysiwyg text editor directive for angularjs.</p><div class="flex flex-wrap gap-1.5"><a href="/search?q=angular-trix"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">angular-trix</span></a><a href="/search?q=wysiwyg-editor"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">wysiwyg-editor</span></a><a href="/search?q=text-editor"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">text-editor</span></a><a href="/search?q=directive"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">directive</span></a><a href="/search?q=angularjs"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">angularjs</span></a></div><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.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-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">0</span>/week</span><span class="flex items-center gap-1.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-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated 3 years ago</span><span class="flex items-center gap-1.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-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>MIT</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~Sachin">Sachin</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install angular-trix</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_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 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><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-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://github.com/sachinchoolur/angular-trix" target="_blank" rel="noopener noreferrer" 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-github mr-1.5 h-4 w-4"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>Repository</a><a href="https://github.com/sachinchoolur/angular-trix" target="_blank" rel="noopener noreferrer" 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-house mr-1.5 h-4 w-4"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Homepage</a><a href="https://npmjs.com/package/angular-trix" target="_blank" rel="noopener noreferrer" 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-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(2)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(2)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p>!<a href="https://img.shields.io/npm/l/angular-trix.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">license</a>
<br />!<a href="https://travis-ci.org/sachinchoolur/angular-trix.svg?branch=master" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">travis</a>
<br />!<a href="https://img.shields.io/bower/v/angular-trix.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">bower</a>
<br />!<a href="https://img.shields.io/npm/v/angular-trix.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">npm</a>
<br />
<br /><h1 class="text-2xl font-bold mt-6 mb-4">angular-trix</h1>
<br />##### A rich wysiwyg text editor directive for angularjs.
<br />
<br />> Angularjs directive for <a href="https://github.com/basecamp/trix/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">trix editor</a>
<br />
<br />!<a href="https://raw.githubusercontent.com/sachinchoolur/angular-trix/master/src/angular-trix.png" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">angular-trix</a>
<br />Demo
<br />---
<br /><a href="http://sachinchoolur.github.io/angular-trix/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Angular-trix demo</a>. <a href="http://plnkr.co/edit/hSzwlzUmRQoUtZJke2C4?p=preview" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Plunker demo</a> 
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Install</h2>
<br />
<br />You can get it on npm.
<br />
<br />``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />npm install angular-trix --save
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />Or bower, too.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />bower install angular-trix --save
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />If you're not into package management, just <a href="https://github.com/sachinchoolur/angular-trix/archive/master.zip" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">download a ZIP</a> file.
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Setup</h2>
<br />
<br />#### First, include angularjs, trix.js and trix.css into your document. 
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/0.9.2/trix.css">
<br />
<br /><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<br /><script src="//cdnjs.cloudflare.com/ajax/libs/trix/0.9.2/trix.js"></script>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />trix.css includes default styles for the Trix toolbar, editor, and attachments. Skip this file if you prefer to define these styles yourself.
<br />
<br />To use your own polyfills, or to target only browsers that support all of the required standards, include trix-core.js instead.
<br />
<br />####  Then Include angular-trix.js. 
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><script src="dist/angular-trix.min.js"></script>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />Add </code>angularTrix<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> dependency to your module
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript
<br />var myApp = angular.module('app', ['angularTrix']);
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />#### Create trix-editor
<br />Place an empty </code><trix-editor></trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag on the page. Trix will automatically insert a separate </code><trix-toolbar><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> before the editor.
<br />
<br />Like an HTML </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"> accepts autofocus and placeholder 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.
<br />
<br />#### Finally, add </code>angular-trix<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directive and ng-model to the </code><trix-editor></trix-editor><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.
<br />
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><trix-editor angular-trix ng-model="foo"></trix-editor>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Styling Formatted Content</h2>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><trix-editor angular-trix ng-model="foo" class="trix-content"></trix-editor>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Observing Editor Changes</h2>
<br />
<br />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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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.
<br />
<br />* </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<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property on the event. You may wish to use this event to clean up remotely stored files.
<br />
<br />You can use the following attributes to listen the trix events and implement your custom logic. You can access trix event and editor instance parameters in controller.
<br />* </code>trix-initialize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-change <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-selection-change <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-focus <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-blur<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 
<br />* </code>trix-file-accept<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 
<br />* </code>trix-attachment-add <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />* </code>trix-attachment-remove<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><trix-editor ng-model="trix" angular-trix trix-initialize="trixInitialize(e, editor);" trix-change="trixChange(e, editor);" trix-selection-change="trixSelectionChange(e, editor);" trix-focus="trixFocus(e, editor);" trix-blur="trixBlur(e, editor);" trix-file-accept="trixFileAccept(e, editor);" trix-attachment-add="trixAttachmentAdd(e, editor);" trix-attachment-remove="trixAttachmentRemove(e, editor);"></trix-editor>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />// You can still access the trix event
<br />var events = ['trixInitialize', 'trixChange', 'trixSelectionChange', 'trixFocus', 'trixBlur', 'trixFileAccept', 'trixAttachmentAdd', 'trixAttachmentRemove'];
<br />
<br />for (var i = 0; i < events.length; i++) {
<br />    $scope[events[i]] = function(e, editor) {
<br />        console.info('Event type:', e.type);
<br />    }
<br />};
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />For a live demonstration, open this <a href="https://sachinchoolur.github.io/angular-trix/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">site</a> and just your console :)
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Storing Attached Files</h2>
<br />
<br />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.
<br />
<br />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="http://plnkr.co/edit/hSzwlzUmRQoUtZJke2C4?p=preview" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Plunker</a> for detailed information.
<br />
<br />If you don’t want to accept dropped or pasted files,  add</code>prevent-trix-file-accept = "true"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute to the trix editor.
<br />
<br /><h1 class="text-2xl font-bold mt-6 mb-4">Editing Text Programmatically</h1>
<br />
<br />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.  You can access editor property in controller via trix event parameter.
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html
<br /><trix-editor angular-trix ng-model="foo" trix-initialize="trixInitialize(e, editor);"></trix-editor>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />// Controller 
<br />// @e trix event
<br />// @editor Trix.Editor instance
<br />$scope.trixInitialize = function(e, editor) {}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Understanding the Document Model</h2>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.getDocument()  // is a Trix.Document instance
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	var document = editor.getDocument()
<br />	document.toString()  // is a JavaScript string
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Getting and Setting the Selection</h2>
<br />
<br />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_.
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.getSelectedRange()  // [0, 0]
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	// Select the first character in the document
<br />	editor.setSelectedRange([0, 1])
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br />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:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.setSelectedRange(1)
<br />	editor.setSelectedRange([1])
<br />	editor.setSelectedRange([1, 1])
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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">.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	// Move the cursor backward one character
<br />	editor.moveCursorInDirection("backward")
<br />	
<br />	// Expand the end of the selection forward by one character
<br />	editor.expandSelectionInDirection("forward")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	var rect = editor.getClientRectAtPosition(0)
<br />	[rect.left, rect.top]  // [17, 49]
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Inserting and Deleting Text</h2>
<br />
<br />The editor interface provides methods for inserting, replacing, and deleting text at the current selection.
<br />
<br />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.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Insert “Hello” at the beginning of the document
<br />	editor.setSelectedRange([0, 0])
<br />	editor.insertString("Hello")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Insert a bold “Hello” at the beginning of the document
<br />	editor.setSelectedRange([0, 0])
<br />	editor.insertHTML("<strong>Hello</strong>")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Insert the selected file from the first file input element
<br />	var file = document.querySelector("input[type=file]").file
<br />	editor.insertFile(file)
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Insert “Hello\n”
<br />	editor.insertString("Hello")
<br />	editor.insertLineBreak()
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// “Backspace” the first character in the document
<br />	editor.setSelectedRange([1, 1])
<br />	editor.deleteInDirection("backward")
<br />	
<br />	// Delete the second character in the document
<br />	editor.setSelectedRange([1, 1])
<br />	editor.deleteInDirection("forward")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />
<br />	// Delete the first five characters
<br />	editor.setSelectedRange([0, 4])
<br />	editor.deleteInDirection("forward")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Working With Attributes and Indentation</h2>
<br />
<br />Trix represents formatting as sets of _attributes_ applied across ranges of a document.
<br />
<br />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>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">.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.insertString("Hello")
<br />	editor.setSelectedRange([0, 5])
<br />	editor.activateAttribute("bold")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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">.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.insertString("Trix")
<br />	editor.setSelectedRange([0, 4])
<br />	editor.activateAttribute("href", "http://trix-editor.org/")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.setSelectedRange([2, 4])
<br />	editor.deactivateAttribute("bold")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />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">.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.activateAttribute("italic")
<br />	editor.insertString("This is italic")
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />To adjust the indentation level of block-level attributes, call the </code>editor.increaseIndentationLevel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>editor.decreaseIndentationLevel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> methods.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.activateAttribute("quote")
<br />	editor.increaseIndentationLevel()
<br />	editor.decreaseIndentationLevel()
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Using Undo and Redo</h2>
<br />
<br />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.
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.undo()
<br />	editor.redo()
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />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.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js
<br />$scope.trixInitialize = function(e, editor) {
<br />	editor.insertString("Hello")
<br />	editor.recordUndoEntry("Insert Text")
<br />}
<br /></code>``
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2>
<br />
<br />MIT License
<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><script>self.__next_f.push([1,"26:[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}]\n27:[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":11}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"grunt\",{\"href\":\"/package/grunt\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.4.5\"}]]}],[\"$\",\"$L5\",\"grunt-contrib-clean\",{\"href\":\"/package/grunt-contrib-clean\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-clean\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.6.0\"}]]}],[\"$\",\"$L5\",\"grunt-contrib-concat\",{\"href\":\"/package/grunt-contrib-concat\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-concat\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.5.0\"}]]}],[\"$\",\"$L5\",\"grunt-contrib-connect\",{\"href\":\"/package/grunt-contrib-connect\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-connect\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.9.0\"}]]}],[\"$\",\"$L5\",\"grunt-contrib-jshint\",{\"href\":\"/package/grunt-contrib-jshint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2a\",\"$undefined\"]}],\"grunt-contrib-jshint\"]}],\"$L2b\"]}],\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\"]}]}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2b:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.10.0\"}]\n2c:[\"$\",\"$L5\",\"grunt-contrib-qunit\",{\"href\":\"/package/grunt-contrib-qunit\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-qunit\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.5.1\"}]]}]\n2d:[\"$\",\"$L5\",\"grunt-contrib-uglify\",{\"href\":\"/package/grunt-contrib-uglify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-uglify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.7.0\"}]]}]\n2e:[\"$\",\"$L5\",\"grunt-contrib-watch\",{\"href\":\"/package/grunt-contrib-watch\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-watch\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.6.1\"}]]}]\n2f:[\"$\",\"$L5\",\"jshint-stylish\",{\"href\":\"/package/jshint-stylish\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jshint-stylish\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n30:[\"$\",\"$L5\",\"load-grunt-tasks\",{\"href\":\"/package/load-grunt-tasks\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinec"])</script><script>self.__next_f.push([1,"ap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"load-grunt-tasks\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n31:[\"$\",\"$L5\",\"time-grunt\",{\"href\":\"/package/time-grunt\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"time-grunt\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n"])</script><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>