fix(editor): avoid extra newline when splitting block at the edge of …

…decorator
portabletext · Sep 11, 2024 · 0fd05f0 · 0fd05f0
1 parent 0ec7e70
commit 0fd05f0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/editor/e2e-tests/__tests__/decorators.feature b/packages/editor/e2e-tests/__tests__/decorators.feature
@@ -129,6 +129,21 @@ Feature: Decorators
     And "bar" has marks "strong"
     And "foo" has marks "strong"
 
+  Scenario Outline: Splitting block at the edge of decorator
+    Given the text "foo bar baz"
+    And "strong" around "bar"
+    When the caret is put <position>
+    And "Enter" is pressed
+    Then the text is <new text>
+    And the caret is <new position>
+
+    Examples:
+      | position      | new text            | new position  |
+      | after "foo "  | "foo ,\\n,bar, baz" | before "bar"  |
+      | before "bar"  | "foo ,\\n,bar, baz" | before "bar"  |
+      | after "bar"   | "foo ,bar,\\n, baz" | before " baz" |
+      | before " baz" | "foo ,bar,\\n, baz" | before " baz" |
+
   Scenario: Toggling decorators in empty block
     Given an empty editor
     When "foo" is typed

diff --git a/packages/editor/src/editor/plugins/createWithInsertBreak.ts b/packages/editor/src/editor/plugins/createWithInsertBreak.ts
@@ -28,9 +28,12 @@ export function createWithInsertBreak(
 
       if (editor.isTextBlock(focusBlock)) {
         const [start, end] = Range.edges(editor.selection)
-        const isEndAtStartOfNode = Editor.isStart(editor, end, end.path)
+        const isEndAtStartOfBlock = isEqual(end, {
+          path: [...focusBlockPath, 0],
+          offset: 0,
+        })
 
-        if (isEndAtStartOfNode && Range.isCollapsed(editor.selection)) {
+        if (isEndAtStartOfBlock && Range.isCollapsed(editor.selection)) {
           const focusDecorators = editor.isTextSpan(focusBlock.children[0])
             ? (focusBlock.children[0].marks ?? []).filter((mark) =>
                 types.decorators.some((decorator) => decorator.value === mark),
@@ -53,8 +56,15 @@ export function createWithInsertBreak(
           return
         }
 
-        const isStartAtEndOfNode = Editor.isEnd(editor, start, start.path)
-        const isInTheMiddleOfNode = !isEndAtStartOfNode && !isStartAtEndOfNode
+        const lastFocusBlockChild =
+          focusBlock.children[focusBlock.children.length - 1]
+        const isStartAtEndOfBlock = isEqual(start, {
+          path: [...focusBlockPath, focusBlock.children.length - 1],
+          offset: editor.isTextSpan(lastFocusBlockChild)
+            ? lastFocusBlockChild.text.length
+            : 0,
+        })
+        const isInTheMiddleOfNode = !isEndAtStartOfBlock && !isStartAtEndOfBlock
 
         if (isInTheMiddleOfNode) {
           Editor.withoutNormalizing(editor, () => {
@@ -72,6 +82,11 @@ export function createWithInsertBreak(
               {depth: 1},
             )
 
+            Transforms.setSelection(editor, {
+              anchor: {path: [...nextNodePath, 0], offset: 0},
+              focus: {path: [...nextNodePath, 0], offset: 0},
+            })
+
             /**
              * Assign new keys to markDefs that are now split across two blocks
              */