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

#2861 Allow specify pending format for paragraph #2885

Merged
merged 4 commits into from
Nov 22, 2024
Merged

#2861 Allow specify pending format for paragraph #2885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
36883a4
#2861
JiuqingSong Nov 21, 2024
8268e4d
Fix build and test
JiuqingSong Nov 21, 2024
9943d12
add test
JiuqingSong Nov 21, 2024
01d38b3
Merge branch 'master' into u/jisong/2861
JiuqingSong Nov 22, 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
15 changes: 12 additions & 3 deletions packages/roosterjs-content-model-core/lib/coreApi/formatContentModel/formatContentModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,19 @@ function handlePendingFormat(
context.newPendingFormat == 'preserve'
? core.format.pendingFormat?.format
: context.newPendingFormat;

if (pendingFormat && selection?.type == 'range' && selection.range.collapsed) {
const pendingParagraphFormat =
context.newPendingParagraphFormat == 'preserve'
? core.format.pendingFormat?.paragraphFormat
: context.newPendingParagraphFormat;

if (
(pendingFormat || pendingParagraphFormat) &&
selection?.type == 'range' &&
selection.range.collapsed
) {
core.format.pendingFormat = {
format: { ...pendingFormat },
format: pendingFormat ? { ...pendingFormat } : undefined,
paragraphFormat: pendingParagraphFormat ? { ...pendingParagraphFormat } : undefined,
insertPoint: {
node: selection.range.startContainer,
offset: selection.range.startOffset,
Expand Down
14 changes: 11 additions & 3 deletions packages/roosterjs-content-model-core/lib/corePlugin/format/FormatPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,13 +118,16 @@ class FormatPlugin implements PluginWithState<FormatPluginState> {
break;

case 'keyDown':
const isAndroidIME = this.editor.getEnvironment().isAndroid && event.rawEvent.key == UnidentifiedKey;
const isAndroidIME =
this.editor.getEnvironment().isAndroid && event.rawEvent.key == UnidentifiedKey;
if (isCursorMovingKey(event.rawEvent)) {
this.clearPendingFormat();
this.lastCheckedNode = null;
} else if (
this.defaultFormatKeys.size > 0 &&
(isAndroidIME || isCharacterValue(event.rawEvent) || event.rawEvent.key == ProcessKey) &&
(isAndroidIME ||
isCharacterValue(event.rawEvent) ||
event.rawEvent.key == ProcessKey) &&
this.shouldApplyDefaultFormat(this.editor)
) {
applyDefaultFormat(this.editor, this.state.defaultFormat);
Expand All @@ -145,7 +148,12 @@ class FormatPlugin implements PluginWithState<FormatPluginState> {

private checkAndApplyPendingFormat(data: string | null) {
if (this.editor && data && this.state.pendingFormat) {
applyPendingFormat(this.editor, data, this.state.pendingFormat.format);
applyPendingFormat(
this.editor,
data,
this.state.pendingFormat.format,
this.state.pendingFormat.paragraphFormat
);
this.clearPendingFormat();
}
}
Expand Down
51 changes: 34 additions & 17 deletions packages/roosterjs-content-model-core/lib/corePlugin/format/applyPendingFormat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import {
createText,
iterateSelections,
mutateBlock,
mutateSegment,
normalizeContentModel,
setParagraphNotImplicit,
} from 'roosterjs-content-model-dom';
import type { ContentModelSegmentFormat, IEditor } from 'roosterjs-content-model-types';
import type {
ContentModelBlockFormat,
ContentModelSegmentFormat,
IEditor,
} from 'roosterjs-content-model-types';

const ANSI_SPACE = '\u0020';
const NON_BREAK_SPACE = '\u00A0';
Expand All @@ -19,7 +24,8 @@ const NON_BREAK_SPACE = '\u00A0';
export function applyPendingFormat(
editor: IEditor,
data: string,
format: ContentModelSegmentFormat
segmentFormat?: ContentModelSegmentFormat,
paragraphFormat?: ContentModelBlockFormat
) {
let isChanged = false;

Expand All @@ -41,24 +47,35 @@ export function applyPendingFormat(

// For space, there can be &#32 (space) or &#160 (&nbsp;), we treat them as the same
if (subStr == data || (data == ANSI_SPACE && subStr == NON_BREAK_SPACE)) {
mutateSegment(block, previousSegment, previousSegment => {
previousSegment.text = text.substring(0, text.length - data.length);
});
if (segmentFormat) {
mutateSegment(block, previousSegment, previousSegment => {
previousSegment.text = text.substring(
0,
text.length - data.length
);
});

mutateSegment(block, marker, (marker, block) => {
marker.format = { ...format };
mutateSegment(block, marker, (marker, block) => {
marker.format = { ...segmentFormat };

const newText = createText(
data == ANSI_SPACE ? NON_BREAK_SPACE : data,
{
...previousSegment.format,
...format,
}
);
const newText = createText(
data == ANSI_SPACE ? NON_BREAK_SPACE : data,
{
...previousSegment.format,
...segmentFormat,
}
);

block.segments.splice(index, 0, newText);
setParagraphNotImplicit(block);
});
block.segments.splice(index, 0, newText);
setParagraphNotImplicit(block);
});
}

if (paragraphFormat) {
const mutableParagraph = mutateBlock(block);

Object.assign(mutableParagraph.format, paragraphFormat);
}

isChanged = true;
}
Expand Down
102 changes: 101 additions & 1 deletion ...es/roosterjs-content-model-core/test/coreApi/formatContentModel/formatContentModelTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -658,6 +658,7 @@ describe('formatContentModel', () => {
it('Has pending format, callback returns true, preserve pending format', () => {
core.format.pendingFormat = {
format: mockedFormat1,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer1,
offset: mockedStartOffset1,
Expand All @@ -671,16 +672,43 @@ describe('formatContentModel', () => {

expect(core.format.pendingFormat).toEqual({
format: mockedFormat1,
paragraphFormat: undefined,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
},
} as any);
});

it('Has pending format, callback returns false, preserve pending format', () => {
it('Has pending format, callback returns true, preserve paragraph pending format', () => {
core.format.pendingFormat = {
format: mockedFormat1,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer1,
offset: mockedStartOffset1,
},
};

formatContentModel(core, (model, context) => {
context.newPendingParagraphFormat = 'preserve';
return true;
});

expect(core.format.pendingFormat).toEqual({
format: undefined,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
},
} as any);
});

it('Has pending format, callback returns true, preserve both pending format', () => {
core.format.pendingFormat = {
format: mockedFormat1,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer1,
offset: mockedStartOffset1,
Expand All @@ -689,11 +717,39 @@ describe('formatContentModel', () => {

formatContentModel(core, (model, context) => {
context.newPendingFormat = 'preserve';
context.newPendingParagraphFormat = 'preserve';
return true;
});

expect(core.format.pendingFormat).toEqual({
format: mockedFormat1,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
},
} as any);
});

it('Has pending format, callback returns false, preserve both pending format', () => {
core.format.pendingFormat = {
format: mockedFormat1,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer1,
offset: mockedStartOffset1,
},
};

formatContentModel(core, (model, context) => {
context.newPendingFormat = 'preserve';
context.newPendingParagraphFormat = 'preserve';
return false;
});

expect(core.format.pendingFormat).toEqual({
format: mockedFormat1,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
Expand All @@ -709,6 +765,23 @@ describe('formatContentModel', () => {

expect(core.format.pendingFormat).toEqual({
format: mockedFormat2,
paragraphFormat: undefined,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
},
});
});

it('No pending format, callback returns true, new paragraph format', () => {
formatContentModel(core, (model, context) => {
context.newPendingParagraphFormat = mockedFormat2;
return true;
});

expect(core.format.pendingFormat).toEqual({
format: undefined,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
Expand All @@ -724,6 +797,7 @@ describe('formatContentModel', () => {

expect(core.format.pendingFormat).toEqual({
format: mockedFormat2,
paragraphFormat: undefined,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
Expand All @@ -747,6 +821,7 @@ describe('formatContentModel', () => {

expect(core.format.pendingFormat).toEqual({
format: mockedFormat2,
paragraphFormat: undefined,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
Expand All @@ -770,6 +845,31 @@ describe('formatContentModel', () => {

expect(core.format.pendingFormat).toEqual({
format: mockedFormat2,
paragraphFormat: undefined,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
},
});
});

it('Has pending format, callback returns false, new paragraph format', () => {
core.format.pendingFormat = {
paragraphFormat: mockedFormat1,
insertPoint: {
node: mockedStartContainer1,
offset: mockedStartOffset1,
},
};

formatContentModel(core, (model, context) => {
context.newPendingParagraphFormat = mockedFormat2;
return false;
});

expect(core.format.pendingFormat).toEqual({
format: undefined,
paragraphFormat: mockedFormat2,
insertPoint: {
node: mockedStartContainer2,
offset: mockedStartOffset2,
Expand Down
17 changes: 13 additions & 4 deletions packages/roosterjs-content-model-core/test/corePlugin/format/FormatPluginTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ describe('FormatPlugin', () => {
const mockedFormat = {
fontSize: '10px',
};
const mockedFormat2 = {
lineSpace: 2,
};
let applyPendingFormatSpy: jasmine.Spy;

beforeEach(() => {
Expand Down Expand Up @@ -49,6 +52,7 @@ describe('FormatPlugin', () => {

(state.pendingFormat = {
format: mockedFormat,
paragraphFormat: mockedFormat2,
} as any),
plugin.initialize(editor);

Expand All @@ -60,7 +64,12 @@ describe('FormatPlugin', () => {
plugin.dispose();

expect(applyPendingFormatSpy).toHaveBeenCalledTimes(1);
expect(applyPendingFormatSpy).toHaveBeenCalledWith(editor, 'a', mockedFormat);
expect(applyPendingFormatSpy).toHaveBeenCalledWith(
editor,
'a',
mockedFormat,
mockedFormat2
);
expect(state.pendingFormat).toBeNull();
});

Expand Down Expand Up @@ -92,7 +101,7 @@ describe('FormatPlugin', () => {
});
plugin.dispose();

expect(applyPendingFormatSpy).toHaveBeenCalledWith(editor, 'test', mockedFormat);
expect(applyPendingFormatSpy).toHaveBeenCalledWith(editor, 'test', mockedFormat, undefined);
expect(state.pendingFormat).toBeNull();
});

Expand All @@ -111,7 +120,7 @@ describe('FormatPlugin', () => {
const state = plugin.getState();

state.pendingFormat = {
format: mockedFormat,
paragraphFormat: mockedFormat2,
} as any;

plugin.onPluginEvent({
Expand All @@ -122,7 +131,7 @@ describe('FormatPlugin', () => {

expect(applyPendingFormatSpy).not.toHaveBeenCalled();
expect(state.pendingFormat).toEqual({
format: mockedFormat,
paragraphFormat: mockedFormat2,
} as any);
});

Expand Down
Loading
Loading