Skip to content

Commit

Permalink
Merge text node and segments (#2846)
Browse files Browse the repository at this point in the history 
* Merge text segments

* Fix test

* merge node

* fix build and test

* add test

* Add test

* fix test
  • Loading branch information
@JiuqingSong
JiuqingSong authored Oct 29, 2024
1 parent cf40800 commit eeec49f
Show file tree
Hide file tree
Showing 24 changed files with 1,381 additions and 407 deletions.
20 changes: 20 additions & 0 deletions packages/roosterjs-content-model-core/lib/corePlugin/cache/domIndexerImpl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,11 @@ function getIndexedTableItem(element: HTMLTableElement): TableItem | null {
}
}

// Make a node not indexed. Do not export this function since we should not let code outside here know this detail
function unindex(node: Partial<IndexedSegmentNode>) {
delete node.__roosterjsContentModel;
}

/**
* @internal
* Implementation of DomIndexer
Expand Down Expand Up @@ -197,6 +202,21 @@ export class DomIndexerImpl implements DomIndexer {
this.onBlockEntityDelimiter(entity.wrapper.nextSibling, entity, group);
}

onMergeText(targetText: Text, sourceText: Text) {
if (isIndexedSegment(targetText) && isIndexedSegment(sourceText)) {
if (targetText.nextSibling == sourceText) {
targetText.__roosterjsContentModel.segments.push(
...sourceText.__roosterjsContentModel.segments
);

unindex(sourceText);
}
} else {
unindex(sourceText);
unindex(targetText);
}
}

reconcileSelection(
model: ContentModelDocument,
newSelection: DOMSelection,
Expand Down
54 changes: 6 additions & 48 deletions packages/roosterjs-content-model-core/test/command/paste/mergePasteContentTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -971,7 +971,7 @@ describe('mergePasteContent', () => {
segments: [
{
segmentType: 'Text',
text: 'Unformatted line',
text: 'Unformatted line\n',
format: {
fontSize: '14px',
textColor: 'white',
Expand Down Expand Up @@ -1149,15 +1149,7 @@ describe('mergePasteContent', () => {
segments: [
{
segmentType: 'Text',
text: 'Unformatted line',
format: {
fontSize: '14px',
textColor: 'white',
},
},
{
segmentType: 'Text',
text: '\n',
text: 'Unformatted line\n',
format: {
fontSize: '14px',
textColor: 'white',
Expand Down Expand Up @@ -1490,15 +1482,7 @@ describe('mergePasteContent', () => {
segments: [
{
segmentType: 'Text',
text: 'Inline text',
format: {
fontSize: '14px',
textColor: 'rgb(0,0,0)',
},
},
{
segmentType: 'Text',
text: '\n',
text: 'Inline text\n',
format: {
fontSize: '14px',
textColor: 'rgb(0,0,0)',
Expand Down Expand Up @@ -1553,15 +1537,7 @@ describe('mergePasteContent', () => {
},
{
segmentType: 'Text',
text: 'Inline text',
format: {
fontSize: '14px',
textColor: 'rgb(0,0,0)',
},
},
{
segmentType: 'Text',
text: '\n',
text: 'Inline text\n',
format: {
fontSize: '14px',
textColor: 'rgb(0,0,0)',
Expand Down Expand Up @@ -1629,16 +1605,7 @@ describe('mergePasteContent', () => {
segments: [
{
segmentType: 'Text',
text: 'Inline text',
format: {
fontFamily: 'Aptos',
fontSize: '14px',
textColor: 'white',
},
},
{
segmentType: 'Text',
text: '\n',
text: 'Inline text\n',
format: {
fontFamily: 'Aptos',
fontSize: '14px',
Expand Down Expand Up @@ -1686,16 +1653,7 @@ describe('mergePasteContent', () => {
{ segmentType: 'Text', text: 'Text in source', format: {} },
{
segmentType: 'Text',
text: 'Inline text',
format: {
fontFamily: 'Aptos',
fontSize: '14px',
textColor: 'white',
},
},
{
segmentType: 'Text',
text: '\n',
text: 'Inline text\n',
format: {
fontFamily: 'Aptos',
fontSize: '14px',
Expand Down
97 changes: 97 additions & 0 deletions packages/roosterjs-content-model-core/test/corePlugin/cache/domIndexerImplTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,103 @@ describe('domIndexerImpl.onBlockEntity', () => {
});
});

describe('domIndexImpl.onMergeText', () => {
it('Two unindexed node', () => {
const text1 = document.createTextNode('test1');
const text2 = document.createTextNode('test1');
const div = document.createElement('div');

div.appendChild(text1);
div.appendChild(text2);

new DomIndexerImpl().onMergeText(text1, text2);

expect(((text1 as Node) as IndexedSegmentNode).__roosterjsContentModel).toBeUndefined();
expect(((text2 as Node) as IndexedSegmentNode).__roosterjsContentModel).toBeUndefined();
});

it('One indexed node, one unindexed node', () => {
const text1 = document.createTextNode('test1');
const text2 = document.createTextNode('test1');
const div = document.createElement('div');

div.appendChild(text1);
div.appendChild(text2);

((text1 as Node) as IndexedSegmentNode).__roosterjsContentModel = {
paragraph: createParagraph(),
segments: [],
};

new DomIndexerImpl().onMergeText(text1, text2);

expect(((text1 as Node) as IndexedSegmentNode).__roosterjsContentModel).toBeUndefined();
expect(((text2 as Node) as IndexedSegmentNode).__roosterjsContentModel).toBeUndefined();
});

it('Two separated indexed node', () => {
const text1 = document.createTextNode('test1');
const text2 = document.createTextNode('test1');
const div = document.createElement('div');

div.appendChild(text1);
div.appendChild(document.createElement('img'));
div.appendChild(text2);

const text1Model = createText('test1');
const text2Model = createText('test2');

((text1 as Node) as IndexedSegmentNode).__roosterjsContentModel = {
paragraph: createParagraph(),
segments: [text1Model],
};
((text2 as Node) as IndexedSegmentNode).__roosterjsContentModel = {
paragraph: createParagraph(),
segments: [text2Model],
};

new DomIndexerImpl().onMergeText(text1, text2);

expect(((text1 as Node) as IndexedSegmentNode).__roosterjsContentModel).toEqual({
paragraph: createParagraph(),
segments: [text1Model],
});
expect(((text2 as Node) as IndexedSegmentNode).__roosterjsContentModel).toEqual({
paragraph: createParagraph(),
segments: [text2Model],
});
});

it('Two continuous indexed node', () => {
const text1 = document.createTextNode('test1');
const text2 = document.createTextNode('test1');
const div = document.createElement('div');

div.appendChild(text1);
div.appendChild(text2);

const text1Model = createText('test1');
const text2Model = createText('test2');

((text1 as Node) as IndexedSegmentNode).__roosterjsContentModel = {
paragraph: createParagraph(),
segments: [text1Model],
};
((text2 as Node) as IndexedSegmentNode).__roosterjsContentModel = {
paragraph: createParagraph(),
segments: [text2Model],
};

new DomIndexerImpl().onMergeText(text1, text2);

expect(((text1 as Node) as IndexedSegmentNode).__roosterjsContentModel).toEqual({
paragraph: createParagraph(),
segments: [text1Model, text2Model],
});
expect(((text2 as Node) as IndexedSegmentNode).__roosterjsContentModel).toBeUndefined();
});
});

describe('domIndexerImpl.reconcileSelection', () => {
let setSelectionSpy: jasmine.Spy;
let model: ContentModelDocument;
Expand Down
61 changes: 58 additions & 3 deletions packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeParagraph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@ import { areSameFormats } from '../../domToModel/utils/areSameFormats';
import { createBr } from '../creators/createBr';
import { isSegmentEmpty } from './isEmpty';
import { isWhiteSpacePreserved } from '../../domUtils/isWhiteSpacePreserved';
import { mutateBlock, mutateSegment } from './mutate';
import { mutateBlock, mutateSegment, mutateSegments } from './mutate';
import { normalizeAllSegments } from './normalizeSegment';
import type {
ContentModelSegmentFormat,
ContentModelText,
ReadonlyContentModelCode,
ReadonlyContentModelLink,
ReadonlyContentModelParagraph,
ReadonlyContentModelSegment,
ReadonlyContentModelText,
} from 'roosterjs-content-model-types';

/**
Expand Down Expand Up @@ -47,9 +51,8 @@ export function normalizeParagraph(paragraph: ReadonlyContentModelParagraph) {
}

removeEmptyLinks(paragraph);

removeEmptySegments(paragraph);

mergeTextSegments(paragraph);
moveUpSegmentFormat(paragraph);
}

Expand All @@ -73,6 +76,58 @@ function removeEmptySegments(block: ReadonlyContentModelParagraph) {
}
}

function mergeTextSegments(block: ReadonlyContentModelParagraph) {
let lastText: ReadonlyContentModelText | null = null;

for (let i = 0; i < block.segments.length; i++) {
const segment = block.segments[i];

if (segment.segmentType != 'Text') {
lastText = null;
} else if (!lastText || !segmentsWithSameFormat(lastText, segment)) {
lastText = segment;
} else {
const [mutableBlock, [mutableLastText]] = mutateSegments(block, [lastText, segment]);

(mutableLastText as ContentModelText).text += segment.text;
mutableBlock.segments.splice(i, 1);
i--;
}
}
}

function segmentsWithSameFormat(
seg1: ReadonlyContentModelSegment,
seg2: ReadonlyContentModelSegment
) {
return (
!!seg1.isSelected == !!seg2.isSelected &&
areSameFormats(seg1.format, seg2.format) &&
areSameLinks(seg1.link, seg2.link) &&
areSameCodes(seg1.code, seg2.code)
);
}

function areSameLinks(
link1: ReadonlyContentModelLink | undefined,
link2: ReadonlyContentModelLink | undefined
) {
return (
(!link1 && !link2) ||
(link1 &&
link2 &&
areSameFormats(link1.format, link2.format) &&
areSameFormats(link1.dataset, link2.dataset))
);
}

function areSameCodes(
code1: ReadonlyContentModelCode | undefined,
code2: ReadonlyContentModelCode | undefined
) {
return (!code1 && !code2) || (code1 && code2 && areSameFormats(code1.format, code2.format));
}

function removeEmptyLinks(paragraph: ReadonlyContentModelParagraph) {
const marker = paragraph.segments.find(x => x.segmentType == 'SelectionMarker');
if (marker) {
Expand Down
5 changes: 4 additions & 1 deletion packages/roosterjs-content-model-dom/lib/modelToDom/contentModelToDom.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,10 @@ function calcPosition(
if (!pos.segment) {
result = { container: pos.block, offset: 0 };
} else if (isNodeOfType(pos.segment, 'TEXT_NODE')) {
result = { container: pos.segment, offset: pos.segment.nodeValue?.length || 0 };
result = {
container: pos.segment,
offset: pos.offset ?? pos.segment.nodeValue?.length ?? 0,
};
} else if (pos.segment.parentNode) {
result = {
container: pos.segment.parentNode,
Expand Down
2 changes: 1 addition & 1 deletion packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleParagraph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const handleParagraph: ContentModelBlockHandler<ContentModelParagraph> =
handleSegments();
}

optimize(container);
optimize(container, context);

// It is possible the next sibling node is changed during processing child segments
// e.g. When this paragraph is an implicit paragraph and it contains an inline entity segment
Expand Down
Loading

0 comments on commit eeec49f

Please sign in to comment.