yield addCardInEditMode action from {{content-kit-editor}}

This allows adding a card that is rendered initially rendered in 'edit'
mode instead of 'display' mode.

Fixes #15

Adds tests to ensure that the data is passed to cards appropriately
and that the object reference is broken.

README.md

@@ -84,7 +84,8 @@ Additionally `contentKit` provides the following actions:
 * `toggleLink`, toggling the linking of a selection. The user will be prompted
    for a URL if required.
 * `addCard`, passed a card name and payload will add that card at the end of
-  a post.
+* `addCardInEditMode`, passed a card name and payload will add that card at the end of
+  a post and render it in "edit" mode initially.
 * `createListSection`, changing selected content into list items.
 
 The `contentKit` object is often used indirectly by passing it to other
@@ -221,18 +222,18 @@ will be used:
 * For display, the `demo-card` component will be called
 * For edit, the `demo-card-editor` component will be called
 
-In display mode, the following attrs will be provided:
-
-* `data`, the data payload for this card
-* `editAction`, an action for toggling this card into edit mode
-
-In edit mode, the following attrs will be provided:
-
-* `data`, the data payload for this card
-* `saveAction`, an action accepting new data for the card payload, then saving
-  that data and toggling this card into display mode
-* `cancelAction`, an action toggling this card to display mode without saving
-  any changes.
+The component will be provided with the following `attrs`:
+
+  * `data`, the data payload for this card
+  * `editCard`, an action for toggling this card into edit mode (this action is a no-op if the card is already in edit mode)
+  * `removeCard`, an action for removing this card
+  * `saveCard`, an action accepting new data for the card payload, then saving
+    that data and toggling this card into display mode
+  * `cancelCard`, an action toggling this card to display mode without saving (this action is a no-op if the card is already in display mode)
+  * `removeCard`, an action for removing this card
+  * `cardName` the name of this card
+  * `editor` A reference to the content-kit-editor
+  * `cardSection` A reference to this card's `cardSection` model in the editor's abstract tree. This may be necessary to do programmatic editing (such as moving the card via the `postEditor#moveSection` API that content-kit-editor provides)
 
 ### Developing ember-content-kit
 

addon/components/content-kit-editor/component.js

@@ -88,10 +88,13 @@ export default Component.extend({
       editor.selectSections([listItem]);
     },
 
-    addCard(cardName, data) {
-      let editor = this.get('editor');
-      let card = editor.builder.createCardSection(cardName, { data });
-      editor.run(postEditor => postEditor.insertSectionAtEnd(card));
+    addCard(cardName, data={}) {
+      this._addCard(cardName, data);
+    },
+
+    addCardInEditMode(cardName, data={}) {
+      let editMode = true;
+      this._addCard(cardName, data, editMode);
     },
 
     toggleLink() {
@@ -149,13 +152,12 @@ export default Component.extend({
           element.id = destinationElementId;
 
           // The data must be copied to avoid sharing the reference
-          // to the `defaultListicleItem` between new listicle items.
-          let data = Ember.copy(payload.data, true);
+          payload = Ember.copy(payload, true);
 
           let card = Ember.Object.create({
             destinationElementId,
             cardName,
-            data,
+            data: payload,
             callbacks: env,
             editor,
             section: env.section
@@ -208,6 +210,17 @@ export default Component.extend({
   willDestroyElement() {
     let editor = this.get('editor');
     editor.destroy();
+  },
+
+  _addCard(cardName, data, editMode=false) {
+    let editor = this.get('editor');
+    editor.run(postEditor => {
+      let card = editor.builder.createCardSection(cardName, data);
+      if (editMode) {
+        editor.editCard(card);
+      }
+      postEditor.insertSectionAtEnd(card);
+    });
   }
 
 });

addon/components/content-kit-editor/template.hbs

@@ -5,6 +5,7 @@
   toggleMarkup=(action 'toggleMarkup')
   toggleLink=(action 'toggleLink')
   addCard=(action 'addCard')
+  addCardInEditMode=(action 'addCardInEditMode')
   toggleSectionTagName=(action 'toggleSectionTagName')
   createListSection=(action 'createListSection')
 )}}
@@ -23,7 +24,7 @@
 
 {{#each componentCards as |card|}}
   {{#ember-wormhole to=card.destinationElementId}}
-    {{content-kit-component-card
+    {{component card.cardName
         editor=editor
         cardSection=card.section
         cardName=card.cardName

addon/utils/create-component-card.js

@@ -1,18 +1,28 @@
+const EDITOR_CARD_SUFFIX = '-editor';
+
 export default function createComponentCard(name) {
 
   return {
     name,
 
     display: {
-      // TODO: This is sort of actually a `beforeAll/afterAll`, exploiting the
-      // fact that `display` is (currently) the initial state for cards; plus,
-      // we’re not ever triggering edit mode, only directly accessing the
-      // callbacks in `env`
       setup(element, options, env, payload) {
         let card = options.onAddComponentCard(element, name, env, payload);
         return function() { options.onRemoveComponentCard(card); };
       },
 
+      teardown(removeComponentCard) {
+        removeComponentCard();
+      }
+    },
+
+    edit: {
+      setup(element, options, env, payload) {
+        let cardName = name + EDITOR_CARD_SUFFIX;
+        let card = options.onAddComponentCard(element, cardName, env, payload);
+        return function() { options.onRemoveComponentCard(card); };
+      },
+
       teardown(removeComponentCard) {
         removeComponentCard();
       }

tests/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Dummy Tests</title>
+    <title>ember-content-kit Tests</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">