Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-22 07:13:08 -05:00
Code Issues Activity

Fix iOS auto-capitalisation on enter

Browse source
This commit is contained in:
Neil Jenkins 2019-11-20 22:38:14 +08:00
parent dcd121a65a
commit 9218c9ba14
3 changed files with 339 additions and 299 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
build/squire-raw.js
View file

@ -1426,14 +1426,10 @@ var afterDelete = function ( self, range ) {
}
};
var keyHandlers = {
enter: function ( self, event, range ) {
var handleEnter = function ( self, shiftKey, range ) {
var root = self._root;
var block, parent, node, offset, nodeAfterSplit;
// We handle this ourselves
event.preventDefault();
// Save undo checkpoint and add any links in the preceding section.
// Remove any zws so we don't think there's content in an empty
// block.
@ -1460,7 +1456,7 @@ var keyHandlers = {
parent.insertBefore( node, parent.firstChild );
}
// If blank line: split and insert default block
if ( !event.shiftKey &&
if ( !shiftKey &&
( node.data.charAt( offset - 1 ) === '\n' ||
rangeDoesStartAtBlockBoundary( range, root ) ) &&
( node.data.charAt( offset ) === '\n' ||
@ -1500,7 +1496,7 @@ var keyHandlers = {
// If this is a malformed bit of document or in a table;
// just play it safe and insert a <br>.
if ( !block || event.shiftKey || /^T[HD]$/.test( block.nodeName ) ) {
if ( !block || shiftKey || /^T[HD]$/.test( block.nodeName ) ) {
// If inside an <a>, move focus out
parent = getNearest( range.endContainer, root, 'A' );
if ( parent ) {
@ -1581,6 +1577,33 @@ var keyHandlers = {
range = self.createRange( nodeAfterSplit, 0 );
self.setSelection( range );
self._updatePath( range, true );
};
var keyHandlers = {
// This song and dance is to force iOS to do enable the shift key
// automatically on enter. When you do the DOM split manipulation yourself,
// WebKit doesn't reset the IME state and so presents auto-complete options
// as though you were continuing to type on the previous line, and doesn't
// auto-enable the shift key. The old trick of blurring and focussing
// again no longer works in iOS 13, and I tried various execCommand options
// but they didn't seem to do anything. The only solution I've found is to
// let iOS handle the enter key, then after it's done that reset the HTML
// to what it was before and handle it properly in Squire; the IME state of
// course doesn't reset so you end up in the correct state!
enter: isIOS ? function ( self, event, range ) {
self._saveRangeToBookmark( range );
var html = self._getHTML();
var restoreAndDoEnter = function () {
self.removeEventListener( 'keyup', restoreAndDoEnter );
self._setHTML( html );
range = self._getRangeAndRemoveBookmark();
// Ignore the shift key on iOS, as this is for auto-capitalisation.
handleEnter( self, false, range );
};
self.addEventListener( 'keyup', restoreAndDoEnter );
} : function ( self, event, range ) {
event.preventDefault();
handleEnter( self, event.shiftKey, range );
},
'shift-enter': function ( self, event, range ) {
@ -2254,9 +2277,7 @@ var onCut = function ( event ) {
this.saveUndoState( range );
// Edge only seems to support setting plain text as of 2016-03-11.
// Mobile Safari flat out doesn't work:
// https://bugs.webkit.org/show_bug.cgi?id=143776
if ( !isEdge && !isIOS && clipboardData ) {
if ( !isEdge && clipboardData ) {
// Clipboard content should include all parents within block, or all
// parents up to root if selection across blocks
startBlock = getStartBlockOfRange( range, root );
@ -2301,9 +2322,7 @@ var onCopy = function ( event ) {
var startBlock, endBlock, copyRoot, contents, parent, newContents, node;
// Edge only seems to support setting plain text as of 2016-03-11.
// Mobile Safari flat out doesn't work:
// https://bugs.webkit.org/show_bug.cgi?id=143776
if ( !isEdge && !isIOS && clipboardData ) {
if ( !isEdge && clipboardData ) {
// Clipboard content should include all parents within block, or all
// parents up to root if selection across blocks
startBlock = getStartBlockOfRange( range, root );

2
build/squire.js
View file

File diff suppressed because one or more lines are too long

35
source/KeyHandlers.js
View file

@ -145,16 +145,10 @@ var afterDelete = function ( self, range ) {
}
};
var keyHandlers = {
enter: function ( self, event, range ) {
var handleEnter = function ( self, shiftKey, range ) {
var root = self._root;
// Ignore the shift key on iOS, as this is for auto-capitalisation.
var shiftKey = !isIOS && event.shiftKey;
var block, parent, node, offset, nodeAfterSplit;
// We handle this ourselves
event.preventDefault();
// Save undo checkpoint and add any links in the preceding section.
// Remove any zws so we don't think there's content in an empty
// block.
@ -302,6 +296,33 @@ var keyHandlers = {
range = self.createRange( nodeAfterSplit, 0 );
self.setSelection( range );
self._updatePath( range, true );
};
var keyHandlers = {
// This song and dance is to force iOS to do enable the shift key
// automatically on enter. When you do the DOM split manipulation yourself,
// WebKit doesn't reset the IME state and so presents auto-complete options
// as though you were continuing to type on the previous line, and doesn't
// auto-enable the shift key. The old trick of blurring and focussing
// again no longer works in iOS 13, and I tried various execCommand options
// but they didn't seem to do anything. The only solution I've found is to
// let iOS handle the enter key, then after it's done that reset the HTML
// to what it was before and handle it properly in Squire; the IME state of
// course doesn't reset so you end up in the correct state!
enter: isIOS ? function ( self, event, range ) {
self._saveRangeToBookmark( range );
var html = self._getHTML();
var restoreAndDoEnter = function () {
self.removeEventListener( 'keyup', restoreAndDoEnter );
self._setHTML( html );
range = self._getRangeAndRemoveBookmark();
// Ignore the shift key on iOS, as this is for auto-capitalisation.
handleEnter( self, false, range );
};
self.addEventListener( 'keyup', restoreAndDoEnter );
} : function ( self, event, range ) {
event.preventDefault();
handleEnter( self, event.shiftKey, range );
},
'shift-enter': function ( self, event, range ) {