fix intersected Text decorations && add tests for that case (#3735)

packages/slate/src/interfaces/text.ts

@@ -122,15 +122,17 @@ export const Text: TextInterface = {
         o += length
 
         // If the range encompases the entire leaf, add the range.
-        if (start.offset <= offset && end.offset >= offset + length) {
+        if (start.offset <= offset && end.offset >= o) {
           Object.assign(leaf, rest)
           next.push(leaf)
           continue
         }
 
-        // If the range starts after the leaf, or ends before it, continue.
+        // If the range expanded and match the leaf, or starts after, or ends before it, continue.
         if (
-          start.offset > offset + length ||
+          (start.offset !== end.offset &&
+            (start.offset === o || end.offset === offset)) ||
+          start.offset > o ||
           end.offset < offset ||
           (end.offset === offset && offset !== 0)
         ) {
@@ -145,7 +147,7 @@ export const Text: TextInterface = {
         let before
         let after
 
-        if (end.offset < offset + length) {
+        if (end.offset < o) {
           const off = end.offset - offset
           after = { ...middle, text: middle.text.slice(off) }
           middle = { ...middle, text: middle.text.slice(0, off) }

packages/slate/test/interfaces/Text/decorations/adjacent.js

@@ -0,0 +1,51 @@
+import { Text } from 'slate'
+
+export const input = [
+  {
+    anchor: {
+      path: [0],
+      offset: 1,
+    },
+    focus: {
+      path: [0],
+      offset: 2,
+    },
+    decoration1: 'decoration1',
+  },
+  {
+    anchor: {
+      path: [0],
+      offset: 2,
+    },
+    focus: {
+      path: [0],
+      offset: 3,
+    },
+    decoration2: 'decoration2',
+  },
+]
+
+export const test = decorations => {
+  return Text.decorations({ text: 'abcd', mark: 'mark' }, decorations)
+}
+
+export const output = [
+  {
+    text: 'a',
+    mark: 'mark',
+  },
+  {
+    text: 'b',
+    mark: 'mark',
+    decoration1: 'decoration1',
+  },
+  {
+    text: 'c',
+    mark: 'mark',
+    decoration2: 'decoration2',
+  },
+  {
+    text: 'd',
+    mark: 'mark',
+  },
+]

packages/slate/test/interfaces/Text/decorations/collapse.js

@@ -0,0 +1,85 @@
+import { Text } from 'slate'
+
+export const input = [
+  {
+    anchor: {
+      path: [0],
+      offset: 1,
+    },
+    focus: {
+      path: [0],
+      offset: 2,
+    },
+    decoration1: 'decoration1',
+  },
+  {
+    anchor: {
+      path: [0],
+      offset: 2,
+    },
+    focus: {
+      path: [0],
+      offset: 2,
+    },
+    decoration2: 'decoration2',
+  },
+  {
+    anchor: {
+      path: [0],
+      offset: 2,
+    },
+    focus: {
+      path: [0],
+      offset: 3,
+    },
+    decoration3: 'decoration3',
+  },
+  {
+    anchor: {
+      path: [0],
+      offset: 4,
+    },
+    focus: {
+      path: [0],
+      offset: 4,
+    },
+    decoration4: 'decoration4',
+  },
+]
+
+export const test = decorations => {
+  return Text.decorations({ text: 'abcd', mark: 'mark' }, decorations)
+}
+
+export const output = [
+  {
+    text: 'a',
+    mark: 'mark',
+  },
+  {
+    text: 'b',
+    mark: 'mark',
+    decoration1: 'decoration1',
+  },
+  {
+    text: '',
+    mark: 'mark',
+    decoration1: 'decoration1',
+    decoration2: 'decoration2',
+    decoration3: 'decoration3',
+  },
+  {
+    text: 'c',
+    mark: 'mark',
+    decoration3: 'decoration3',
+  },
+  {
+    text: 'd',
+    mark: 'mark',
+  },
+  {
+    text: '',
+    mark: 'mark',
+    decoration4: 'decoration4',
+  },
+]

packages/slate/test/interfaces/Text/decorations/intersect.js

@@ -0,0 +1,95 @@
+import { Text } from 'slate'
+
+export const input = [
+  {
+    anchor: {
+      path: [0],
+      offset: 1,
+    },
+    focus: {
+      path: [0],
+      offset: 5,
+    },
+    decoration1: 'decoration1',
+  },
+  {
+    anchor: {
+      path: [0],
+      offset: 1,
+    },
+    focus: {
+      path: [0],
+      offset: 3,
+    },
+    decoration2: 'decoration2',
+  },
+  {
+    anchor: {
+      path: [0],
+      offset: 2,
+    },
+    focus: {
+      path: [0],
+      offset: 2,
+    },
+    decoration3: 'decoration3',
+  },
+  {
+    anchor: {
+      path: [0],
+      offset: 2,
+    },
+    focus: {
+      path: [0],
+      offset: 4,
+    },
+    decoration4: 'decoration4',
+  },
+]
+
+export const test = decorations => {
+  return Text.decorations({ text: 'abcdef', mark: 'mark' }, decorations)
+}
+
+export const output = [
+  {
+    text: 'a',
+    mark: 'mark',
+  },
+  {
+    text: 'b',
+    mark: 'mark',
+    decoration1: 'decoration1',
+    decoration2: 'decoration2',
+  },
+  {
+    text: '',
+    mark: 'mark',
+    decoration1: 'decoration1',
+    decoration2: 'decoration2',
+    decoration3: 'decoration3',
+    decoration4: 'decoration4',
+  },
+  {
+    text: 'c',
+    mark: 'mark',
+    decoration1: 'decoration1',
+    decoration2: 'decoration2',
+    decoration4: 'decoration4',
+  },
+  {
+    text: 'd',
+    mark: 'mark',
+    decoration1: 'decoration1',
+    decoration4: 'decoration4',
+  },
+  {
+    text: 'e',
+    mark: 'mark',
+    decoration1: 'decoration1',
+  },
+  {
+    text: 'f',
+    mark: 'mark',
+  },
+]