All files / roosterjs-content-model-plugins/lib/edit/inputSteps handleEnterOnList.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
70x
 
35x
35x
35x
 
 
 
 
 
35x
35x
 
35x
21x
 
21x
7x
 
14x
 
14x
14x
 
 
 
 
 
 
21x
21x
 
21x
12x
 
 
 
9x
 
 
10x
9x
 
 
 
9x
4x
 
 
 
 
4x
 
 
 
 
 
 
21x
 
 
 
 
1x
21x
 
 
1x
19x
 
 
 
 
 
 
 
1x
 
 
 
 
14x
14x
14x
14x
14x
 
14x
14x
 
 
 
 
14x
 
14x
 
14x
2x
 
 
 
 
14x
14x
 
14x
10x
 
 
14x
 
 
1x
14x
14x
 
 
 
 
 
 
 
 
 
 
 
1x
4x
4x
14x
 
14x
 
 
 
8x
6x
 
 
 
4x
 
 
 
 
 
 
import { getListAnnounceData } from 'roosterjs-content-model-api';
import { splitParagraph } from '../utils/splitParagraph';
import {
    createListItem,
    createListLevel,
    getClosestAncestorBlockGroupIndex,
    isBlockGroupOfType,
    mutateBlock,
} from 'roosterjs-content-model-dom';
import type {
    ContentModelListItem,
    DeleteSelectionStep,
    ReadonlyContentModelBlock,
    ReadonlyContentModelBlockGroup,
    ReadonlyContentModelListItem,
    ShallowMutableContentModelListItem,
    ValidDeleteSelectionContext,
} from 'roosterjs-content-model-types';
 
/**
 * @internal
 */
export const handleEnterOnList: DeleteSelectionStep = context => {
    const { deleteResult, insertPoint } = context;
 
    Eif (deleteResult == 'notDeleted' || deleteResult == 'nothingToDelete') {
        const { path } = insertPoint;
        const index = getClosestAncestorBlockGroupIndex(
            path,
            ['ListItem'],
            ['TableCell', 'FormatContainer']
        );
 
        const readonlyListItem = path[index];
        const listParent = path[index + 1];
 
        if (readonlyListItem?.blockGroupType === 'ListItem' && listParent) {
            let listItem = mutateBlock(readonlyListItem);
 
            if (isEmptyListItem(listItem)) {
                listItem.levels.pop();
            } else {
                listItem = createNewListItem(context, listItem, listParent);
 
                Eif (context.formatContext) {
                    context.formatContext.announceData = getListAnnounceData([
                        listItem,
                        ...path.slice(index + 1),
                    ]);
                }
            }
 
            const listIndex = listParent.blocks.indexOf(listItem);
            const nextBlock = listParent.blocks[listIndex + 1];
 
            if (nextBlock) {
                if (
                    isBlockGroupOfType<ContentModelListItem>(nextBlock, 'ListItem') &&
                    nextBlock.levels[0]
                ) {
                    nextBlock.levels.forEach(level => {
                        // Remove startNumberOverride so that next list item can join current list, unless it is 1.
                        // List start with 1 means it should be an explicit new list and should never join another list before it
                        if (level.format.startNumberOverride !== 1) {
                            level.format.startNumberOverride = undefined;
                        }
                    });
 
                    if (listItem.levels.length == 0) {
                        const nextBlockIndex = findIndex(
                            listParent.blocks,
                            nextBlock.levels.length
                        );
 
                        nextBlock.levels[
                            nextBlock.levels.length - 1
                        ].format.startNumberOverride = nextBlockIndex;
                    }
                }
            }
 
            context.deleteResult = 'range';
        }
    }
};
 
const isEmptyListItem = (listItem: ReadonlyContentModelListItem) => {
    return listItem.blocks.length === 1 && isEmptyParagraph(listItem.blocks[0]);
};
 
const isEmptyParagraph = (block: ReadonlyContentModelBlock) => {
    return (
        block.blockType === 'Paragraph' &&
        block.segments.length === 2 &&
        block.segments[0].segmentType === 'SelectionMarker' &&
        block.segments[1].segmentType === 'Br'
    );
};
 
const createNewListItem = (
    context: ValidDeleteSelectionContext,
    listItem: ReadonlyContentModelListItem,
    listParent: ReadonlyContentModelBlockGroup
) => {
    const { insertPoint } = context;
    const listIndex = listParent.blocks.indexOf(listItem);
    const currentPara = insertPoint.paragraph;
    const paraIndex = listItem.blocks.indexOf(currentPara);
    const newParagraph = splitParagraph(insertPoint);
 
    const levels = createNewListLevel(listItem);
    const newListItem: ShallowMutableContentModelListItem = createListItem(
        levels,
        listItem.formatHolder.format
    );
 
    newListItem.blocks.push(newParagraph);
 
    const remainingBlockCount = listItem.blocks.length - paraIndex - 1;
 
    if (paraIndex >= 0 && remainingBlockCount > 0) {
        newListItem.blocks.push(
            ...mutateBlock(listItem).blocks.splice(paraIndex + 1, remainingBlockCount)
        );
    }
 
    insertPoint.paragraph = newParagraph;
    mutateBlock(listParent).blocks.splice(listIndex + 1, 0, newListItem);
 
    if (context.lastParagraph == currentPara) {
        context.lastParagraph = newParagraph;
    }
 
    return newListItem;
};
 
const createNewListLevel = (listItem: ReadonlyContentModelListItem) => {
    return listItem.levels.map(level => {
        return createListLevel(
            level.listType,
            {
                ...level.format,
                startNumberOverride: undefined,
                displayForDummyItem: undefined, // When ENTER, we should create a new regular list item, so force its dummy item display to undefined
            },
            level.dataset
        );
    });
};
 
const findIndex = (blocks: readonly ReadonlyContentModelBlock[], levelLength: number) => {
    let counter = 1;
    for (let i = 0; i < blocks.length; i++) {
        const listItem = blocks[i];
 
        if (
            isBlockGroupOfType<ContentModelListItem>(listItem, 'ListItem') &&
            listItem.levels.length === levelLength
        ) {
            counter++;
        } else if (
            isBlockGroupOfType<ContentModelListItem>(listItem, 'ListItem') &&
            listItem.levels.length == 0
        ) {
            return counter;
        }
    }
 
    return counter;
};