mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-27 17:09:53 +02:00
Fix Transforms.wrapNodes
where split: true
at text node start or end (#5943)
* Fix `Transforms.wrapNodes` where `split: true` at text node start or end * Fix block case too
This commit is contained in:
5
.changeset/heavy-pants-cover.md
Normal file
5
.changeset/heavy-pants-cover.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'slate': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix: The `split: true` option on `Transforms.wrapNodes` does not work correctly when one or more points is at the start or end of a text node.
|
@@ -6,6 +6,7 @@ import { Element } from '../interfaces/element'
|
|||||||
import { Text } from '../interfaces/text'
|
import { Text } from '../interfaces/text'
|
||||||
import { Range } from '../interfaces/range'
|
import { Range } from '../interfaces/range'
|
||||||
import { Transforms } from '../interfaces/transforms'
|
import { Transforms } from '../interfaces/transforms'
|
||||||
|
import { Point } from '../interfaces'
|
||||||
|
|
||||||
export const wrapNodes: NodeTransforms['wrapNodes'] = (
|
export const wrapNodes: NodeTransforms['wrapNodes'] = (
|
||||||
editor,
|
editor,
|
||||||
@@ -33,11 +34,35 @@ export const wrapNodes: NodeTransforms['wrapNodes'] = (
|
|||||||
|
|
||||||
if (split && Range.isRange(at)) {
|
if (split && Range.isRange(at)) {
|
||||||
const [start, end] = Range.edges(at)
|
const [start, end] = Range.edges(at)
|
||||||
|
|
||||||
const rangeRef = Editor.rangeRef(editor, at, {
|
const rangeRef = Editor.rangeRef(editor, at, {
|
||||||
affinity: 'inward',
|
affinity: 'inward',
|
||||||
})
|
})
|
||||||
Transforms.splitNodes(editor, { at: end, match, voids })
|
|
||||||
Transforms.splitNodes(editor, { at: start, match, voids })
|
// Always split if we're in the middle of a block, to ensure that text
|
||||||
|
// node boundaries are handled correctly.
|
||||||
|
const isAtBlockEdge = (point: Point) => {
|
||||||
|
const blockAbove = Editor.above(editor, {
|
||||||
|
at: point,
|
||||||
|
match: n => Element.isElement(n) && Editor.isBlock(editor, n),
|
||||||
|
})
|
||||||
|
return blockAbove && Editor.isEdge(editor, point, blockAbove[1])
|
||||||
|
}
|
||||||
|
|
||||||
|
Transforms.splitNodes(editor, {
|
||||||
|
at: end,
|
||||||
|
match,
|
||||||
|
voids,
|
||||||
|
always: !isAtBlockEdge(end),
|
||||||
|
})
|
||||||
|
|
||||||
|
Transforms.splitNodes(editor, {
|
||||||
|
at: start,
|
||||||
|
match,
|
||||||
|
voids,
|
||||||
|
always: !isAtBlockEdge(start),
|
||||||
|
})
|
||||||
|
|
||||||
at = rangeRef.unref()!
|
at = rangeRef.unref()!
|
||||||
|
|
||||||
if (options.at == null) {
|
if (options.at == null) {
|
||||||
|
@@ -0,0 +1,39 @@
|
|||||||
|
/** @jsx jsx */
|
||||||
|
import { Transforms } from 'slate'
|
||||||
|
import { jsx } from '../../..'
|
||||||
|
|
||||||
|
export const input = (
|
||||||
|
<editor>
|
||||||
|
<block old>
|
||||||
|
<text>
|
||||||
|
one
|
||||||
|
<anchor />
|
||||||
|
</text>
|
||||||
|
<text bold>two</text>
|
||||||
|
<text>
|
||||||
|
<focus />
|
||||||
|
three
|
||||||
|
</text>
|
||||||
|
</block>
|
||||||
|
</editor>
|
||||||
|
)
|
||||||
|
export const run = editor => {
|
||||||
|
Transforms.wrapNodes(editor, <block new />, { split: true })
|
||||||
|
}
|
||||||
|
export const output = (
|
||||||
|
<editor>
|
||||||
|
<block old>one</block>
|
||||||
|
<block new>
|
||||||
|
<block old>
|
||||||
|
<text bold>
|
||||||
|
<anchor />
|
||||||
|
two
|
||||||
|
<focus />
|
||||||
|
</text>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
<block old>
|
||||||
|
<text>three</text>
|
||||||
|
</block>
|
||||||
|
</editor>
|
||||||
|
)
|
@@ -0,0 +1,37 @@
|
|||||||
|
/** @jsx jsx */
|
||||||
|
import { Transforms } from 'slate'
|
||||||
|
import { jsx } from '../../..'
|
||||||
|
|
||||||
|
export const input = (
|
||||||
|
<editor>
|
||||||
|
<block>
|
||||||
|
<text>
|
||||||
|
one
|
||||||
|
<anchor />
|
||||||
|
</text>
|
||||||
|
<text bold>two</text>
|
||||||
|
<text>
|
||||||
|
<focus />
|
||||||
|
three
|
||||||
|
</text>
|
||||||
|
</block>
|
||||||
|
</editor>
|
||||||
|
)
|
||||||
|
export const run = editor => {
|
||||||
|
Transforms.wrapNodes(editor, <inline new />, { split: true })
|
||||||
|
}
|
||||||
|
export const output = (
|
||||||
|
<editor>
|
||||||
|
<block>
|
||||||
|
<text>one</text>
|
||||||
|
<inline new>
|
||||||
|
<text bold>
|
||||||
|
<anchor />
|
||||||
|
two
|
||||||
|
<focus />
|
||||||
|
</text>
|
||||||
|
</inline>
|
||||||
|
<text>three</text>
|
||||||
|
</block>
|
||||||
|
</editor>
|
||||||
|
)
|
Reference in New Issue
Block a user