From 07ecbc69c9a61c131d976afe891e8171a73729cc Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Tue, 6 Nov 2018 13:51:52 -0800 Subject: [PATCH] fix findDOMPoint for void nodes with content length --- packages/slate-react/src/components/leaf.js | 14 +++++++++++--- packages/slate-react/src/utils/find-dom-point.js | 5 ++++- .../rendering/fixtures/custom-block-blurred.js | 8 ++++---- .../rendering/fixtures/custom-block-focused.js | 8 ++++---- .../rendering/fixtures/custom-block-selected.js | 8 ++++---- .../test/rendering/fixtures/custom-block-void.js | 2 +- .../rendering/fixtures/custom-inline-multiple.js | 8 ++++---- .../test/rendering/fixtures/custom-inline-void.js | 6 +++--- .../test/rendering/fixtures/custom-inline.js | 4 ++-- .../fixtures/default-block-with-inline.js | 4 ++-- .../test/rendering/fixtures/empty-block.js | 2 +- .../fixtures/readonly-custom-inline-void.js | 4 ++-- 12 files changed, 42 insertions(+), 31 deletions(-) diff --git a/packages/slate-react/src/components/leaf.js b/packages/slate-react/src/components/leaf.js index c478e8edd..ddf1c02e9 100644 --- a/packages/slate-react/src/components/leaf.js +++ b/packages/slate-react/src/components/leaf.js @@ -134,7 +134,11 @@ class Leaf extends React.Component { // COMPAT: Render text inside void nodes with a zero-width space. // So the node can contain selection but the text is not visible. if (editor.query('isVoid', parent)) { - return {'\uFEFF'} + return ( + + {'\uFEFF'} + + ) } // COMPAT: If this is the last text node in an empty block, render a zero- @@ -147,7 +151,7 @@ class Leaf extends React.Component { parent.nodes.last() === node ) { return ( - + {'\uFEFF'}
@@ -158,7 +162,11 @@ class Leaf extends React.Component { // node, so we render a zero-width space so that the selection can be // inserted next to it still. if (text === '') { - return {'\uFEFF'} + return ( + + {'\uFEFF'} + + ) } // COMPAT: Browsers will collapse trailing new lines at the end of blocks, diff --git a/packages/slate-react/src/utils/find-dom-point.js b/packages/slate-react/src/utils/find-dom-point.js index 217272f21..6414fc4d3 100644 --- a/packages/slate-react/src/utils/find-dom-point.js +++ b/packages/slate-react/src/utils/find-dom-point.js @@ -21,7 +21,10 @@ function findDOMPoint(point, win = window) { for (const text of texts) { const node = text.childNodes[0] - const { length } = node.textContent + const length = text.hasAttribute('data-slate-length') + ? parseInt(text.getAttribute('data-slate-length'), 10) + : node.textContent.length + const end = start + length if (point.offset <= end) { diff --git a/packages/slate-react/test/rendering/fixtures/custom-block-blurred.js b/packages/slate-react/test/rendering/fixtures/custom-block-blurred.js index 4f263f93a..f43d408b9 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-block-blurred.js +++ b/packages/slate-react/test/rendering/fixtures/custom-block-blurred.js @@ -63,7 +63,7 @@ export const output = `
- 
 + 
@@ -71,7 +71,7 @@ export const output = `
-  + 
@@ -82,7 +82,7 @@ export const output = `
- 
 + 
@@ -90,7 +90,7 @@ export const output = `
-  + 
diff --git a/packages/slate-react/test/rendering/fixtures/custom-block-focused.js b/packages/slate-react/test/rendering/fixtures/custom-block-focused.js index 394ed52af..e1a2f935e 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-block-focused.js +++ b/packages/slate-react/test/rendering/fixtures/custom-block-focused.js @@ -59,7 +59,7 @@ export const output = `
- 
 + 
@@ -67,7 +67,7 @@ export const output = `
-  + 
@@ -78,7 +78,7 @@ export const output = `
- 
 + 
@@ -86,7 +86,7 @@ export const output = `
-  + 
diff --git a/packages/slate-react/test/rendering/fixtures/custom-block-selected.js b/packages/slate-react/test/rendering/fixtures/custom-block-selected.js index 44a2f3abb..4b4bae4f8 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-block-selected.js +++ b/packages/slate-react/test/rendering/fixtures/custom-block-selected.js @@ -59,7 +59,7 @@ export const output = `
- 
 + 
@@ -67,7 +67,7 @@ export const output = `
-  + 
@@ -78,7 +78,7 @@ export const output = `
- 
 + 
@@ -86,7 +86,7 @@ export const output = `
-  + 
diff --git a/packages/slate-react/test/rendering/fixtures/custom-block-void.js b/packages/slate-react/test/rendering/fixtures/custom-block-void.js index 0afa1c4fc..a16106de8 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-block-void.js +++ b/packages/slate-react/test/rendering/fixtures/custom-block-void.js @@ -46,7 +46,7 @@ export const output = `
-  + 
diff --git a/packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js b/packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js index f5aff7d2c..d216c491d 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js +++ b/packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js @@ -45,7 +45,7 @@ export const output = `
-  +  @@ -57,7 +57,7 @@ export const output = ` -  +  @@ -69,7 +69,7 @@ export const output = ` -  +  @@ -81,7 +81,7 @@ export const output = ` -  + 
diff --git a/packages/slate-react/test/rendering/fixtures/custom-inline-void.js b/packages/slate-react/test/rendering/fixtures/custom-inline-void.js index e1d1e8171..b57683dc0 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-inline-void.js +++ b/packages/slate-react/test/rendering/fixtures/custom-inline-void.js @@ -46,14 +46,14 @@ export const output = `
-  +  -  +  @@ -63,7 +63,7 @@ export const output = ` - 
 + 
diff --git a/packages/slate-react/test/rendering/fixtures/custom-inline.js b/packages/slate-react/test/rendering/fixtures/custom-inline.js index 73c67c8f9..152c0779c 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-inline.js +++ b/packages/slate-react/test/rendering/fixtures/custom-inline.js @@ -41,7 +41,7 @@ export const output = `
-  +  @@ -53,7 +53,7 @@ export const output = ` -  + 
diff --git a/packages/slate-react/test/rendering/fixtures/default-block-with-inline.js b/packages/slate-react/test/rendering/fixtures/default-block-with-inline.js index 527028ec1..bf8818a32 100644 --- a/packages/slate-react/test/rendering/fixtures/default-block-with-inline.js +++ b/packages/slate-react/test/rendering/fixtures/default-block-with-inline.js @@ -21,7 +21,7 @@ export const output = `
-  +  @@ -33,7 +33,7 @@ export const output = ` -  + 
diff --git a/packages/slate-react/test/rendering/fixtures/empty-block.js b/packages/slate-react/test/rendering/fixtures/empty-block.js index 0066221c0..c95c83e07 100644 --- a/packages/slate-react/test/rendering/fixtures/empty-block.js +++ b/packages/slate-react/test/rendering/fixtures/empty-block.js @@ -19,7 +19,7 @@ export const output = `
- 
 + 
diff --git a/packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js b/packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js index 1dbd56e49..aeef2dfdf 100644 --- a/packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js +++ b/packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js @@ -45,7 +45,7 @@ export const output = `
-  +  @@ -55,7 +55,7 @@ export const output = ` - 
 +