mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-15 03:33:59 +02:00
Code Issues Releases Wiki Activity

fix findDOMPoint for void nodes with content length

Browse Source
This commit is contained in:
Ian Storm Taylor
2018-11-06 13:51:52 -08:00
parent 60e897599f
commit 07ecbc69c9
12 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 <span data-slate-zero-width="z">{'\uFEFF'}</span>
return (
<span data-slate-zero-width="z" data-slate-length={parent.text.length}>
{'\uFEFF'}
</span>
)
}
// 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 (
<span data-slate-zero-width="n">
<span data-slate-zero-width="n" data-slate-length={0}>
{'\uFEFF'}
<br />
</span>
@@ -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 <span data-slate-zero-width="z">{'\uFEFF'}</span>
return (
<span data-slate-zero-width="z" data-slate-length={0}>
{'\uFEFF'}
</span>
)
}
// COMPAT: Browsers will collapse trailing new lines at the end of blocks,

5
packages/slate-react/src/utils/find-dom-point.js
View File

@@ -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) {

8
packages/slate-react/test/rendering/fixtures/custom-block-blurred.js
View File

@@ -63,7 +63,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>
@@ -71,7 +71,7 @@ export const output = `
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>
@@ -82,7 +82,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>
@@ -90,7 +90,7 @@ export const output = `
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>

8
packages/slate-react/test/rendering/fixtures/custom-block-focused.js
View File

@@ -59,7 +59,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>
@@ -67,7 +67,7 @@ export const output = `
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>
@@ -78,7 +78,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>
@@ -86,7 +86,7 @@ export const output = `
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>

8
packages/slate-react/test/rendering/fixtures/custom-block-selected.js
View File

@@ -59,7 +59,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>
@@ -67,7 +67,7 @@ export const output = `
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>
@@ -78,7 +78,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>
@@ -86,7 +86,7 @@ export const output = `
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>

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

@@ -46,7 +46,7 @@ export const output = `
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>

8
packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js
View File

@@ -45,7 +45,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
<a href="https://google.com">
@@ -57,7 +57,7 @@ export const output = `
</a>
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
<a href="https://google.com">
@@ -69,7 +69,7 @@ export const output = `
</a>
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
<a href="https://google.com">
@@ -81,7 +81,7 @@ export const output = `
</a>
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>

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

@@ -46,14 +46,14 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
<span data-slate-void="true" contenteditable="false">
<span data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</span>
@@ -63,7 +63,7 @@ export const output = `
</span>
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>

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

@@ -41,7 +41,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
<a href="https://google.com">
@@ -53,7 +53,7 @@ export const output = `
</a>
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>

4
packages/slate-react/test/rendering/fixtures/default-block-with-inline.js
View File

@@ -21,7 +21,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
<span style="position:relative">
@@ -33,7 +33,7 @@ export const output = `
</span>
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
</div>

2
packages/slate-react/test/rendering/fixtures/empty-block.js
View File

@@ -19,7 +19,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>

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

@@ -45,7 +45,7 @@ export const output = `
<div style="position:relative">
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="z">&#xFEFF;</span>
<span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
</span>
</span>
<span data-slate-void="true">
@@ -55,7 +55,7 @@ export const output = `
</span>
<span>
<span data-slate-leaf="true">
<span data-slate-zero-width="n">&#xFEFF;<br /></span>
<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
</span>
</span>
</div>