Pass card options to card/atom components

bustle · Jan 9, 2017 · a24ae6a · a24ae6a
1 parent 050a8c9
commit a24ae6a
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/addon/components/mobiledoc-editor/component.js b/addon/components/mobiledoc-editor/component.js
@@ -56,6 +56,7 @@ export default Component.extend({
       placeholder: this.get('placeholder'),
       spellcheck:  this.get('spellcheck'),
       autofocus:   this.get('autofocus'),
+      cardOptions: this.get('cardOptions'),
       cards:       this.get('cards') || [],
       atoms:       this.get('atoms') || []
     }, options);
@@ -159,8 +160,10 @@ export default Component.extend({
     // Create a new editor.
     let editorOptions = this.get('editorOptions');
     editorOptions.mobiledoc = mobiledoc;
-    editorOptions.cardOptions = {
+    let componentHooks = {
       [ADD_CARD_HOOK]: ({env, options, payload}, isEditing=false) => {
+
+        console.log('options:', options);
         let cardId = Ember.uuid();
         let cardName = env.name;
         if (isEditing) {
@@ -178,6 +181,7 @@ export default Component.extend({
           cardName,
           payload,
           env,
+          options,
           editor,
           postModel: env.postModel
         });
@@ -202,6 +206,7 @@ export default Component.extend({
           payload,
           value,
           callbacks: env,
+          options,
           editor,
           postModel: env.postModel
         });
@@ -217,6 +222,7 @@ export default Component.extend({
         this.get('componentAtoms').removeObject(atom);
       }
     };
+    editorOptions.cardOptions = assign(componentHooks, editorOptions.cardOptions);
     editor = new Editor(editorOptions);
     editor.willRender(() => {
       // The editor's render/rerender will happen after this `editor.willRender`,

diff --git a/addon/components/mobiledoc-editor/template.hbs b/addon/components/mobiledoc-editor/template.hbs
@@ -33,6 +33,7 @@
         payload=card.payload
         data=card.payload
         env=card.env
+        options=card.options
         editCard=(action card.env.edit)
         saveCard=(action card.env.save)
         cancelCard=(action card.env.cancel)
@@ -48,6 +49,7 @@
         atomName=atom.atomName
         payload=atom.payload
         value=atom.value
+        options=atom.options
         saveAtom=(action atom.callbacks.save)
         }}
   {{/ember-wormhole}}

diff --git a/tests/integration/components/mobiledoc-editor/component-test.js b/tests/integration/components/mobiledoc-editor/component-test.js
@@ -16,9 +16,9 @@ import wait from 'ember-test-helpers/wait';
 
 let { Component } = Ember;
 
-const COMPONENT_CARD_EXPECTED_PROPS = ['env', 'editCard', 'saveCard', 'cancelCard', 'removeCard', 'postModel'];
+const COMPONENT_CARD_EXPECTED_PROPS = ['env', 'editCard', 'saveCard', 'cancelCard', 'removeCard', 'postModel', 'options'];
 
-const COMPONENT_ATOM_EXPECTED_PROPS = ['saveAtom'];
+const COMPONENT_ATOM_EXPECTED_PROPS = ['saveAtom', 'options'];
 
 moduleForComponent('mobiledoc-editor', 'Integration | Component | mobiledoc editor', {
   integration: true,
@@ -579,6 +579,48 @@ test(`sets ${COMPONENT_CARD_EXPECTED_PROPS.join(',')} properties on card compone
   `);
 });
 
+test(`passes options through to card components`, function(assert) {
+
+  let cardOptions = {
+    foo: 'bar'
+  };
+  let Component = Ember.Component.extend({
+    didInsertElement() {
+      assert.equal(this.get('options.foo'), 'bar', `options property has been passed`);
+    }
+  });
+  let card = this.registerCardComponent('demo-card', hbs`<div id='demo-card'></div>`, Component);
+  this.set('cards', [card]);
+  this.set('mobiledoc', mobiledocWithCard('demo-card'));
+  this.set('cardOptions', cardOptions);
+
+  this.render(hbs`
+    {{#mobiledoc-editor mobiledoc=mobiledoc cards=cards cardOptions=cardOptions as |editor|}}
+    {{/mobiledoc-editor}}
+  `);
+});
+
+test(`passes options through to atom components`, function(assert) {
+
+  let cardOptions = {
+    foo: 'bar'
+  };
+  let Component = Ember.Component.extend({
+    didInsertElement() {
+      assert.equal(this.get('options.foo'), 'bar', `options property has been passed`);
+    }
+  });
+  let atom = this.registerAtomComponent('demo-atom', hbs`I AM AN ATOM`, Component);
+  this.set('atoms', [atom]);
+  this.set('mobiledoc', mobiledocWithAtom('demo-atom'));
+  this.set('cardOptions', cardOptions);
+
+  this.render(hbs`
+    {{#mobiledoc-editor mobiledoc=mobiledoc atoms=atoms cardOptions=cardOptions as |editor|}}
+    {{/mobiledoc-editor}}
+  `);
+});
+
 test('component card `env` property exposes `isInEditor`', function(assert) {
   assert.expect(1);