-
Notifications
You must be signed in to change notification settings - Fork 245
Fix breaking out of <p> when deleting across paragraphs in FF #97
Changes from 13 commits
def0e57
794fd59
7b16a23
d09d6b5
d7a4a4a
2034146
528487b
b658a57
30d1987
8bd25fa
76fee17
8c4df39
83a05c4
068ff58
d0c6a98
3cf299c
d9b8363
10e6253
7b5c973
049413e
ef70dda
a5a7fa5
79f06d3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ npm install | |
bower install | ||
|
||
# Download the selenium JAR | ||
SELENIUM_VERSION=2.37.0 | ||
SELENIUM_VERSION=2.41.0 | ||
mkdir -p vendor | ||
wget -O vendor/selenium-server-standalone-$SELENIUM_VERSION.jar \ | ||
https://selenium.googlecode.com/files/selenium-server-standalone-$SELENIUM_VERSION.jar | ||
https://selenium-release.storage.googleapis.com/2.41/selenium-server-standalone-$SELENIUM_VERSION.jar | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The version is hardcoded in the URL? |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
define([ | ||
'lodash-modern/arrays/last', | ||
'lodash-modern/collections/contains' | ||
], function ( | ||
last, | ||
contains | ||
) { | ||
|
||
/** | ||
* Chrome and Firefox: Upon pressing backspace inside of a P, the browser | ||
* deletes the paragraph element, leaving the scribe in a pristine state. | ||
* | ||
* Firefox: Erasing across multiple paragraphs, or outside of a | ||
* whole paragraph (e.g. by ‘Select All’) will leave the scribe in a | ||
* pristine state. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This could have an isolated case. Would you mind submitting one and adding it to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe add more detail in this comment with regards to what you mean by “pristine state”. AFAIK, only the paragraph immediately following the caret is removed from it’s P element. |
||
* | ||
* Entering a new line in a pristine state state will insert | ||
* `<div>`s (in Chrome) or `<br>`s (in Firefox) where previously we | ||
* had `<p>`'s. This patches the behaviour of delete/backspace so | ||
* that we do not end up in a pristine state. | ||
*/ | ||
|
||
'use strict'; | ||
|
||
|
||
// TODO: not exhaustive? | ||
var blockElementNames = ['P', 'LI', 'DIV', 'BLOCKQUOTE', 'UL', 'OL', 'H2']; | ||
function isBlockElement(node) { | ||
return contains(blockElementNames, node.nodeName); | ||
} | ||
|
||
/** | ||
* Wrap consecutive inline elements and text nodes in a P element. | ||
*/ | ||
function wrapChildNodes(parentNode) { | ||
var groups = Array.prototype.reduce.call(parentNode.childNodes, | ||
function (accumulator, binChildNode) { | ||
var group = last(accumulator); | ||
if (! group) { | ||
startNewGroup(); | ||
} else { | ||
var isBlockGroup = isBlockElement(group[0]); | ||
if (isBlockGroup === isBlockElement(binChildNode)) { | ||
group.push(binChildNode); | ||
} else { | ||
startNewGroup(); | ||
} | ||
} | ||
|
||
return accumulator; | ||
|
||
function startNewGroup() { | ||
var newGroup = [binChildNode]; | ||
accumulator.push(newGroup); | ||
} | ||
}, []); | ||
|
||
var consecutiveInlineElementsAndTextNodes = groups.filter(function (group) { | ||
var isBlockGroup = isBlockElement(group[0]); | ||
return ! isBlockGroup; | ||
}); | ||
|
||
consecutiveInlineElementsAndTextNodes.forEach(function (nodes) { | ||
var pElement = document.createElement('p'); | ||
nodes[0].parentNode.insertBefore(pElement, nodes[0]); | ||
nodes.forEach(function (node) { | ||
pElement.appendChild(node); | ||
}); | ||
}); | ||
|
||
parentNode._isWrapped = true; | ||
} | ||
|
||
// Traverse the tree, wrapping child nodes as we go. | ||
function traverse(parentNode) { | ||
var treeWalker = document.createTreeWalker(parentNode, NodeFilter.SHOW_ELEMENT); | ||
var node = treeWalker.firstChild(); | ||
|
||
// FIXME: does this recurse down? | ||
|
||
while (node) { | ||
// TODO: At the moment we only support BLOCKQUOTEs. See failing | ||
// tests. | ||
if (node.nodeName === 'BLOCKQUOTE' && ! node._isWrapped) { | ||
wrapChildNodes(node); | ||
traverse(parentNode); | ||
break; | ||
} | ||
node = treeWalker.nextSibling(); | ||
} | ||
} | ||
|
||
|
||
return function () { | ||
return function (scribe) { | ||
|
||
scribe.htmlFormatter.formatters.push(function (html) { | ||
/** | ||
* Ensure P mode. | ||
* | ||
* Wrap any orphan text nodes in a P element. | ||
*/ | ||
// TODO: This should be configurable and also correct markup such as | ||
// `<ul>1</ul>` to <ul><li>2</li></ul>`. See skipped tests. | ||
// TODO: This should probably be a part of HTML Janitor, or some other | ||
// formatter. | ||
var bin = document.createElement('div'); | ||
bin.innerHTML = html; | ||
|
||
wrapChildNodes(bin); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wonder if this should be a part of HTML Janitor? We already use that in a formatter. (See code comment above.) |
||
traverse(bin); | ||
|
||
return bin.innerHTML; | ||
}); | ||
|
||
}; | ||
}; | ||
|
||
}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This file is in |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
http://fredkschott.com/post/2014/02/npm-no-longer-defaults-to-tildes/