Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2025-01-03 13:16:31 -05:00
Code Issues Activity

Making it possible to delete an <img> with display other than inline

Browse source
This commit is contained in:
dryoma 2015-05-13 07:06:32 +08:00
parent 60f5ddc45e
commit bdc8b0c576
3 changed files with 90 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
build/squire-raw.js
View file

@ -1348,6 +1348,50 @@ var keyHandlers = {
// Otherwise, leave to browser but check afterwards whether it has // Otherwise, leave to browser but check afterwards whether it has
// left behind an empty inline tag. // left behind an empty inline tag.
else { else {
// Fixing deletion of <img> with display:block.
// Browsers don't delete inlines (<b>, <img>, etc.) whose display
// is not inline or inline block. Although bold, italic and so on
// are unlikely to be set to display:block in CSS, <img> can.
var container = range.commonAncestorContainer,
next,
delImg = false;
if ( isInline( container ) ) {
var length = container.nodeValue && container.nodeValue.length ||
container.innerText.length,
display;
while ( container.parentNode &&
!container.nextSibling
&& isInline( container.parentNode ) )
container = container.parentNode;
next = container.nextSibling;
display = window.getComputedStyle( next ).display
// In the same block with <img>, at the end of TextNode,
// the <img> is (almost) right after the cursor
if ( isInline( container ) &&
range.endOffset === length &&
next.nodeName === 'IMG' &&
!/^inline|inline-block$/.test( display ) ) {
delImg = true;
}
}
// Surprisingly, there is another possible cursor position:
// when range offsets are based on container's childNodes.
// Seems to happen only if <img> (or another inline)
// is display:block
else if ( isBlock( container ) ) {
next = container.childNodes[range.startOffset];
if ( container === range.endContainer &&
container === range.startContainer &&
next.nodeName === 'IMG' ) {
delImg = true;
}
}
if ( delImg ){
event.preventDefault();
next.parentNode.removeChild( next );
}
self.setSelection( range ); self.setSelection( range );
setTimeout( function () { afterDelete( self ); }, 0 ); setTimeout( function () { afterDelete( self ); }, 0 );
} }

4
build/squire.js
View file

File diff suppressed because one or more lines are too long

44
source/KeyHandlers.js
View file

@ -275,6 +275,50 @@ var keyHandlers = {
// Otherwise, leave to browser but check afterwards whether it has // Otherwise, leave to browser but check afterwards whether it has
// left behind an empty inline tag. // left behind an empty inline tag.
else { else {
// Fixing deletion of <img> with display:block.
// Browsers don't delete inlines (<b>, <img>, etc.) whose display
// is not inline or inline block. Although bold, italic and so on
// are unlikely to be set to display:block in CSS, <img> can.
var container = range.commonAncestorContainer,
next,
delImg = false;
if ( isInline( container ) ) {
var length = container.nodeValue && container.nodeValue.length ||
container.innerText.length,
display;
while ( container.parentNode &&
!container.nextSibling
&& isInline( container.parentNode ) )
container = container.parentNode;
next = container.nextSibling;
display = window.getComputedStyle( next ).display
// In the same block with <img>, at the end of TextNode,
// the <img> is (almost) right after the cursor
if ( isInline( container ) &&
range.endOffset === length &&
next.nodeName === 'IMG' &&
!/^inline|inline-block$/.test( display ) ) {
delImg = true;
}
}
// Surprisingly, there is another possible cursor position:
// when range offsets are based on container's childNodes.
// Seems to happen only if <img> (or another inline)
// is display:block
else if ( isBlock( container ) ) {
next = container.childNodes[range.startOffset];
if ( container === range.endContainer &&
container === range.startContainer &&
next.nodeName === 'IMG' ) {
delImg = true;
}
}
if ( delImg ){
event.preventDefault();
next.parentNode.removeChild( next );
}
self.setSelection( range ); self.setSelection( range );
setTimeout( function () { afterDelete( self ); }, 0 ); setTimeout( function () { afterDelete( self ); }, 0 );
} }