BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/buttons/lists.ts

   1 import {$isListNode, insertList, ListNode, ListType, removeList} from "@lexical/list";
   2 import {EditorButtonDefinition} from "../../framework/buttons";
   3 import {EditorUiContext} from "../../framework/core";
   4 import {$getSelection, BaseSelection, LexicalNode} from "lexical";
   5 import {$selectionContainsNodeType} from "../../../helpers";
   6 import listBulletIcon from "@icons/editor/list-bullet.svg";
   7 import listNumberedIcon from "@icons/editor/list-numbered.svg";
   8 import listCheckIcon from "@icons/editor/list-check.svg";
   9
  10
  11 function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {
  12     return {
  13         label,
  14         icon,
  15         action(context: EditorUiContext) {
  16             context.editor.getEditorState().read(() => {
  17                 const selection = $getSelection();
  18                 if (this.isActive(selection, context)) {
  19                     removeList(context.editor);
  20                 } else {
  21                     insertList(context.editor, type);
  22                 }
  23             });
  24         },
  25         isActive(selection: BaseSelection|null): boolean {
  26             return $selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
  27                 return $isListNode(node) && (node as ListNode).getListType() === type;
  28             });
  29         }
  30     };
  31 }
  32
  33 export const bulletList: EditorButtonDefinition = buildListButton('Bullet list', 'bullet', listBulletIcon);
  34 export const numberList: EditorButtonDefinition = buildListButton('Numbered list', 'number', listNumberedIcon);
  35 export const taskList: EditorButtonDefinition = buildListButton('Task list', 'check', listCheckIcon);