import VListItem from './VListItem'; import type { NodePosition } from 'roosterjs-editor-types'; import { Indentation, ListType, Alignment, NumberingListType, BulletListType } from 'roosterjs-editor-types'; import type { CompatibleAlignment, CompatibleBulletListType, CompatibleIndentation, CompatibleListType, CompatibleNumberingListType } from 'roosterjs-editor-types/lib/compatibleTypes'; /** * Represent a bullet or a numbering list * * @example * A VList is a logical representation of list items, it contains an item array with node and list type stack. * e.g. We have a list like this * ```html *
    *
  1. item 1
  2. *
  3. item 2
  4. *
* ``` * * A VList of this list will be like this: * ```javascript * { * rootList: (OL node), * items: [{ * node: (LI node with 'item 1'), * listTypes: [null, OL], * }, { * node: (LI node with 'item 2'), * listTypes: [null, OL], * }, { * node: (LI node with 'item 2.1), * listTypes: [null, OL, UL], * }, { * node: (LI node with 'item 2.2'), * listTypes: [null, OL, UL], * } * ] * } * ``` * * When we want to outdent item 2.1, we just need to remove the last "UL" from listTypes of item 2.1, then * the writeBack() function will handle everything related to DOM change */ export default class VList { rootList: HTMLOListElement | HTMLUListElement; readonly items: VListItem[]; /** * Create a new instance of VList class * @param rootList The root list element, can be either OL or UL tag */ constructor(rootList: HTMLOListElement | HTMLUListElement); /** * Check if this list contains the given node * @param node The node to check */ contains(node: Node): boolean; /** * Get list number of the last item in this VList. * If there is no order list item, result will be undefined */ getLastItemNumber(): number | undefined; /** * Write the result back into DOM tree * After that, this VList becomes unavailable because we set this.rootList to null * * @param shouldReuseAllAncestorListElements Optional - defaults to false. * @param disableListChain Whether we want to disable list chain functionality. @default false */ writeBack(shouldReuseAllAncestorListElements?: boolean, disableListChain?: boolean): void; /** * Sets the New List Start Property, that is going to be used to create a new List in the WriteBack function * @param separator The HTML element that indicates when to split the VList * @param startNumber The start number of the new List */ split(separator: HTMLElement, startNumber: number): void; /** * Set indentation of the given range of this list * @param start Start position to operate from * @param end End position to operate to * @param indentation Indent or outdent */ setIndentation(start: NodePosition, end: NodePosition, indentation: Indentation | CompatibleIndentation): void; /** * Outdent the give range of this list * @param start Start position to operate from * @param end End position to operate to * @param indentation Specify to outdent * @param softOutdent (Optional) True to make the item to by dummy (no bullet or number) if the item is not dummy, * otherwise outdent the item * @param preventItemRemoval (Optional) True to prevent the indentation to remove the bullet when outdenting a first * level list item, by default is false */ setIndentation(start: NodePosition, end: NodePosition, indentation: Indentation.Decrease | CompatibleIndentation.Decrease, softOutdent?: boolean, preventItemRemoval?: boolean): void; /** * Set alignment of the given range of this list * @param start Start position to operate from * @param end End position to operate to * @param alignment Align items left, center or right */ setAlignment(start: NodePosition, end: NodePosition, alignment: Alignment | CompatibleAlignment): void; /** * Remove margins of a new list */ removeMargins(): void; /** * Change list type of the given range of this list. * If some of the items are not real list item yet, this will make them to be list item with given type * If all items in the given range are already in the type to change to, this becomes an outdent operation * @param start Start position to operate from * @param end End position to operate to * @param targetType Target list type */ changeListType(start: NodePosition, end: NodePosition, targetType: ListType | CompatibleListType): void; /** * Change list style of the given range of this list. * If some of the items are not real list item yet, this will make them to be list item with given style * @param orderedStyle The style of ordered list * @param unorderedStyle The style of unordered list */ setListStyleType(orderedStyle?: NumberingListType | CompatibleNumberingListType, unorderedStyle?: BulletListType | CompatibleBulletListType): void; /** * Append a new item to this VList * @param node node of the item to append. If it is not wrapped with LI tag, it will be wrapped * @param type Type of this list item, can be ListType.None */ appendItem(node: Node, type: ListType | CompatibleListType): void; /** * Merge the given VList into current VList. * - All list items will be removed from the given VList and added into this list. * - The root node of the given VList will be removed from DOM tree * - If there are orphan items in the given VList, they will be merged into the last item * of this list if any. * @param list The vList to merge from */ mergeVList(list: VList): void; /** * Get the index of the List Item in the current List * If the root list is: * Ordered list, the listIndex start count is going to be the start property of the OL - 1, * @example For example if we want to find the index of Item 2 in the list below, the returned index is going to be 6 * * ```html *
    *
  1. item 1
  2. *
  3. item 2
  4. *
  5. item 3
  6. *
* ``` * Unordered list, the listIndex start count starts from 0 * @example For example if we want to find the index of Item 2 in the list below, the returned index is going to be 2 * ```html * * ``` * @param input List item to find in the root list */ getListItemIndex(input: Node): number; /** * Get the Start property of the root list of this VList * @returns Start number of the list */ getStart(): number | undefined; private findListItems; private populateItems; }