🐛 Fixed backspace deleting words and rich-text paste collapsing parag…

…raphs

refs TryGhost/Ghost#9623
- switch to custom `mobiledoc-kit` build
  - fixes top-level elements not being run through parser plugins (bustle/mobiledoc-kit#627)
  - fixes <kbd>Alt</kbd> getting stuck and causing <kbd>Backspace</kbd> to delete whole words (bustle/mobiledoc-kit#626)
  - fixes error that can occur when a paste results in blank insert (bustle/mobiledoc-kit#620)
- add new `figureToImageCard` parser
  - replaces hacky workaround to detect an image+figcaption inside the `imgToCard` parser plugin
- remove wrapping of html in a `<div>...</div>` when pasting
  - no longer necessary now that top-level elements are parsed
  - fixes rich-text pastes where multiple paragraphs would be collapsed into a single paragraph

ember-cli-build.js

@@ -135,8 +135,8 @@ module.exports = function (defaults) {
     // 'dem Scripts
     app.import('node_modules/google-caja-bower/html-css-sanitizer-bundle.js');
     app.import('node_modules/keymaster/keymaster.js');
-    app.import('node_modules/mobiledoc-kit/dist/amd/mobiledoc-kit.js');
-    app.import('node_modules/mobiledoc-kit/dist/amd/mobiledoc-kit.map');
+    app.import('node_modules/@tryghost/mobiledoc-kit/dist/amd/mobiledoc-kit.js');
+    app.import('node_modules/@tryghost/mobiledoc-kit/dist/amd/mobiledoc-kit.map');
     app.import('node_modules/simplemde/debug/simplemde.js');
     app.import('node_modules/reframe.js/dist/noframe.es.js', {
         using: [

lib/koenig-editor/addon/components/koenig-editor.js

@@ -800,14 +800,7 @@ export default Component.extend({
                             return text;
                         }
                         if (type === 'text/html') {
-                            // HACK: mobiledoc-kit won't parse top-level <img> or
-                            // other "unknown" elements so we wrap everything here
-                            // so that we don't get blank posts and elements are
-                            // passed through to our parser plugins correctly
-                            // TODO: fix parsing in mobiledoc, related issues:
-                            // https://github.com/bustle/mobiledoc-kit/issues/619
-                            // https://github.com/bustle/mobiledoc-kit/issues/494
-                            return `<div>${normalizedHtml}</div>`;
+                            return normalizedHtml;
                         }
                     }
                 }

lib/koenig-editor/addon/options/parser-plugins.js

@@ -21,22 +21,37 @@ export function removeLeadingNewline(node) {
     node.nodeValue = node.nodeValue.replace(/^\n/, '');
 }
 
+export function figureToImageCard(node, builder, {addSection, nodeFinished}) {
+    if (node.nodeType !== 1 || node.tagName !== 'FIGURE') {
+        return;
+    }
+
+    let img = node.querySelector('img');
+    let figcaption = node.querySelector('figcaption');
+
+    if (!img) {
+        return;
+    }
+
+    let payload = {src: img.src};
+
+    if (figcaption) {
+        // TODO: Allow rich text in captions
+        payload.caption = figcaption.textContent;
+    }
+
+    let cardSection = builder.createCardSection('image', payload);
+    addSection(cardSection);
+    nodeFinished();
+}
+
 export function imgToCard(node, builder, {addSection, nodeFinished}) {
     if (node.nodeType !== 1 || node.tagName !== 'IMG') {
         return;
     }
 
     let payload = {src: node.src};
 
-    // TODO: this is a workaround for grabbing a figure>img+figcaption until
-    // https://github.com/bustle/mobiledoc-kit/issues/494 is resolved
-    // NOTE: it will only work in a strict <figure><img><figcaption></figure> case
-    let nextSibling = node.nextSibling;
-    if (nextSibling && nextSibling.tagName === 'FIGCAPTION') {
-        payload.caption = nextSibling.textContent;
-        node.parentNode.removeChild(nextSibling);
-    }
-
     let cardSection = builder.createCardSection('image', payload);
     addSection(cardSection);
     nodeFinished();
@@ -70,6 +85,7 @@ export function preCodeToCard(node, builder, {addSection, nodeFinished}) {
 export default [
     brToSoftBreakAtom,
     removeLeadingNewline,
+    figureToImageCard,
     imgToCard,
     hrToCard,
     preCodeToCard

package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@ember/optional-features": "0.6.1",
     "@html-next/vertical-collection": "1.0.0-beta.8",
+    "@tryghost/mobiledoc-kit": "0.10.22-ghost.1",
     "blueimp-md5": "2.10.0",
     "broccoli-asset-rev": "2.7.0",
     "broccoli-clean-css": "^2.0.1",
@@ -113,7 +114,6 @@
     "markdown-it-lazy-headers": "0.1.3",
     "markdown-it-mark": "2.0.0",
     "matchdep": "2.0.0",
-    "mobiledoc-kit": "0.10.21",
     "normalize.css": "3.0.3",
     "password-generator": "2.2.0",
     "reframe.js": "2.2.1",

yarn.lock

@@ -78,6 +78,13 @@
   dependencies:
     samsam "1.3.0"
 
+"@tryghost/mobiledoc-kit@0.10.22-ghost.1":
+  version "0.10.22-ghost.1"
+  resolved "https://registry.yarnpkg.com/@tryghost/mobiledoc-kit/-/mobiledoc-kit-0.10.22-ghost.1.tgz#42b37fa53228295f637455c7fbc5bdc87394ae8f"
+  dependencies:
+    mobiledoc-dom-renderer "0.6.5"
+    mobiledoc-text-renderer "0.3.2"
+
 "@types/acorn@^4.0.3":
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.3.tgz#d1f3e738dde52536f9aad3d3380d14e448820afd"
@@ -7302,13 +7309,6 @@ mobiledoc-dom-renderer@0.6.5:
   version "0.6.5"
   resolved "https://registry.yarnpkg.com/mobiledoc-dom-renderer/-/mobiledoc-dom-renderer-0.6.5.tgz#56c0302c4f9c30840ab5b9b20dfe905aed1e437b"
 
-mobiledoc-kit@0.10.21:
-  version "0.10.21"
-  resolved "https://registry.yarnpkg.com/mobiledoc-kit/-/mobiledoc-kit-0.10.21.tgz#71b165f7e61bcc242f99cb0e37209f853fcf86c2"
-  dependencies:
-    mobiledoc-dom-renderer "0.6.5"
-    mobiledoc-text-renderer "0.3.2"
-
 mobiledoc-text-renderer@0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/mobiledoc-text-renderer/-/mobiledoc-text-renderer-0.3.2.tgz#126a167a6cf8b6cd7e58c85feb18043603834580"