🐛 Fixed backspace deleting words and rich-text paste collapsing paragraphs

refs https://github.com/TryGhost/Ghost/issues/9623
- switch to custom `mobiledoc-kit` build
  - fixes top-level elements not being run through parser plugins (https://github.com/bustle/mobiledoc-kit/pull/627)
  - fixes <kbd>Alt</kbd> getting stuck and causing <kbd>Backspace</kbd> to delete whole words (https://github.com/bustle/mobiledoc-kit/pull/626)
  - fixes error that can occur when a paste results in blank insert (https://github.com/bustle/mobiledoc-kit/pull/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
This commit is contained in:
Kevin Ansfield 2018-06-18 18:48:32 +01:00
parent 03e21f3f04
commit 2e49c9b3f4
5 changed files with 36 additions and 27 deletions

View File

@ -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: [

View File

@ -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;
}
}
}

View File

@ -21,6 +21,30 @@ 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;
@ -28,15 +52,6 @@ export function imgToCard(node, builder, {addSection, nodeFinished}) {
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

View File

@ -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",

View File

@ -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"