AutoForm Trix Extension

Get the Trix wysiwyg-editor as configurable AutoForm extension.

Installation

Since this package is not bound to a specific version of trix, you need to install trix on your host project:

$ cd projectdir
$ meteor npm install --save trix@latest
$ meteor add jkuester:autoform-trix

Import

Starting with v2.0.0 this package defaults to support dynamic imports (but also allows static imports).

Dynamic

To be able ´ load the trix form type, you will also have to load the trix-core of the trix editor itself. A good way to wrap this all up is to use an async function:

1export const importTrixForm = async () => {
2  await import('trix/dist/trix-core')
3  await import('trix/dist/trix.css')
4  const loadAutoFormTrix = await import('meteor/jkuester:autoform-trix')
5  return loadAutoFormTrix.default()
6}

Note the .default here. This package's main module exports a default async function which you need to call in order to invoke the import of the form type.

Static

It is also possible to statically import this package. While it's suggested to favor dynamic imports to minimize bundle size (and thus load times), there may be occasions with dynamic import not being available.

In such case you can use the static import:

1import 'trix/dist/trix-core'
2import 'trix/dist/trix.css'
3import 'meteor/jkuester:autoform-trix/static'

Remember, that this method will bundle up trix and this form type for the client and increases the initial client bundle.

Documentation

Simple Example

Just create a String type field with the autoform type trix:

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6    }
7  }
8}

This renders a default trix editor out-of-the-box.

Config

To pass the config, use the config object on the schema's autoform property:

Non-Reactive

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      config: {
7        undoInterval: 10 // just an example
8      }
9    }
10  }
11}

Reactive

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      config () {
7        return myCurrentConfig
8      }
9    }
10  }
11}

Lang / i18n

There is a specific config for lang, that it should not be passed using config but as own lang property. This is due to the circumstance, that trix does not support reactive i18n out of the box and this extensions makes use of the Blaze reactivity and onRendered in order to reactively update language.

Non-Reactive

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      lang: {
7        // ... see https://github.com/basecamp/trix/wiki/I18n for the mapping
8      }
9    }
10  }
11}

Reactive

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      lang () {
7        // ... see https://github.com/basecamp/trix/wiki/I18n for the mapping
8        return myCurrentLanguageConfig
9      }
10    }
11  }
12}

Events

You can hook into the trix events by using the following pattern within your schema:

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      events: {
7        <HookName>(event, templateInstace) {
8          
9        }
10      }
11    }
12  }
13}

Where HookName is one of the entries of the following mapping:

EventName	HookName
trix-before-initialize	beforeInitialize
trix-initialize	initialize
trix-change	change
trix-selection-change	selectionChange
trix-focus	focus
trix-blur	blur
trix-file-accept	fileAccept
trix-attachment-add	attachmentAdd
trix-attachment-remove	attachmentRemove

Note that the event parameter is actually a jQuery event. If you want to access properties like event.attachment you need to get the originalEvent, for example:

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6        events: {
7          attachmentAdd ($event) {
8            const event = $event.originalEvent
9            if (event.attachment.file) {
10              //... process file using your upload library
11              // then set attachment like in this example:
12              // https://trix-editor.org/js/attachments.js
13            }
14          }
15        }
16  }
17}

Block events

If you want to block events, simply set them to false:

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6        events: {
7          attachmentAdd: false
8        }
9  }
10}

License

See LICENSE