1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-30 02:19:52 +02:00

add paths to ranges (#1997)

#### Is this adding or improving a _feature_ or fixing a _bug_?

Feature.

#### What's the new behavior?

This pull request adds paths to `Range` objects, including the selection. The paths and keys are kept in sync automatically, so that you can use whichever is ideal for your use case.

This should allow us to use paths for lots of the internal logic, which are much quicker to work with than keys since they avoid having to lookup the key in the document and can just traverse right to the node in question.

#### How does this change work?

`Range` objects have two new properties:

```js
range.anchorPath
range.focusPath
```

(Eventually these will be `range.anchor.path` and `range.focus.path` when points are introduced.)

When operations occur and whenever ranges are created/normalized, the paths are updated and kept in sync with the keys.

#### Have you checked that...?

<!-- 
Please run through this checklist for your pull request: 
-->

* [x] The new code matches the existing patterns and styles.
* [x] The tests pass with `yarn test`.
* [x] The linter passes with `yarn lint`. (Fix errors with `yarn prettier`.)
* [x] The relevant examples still work. (Run examples with `yarn watch`.)

#### Does this fix any issues or need any specific reviewers?

Fixes: https://github.com/ianstormtaylor/slate/issues/1408
Fixes: https://github.com/ianstormtaylor/slate/issues/1567
This commit is contained in:
Ian Storm Taylor
2018-07-27 12:40:04 -07:00
committed by GitHub
parent 05b8b8ce7e
commit 01405be31b
96 changed files with 5098 additions and 3419 deletions

View File

@@ -4,11 +4,19 @@ This document maintains a list of changes to the `slate-hyperscript` package wit
---
### `0.6.0` — July 27, 2018
###### NEW
**Updated to work with the `slate@0.35.0` with paths.** The original logic for selections and decorations didn't account for paths properly. This isn't a breaking change, but to use this library with the latest Slate you'll need to upgrade.
---
### `0.5.0` — January 4, 2018
###### BREAKING
* **The `kind` property of Slate objects has been renamed to `object`.** This is to reduce the confusion over the difference between "kind" and "type" which are practically synonyms. The "object" name was chosen to match the Stripe API, since it seems like a sensible choice and reads much more nicely when looking through JSON.
**The `kind` property of Slate objects has been renamed to `object`.** This is to reduce the confusion over the difference between "kind" and "type" which are practically synonyms. The "object" name was chosen to match the Stripe API, since it seems like a sensible choice and reads much more nicely when looking through JSON.
---
@@ -16,7 +24,7 @@ This document maintains a list of changes to the `slate-hyperscript` package wit
###### BREAKING
* **Remove all previously deprecated code paths.** This helps to reduce some of the complexity in Slate by not having to handle these code paths anymore. And it helps to reduce file size. When upgrading, it's _highly_ recommended that you upgrade to the previous version first and ensure there are no deprecation warnings being logged, then upgrade to this version.
**Remove all previously deprecated code paths.** This helps to reduce some of the complexity in Slate by not having to handle these code paths anymore. And it helps to reduce file size. When upgrading, it's _highly_ recommended that you upgrade to the previous version first and ensure there are no deprecation warnings being logged, then upgrade to this version.
---
@@ -24,11 +32,11 @@ This document maintains a list of changes to the `slate-hyperscript` package wit
###### BREAKING
* **Updated to work with `slate@0.29.0`.** This is required because `slate-hyperscript` needs access to the new `Value` model.
**Updated to work with `slate@0.29.0`.** This is required because `slate-hyperscript` needs access to the new `Value` model.
###### DEPRECATED
* **The `<state>` tag has been renamed to `<value>`.** This is to stay in line with the newest version of Slate where the `State` object was renamed to `Value`.
**The `<state>` tag has been renamed to `<value>`.** This is to stay in line with the newest version of Slate where the `State` object was renamed to `Value`.
---
@@ -36,7 +44,7 @@ This document maintains a list of changes to the `slate-hyperscript` package wit
###### BREAKING
* **Updated work with `slate@0.27.0`.** The new version of Slate renames the old `Range` model to `Leaf`, and the old `Selection` model to `Range`.
**Updated work with `slate@0.27.0`.** The new version of Slate renames the old `Range` model to `Leaf`, and the old `Selection` model to `Range`.
---

View File

@@ -18,7 +18,7 @@
"slate-dev-logger": "^0.1.39"
},
"peerDependencies": {
"slate": ">=0.32.0"
"slate": ">=0.35.0"
},
"devDependencies": {
"mocha": "^2.5.3",

View File

@@ -201,18 +201,17 @@ const CREATORS = {
)
}
if (!isEmpty(props)) {
selection = selection.merge(props).normalize(document)
}
let value = Value.fromJSON({ data, document, selection }, { normalize })
// apply any decorations built
if (!isEmpty(props)) {
selection = selection.merge(props).normalize(value.document)
value = value.set('selection', selection)
}
if (decorations.length > 0) {
value = value
.change()
.setValue({ decorations: decorations.map(d => d.normalize(document)) })
.value
decorations = decorations.map(d => d.normalize(value.document))
decorations = Range.createList(decorations)
value = value.set('decorations', decorations)
}
return value

View File

@@ -4,7 +4,7 @@ import h from '../..'
export const input = (
<document>
<block type="paragraph">Single block</block>
<block type="paragraph">word</block>
</document>
)
@@ -23,7 +23,7 @@ export const output = {
leaves: [
{
object: 'leaf',
text: 'Single block',
text: 'word',
marks: [],
},
],

View File

@@ -6,42 +6,38 @@ export const input = (
<value>
<document>
<block type="paragraph">
<text>
This is{' '}
<text key="100">
a paragraph with a cursor position (closed selection).
</text>
</text>
w<anchor />or<focus />d
</block>
</document>
<selection
anchorKey="100"
anchorOffset={30}
focusKey="100"
focusOffset={30}
/>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '3',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text:
'This is a paragraph with a cursor position (closed selection).',
text: 'word',
marks: [],
},
],
@@ -50,12 +46,17 @@ export const output = {
},
],
},
}
export const expectSelection = {
isCollapsed: true,
anchorOffset: 30,
focusOffset: 30,
anchorKey: input.texts.get(0).key,
focusKey: input.texts.get(0).key,
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 1,
focusKey: '0',
focusPath: [0, 0],
focusOffset: 3,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,151 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
<inline type="link">
on<anchor />e
</inline>
</block>
<block type="paragraph">
<inline type="link">
t<focus />wo
</inline>
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '10',
data: {},
nodes: [
{
object: 'block',
key: '3',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '11',
leaves: [
{
object: 'leaf',
text: '',
marks: [],
},
],
},
{
object: 'inline',
key: '1',
type: 'link',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
{
object: 'text',
key: '12',
leaves: [
{
object: 'leaf',
text: '',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '7',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '13',
leaves: [
{
object: 'leaf',
text: '',
marks: [],
},
],
},
{
object: 'inline',
key: '5',
type: 'link',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '4',
leaves: [
{
object: 'leaf',
text: 'two',
marks: [],
},
],
},
],
},
{
object: 'text',
key: '14',
leaves: [
{
object: 'leaf',
text: '',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 1, 0],
anchorOffset: 2,
focusKey: '4',
focusPath: [1, 1, 0],
focusOffset: 1,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -6,33 +6,41 @@ export const input = (
<value>
<document>
<block type="paragraph">
This is one <anchor />block.
one<anchor />
</block>
<block type="paragraph">
This is block<focus /> two.
two<focus />
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '6',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'This is one block.',
text: 'one',
marks: [],
},
],
@@ -41,16 +49,18 @@ export const output = {
},
{
object: 'block',
key: '3',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '2',
leaves: [
{
object: 'leaf',
text: 'This is block two.',
text: 'two',
marks: [],
},
],
@@ -59,12 +69,17 @@ export const output = {
},
],
},
}
export const expectSelection = {
isCollapsed: false,
anchorOffset: 12,
focusOffset: 13,
anchorKey: input.texts.get(0).key,
focusKey: input.texts.get(1).key,
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 3,
focusKey: '2',
focusPath: [1, 0],
focusOffset: 3,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,85 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
on<anchor />e
</block>
<block type="paragraph">
t<focus />wo
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '6',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '3',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '2',
leaves: [
{
object: 'leaf',
text: 'two',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 2,
focusKey: '2',
focusPath: [1, 0],
focusOffset: 1,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,85 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
<anchor />one
</block>
<block type="paragraph">
<focus />two
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '6',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '3',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '2',
leaves: [
{
object: 'leaf',
text: 'two',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 0,
focusKey: '2',
focusPath: [1, 0],
focusOffset: 0,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,106 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
one<anchor />
</block>
<block type="paragraph">two</block>
<block type="paragraph">
three<focus />
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '9',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '3',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '2',
leaves: [
{
object: 'leaf',
text: 'two',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '5',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '4',
leaves: [
{
object: 'leaf',
text: 'three',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 3,
focusKey: '4',
focusPath: [2, 0],
focusOffset: 5,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,106 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
on<anchor />e
</block>
<block type="paragraph">two</block>
<block type="paragraph">
t<focus />hree
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '9',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '3',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '2',
leaves: [
{
object: 'leaf',
text: 'two',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '5',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '4',
leaves: [
{
object: 'leaf',
text: 'three',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 2,
focusKey: '4',
focusPath: [2, 0],
focusOffset: 1,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,106 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
<anchor />one
</block>
<block type="paragraph">two</block>
<block type="paragraph">
<focus />three
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '9',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '3',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '2',
leaves: [
{
object: 'leaf',
text: 'two',
marks: [],
},
],
},
],
},
{
object: 'block',
key: '5',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '4',
leaves: [
{
object: 'leaf',
text: 'three',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 0,
focusKey: '4',
focusPath: [2, 0],
focusOffset: 0,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -6,31 +6,38 @@ export const input = (
<value>
<document>
<block type="paragraph">
This is a paragraph with a cursor position <cursor />(closed selection).
one<cursor />
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '3',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text:
'This is a paragraph with a cursor position (closed selection).',
text: 'one',
marks: [],
},
],
@@ -39,12 +46,17 @@ export const output = {
},
],
},
}
export const expectSelection = {
isCollapsed: true,
anchorOffset: 43,
focusOffset: 43,
anchorKey: input.texts.get(0).key,
focusKey: input.texts.get(0).key,
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 3,
focusKey: '0',
focusPath: [0, 0],
focusOffset: 3,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,62 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
o<cursor />ne
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '3',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 1,
focusKey: '0',
focusPath: [0, 0],
focusOffset: 1,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,62 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
<cursor />one
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '3',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 0,
focusKey: '0',
focusPath: [0, 0],
focusOffset: 0,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,68 @@
/** @jsx h */
import { createHyperscript } from '../..'
const h = createHyperscript({
blocks: {
paragraph: 'paragraph',
},
})
export const input = (
<value>
<document>
<paragraph>
o<cursor />ne
</paragraph>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '3',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 1,
focusKey: '0',
focusPath: [0, 0],
focusOffset: 1,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -0,0 +1,97 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
one
<inline type="link">
t<cursor />wo
</inline>
three
</block>
</document>
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
data: {},
key: '6',
nodes: [
{
object: 'block',
key: '4',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '2',
leaves: [
{
object: 'leaf',
text: 'one',
marks: [],
},
],
},
{
object: 'inline',
key: '1',
type: 'link',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text: 'two',
marks: [],
},
],
},
],
},
{
object: 'text',
key: '3',
leaves: [
{
object: 'leaf',
text: 'three',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: '0',
anchorPath: [0, 1, 0],
anchorOffset: 1,
focusKey: '0',
focusPath: [0, 1, 0],
focusOffset: 1,
isBackward: false,
isFocused: true,
isAtomic: false,
marks: null,
},
}

View File

@@ -15,32 +15,38 @@ export const input = (
<value>
<document>
<block type="paragraph">
This is a <highlight>paragraph with</highlight> a cursor position{' '}
<cursor />(closed selection).
one<highlight>two</highlight>three
</block>
</document>
</value>
)
export const options = {
preserveDecorations: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '3',
data: {},
nodes: [
{
object: 'block',
key: '1',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
text:
'This is a paragraph with a cursor position (closed selection).',
text: 'onetwothree',
marks: [],
},
],
@@ -49,20 +55,25 @@ export const output = {
},
],
},
decorations: [
{
object: 'range',
anchorKey: '0',
anchorPath: [0, 0],
anchorOffset: 3,
focusKey: '0',
focusPath: [0, 0],
focusOffset: 6,
isBackward: false,
isFocused: false,
isAtomic: false,
marks: [
{
object: 'mark',
type: 'highlight',
data: {},
},
],
},
],
}
export const expectDecorations = [
{
anchorOffset: 10,
focusOffset: 24,
anchorKey: input.texts.get(0).key,
focusKey: input.texts.get(0).key,
marks: [
{
object: 'mark',
type: 'highlight',
data: {},
},
],
},
]

View File

@@ -5,9 +5,8 @@ import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
This is a <anchor />paragraph<focus /> with an open selection.
</block>
<block type="paragraph">word</block>
<text>invalid</text>
</document>
</value>
)
@@ -29,7 +28,7 @@ export const output = {
leaves: [
{
object: 'leaf',
text: 'This is a paragraph with an open selection.',
text: 'word',
marks: [],
},
],
@@ -39,11 +38,3 @@ export const output = {
],
},
}
export const expectSelection = {
isCollapsed: false,
anchorOffset: 10,
focusOffset: 19,
anchorKey: input.texts.get(0).key,
focusKey: input.texts.get(0).key,
}

View File

@@ -0,0 +1,50 @@
/** @jsx h */
import h from '../..'
export const input = (
<value normalize={false}>
<document>
<block type="paragraph">word</block>
<text>invalid</text>
</document>
</value>
)
export const output = {
object: 'value',
document: {
object: 'document',
data: {},
nodes: [
{
object: 'block',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
leaves: [
{
object: 'leaf',
text: 'word',
marks: [],
},
],
},
],
},
{
object: 'text',
leaves: [
{
object: 'leaf',
text: 'invalid',
marks: [],
},
],
},
],
},
}

View File

@@ -0,0 +1,63 @@
/** @jsx h */
import h from '../..'
export const input = (
<value>
<document>
<block type="paragraph">
one<text key="a">two</text>three
</block>
</document>
<selection anchorKey="a" anchorOffset={1} focusKey="a" focusOffset={2} />
</value>
)
export const options = {
preserveSelection: true,
preserveKeys: true,
}
export const output = {
object: 'value',
document: {
object: 'document',
key: '2',
data: {},
nodes: [
{
object: 'block',
key: '0',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: 'a',
leaves: [
{
object: 'leaf',
text: 'onetwothree',
marks: [],
},
],
},
],
},
],
},
selection: {
object: 'range',
anchorKey: 'a',
anchorPath: [0, 0],
anchorOffset: 1,
focusKey: 'a',
focusPath: [0, 0],
focusOffset: 2,
isBackward: false,
isFocused: false,
isAtomic: false,
marks: null,
},
}

View File

@@ -1,7 +1,5 @@
/** @jsx h */
import assert from 'assert'
import h from '../..'
export const input = (
@@ -13,24 +11,25 @@ export const input = (
</document>
)
export function test() {
const block = input.nodes.first()
assert.notEqual(block.nodes.first().key, 'a')
assert.equal(block.nodes.last().key, 'a')
export const options = {
preserveKeys: true,
}
export const output = {
object: 'document',
key: '6',
data: {},
nodes: [
{
object: 'block',
key: '4',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
key: '2',
leaves: [
{
object: 'leaf',
@@ -41,12 +40,14 @@ export const output = {
},
{
object: 'inline',
key: '1',
type: 'link',
data: {},
isVoid: false,
nodes: [
{
object: 'text',
key: '0',
leaves: [
{
object: 'leaf',
@@ -59,6 +60,7 @@ export const output = {
},
{
object: 'text',
key: 'a',
leaves: [
{
object: 'leaf',

View File

@@ -1,91 +1,37 @@
/**
* Dependencies.
*/
import assert from 'assert'
import fs from 'fs'
import { Value } from 'slate'
import { Value, KeyUtils } from 'slate'
import { basename, extname, resolve } from 'path'
/**
* Tests.
*/
beforeEach(KeyUtils.resetGenerator)
describe('slate-hyperscript', () => {
describe('default settings', () => {
const dir = resolve(__dirname, './default')
const tests = fs
.readdirSync(dir)
const dir = resolve(__dirname, './fixtures')
const tests = fs
.readdirSync(dir)
.filter(t => t[0] != '.')
.map(t => basename(t, extname(t)))
for (const test of tests) {
it(test, async () => {
const module = require(resolve(dir, test))
const { input, output, options } = module
const actual = input.toJSON(options)
const expected = Value.isValue(output) ? output.toJSON() : output
assert.deepEqual(actual, expected)
})
}
describe.skip('decorations', () => {
const decDir = resolve(__dirname, './decorations')
const decTests = fs
.readdirSync(decDir)
.filter(t => t[0] != '.')
.map(t => basename(t, extname(t)))
for (const test of tests) {
for (const test of decTests) {
it(test, async () => {
const module = require(resolve(dir, test))
const { input, output } = module
const actual = input.toJSON()
const expected = Value.isValue(output) ? output.toJSON() : output
assert.deepEqual(actual, expected)
if (module.test) module.test()
})
}
})
describe('custom tags', () => {
const dir = resolve(__dirname, './custom')
const tests = fs
.readdirSync(dir)
.filter(t => t[0] != '.')
.map(t => basename(t, extname(t)))
for (const test of tests) {
it(test, async () => {
const module = require(resolve(dir, test))
const { input, output } = module
const actual = input.toJSON()
const expected = Value.isValue(output) ? output.toJSON() : output
assert.deepEqual(actual, expected)
})
}
})
describe('selections', () => {
const dir = resolve(__dirname, './selections')
const tests = fs
.readdirSync(dir)
.filter(t => t[0] != '.')
.map(t => basename(t, extname(t)))
for (const test of tests) {
it(test, async () => {
const module = require(resolve(dir, test))
const { input, output, expectSelection } = module
// ensure deserialization was okay
const actual = input.toJSON()
const expected = Value.isValue(output) ? output.toJSON() : output
assert.deepEqual(actual, expected)
// ensure expected properties of selection match
Object.keys(expectSelection).forEach(prop => {
assert.equal(input.selection[prop], expectSelection[prop])
})
})
}
})
describe('decorations', () => {
const dir = resolve(__dirname, './decorations')
const tests = fs
.readdirSync(dir)
.filter(t => t[0] != '.')
.map(t => basename(t, extname(t)))
for (const test of tests) {
it(test, async () => {
const module = require(resolve(dir, test))
const module = require(resolve(decDir, test))
const { input, output, expectDecorations } = module
// ensure deserialization was okay
@@ -107,23 +53,4 @@ describe('slate-hyperscript', () => {
})
}
})
describe('normalize', () => {
const dir = resolve(__dirname, './normalize')
const tests = fs
.readdirSync(dir)
.filter(t => t[0] != '.')
.map(t => basename(t, extname(t)))
for (const test of tests) {
it(test, async () => {
const module = require(resolve(dir, test))
const { input, output } = module
const actual = Value.isValue(input) ? input.toJSON() : input
const expected = Value.isValue(output) ? output.toJSON() : output
assert.deepEqual(actual, expected)
})
}
})
})

View File

@@ -1,24 +0,0 @@
/** @jsx h */
import h from '../..'
import { Value, Document, Block, Text } from 'slate'
export const input = (
<value>
<document>
<block type="paragraph">Valid block</block>
<text>Invalid text</text>
</document>
</value>
)
export const output = Value.create({
document: Document.create({
nodes: [
Block.create({
type: 'paragraph',
nodes: [Text.create('Valid block')],
}),
],
}),
})

View File

@@ -1,28 +0,0 @@
/** @jsx h */
import h from '../..'
import { Value, Document, Block, Text } from 'slate'
export const input = (
<value normalize={false}>
<document>
<block type="paragraph">Valid block</block>
<text>Invalid text</text>
</document>
</value>
)
export const output = Value.fromJSON(
{
document: Document.create({
nodes: [
Block.create({
type: 'paragraph',
nodes: [Text.create('Valid block')],
}),
Text.create('Invalid text'),
],
}),
},
{ normalize: false }
)

View File

@@ -1,97 +0,0 @@
/** @jsx h */
import { createHyperscript } from '../..'
const h = createHyperscript({
blocks: {
paragraph: 'paragraph',
},
marks: {
b: 'bold',
},
})
export const input = (
<value>
<document>
<paragraph>First paragraph</paragraph>
<paragraph>
This is a paragraph with a cursor{' '}
<b>
positi<cursor />on
</b>{' '}
within a mark.
</paragraph>
</document>
</value>
)
export const output = {
object: 'value',
document: {
object: 'document',
data: {},
nodes: [
{
object: 'block',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
leaves: [
{
object: 'leaf',
text: 'First paragraph',
marks: [],
},
],
},
],
},
{
object: 'block',
type: 'paragraph',
isVoid: false,
data: {},
nodes: [
{
object: 'text',
leaves: [
{
object: 'leaf',
text: 'This is a paragraph with a cursor ',
marks: [],
},
{
object: 'leaf',
text: 'position',
marks: [
{
object: 'mark',
type: 'bold',
data: {},
},
],
},
{
object: 'leaf',
text: ' within a mark.',
marks: [],
},
],
},
],
},
],
},
}
export const expectSelection = {
isCollapsed: true,
anchorOffset: 40,
focusOffset: 40,
anchorKey: input.texts.get(0).key,
focusKey: input.texts.get(0).key,
}