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

   1 import {$isListNode, ListNode, ListType} from "@lexical/list";
   2 import {EditorButtonDefinition} from "../../framework/buttons";
   3 import {EditorUiContext} from "../../framework/core";
   4 import {
   5     BaseSelection,
   6     LexicalNode,
   7 } from "lexical";
   8 import listBulletIcon from "@icons/editor/list-bullet.svg";
   9 import listNumberedIcon from "@icons/editor/list-numbered.svg";
  10 import listCheckIcon from "@icons/editor/list-check.svg";
  11 import indentIncreaseIcon from "@icons/editor/indent-increase.svg";
  12 import indentDecreaseIcon from "@icons/editor/indent-decrease.svg";
  13 import {
  14     $selectionContainsNodeType,
  15 } from "../../../utils/selection";
  16 import {toggleSelectionAsList} from "../../../utils/formats";
  17 import {$setInsetForSelection} from "../../../utils/lists";
  18
  19
  20 function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {
  21     return {
  22         label,
  23         icon,
  24         action(context: EditorUiContext) {
  25             toggleSelectionAsList(context.editor, type);
  26         },
  27         isActive(selection: BaseSelection|null): boolean {
  28             return $selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
  29                 return $isListNode(node) && (node as ListNode).getListType() === type;
  30             });
  31         }
  32     };
  33 }
  34
  35 export const bulletList: EditorButtonDefinition = buildListButton('Bullet list', 'bullet', listBulletIcon);
  36 export const numberList: EditorButtonDefinition = buildListButton('Numbered list', 'number', listNumberedIcon);
  37 export const taskList: EditorButtonDefinition = buildListButton('Task list', 'check', listCheckIcon);
  38
  39 export const indentIncrease: EditorButtonDefinition = {
  40     label: 'Increase indent',
  41     icon: indentIncreaseIcon,
  42     action(context: EditorUiContext) {
  43         context.editor.update(() => {
  44             $setInsetForSelection(context.editor, 40);
  45         });
  46     },
  47     isActive() {
  48         return false;
  49     }
  50 };
  51
  52 export const indentDecrease: EditorButtonDefinition = {
  53     label: 'Decrease indent',
  54     icon: indentDecreaseIcon,
  55     action(context: EditorUiContext) {
  56         context.editor.update(() => {
  57             $setInsetForSelection(context.editor, -40);
  58         });
  59     },
  60     isActive() {
  61         return false;
  62     }
  63 };