🐝 Add cards in lists (#585)

refs TryGhost/Ghost#8157

Currently mobiledoc-kit doesn't allow the inserting or replacing of a list item with a card.

There is a solution that works toggling the section to a `p` then replacing the section, however there are issues with the mobiledoc range object becoming out of sync and the workarounds for that are too hacky.

We need to update mobiledoc to deal with this usecase (although the way that ranges are handled during undo might also be an option worth exploring), but for now we'll simply insert a card at the bottom of the list which is unfortunately different behaviour from any other block.

lib/gh-koenig/addon/components/koenig-slash-menu.js

@@ -46,8 +46,9 @@ export default Component.extend({
             this.set('selectedTool', selectedTool);
             selectedTool.selected = true;
         }
+
         if (i === 0) {
-            alert('close');
+         //   this.send('closeMenu');
         }
         return tools;
     }),
@@ -86,7 +87,8 @@ export default Component.extend({
         if (this.get('isOpen')) {
             let queryString = editor.range.head.section.text.substring(range.startOffset, editor.range.head.offset);
             this.set('query', queryString);
-            if (queryString.length > 10) {
+            // if we've typed 5 characters and have no tools then close.
+            if (queryString.length > 5 && !this.get('toolLength')) {
                 this.send('closeMenu');
             }
         }
@@ -99,7 +101,6 @@ export default Component.extend({
 
             this.set('query', '');
             this.set('isOpen', true);
-
             this.set('range', {
                 section: editor.range.head.section,
                 startOffset: editor.range.head.offset,

lib/gh-koenig/addon/options/default-tools.js

@@ -220,7 +220,15 @@ export default function (editor, toolbar) {
             onClick: (editor, section) => {
                 editor.run((postEditor) => {
                     let card = postEditor.builder.createCardSection('html-card', {pos: 'top', html: editor.range.headSection.text});
-                    postEditor.replaceSection(section || editor.range.headSection, card);
+                    // we can't replace a list item so we insert a card after it and then delete it.
+                    if (editor.range.headSection.isListItem) {
+                        // postEditor.toggleSection('p');
+                        // postEditor.insertSection(card);
+                        // postEditor.removeSection(editor.range.head.section);
+                        editor.insertCard('html-card');
+                    } else {
+                        postEditor.replaceSection(section || editor.range.headSection, card);
+                    }
                 });
             },
             checkElements() {
@@ -257,7 +265,12 @@ export default function (editor, toolbar) {
             onClick: (editor, section) => {
                 editor.run((postEditor) => {
                     let card = postEditor.builder.createCardSection('markdown-card', {pos: 'top', markdown: editor.range.headSection.text});
-                    postEditor.replaceSection(section || editor.range.headSection, card);
+                    // we can't replace a list item so we insert a card after it and then delete it.
+                    if (editor.range.headSection.isListItem) {
+                        editor.insertCard('markdown-card');
+                    } else {
+                        postEditor.replaceSection(section || editor.range.headSection, card);
+                    }
                 });
             },
             checkElements() {