mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-11 17:53:59 +02:00
Add transform "unwrapBlockByKey" and "unwrapInlineByKey" (#390)
* Add transform .unwrapInlineByKey with test and documentation * Add transform .unwrapBlockByKey with test and documentation * add failing test for unwrap limited to a range * Improve creation of selection in unwrap[Inline|Block]ByKey * Adapt unwrapInlineAtRange to take range in consideration * Add test to unwrapInline only one in the document
This commit is contained in:
committed by
Ian Storm Taylor
parent
f1a5d6f3b4
commit
f380943926
@@ -57,6 +57,8 @@ Transform methods can either operate on the [`Document`](./document.md), the [`S
|
|||||||
- [`setMarkByKey`](#setmarkbykey)
|
- [`setMarkByKey`](#setmarkbykey)
|
||||||
- [`setNodeByKey`](#setnodebykey)
|
- [`setNodeByKey`](#setnodebykey)
|
||||||
- [`splitNodeByKey`](#splitnodebykey)
|
- [`splitNodeByKey`](#splitnodebykey)
|
||||||
|
- [`unwrapInlineByKey`](#unwrapinlinebykey)
|
||||||
|
- [`unwrapBlockByKey`](#unwrapblockbykey)
|
||||||
- [Document Transforms](#document-transforms)
|
- [Document Transforms](#document-transforms)
|
||||||
- [`deleteAtRange`](#deleteatrange)
|
- [`deleteAtRange`](#deleteatrange)
|
||||||
- [`deleteBackwardAtRange`](#deletebackwardatrange)
|
- [`deleteBackwardAtRange`](#deletebackwardatrange)
|
||||||
@@ -317,6 +319,17 @@ Set a dictionary of `properties` on a [`Node`](./node.md) by its `key`. For conv
|
|||||||
|
|
||||||
Split a node by its `key` at an `offset`.
|
Split a node by its `key` at an `offset`.
|
||||||
|
|
||||||
|
### `unwrapInlineByKey`
|
||||||
|
`unwrapInlineByKey(key: String, properties: Object) => Transform` <br/>
|
||||||
|
`unwrapInlineByKey(key: String, type: String) => Transform`
|
||||||
|
|
||||||
|
Unwrap all inner content of an [`Inline`](./inline.md) node that match `properties`. For convenience, you can pass a `type` string or `properties` object.
|
||||||
|
|
||||||
|
### `unwrapBlockByKey`
|
||||||
|
`unwrapBlockByKey(key: String, properties: Object) => Transform` <br/>
|
||||||
|
`unwrapBlockByKey(key: String, type: String) => Transform`
|
||||||
|
|
||||||
|
Unwrap all inner content of a [`Block`](./block.md) node that match `properties`. For convenience, you can pass a `type` string or `properties` object.
|
||||||
|
|
||||||
## Document Transforms
|
## Document Transforms
|
||||||
|
|
||||||
|
@@ -690,7 +690,7 @@ export function unwrapInlineAtRange(transform, range, properties) {
|
|||||||
|
|
||||||
const { state } = transform
|
const { state } = transform
|
||||||
const { document } = state
|
const { document } = state
|
||||||
const texts = document.getTexts()
|
const texts = document.getTextsAtRange(range)
|
||||||
const inlines = texts
|
const inlines = texts
|
||||||
.map((text) => {
|
.map((text) => {
|
||||||
return document.getClosest(text, (parent) => {
|
return document.getClosest(text, (parent) => {
|
||||||
|
@@ -193,3 +193,39 @@ export function splitNodeByKey(transform, key, offset) {
|
|||||||
const path = document.getPath(key)
|
const path = document.getPath(key)
|
||||||
return transform.splitNodeOperation(path, offset)
|
return transform.splitNodeOperation(path, offset)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unwrap content from an inline parent with `properties`.
|
||||||
|
*
|
||||||
|
* @param {Transform} transform
|
||||||
|
* @param {String} key
|
||||||
|
* @param {Object or String} properties
|
||||||
|
* @return {Transform}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function unwrapInlineByKey(transform, key, properties) {
|
||||||
|
const { state } = transform
|
||||||
|
const { document, selection } = state
|
||||||
|
const node = document.assertDescendant(key)
|
||||||
|
const texts = node.getTexts()
|
||||||
|
const range = selection.moveToRangeOf(texts.first(), texts.last())
|
||||||
|
return transform.unwrapInlineAtRange(range, properties)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unwrap content from a block parent with `properties`.
|
||||||
|
*
|
||||||
|
* @param {Transform} transform
|
||||||
|
* @param {String} key
|
||||||
|
* @param {Object or String} properties
|
||||||
|
* @return {Transform}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function unwrapBlockByKey(transform, key, properties) {
|
||||||
|
const { state } = transform
|
||||||
|
const { document, selection } = state
|
||||||
|
const node = document.assertDescendant(key)
|
||||||
|
const texts = node.getTexts()
|
||||||
|
const range = selection.moveToRangeOf(texts.first(), texts.last())
|
||||||
|
return transform.unwrapBlockAtRange(range, properties)
|
||||||
|
}
|
||||||
|
@@ -92,6 +92,8 @@ import {
|
|||||||
setMarkByKey,
|
setMarkByKey,
|
||||||
setNodeByKey,
|
setNodeByKey,
|
||||||
splitNodeByKey,
|
splitNodeByKey,
|
||||||
|
unwrapInlineByKey,
|
||||||
|
unwrapBlockByKey
|
||||||
} from './by-key'
|
} from './by-key'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -238,6 +240,8 @@ export default {
|
|||||||
setMarkByKey,
|
setMarkByKey,
|
||||||
setNodeByKey,
|
setNodeByKey,
|
||||||
splitNodeByKey,
|
splitNodeByKey,
|
||||||
|
unwrapInlineByKey,
|
||||||
|
unwrapBlockByKey,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* On selection.
|
* On selection.
|
||||||
|
@@ -5,11 +5,12 @@ export default function (state) {
|
|||||||
const { document, selection } = state
|
const { document, selection } = state
|
||||||
const texts = document.getTexts()
|
const texts = document.getTexts()
|
||||||
const first = texts.first()
|
const first = texts.first()
|
||||||
|
const last = texts.get(1)
|
||||||
const range = selection.merge({
|
const range = selection.merge({
|
||||||
anchorKey: first.key,
|
anchorKey: first.key,
|
||||||
anchorOffset: 1,
|
anchorOffset: 1,
|
||||||
focusKey: first.key,
|
focusKey: last.key,
|
||||||
focusOffset: 3
|
focusOffset: 2
|
||||||
})
|
})
|
||||||
|
|
||||||
const next = state
|
const next = state
|
||||||
|
@@ -0,0 +1,28 @@
|
|||||||
|
|
||||||
|
import assert from 'assert'
|
||||||
|
|
||||||
|
export default function (state) {
|
||||||
|
const { document, selection } = state
|
||||||
|
const texts = document.getTexts()
|
||||||
|
const first = texts.get(2)
|
||||||
|
const last = texts.get(3)
|
||||||
|
const range = selection.merge({
|
||||||
|
anchorKey: first.key,
|
||||||
|
anchorOffset: 2,
|
||||||
|
focusKey: last.key,
|
||||||
|
focusOffset: 2
|
||||||
|
})
|
||||||
|
|
||||||
|
const next = state
|
||||||
|
.transform()
|
||||||
|
.moveTo(range)
|
||||||
|
.unwrapInline('hashtag')
|
||||||
|
.apply()
|
||||||
|
|
||||||
|
assert.deepEqual(
|
||||||
|
next.selection.toJS(),
|
||||||
|
range.toJS()
|
||||||
|
)
|
||||||
|
|
||||||
|
return next
|
||||||
|
}
|
@@ -0,0 +1,21 @@
|
|||||||
|
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: paragraph
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: he
|
||||||
|
- kind: inline
|
||||||
|
type: hashtag
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: ll
|
||||||
|
- kind: text
|
||||||
|
text: "o w"
|
||||||
|
- kind: inline
|
||||||
|
type: hashtag
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: or
|
||||||
|
- kind: text
|
||||||
|
text: d
|
@@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: paragraph
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: he
|
||||||
|
- kind: inline
|
||||||
|
type: hashtag
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: ll
|
||||||
|
- kind: text
|
||||||
|
text: "o word"
|
@@ -5,11 +5,12 @@ export default function (state) {
|
|||||||
const { document, selection } = state
|
const { document, selection } = state
|
||||||
const texts = document.getTexts()
|
const texts = document.getTexts()
|
||||||
const first = texts.first()
|
const first = texts.first()
|
||||||
|
const last = texts.get(1)
|
||||||
const range = selection.merge({
|
const range = selection.merge({
|
||||||
anchorKey: first.key,
|
anchorKey: first.key,
|
||||||
anchorOffset: 1,
|
anchorOffset: 1,
|
||||||
focusKey: first.key,
|
focusKey: last.key,
|
||||||
focusOffset: 3
|
focusOffset: 2
|
||||||
})
|
})
|
||||||
|
|
||||||
const next = state
|
const next = state
|
||||||
|
@@ -5,11 +5,12 @@ export default function (state) {
|
|||||||
const { document, selection } = state
|
const { document, selection } = state
|
||||||
const texts = document.getTexts()
|
const texts = document.getTexts()
|
||||||
const first = texts.first()
|
const first = texts.first()
|
||||||
|
const last = texts.get(1)
|
||||||
const range = selection.merge({
|
const range = selection.merge({
|
||||||
anchorKey: first.key,
|
anchorKey: first.key,
|
||||||
anchorOffset: 1,
|
anchorOffset: 1,
|
||||||
focusKey: first.key,
|
focusKey: last.key,
|
||||||
focusOffset: 3
|
focusOffset: 2
|
||||||
})
|
})
|
||||||
|
|
||||||
const next = state
|
const next = state
|
||||||
|
@@ -3,11 +3,12 @@ export default function (state) {
|
|||||||
const { document, selection } = state
|
const { document, selection } = state
|
||||||
const texts = document.getTexts()
|
const texts = document.getTexts()
|
||||||
const first = texts.first()
|
const first = texts.first()
|
||||||
|
const last = texts.get(1)
|
||||||
const range = selection.merge({
|
const range = selection.merge({
|
||||||
anchorKey: first.key,
|
anchorKey: first.key,
|
||||||
anchorOffset: 1,
|
anchorOffset: 1,
|
||||||
focusKey: first.key,
|
focusKey: last.key,
|
||||||
focusOffset: 3
|
focusOffset: 2
|
||||||
})
|
})
|
||||||
|
|
||||||
return state
|
return state
|
||||||
|
@@ -3,11 +3,12 @@ export default function (state) {
|
|||||||
const { document, selection } = state
|
const { document, selection } = state
|
||||||
const texts = document.getTexts()
|
const texts = document.getTexts()
|
||||||
const first = texts.first()
|
const first = texts.first()
|
||||||
|
const last = texts.get(1)
|
||||||
const range = selection.merge({
|
const range = selection.merge({
|
||||||
anchorKey: first.key,
|
anchorKey: first.key,
|
||||||
anchorOffset: 1,
|
anchorOffset: 1,
|
||||||
focusKey: first.key,
|
focusKey: last.key,
|
||||||
focusOffset: 3
|
focusOffset: 2
|
||||||
})
|
})
|
||||||
|
|
||||||
return state
|
return state
|
||||||
|
@@ -3,11 +3,12 @@ export default function (state) {
|
|||||||
const { document, selection } = state
|
const { document, selection } = state
|
||||||
const texts = document.getTexts()
|
const texts = document.getTexts()
|
||||||
const first = texts.first()
|
const first = texts.first()
|
||||||
|
const last = texts.get(1)
|
||||||
const range = selection.merge({
|
const range = selection.merge({
|
||||||
anchorKey: first.key,
|
anchorKey: first.key,
|
||||||
anchorOffset: 1,
|
anchorOffset: 1,
|
||||||
focusKey: first.key,
|
focusKey: last.key,
|
||||||
focusOffset: 3
|
focusOffset: 2
|
||||||
})
|
})
|
||||||
|
|
||||||
return state
|
return state
|
||||||
|
@@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
export default function (state) {
|
||||||
|
const { document, selection } = state
|
||||||
|
const block = document.nodes.get(0)
|
||||||
|
|
||||||
|
return state
|
||||||
|
.transform()
|
||||||
|
.unwrapBlockByKey(block, 'quote')
|
||||||
|
.apply()
|
||||||
|
}
|
@@ -0,0 +1,18 @@
|
|||||||
|
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: quote
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: paragraph
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: word
|
||||||
|
- kind: block
|
||||||
|
type: quote
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: paragraph
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: word
|
@@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: paragraph
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: word
|
||||||
|
- kind: block
|
||||||
|
type: quote
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: paragraph
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: word
|
@@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
import assert from 'assert'
|
||||||
|
|
||||||
|
export default function (state) {
|
||||||
|
const { document, selection } = state
|
||||||
|
const inline = document.assertPath([0, 1])
|
||||||
|
|
||||||
|
const next = state
|
||||||
|
.transform()
|
||||||
|
.unwrapInlineByKey(inline.key, 'hashtag')
|
||||||
|
.apply()
|
||||||
|
|
||||||
|
return next
|
||||||
|
}
|
@@ -0,0 +1,19 @@
|
|||||||
|
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: paragraph
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: w
|
||||||
|
- kind: inline
|
||||||
|
type: hashtag
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: or
|
||||||
|
- kind: text
|
||||||
|
text: d
|
||||||
|
- kind: inline
|
||||||
|
type: hashtag
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: another
|
@@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
nodes:
|
||||||
|
- kind: block
|
||||||
|
type: paragraph
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: word
|
||||||
|
- kind: inline
|
||||||
|
type: hashtag
|
||||||
|
nodes:
|
||||||
|
- kind: text
|
||||||
|
text: another
|
Reference in New Issue
Block a user