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

   1 import {$getSelection, BaseSelection, ElementFormatType} from "lexical";
   2 import {EditorButtonDefinition} from "../../framework/buttons";
   3 import alignLeftIcon from "@icons/editor/align-left.svg";
   4 import {EditorUiContext} from "../../framework/core";
   5 import alignCenterIcon from "@icons/editor/align-center.svg";
   6 import alignRightIcon from "@icons/editor/align-right.svg";
   7 import alignJustifyIcon from "@icons/editor/align-justify.svg";
   8 import {$getBlockElementNodesInSelection, $selectionContainsElementFormat} from "../../../utils/selection";
   9
  10
  11 function setAlignmentForSection(alignment: ElementFormatType): void {
  12     const selection = $getSelection();
  13     const elements = $getBlockElementNodesInSelection(selection);
  14     for (const node of elements) {
  15         node.setFormat(alignment);
  16     }
  17 }
  18
  19 export const alignLeft: EditorButtonDefinition = {
  20     label: 'Align left',
  21     icon: alignLeftIcon,
  22     action(context: EditorUiContext) {
  23         context.editor.update(() => setAlignmentForSection('left'));
  24     },
  25     isActive(selection: BaseSelection|null) {
  26         return $selectionContainsElementFormat(selection, 'left');
  27     }
  28 };
  29
  30 export const alignCenter: EditorButtonDefinition = {
  31     label: 'Align center',
  32     icon: alignCenterIcon,
  33     action(context: EditorUiContext) {
  34         context.editor.update(() => setAlignmentForSection('center'));
  35     },
  36     isActive(selection: BaseSelection|null) {
  37         return $selectionContainsElementFormat(selection, 'center');
  38     }
  39 };
  40
  41 export const alignRight: EditorButtonDefinition = {
  42     label: 'Align right',
  43     icon: alignRightIcon,
  44     action(context: EditorUiContext) {
  45         context.editor.update(() => setAlignmentForSection('right'));
  46     },
  47     isActive(selection: BaseSelection|null) {
  48         return $selectionContainsElementFormat(selection, 'right');
  49     }
  50 };
  51
  52 export const alignJustify: EditorButtonDefinition = {
  53     label: 'Align justify',
  54     icon: alignJustifyIcon,
  55     action(context: EditorUiContext) {
  56         context.editor.update(() => setAlignmentForSection('justify'));
  57     },
  58     isActive(selection: BaseSelection|null) {
  59         return $selectionContainsElementFormat(selection, 'justify');
  60     }
  61 };