mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-09-01 19:22:35 +02:00
Code Issues Releases Wiki Activity

Render text inside void nodes with a zero-width space. (#1388)

Browse Source 
So the node can contain selection but the text is not
visible.
This commit is contained in:
AlbertHilb
2017-11-12 00:35:30 +01:00
committed by Ian Storm Taylor
parent 4e420413bb
commit 64eb1169af
3 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/slate-react/src/components/leaf.js
View File

@@ -120,11 +120,15 @@ class Leaf extends React.Component {
*/
renderText() {
const { block, node, text, index, leaves } = this.props
const { block, node, parent, text, index, leaves } = this.props
// 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.
// COMPAT: Render text inside void nodes with a zero-width space.
// So the node can contain selection but the text is not visible.
if (parent.isVoid) return <span data-slate-zero-width>{'\u200B'}</span>
// COMPAT: If the text is empty, 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 <span data-slate-zero-width>{'\u200B'}</span>
// COMPAT: Browsers will collapse trailing new lines at the end of blocks,

4
packages/slate-react/test/rendering/fixtures/custom-block-void.js
View File

@@ -32,7 +32,9 @@ export const output = `
<div data-slate-void="true" contenteditable="false">
<div contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
<span>
<span></span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
</span>
</span>
</div>
<div draggable="true">

4
packages/slate-react/test/rendering/fixtures/custom-inline-void.js
View File

@@ -40,7 +40,9 @@ export const output = `
<span data-slate-void="true" contenteditable="false">
<span contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
<span>
<span></span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
</span>
</span>
</span>
<span draggable="true">