From 85b901a4d0bd675282b36a7de82b46d53b847fe1 Mon Sep 17 00:00:00 2001 From: Raffaele De Feo Date: Sun, 12 Feb 2017 22:10:51 +0100 Subject: [PATCH 1/2] Don't rely on CSS positioning to hide text caret inside `Void` `Inline` nodes, instead make it invisible setting spacer `color` property to `transparent`. In Chrome, replace zero-with space with hair space to avoid graphics glitches. Update tests. --- src/components/leaf.js | 7 ++++++- src/components/void.js | 14 ++------------ .../fixtures/custom-block-void/output.html | 2 +- .../fixtures/custom-inline-void/output.html | 10 +++++----- test/rendering/fixtures/custom-inline/output.html | 4 ++-- .../fixtures/default-block-and-inline/output.html | 4 ++-- .../fixtures/multiple-custom-inline/output.html | 6 +++--- 7 files changed, 21 insertions(+), 26 deletions(-) diff --git a/src/components/leaf.js b/src/components/leaf.js index 641f1e3bb..603799481 100644 --- a/src/components/leaf.js +++ b/src/components/leaf.js @@ -264,7 +264,12 @@ class Leaf extends React.Component { // COMPAT: If the text is empty otherwise, it's because it's on the edge of // an inline void node, so we render a zero-width space so that the // selection can be inserted next to it still. - if (text == '') return {'\u200B'} + if (text == '') { + // COMPAT: In Chrome, zero-width space produces graphics glitches, so use + // hair space in place of it. (2017/02/12) + const space = IS_FIREFOX ? '\u200B' : '\u200A' + return {space} + } // COMPAT: Browsers will collapse trailing new lines at the end of blocks, // so we need to add an extra trailing new lines to prevent that. diff --git a/src/components/void.js b/src/components/void.js index 136fba965..7ed97cb62 100644 --- a/src/components/void.js +++ b/src/components/void.js @@ -96,12 +96,6 @@ class Void extends React.Component { } } else { Tag = 'span' - // COMPAT: In Chrome, without setting `display: inline-block` the cursor - // will disappear when placed before an inline void node. (2017/02/07) - style = { - display: 'inline-block', - position: 'relative' - } } this.debug('render', { props }) @@ -145,12 +139,8 @@ class Void extends React.Component { textIndent: '-9999px' } } else { - style = { - position: 'absolute', - top: '0px', - left: '-9999px', - textIndent: '-9999px', - } + // Set `color` to `transparent` to hide caret inside the spacer. + style = {color: 'transparent'} } return ( diff --git a/test/rendering/fixtures/custom-block-void/output.html b/test/rendering/fixtures/custom-block-void/output.html index 145fbd73d..0d5e8af5c 100644 --- a/test/rendering/fixtures/custom-block-void/output.html +++ b/test/rendering/fixtures/custom-block-void/output.html @@ -3,7 +3,7 @@
- ​ +  
diff --git a/test/rendering/fixtures/custom-inline-void/output.html b/test/rendering/fixtures/custom-inline-void/output.html index a3776dd32..a9929f29f 100644 --- a/test/rendering/fixtures/custom-inline-void/output.html +++ b/test/rendering/fixtures/custom-inline-void/output.html @@ -3,13 +3,13 @@
- ​ +   - - + + - ​ +   @@ -18,7 +18,7 @@ - ​ +  
diff --git a/test/rendering/fixtures/custom-inline/output.html b/test/rendering/fixtures/custom-inline/output.html index aab64ca14..0a2c27bcb 100644 --- a/test/rendering/fixtures/custom-inline/output.html +++ b/test/rendering/fixtures/custom-inline/output.html @@ -3,7 +3,7 @@
- ​ +   @@ -13,7 +13,7 @@ - ​ +  
diff --git a/test/rendering/fixtures/default-block-and-inline/output.html b/test/rendering/fixtures/default-block-and-inline/output.html index 215978cf9..dd400c7d5 100644 --- a/test/rendering/fixtures/default-block-and-inline/output.html +++ b/test/rendering/fixtures/default-block-and-inline/output.html @@ -3,7 +3,7 @@
- ​ +   @@ -13,7 +13,7 @@ - ​ +  
diff --git a/test/rendering/fixtures/multiple-custom-inline/output.html b/test/rendering/fixtures/multiple-custom-inline/output.html index f0bfa1380..c72f490a1 100644 --- a/test/rendering/fixtures/multiple-custom-inline/output.html +++ b/test/rendering/fixtures/multiple-custom-inline/output.html @@ -3,7 +3,7 @@
- ​ +   @@ -13,7 +13,7 @@ - ​ +   @@ -23,7 +23,7 @@ - ​ +  
From ea9920df5f4f9da6ef3dfdfb7aad951be749220f Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Fri, 17 Feb 2017 10:54:50 -0800 Subject: [PATCH 2/2] style fixes --- src/components/void.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/void.js b/src/components/void.js index 7ed97cb62..24581dc98 100644 --- a/src/components/void.js +++ b/src/components/void.js @@ -91,9 +91,7 @@ class Void extends React.Component { // Make the outer wrapper relative, so the spacer can overlay it. if (node.kind === 'block') { Tag = 'div' - style = { - position: 'relative' - } + style = { position: 'relative' } } else { Tag = 'span' } @@ -139,8 +137,9 @@ class Void extends React.Component { textIndent: '-9999px' } } else { - // Set `color` to `transparent` to hide caret inside the spacer. - style = {color: 'transparent'} + style = { + color: 'transparent' + } } return (