1 import {$isListNode, ListNode, ListType} from "@lexical/list";
2 import {EditorButtonDefinition} from "../../framework/buttons";
3 import {EditorUiContext} from "../../framework/core";
4 import {BaseSelection, LexicalNode} from "lexical";
5 import listBulletIcon from "@icons/editor/list-bullet.svg";
6 import listNumberedIcon from "@icons/editor/list-numbered.svg";
7 import listCheckIcon from "@icons/editor/list-check.svg";
8 import {$selectionContainsNodeType} from "../../../utils/selection";
9 import {toggleSelectionAsList} from "../../../utils/formats";
12 function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {
16 action(context: EditorUiContext) {
17 toggleSelectionAsList(context.editor, type);
19 isActive(selection: BaseSelection|null): boolean {
20 return $selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
21 return $isListNode(node) && (node as ListNode).getListType() === type;
27 export const bulletList: EditorButtonDefinition = buildListButton('Bullet list', 'bullet', listBulletIcon);
28 export const numberList: EditorButtonDefinition = buildListButton('Numbered list', 'number', listNumberedIcon);
29 export const taskList: EditorButtonDefinition = buildListButton('Task list', 'check', listCheckIcon);