Skip to content

Commit

Permalink
remove margins on Autoformat plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliaroldi
juliaroldi committed Jan 16, 2025
1 parent 50e31fa commit ad542f4
Show file tree
Hide file tree
Showing 7 changed files with 219 additions and 9 deletions.
1 change: 1 addition & 0 deletions demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const initialState: OptionState = {
autoOrdinals: true,
autoMailto: true,
autoTel: true,
removeListMargins: false,
},
markdownOptions: {
bold: true,
Expand Down
8 changes: 8 additions & 0 deletions demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export class Plugins extends PluginsBase<keyof BuildInPluginList> {
private autoOrdinals = React.createRef<HTMLInputElement>();
private autoTel = React.createRef<HTMLInputElement>();
private autoMailto = React.createRef<HTMLInputElement>();
private removeListMargins = React.createRef<HTMLInputElement>();
private markdownBold = React.createRef<HTMLInputElement>();
private markdownItalic = React.createRef<HTMLInputElement>();
private markdownStrikethrough = React.createRef<HTMLInputElement>();
Expand Down Expand Up @@ -180,6 +181,13 @@ export class Plugins extends PluginsBase<keyof BuildInPluginList> {
this.props.state.autoFormatOptions.autoMailto,
(state, value) => (state.autoFormatOptions.autoMailto = value)
)}
{this.renderCheckBox(
'Remove List Margins',
this.removeListMargins,
this.props.state.autoFormatOptions.removeListMargins,
(state, value) =>
(state.autoFormatOptions.removeListMargins = value)
)}
</>
)}
{this.renderPluginItem(
Expand Down
15 changes: 12 additions & 3 deletions packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const DefaultOptions: Partial<AutoFormatOptions> = {
autoHyphen: false,
autoFraction: false,
autoOrdinals: false,
removeListMargins: false,
};

/**
Expand All @@ -40,6 +41,7 @@ export class AutoFormatPlugin implements EditorPlugin {
* @param options An optional parameter that takes in an object of type AutoFormatOptions, which includes the following properties:
* - autoBullet: A boolean that enables or disables automatic bullet list formatting. Defaults to false.
* - autoNumbering: A boolean that enables or disables automatic numbering formatting. Defaults to false.
* - removeListMargins: A boolean to remove list margins when it is automatically triggered. Defaults to false.
* - autoHyphen: A boolean that enables or disables automatic hyphen transformation. Defaults to false.
* - autoFraction: A boolean that enables or disables automatic fraction transformation. Defaults to false.
* - autoOrdinals: A boolean that enables or disables automatic ordinal number transformation. Defaults to false.
Expand Down Expand Up @@ -125,6 +127,7 @@ export class AutoFormatPlugin implements EditorPlugin {
autoOrdinals,
autoMailto,
autoTel,
removeListMargins,
} = this.options;
let shouldHyphen = false;
let shouldLink = false;
Expand All @@ -138,7 +141,8 @@ export class AutoFormatPlugin implements EditorPlugin {
paragraph,
context,
autoBullet,
autoNumbering
autoNumbering,
removeListMargins
);
}

Expand Down Expand Up @@ -211,15 +215,20 @@ export class AutoFormatPlugin implements EditorPlugin {
formatTextSegmentBeforeSelectionMarker(
editor,
(model, _previousSegment, paragraph, _markerFormat, context) => {
const { autoBullet, autoNumbering } = this.options;
const {
autoBullet,
autoNumbering,
removeListMargins,
} = this.options;
let shouldList = false;
if (autoBullet || autoNumbering) {
shouldList = keyboardListTrigger(
model,
paragraph,
context,
autoBullet,
autoNumbering
autoNumbering,
removeListMargins
);
context.canUndoByBackspace = shouldList;
}
Expand Down
5 changes: 5 additions & 0 deletions packages/roosterjs-content-model-plugins/lib/autoFormat/interface/AutoFormatOptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,9 @@ export interface AutoFormatOptions extends AutoLinkOptions {
* Transform ordinal numbers into superscript
*/
autoOrdinals?: boolean;

/**
* Remove the margins of auto triggered list
*/
removeListMargins?: boolean;
}
10 changes: 6 additions & 4 deletions packages/roosterjs-content-model-plugins/lib/autoFormat/list/keyboardListTrigger.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@ export function keyboardListTrigger(
paragraph: ShallowMutableContentModelParagraph,
context: FormatContentModelContext,
shouldSearchForBullet: boolean = true,
shouldSearchForNumbering: boolean = true
shouldSearchForNumbering: boolean = true,
removeListMargins?: boolean
) {
const listStyleType = getListTypeStyle(model, shouldSearchForBullet, shouldSearchForNumbering);
if (listStyleType) {
paragraph.segments.splice(0, 1);
const { listType, styleType, index } = listStyleType;
triggerList(model, listType, styleType, index);
triggerList(model, listType, styleType, index, removeListMargins);
context.canUndoByBackspace = true;
setAnnounceData(model, context);

Expand All @@ -40,9 +41,10 @@ const triggerList = (
model: ReadonlyContentModelDocument,
listType: 'OL' | 'UL',
styleType: number,
index?: number
index?: number,
removeListMargins?: boolean
) => {
setListType(model, listType);
setListType(model, listType, removeListMargins);
const isOrderedList = listType == 'OL';
if (index && index > 0 && isOrderedList) {
setModelListStartNumber(model, index);
Expand Down
67 changes: 67 additions & 0 deletions packages/roosterjs-content-model-plugins/test/autoFormat/AutoFormatPluginTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,73 @@ describe('Content Model Auto Format Plugin Test', () => {
false
);
});

it('should trigger keyboardListTrigger with no margins', () => {
const event: EditorInputEvent = {
eventType: 'input',
rawEvent: { data: ' ', defaultPrevented: false, inputType: 'insertText' } as any,
};
runTest(
event,
true,
{
blockGroupType: 'Document',
format: {},
blocks: [
{
blockType: 'BlockGroup',
blockGroupType: 'ListItem',
levels: [
{
listType: 'UL',
format: {
startNumberOverride: 1,
direction: undefined,
textAlign: undefined,
marginBottom: '0px',
marginTop: '0px',
},
dataset: {
editingInfo:
'{"applyListStyleFromLevel":false,"unorderedStyleType":1}',
},
},
],

formatHolder: {
segmentType: 'SelectionMarker',
isSelected: false,
format: {
fontFamily: undefined,
fontSize: undefined,
textColor: undefined,
},
},
format: {},
blocks: [
{
blockType: 'Paragraph',
format: {},
segments: [
marker,
{
segmentType: 'Br',
format: {},
},
],
},
],
},
],
},
{
autoBullet: true,
autoNumbering: true,
removeListMargins: true,
},
true
);
});
});

describe('onPluginEvent - [TAB] - keyboardListTrigger', () => {
Expand Down
122 changes: 120 additions & 2 deletions packages/roosterjs-content-model-plugins/test/autoFormat/list/keyboardListTriggerTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,16 @@ describe('keyboardListTrigger', () => {
expectedResult: boolean,
shouldSearchForBullet: boolean = true,
shouldSearchForNumbering: boolean = true,
expectedContext?: any
expectedContext?: any,
removeListMargins?: boolean
) {
const result = keyboardListTrigger(
model,
paragraph,
context,
shouldSearchForBullet,
shouldSearchForNumbering
shouldSearchForNumbering,
removeListMargins
);
expect(result).toBe(expectedResult);
if (expectedContext) {
Expand Down Expand Up @@ -542,4 +544,120 @@ describe('keyboardListTrigger', () => {
}
);
});

it('trigger a new numbering list after a numbering list no margins', () => {
const paragraph: ContentModelParagraph = {
blockType: 'Paragraph',
segments: [
{
segmentType: 'Text',
text: 'A)',
format: {},
},
{
segmentType: 'SelectionMarker',
isSelected: true,
format: {},
},
],
format: {},
};
runTest(
{
blockGroupType: 'Document',
blocks: [
{
blockType: 'BlockGroup',
blockGroupType: 'ListItem',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Text',
text: 'test',
format: {},
},
],
format: {},
},
],
levels: [
{
listType: 'OL',
format: {},
dataset: {
editingInfo: '{"orderedStyleType":3}',
},
},
],
formatHolder: {
segmentType: 'SelectionMarker',
isSelected: false,
format: {},
},
format: {
listStyleType: '"1) "',
},
},
{
blockType: 'BlockGroup',
blockGroupType: 'ListItem',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Text',
text: 'test',
format: {},
},
],
format: {},
},
],
levels: [
{
listType: 'OL',
format: {},
dataset: {
editingInfo: '{"orderedStyleType":3}',
},
},
],
formatHolder: {
segmentType: 'SelectionMarker',
isSelected: false,
format: {},
},
format: {
listStyleType: '"2) "',
},
},
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Br',
format: {},
},
],
format: {},
},
paragraph,
],
format: {},
},
paragraph,
{ canUndoByBackspace: true } as any,
true,
undefined /* shouldSearchForBullet */,
undefined /* shouldSearchForNumbering */,
{
canUndoByBackspace: true,
announceData: { defaultStrings: 'announceListItemNumbering', formatStrings: ['A'] },
},
true /* removeListMargins */
);
});
});

0 comments on commit ad542f4

Please sign in to comment.