First running version

CONTRIBUTING.md

@@ -4,7 +4,7 @@
 
 * `git clone <repository-url>`
 * `cd ember-trix`
-* `npm install`
+* `npm install` or `yarn install`
 
 ## Linting
 

README.md

@@ -1,13 +1,12 @@
 ember-trix
 ==============================================================================
 
-This is still in development. Not for public use! 
-
 Ember Trix wraps the [Trix Editor](https://github.com/basecamp/trix) in a 
 Glimmer Component for use in an Ember Octane Project.
 
 This Addon is a rewrite of [ember-trix-editor](https://github.com/lynnetye/ember-trix-editor)
-featuring Ember Octane style Glimmer Components and modifiers.
+featuring Ember Octane style Glimmer Components and modifiers. 
+It does **not** rely on jQuery.
 
 Compatibility
 ------------------------------------------------------------------------------
@@ -25,10 +24,74 @@ ember install ember-trix
 ```
 
 
+Addon Configuration
+------------------------------------------------------------------------------
+You can optionally just import `trix-core` with the following setting:
+
+```javascript
+/* ember-cli-build.js */
+let app = new EmberApp(defaults, {
+
+    'ember-trix': {
+        coreOnly: true
+    }
+
+});
+```
+
 Usage
 ------------------------------------------------------------------------------
 
-[Longer description of how to use the addon in apps.]
+The only mandatory argument is the ID and is supposed to be unique. The `onChange` argument is a convenient way to receive the current state. All attributes like `class` or `placeholder` 
+are optional and passed down via `...attributes`. Feel free to add other attributes like `autofocus={{true}}` etc. onto it.
+
+```html
+<TrixInput
+    @id="myId"
+    @value="My <em>initial</em> Content"
+    @onChange={{this.onTrixUpdate}}
+    class="my-class my-other-class"
+/>
+```
+
+```javascript
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class MyContainerComponent extends Component 
+{
+    @action
+    onTrixUpdate(formatedText) {
+        console.log(formatedText);
+    }
+}
+```
+
+Optionally you can listen to `trix-events` by adding them as arguments:
+
+```html
+<TrixInput
+    @id="myId"
+    @trixFocus={{this.onFocus}}
+    @trixBlur={{this.onFocusOut}}
+    @trixAttachmentAdd={{this.selectAttachment}}
+    placeholder="Optional string shown when value is empty"
+/>
+```
+The the following Events are available:
+
+* `trix-attachment-add`
+* `trix-attachment-remove`
+* `trix-blur`
+* `trix-change`
+* `trix-file-accept`
+* `trix-focus`
+* `trix-initialize`
+* `trix-selection-change`
+
+All of them will pass up a JavaScript `event` from which the editor property can be extracted.
+
+There is also a hidden input field available, holding the formatted text from the Trix editor.
 
 
 Contributing

addon/components/trix-input.hbs

@@ -0,0 +1,13 @@
+{{! input for include in form }}
+<input
+		id={{@id}}
+		type="hidden"
+		name="{{concat 'trix-editor-input-' @id}}"
+		value={{this.value}}
+/>
+{{! the editor }}
+<trix-editor
+		{{trix-listener this.trixEventHandler}}
+		input={{@id}}
+		...attributes
+/>

addon/components/trix-input.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { camelize } from '@ember/string';
+import { typeOf } from '@ember/utils';
+
+export default class TrixInputComponent extends Component
+{
+
+	get value() { return this.args.value ?? ''; }
+	/**
+	 * handle all events from trix which are registered in the modifier
+	 * @param event
+	 */
+	@action trixEventHandler(event)
+	{
+		let eName = camelize(event.type);
+		// pass event up
+		if (typeOf(this.args[eName]) === 'function')
+		{
+			this.args[eName](event);
+		}
+		// trigger convenient onChange action
+		if (eName === 'trixChange' && typeOf(this.args.onChange) === 'function')
+		{
+			this.args.onChange(event.target.innerHTML);
+		}
+
+	}
+}

addon/modifiers/trix-listener.js

@@ -1,7 +1,7 @@
 import { modifier } from 'ember-modifier';
 
-export default modifier((element, [handler]/*, hash*/) =>
-{
+export default modifier((element, [handler]/*, hash*/) => {
+	// register all events
 	element.addEventListener('trix-attachment-add', handler);
 	element.addEventListener('trix-attachment-remove', handler);
 	element.addEventListener('trix-blur', handler);
@@ -12,6 +12,7 @@ export default modifier((element, [handler]/*, hash*/) =>
 	element.addEventListener('trix-selection-change', handler);
 
 	return () => {
+		// unregister all events
 		element.removeEventListener('trix-attachment-add', handler);
 		element.removeEventListener('trix-attachment-remove', handler);
 		element.removeEventListener('trix-blur', handler);

app/components/trix-input.js

@@ -0,0 +1 @@
+export { default } from 'ember-trix/components/trix-input';

config/ember-try.js

@@ -3,76 +3,77 @@
 const getChannelURL = require('ember-source-channel-url');
 
 module.exports = async function() {
-  return {
-    scenarios: [
-      {
-        name: 'ember-lts-3.16',
-        npm: {
-          devDependencies: {
-            'ember-source': '~3.16.0'
-          }
-        }
-      },
-      {
-        name: 'ember-lts-3.20',
-        npm: {
-          devDependencies: {
-            'ember-source': '~3.20.5'
-          }
-        }
-      },
-      {
-        name: 'ember-release',
-        npm: {
-          devDependencies: {
-            'ember-source': await getChannelURL('release')
-          }
-        }
-      },
-      {
-        name: 'ember-beta',
-        npm: {
-          devDependencies: {
-            'ember-source': await getChannelURL('beta')
-          }
-        }
-      },
-      {
-        name: 'ember-canary',
-        npm: {
-          devDependencies: {
-            'ember-source': await getChannelURL('canary')
-          }
-        }
-      },
-      {
-        name: 'ember-default-with-jquery',
-        env: {
-          EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'jquery-integration': true
-          })
-        },
-        npm: {
-          devDependencies: {
-            '@ember/jquery': '^1.1.0'
-          }
-        }
-      },
-      {
-        name: 'ember-classic',
-        env: {
-          EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'application-template-wrapper': true,
-            'default-async-observers': false,
-            'template-only-glimmer-components': false
-          })
-        },
-        npm: {
-          ember: {
-            edition: 'classic'
-          }
-        }
-      }
-    ]
-  };
+	return {
+		useYarn: true,
+		scenarios: [
+			{
+				name: 'ember-lts-3.16',
+				npm: {
+					devDependencies: {
+						'ember-source': '~3.16.0'
+					}
+				}
+			},
+			{
+				name: 'ember-lts-3.20',
+				npm: {
+					devDependencies: {
+						'ember-source': '~3.20.5'
+					}
+				}
+			},
+			{
+				name: 'ember-release',
+				npm: {
+					devDependencies: {
+						'ember-source': await getChannelURL('release')
+					}
+				}
+			},
+			{
+				name: 'ember-beta',
+				npm: {
+					devDependencies: {
+						'ember-source': await getChannelURL('beta')
+					}
+				}
+			},
+			{
+				name: 'ember-canary',
+				npm: {
+					devDependencies: {
+						'ember-source': await getChannelURL('canary')
+					}
+				}
+			},
+			{
+				name: 'ember-default-with-jquery',
+				env: {
+					EMBER_OPTIONAL_FEATURES: JSON.stringify({
+						'jquery-integration': true
+					})
+				},
+				npm: {
+					devDependencies: {
+						'@ember/jquery': '^1.1.0'
+					}
+				}
+			},
+			{
+				name: 'ember-classic',
+				env: {
+					EMBER_OPTIONAL_FEATURES: JSON.stringify({
+						'application-template-wrapper': true,
+						'default-async-observers': false,
+						'template-only-glimmer-components': false
+					})
+				},
+				npm: {
+					ember: {
+						edition: 'classic'
+					}
+				}
+			}
+		]
+	};
 };