Skip to content

Preserve trailing space in last paragraph segment by converting to nbsp (#3235)#3287

Merged
BryanValverdeU merged 4 commits intomasterfrom
u/bvalverde/fixTrailingSpaceRemoved
Feb 25, 2026
Merged

Preserve trailing space in last paragraph segment by converting to nbsp (#3235)#3287
BryanValverdeU merged 4 commits intomasterfrom
u/bvalverde/fixTrailingSpaceRemoved

Conversation

@BryanValverdeU
Copy link
Contributor

When the last text segment in a paragraph ends with a regular space, browsers collapse it during rendering. This change detects that case in handleText and replaces the trailing space with a non-breaking space (\u00A0) so it is preserved in the output.

To support this, a new ModelToDomSegmentContext interface is introduced that extends ModelToDomContext with an isLastSegment flag. handleParagraph sets this flag for each segment before dispatching, and ContentModelSegmentHandler is updated to use ModelToDomSegmentContext as its context type, eliminating the need for type casts in the handlers.

import this model:

{
    "blockGroupType": "Document",
    "blocks": [
        {
            "blockType": "Paragraph",
            "segments": [
                {
                    "segmentType": "Text",
                    "text": "Could you please provide more information ",
                    "format": {
                        "fontFamily": "Corbel, Skia, sans-serif",
                        "fontSize": "12pt",
                        "textColor": "rgb(94, 50, 124)"
                    }
                }
            ],
            "format": {
                "isProofing": true
            },
            "segmentFormat": {
                "fontFamily": "Corbel, Skia, sans-serif",
                "fontSize": "12pt",
                "textColor": "rgb(94, 50, 124)"
            }
        },
        {
            "blockType": "Paragraph",
            "segments": [
                {
                    "segmentType": "SelectionMarker",
                    "isSelected": true,
                    "format": {
                        "fontFamily": "Corbel, Skia, sans-serif",
                        "fontSize": "12pt",
                        "textColor": "rgb(94, 50, 124)"
                    }
                }
            ],
            "format": {
                "isProofing": true
            },
            "segmentFormat": {
                "fontFamily": "Corbel, Skia, sans-serif",
                "fontSize": "12pt",
                "textColor": "rgb(94, 50, 124)"
            }
        }
    ],
    "format": {
        "fontFamily": "'Corbel', 'Skia', sans-serif",
        "fontSize": "12pt",
        "textColor": "#5e327c"
    }
}

Before
image

After
image

When the last text segment in a paragraph ends with a regular space,
browsers collapse it during rendering. This change detects that case in
handleText and replaces the trailing space with a non-breaking space
(\u00A0) so it is preserved in the output.

To support this, a new ModelToDomSegmentContext interface is introduced
that extends ModelToDomContext with an isLastSegment flag. handleParagraph
sets this flag for each segment before dispatching, and ContentModelSegmentHandler
is updated to use ModelToDomSegmentContext as its context type, eliminating
the need for type casts in the handlers.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the content-model-to-DOM conversion pipeline to preserve a trailing space at the end of the last text segment in a paragraph by converting that final space to a non-breaking space (\u00A0). To enable this, it introduces a segment-scoped conversion context that can carry an isLastSegment flag.

Changes:

  • Add ModelToDomSegmentContext (extends ModelToDomContext) and update segment handler typing to use it.
  • Set/clear an isLastSegment flag while iterating paragraph segments, and use it in handleText to convert a trailing space to NBSP.
  • Add unit tests for handleText covering the NBSP conversion behavior.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/roosterjs-content-model-types/lib/index.ts Re-export new ModelToDomSegmentContext type.
packages/roosterjs-content-model-types/lib/context/ModelToDomContext.ts Introduce ModelToDomSegmentContext with optional isLastSegment.
packages/roosterjs-content-model-types/lib/context/ContentModelHandler.ts Update ContentModelSegmentHandler to take ModelToDomSegmentContext.
packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleText.ts Convert trailing space to NBSP when isLastSegment is true.
packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleParagraph.ts Set isLastSegment while dispatching segment handlers.
packages/roosterjs-content-model-dom/test/modelToDom/handlers/handleTextTest.ts Add tests validating NBSP conversion behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…OrLast

Refactor handleParagraph to track whether a text segment is the last in the
paragraph or has no following text segment (excluding SelectionMarkers).
This ensures trailing spaces are converted to &nbsp; not only for the very
last segment, but also when the next non-marker segment is not a Text segment.

- Convert forEach to for loop in handleParagraph for segment iteration
- Extract hasTextSegmentAfter helper to check for upcoming text segments
- Add noFollowingTextSegmentOrLast property to ModelToDomSegmentContext
- Update handleText to use the new property name
- Fix stale isLastSegment references in handleTextTest
- Add comprehensive tests for noFollowingTextSegmentOrLast in handleParagraphTest
@BryanValverdeU BryanValverdeU merged commit 1d54415 into master Feb 25, 2026
7 checks passed
Copilot AI mentioned this pull request Feb 26, 2026
ianeli1 added a commit that referenced this pull request Mar 2, 2026
* Fix publish file (#3267)

* fix publish file

* remove file

* [Table Improvements] Add undoSnapshot when tab on a table cell (#3265)

Add undoSnapshot after pressing Tab key in a table that has new content, otherwise if the user type content in a table and press tab to move to another cell and then undo the content, all the typed content will be removed.

* [Table Improvements] Use keyboard to delete rows and columns (#3270)

When press backspace or shift + delete when an entire row or column, delete the column and row.

* [Table Improvements] Add Shift Cells Table Operation (#3271)

Add new shift cells up and shift cells left table operations. These operations move the table cell content to the cells at left or above.

* align table cell list (#3275)

When apply alignment in table cells that has list items, also apply the alignment to the list items.

* fill gaps (#3272)

* Bump lodash from 4.17.21 to 4.17.23 (#3266)

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.21 to 4.17.23.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.21...4.17.23)

---
updated-dependencies:
- dependency-name: lodash
  dependency-version: 4.17.23
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jiuqing Song <jisong@microsoft.com>

* fix table format (#3277)

When triggering clearFormat on table cells, do not clear the cell or the table format.

* [Table Improvements] Add preview for table cell selection (#3274)

When start shadow edit, check if table cells are selected, if they are selected, remove the background color to make the styles changes visible in the table.

* Fix outdated JSDoc comments in setTableCellsStyle.ts (#3278)

 Fix JSDoc comments for removeTableCellsStyle function to match actual parameters
 Fix JSDoc comments for setTableCellsStyle function to match actual parameters

* Fix 329516 (#3276)

Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>

* [Table Improvements] Insert table content (#3258)

When inserting a table in a range selection, insert the selected content inside the table.

* Bump webpack from 5.94.0 to 5.104.1 (#3285)

Bumps [webpack](https://github.com/webpack/webpack) from 5.94.0 to 5.104.1.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md)
- [Commits](webpack/webpack@v5.94.0...v5.104.1)

---
updated-dependencies:
- dependency-name: webpack
  dependency-version: 5.104.1
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Filter temporary EOP elements in Word Online paste and add test pattern support (#3283)

* Filter temporary EOP elements in Word Online paste and add test pattern support

- Skip elements with both 'Selected' and 'EOP' classes during WAC paste processing to remove temporary End of Paragraph markers
- Add unit tests for EOP element filtering behavior (3 test cases)
- Enhance test runner with --testPathPattern and --testNamePattern flags for faster targeted test execution

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* Update packages/roosterjs-content-model-plugins/lib/paste/WacComponents/processPastedContentWacComponents.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Dark color improvement (#3279)

* Dark color improvement

* improve

* Fix #3280 (#3282)

* [Table Improvements] Ignore span cells when merge table cells (#3281)

When merging table cells, count table that are span as one cell, so two or more cells cannot be merge to one single span cell.

* Preserve cursor position when navigating tables  (#3284)

When pressing key up or key down in table cells that have text, preserve the cursor position.

* Add adjustWordListMarginParser to fix duplicate list indentation when pasting from Word Desktop (#3288)

Word Desktop pastes list items with full indentation as marginLeft on MsoListParagraph
elements, which duplicates the paddingInlineStart (40px) already applied by the
browser's default list styling. This parser subtracts the default 40px from the
marginLeft of list items with the MsoListParagraph class to correct the indentation.

- Add adjustWordListMarginParser using parseValueWithUnit for unit conversion
- Register parser for listItemElement in processPastedContentFromWordDesktop
- Update addParser call count expectations in pasteTest and ContentModelPastePluginTest
- Add dedicated test case for the margin adjustment behavior

* Remove mutations that is not under editor (#3290)

Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>

* Preserve trailing space in last paragraph segment by converting to nbsp (#3235) (#3287)

* Preserve trailing space in last paragraph segment by converting to nbsp

When the last text segment in a paragraph ends with a regular space,
browsers collapse it during rendering. This change detects that case in
handleText and replaces the trailing space with a non-breaking space
(\u00A0) so it is preserved in the output.

To support this, a new ModelToDomSegmentContext interface is introduced
that extends ModelToDomContext with an isLastSegment flag. handleParagraph
sets this flag for each segment before dispatching, and ContentModelSegmentHandler
is updated to use ModelToDomSegmentContext as its context type, eliminating
the need for type casts in the handlers.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Improve trailing space to nbsp conversion with noFollowingTextSegmentOrLast

Refactor handleParagraph to track whether a text segment is the last in the
paragraph or has no following text segment (excluding SelectionMarkers).
This ensures trailing spaces are converted to &nbsp; not only for the very
last segment, but also when the next non-marker segment is not a Text segment.

- Convert forEach to for loop in handleParagraph for segment iteration
- Extract hasTextSegmentAfter helper to check for upcoming text segments
- Add noFollowingTextSegmentOrLast property to ModelToDomSegmentContext
- Update handleText to use the new property name
- Fix stale isLastSegment references in handleTextTest
- Add comprehensive tests for noFollowingTextSegmentOrLast in handleParagraphTest

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Initial plan

* Bump RoosterJS to 9.47.0, Adapter to 8.65.4, React to 9.0.5

Co-authored-by: ianeli1 <44042957+ianeli1@users.noreply.github.com>

* Revert legacyAdapter and react version bumps - no changes to those packages

Co-authored-by: BryanValverdeU <8291124+BryanValverdeU@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Julia Roldi <87443959+juliaroldi@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jiuqing Song <jisong@microsoft.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: ianeli1 <44042957+ianeli1@users.noreply.github.com>
Co-authored-by: Ian Elizondo <ianeli@microsoft.com>
Co-authored-by: BryanValverdeU <8291124+BryanValverdeU@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants