Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge text node and segments #2846

Merged
merged 10 commits into from
Oct 29, 2024
Merged

Merge text node and segments #2846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4d0313b
Merge text segments
JiuqingSong Oct 24, 2024
9771814
Fix test
JiuqingSong Oct 24, 2024
c3397c7
merge node
JiuqingSong Oct 25, 2024
47319e7
Merge branch 'master' into u/jisong/mergesegments
JiuqingSong Oct 25, 2024
3fa9fa8
fix build and test
JiuqingSong Oct 25, 2024
2c185e1
add test
JiuqingSong Oct 25, 2024
a030568
Add test
JiuqingSong Oct 26, 2024
0640aed
Merge branch 'master' into u/jisong/mergesegments
JiuqingSong Oct 26, 2024
e39ada6
fix test
JiuqingSong Oct 26, 2024
52bc895
Merge branch 'master' into u/jisong/mergesegments
JiuqingSong Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/roosterjs-content-model-core/lib/corePlugin/cache/domIndexerImpl.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading